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.
