Customizing the CMS

A page design that is simple to customize

The basic HTML page structure consists of a wrapper box containing four other boxes: header, content, navigation, and footer. The boxes are laid out as divs in a stylesheet which also controls the appearance of other elements such as headings, paragraphs, lists, links, and the form on the contact page.

Optionally, there are two extra boxes, extra and search, which are positioned (in the page code) below the navigation box. Extra contains a random image and snippet (of which there can be any quantity).

Six background images are included in the default design:
bg-body.jpg - the light orangy-grey page background
bg-wrap.jpg - the main white background and vertical dividing lines
bg-header.jpg - the header at the top of the page
bg-footer.jpg - the footer at the bottom of the page
bg-navbutton-off.jpg - the arrowed background for menu links
bg-navbutton-on.jpg - ditto for menu current page and link rollovers

Using different background images is the simplest and most noticeable way to customize the look of the pages.

Customizing pages with the stylesheet

In the default design, beneath the header, the content box is 'floated' right and the navigation box is 'floated' left, hence the menu appears left of the content column.

Swapping them over in the stylesheet, so that the menu appears on the right, is a simple matter of altering "right" to "left" for the content div and vice versa for the navigation div (see below). Of course the menu button arrows would then be pointing in the wrong direction, so the background images would need to be changed or removed altogether.

Stylesheet extract for left-side menu:

#content {
  float: right;
  display: inline;
  padding: 20px;
  width: 480px;
}
#navigation {
  float: left;
  display: inline;
  width: 215px;
  font-size: 1.2em;
}

Changes to stylesheet for right-side menu:

#content {
  float: left;
  display: inline;
  padding: 20px;
  width: 480px;
}
#navigation {
  float: right;
  display: inline;
  width: 215px;
  font-size: 1.2em;
}

So, with a few images and a very minor change to the stylesheet, the pages can be given a completely different look.

To keep things as simple as possible, the header contains no content - the box exists only to display a (background) image - and the footer is, well, just a footer. If required, either can be resized, or hidden altogether. For example, to hide the header the stylesheet is altered thus:

#header {
  display: none;
}

Writing custom content into a page

Page content is added via a form textarea in "Write to Page" admin. By default, line breaks in the writing create the required HTML paragraphs. Additional boxes (divs) can be added too, containing content styled in a different way. For example if a box is required with a grey background and red border, the following would be added to the stylesheet:

.newdiv {
  background: gray;
  border: 3px solid red;
}

Bucket Provided nothing is wider than the content column, additional content styling - including the placement of images - can be achieved as desired. The default treatment of images placed within a paragraph of text is float:left; with a light grey border 2 pixels out from the image.

The premise is always to keep things as simple as possible.

Read more about basic HTML in this HTML guide »