KamPages Designer & CMS


Designer modules

Acccess to this program is via a login requiring both a username and a password. The username and password can be different from those used to gain access to the designer program.

For design purposes, the webpage is divided into 4 horizontal areas. These are:
-Title area
-Top links area
-Content area
-Bottom links area
Each of these areas is clearly marked on the Designer page.


There is a design module for each of the above areas and modules for:
-custom colours
-surround colour

Each module is a pop-up and so is visible only when wanted. Each one can be moved by dragging it with the mouse.

Common features

For each area, you can select the colour of the font, the background and the colour of the main screen background.
There are around 50 pre-set colours to choose from. If none is what you want, you have the option of creating up to 6 custom colours. There is a link to the W3C website to help you make your choice.

Font Family.
You can choose the font for the title, the title of each column header and for the content of column. The choice is, unfortunately, rather limited because the font has to be present on the user's computer; despite there being hundreds - if not thousands - of fonts, only a few can be relied on to be present on every computer. We are considering offering web fonts - but that's for the future and we are confined to installed fonts for now. The colour and size of the font are also selectable from a pre-set range.

The design function is separate from the CMS function. You can make changes to the design at any time without affecting the content (there is one exception - see below). For example. suppose at the beginning you choose to have 2 additional pages and then, as you add the content, you realise you actually need another page, or perhaps you want to change the colour scheme. Simply go back to the Designer, make the changes and SAVE them. Then when you return to the CMS program, you will find that you have another page, or a new colour scheme and that all the content is untouched.
Important You should be aware that if you change the name of a page you WILL lose the content. This is because the old page will be deleted and the new page, with the default content, added.
See the Changing page names page (navigation bar above) for how to change a page name without losing content.

Title area

This is where you declare the title of your website and choose a font (size and colour). You have the option of adding a logo image to the left-hand side of the area.
The logo area measures 280pixels by 120 pixels. For best results, your image should have these dimensions. The image can be in any of the common image formats supported by Windows. The title area background colour will show through a PNG file with transparent background. The file selector looks for files with 'logo' in its title and displays a small thumbnail to aid your selection. The title may be aligned to the left, right or centre.

Top links area

This is optional - you needn't have any links in this part of the page if you don't want them.
You can have up to 5 pages in addition to the 'HOME' page. Note this page is always the left-most name in this area. The links in this area can only be used to point to other pages on your website. Use the footer links area for external links.
To show when the mouse is 'hovering' over a link, the link and its immediate background will swap colours. Note that this effect is not visible in the Design phase because we cannot show it using Javascript - but it will be there in the finished page.
The bottom corners of this section are rounded; this is achieved using CSS, and is supported by all current popular browsers except Internet Explorer version 8 (in which the corners will be square).

Content area

The content area is intended to have 2 columns with a gap between them. The width of the columns and the gap can be set independently, although the total width will be automatically adjusted to 960 pixels. The gap can be zero, and so can either of the columns. If you want a single column, we recommend that you make column 2 width zero; the gap will automatically be set to zero.
Each column can be given a border of up to 10 pixels in width. The colour of the border is always the same as the background colour of the header section.
The top corners of each header are rounded; this is achieved using CSS, and is supported by all current popular browsers except Internet Explorer version 8 (in which the corners will be square).

Bottom links area

This area is optional. You can have up to 5 links here. The links can be either internal, that is - to pages within your website, or external - to pages on other websites.
The four corners of this section can be rounded by an amount you choose. Note that since this is achieved using CSS, and is supported by all current popular browsers except Internet Explorer version 8 (in which the corners will be square).
The colour change on mouse hover is described in the top links description above.

Custom Colours

You can add up to 6 colours to the list. You just enter the hexadecimal value into the box in the popup. They will appear in the colours drop-down list once they have been saved.
There is a link to the W3C colours webpage to help you choose the colour and get its hexadecimal value.


The 'surround' is the background area around the main page. The amount that is visible on each side of the main page depends on the viewer's screen size and the width of the browser window. It is also visible in the gaps between, above and below the columns.

design: KamPages.eu