KamPages Designer & CMS


A few examples of boxes

This column is too narrow to properly show the sidebox features offered by this CMS. Instead, the features are described in the other column, after the box display.

To remove text in one of the CMS columns:

  • right-click inside the column
  • left-click on select all
  • left-click on delete.

Examples of side boxes:

left box, width:50%, left text; border; corners:0; padding:5px; no shadow; no offset.
left box, width:50%; left text; border; corners:0; padding:5px; no shadow; with HoffSet.
right box, width 70%, right text; corners:16px, padding:5px; no shadow, no Hoffset, with Voffset and border.

centred box, width 65%, centred text; corners: 10px; shadow.
left box within a box; width:48%; corner radius:5px; no offset.
Right box within a box; width:48%; corner radius:5px; with Voffset;

A side-box can be positioned to the left, right or centre of the column. You are able to put text and/or pictures in any combination inside the box; you can also put boxes inside a box. The picture can be to the left or right inside the box.

  • Change the colour of the background - if you want to, otherwise leave it alone. The default is none (= the background of the column as set at the Designer stage). Use a 6-figure hexadecimal number; visit the W3C website for a list of colours. Note that making an entry into the colour box will deselect the text in the contents column. You will need to re-select the text before continuing. Sorry - this is a characteristic of HTML text boxes.
  • Select the item(s) you want to be inside a box and then choose the appropriate left/right/centre option from the panel.
  • Choose a width for the box from the drop-down box. The height of the box will automatically fit the content.
  • Choose the amount of rounding you want the corners of the box to have. The default is 0 (= square corners). Note that Internet Explorer 8 and earlier do not support rounded corners.
  • Tick the checkbox if you want the box to have a drop-shadow. Note - Internet Explorer 8 and earlier do not support drop-shadow.
  • You can elect to have no border round your side-box. Just remove the tick in the border? checkbox.
  • Padding is optional. Text inside a box benefits from padding (keeping the text away from the sides of the box). Images are often better without the padding. By default, padding is 'off'.
  • The box can be moved slightly to the right (for a 'left' box) or the left (for a 'right' box); this is so that the box edge will line up with text. This Hoffset is optional. Also optional is a vertical (Voffset); its purpose is to provide better separation between the top and bottom of the box and the surrounding text.
  • Note that text cannot be made to flow round a centred box - this is a property of HTML boxes.

Note that the box parameters appear in the markup. You are able to modify them directly in the markup - see the notes in the CMS page.

design: KamPages.eu