• Share a link to this article:

Physical Layout Modifications

Like conventional website themes and templates, ThemeFlood RapidWeaver themes specify the framework (physical structure) of a webpage using HTML markup. A large number of nested divisional containers (and other HTML5 elements) are used to accomplish this. HTML markup is the underlying scaffolding that controls the order and placement of page elements; to which content and further styling can then be applied.

Having knowledge of HTML markup is certainly beneficial for anybody wishing to embark on modifying the physical structure of any theme. Understanding the structure of code, how it's written and what it does will certainly be of help. However HTML is arguably the easiest and most widely used markup language in existence, so there are a number of potential quick modifications anybody can make.

The document structure

Nearly all HTML markup for a theme lives inside the theme index.html file. This file is with the theme contents, and you can read more about opening the theme contents in the First Steps article.

The head section of the page is where various scripts and file calls live. Basically elements which are not to be seen by human website visitors; but files which are still of use to the web browser and search engines etc. As an example, the head section is where calls to the CSS files and web fonts are made, and also the place where search engine analytics tracking code would go.

The body section is where all the visible content and webpage structure resides. Commonly this is the area you are probably most likely going to want to change.

You'll notice that in a ThemeFlood RapidWeaver theme, you don't see much in the way of actual content in the index.html file. Instead you will see macro's like these:

  • %site_title%
  • %site_slogan%
  • %content%
  • %sidebar_title%
  • %sidebar%
  • %footer%

When RapidWeaver previews or exports a page, it replaces these macro's with your actual content. It means that the same theme can be shared over multiple pages of a website; and only the content is changed on a page-by-page basis.

The screenshot below shows what a theme index.html file looks like, when opened in Espresso.

Theme index.html file

You can see the head and body sections, together with a selection of RapidWeaver macro's and various HTML markup to create the template. Other than the RapidWeaver macro's, there's absolutely nothing different between this HTML markup and the markup you might expect to find in any other published webpage.

Moving elements

It is feasible to move some page elements around in the index.html file. A prime example would be to change the position of some ExtraContent containers, to group some more together:

<div id="extraContainer5"></div>
<div id="extraContainer6"></div>
<div id="extraContainer10"></div>
<div id="extraContainer11"></div>
<div id="extraContainer12"></div>

The same technique could be used for adding some more ExtraContent containers to a theme.

Removing surplus page elements

ThemeFlood themes typically include numerous elements like ExtraContent and logo placeholders, which grant you more control over the style and layout of your website. Typically each one of these theme options adds another line of code to the index.html file in a theme.

Having surplus code in a project is not really a bad thing (realistically it's only going to add a few bytes to the total size of a page and no noticeable difference to page speed). However if you are working hard to attain the best possible search engine optimisations or you want to tidy up your theme to remove surplus source code, then this is something you can optionally do.

As always, it is wise to work from a duplicated / renamed copy of the RapidWeaver theme (see the theme management article for details). In many instances the actual structure of the page is defined via the index.html file, so realistically this is the only file that would need editing to remove surplus elements.

Start by opening the theme contents (see the First Steps article if you're not sure how to do this) and then open the index.html in your preferred code editor (like TextWranger, Coda or Espresso). Scroll down this file and identify the lines of code you want to remove. Simply delete (or comment-out) the surplus elements and save your changes to see the result in RapidWeaver. Typically, here are some examples of elements which are safe to remove if they are surplus to your requirements:

A logo placeholder, containing the %logo% RapidWeaver macro:

<div id="logoAbsoluteLeft"><a href="%base_url%">%logo%</a></div>

An ExtraContent container:

<div id="extraContainer7"></div>

Page last updated stamp:

<div id="lastUpdated">Page last updated: 11/09/2016</div>

A site slogan:

<h2 id="siteSlogan">%site_slogan%</h2>

A breadcrumb container

<div id="breadcrumb">%breadcrumb%</div>

As a general rule of thumb, avoid removal of navigation elements (except breadcrumbs). Some of these navigation elements are populated with links dynamically using Javascript code, so removing the referenced dividers from the index.html file may start throwing errors (because the Javascript code cannot find the container any more). Some of these navigation elements are required by mobile devices as well. So only remove items you know are not required, preferably those from the safe list above. Save changes and close the index.html file when done.