Sidebars and boxes

Sidebars and boxes allow further flexibility to the layout of a site and provide the ability to add bespoke areas to pages. Typically they are most useful on the front page of a site to highlight a particular issue or give latest information, they can however be used anywhere on a website for many different purposes.

Adding a sidebar/box

To add a side bar navigate to Site Resources from the top edit bar (this is reached from the main page of the site). Choose the option for Sidebars, this is the main control area for managing any sidebars/boxes and any being used on the site will appear here.

Enter in the content as you would a normal page making sure you give the sidebar some kind of name for reference, this won't appear on the page but will help you keep track if you add more. The border and background areas can be left blank. Once you submit the page will re-load and your sidebar will be added to the list at the bottom of the page. This now gives you the ID of the box and the ability to delete it. Clicking on the title on the left will allow you to re-edit the content and options.

It is worth noting that the sidebars/boxes can also contain pictures and other %% codes inside them. You can for instance add a featured component or %% topics list inside.

Placing the sidebar on a page

Once you have added in a sidebar (and have the ID number) you can then place it onto a page. To do this you add a %% code to the page giving the instruction for which box you want and any positioning information. This is done by navigating to the page in the normal way and editing as usual. It can be useful to do this in a separate browser tab or browser window, to make the journey easier.

The code follows this formula (without the space after the %%):

%%box[id]-width{LR}

So firstly you need to take the ID of your box from the list and put it between the [] brackets. You can then add the width you would like the box to be (in pixels) after the hyphen, such as -300, which would give the box a width of three hundred pixels. The height is controlled by the content. Then lastly you have the instruction to float the box to the left or the right of the page by placing an l or r after the width. If you would like the box to not float amongst any other content just leave this blank.

Example:

So this would give you a sidebar containing the information entered into sidebar ID 123, with a width of 120 pixels and floated to the right hand side of the page. Once again, the space after the %% signs is just there to stop an actual box appearing, there should be no spaces.

Vertical Positioning

If you would like the sidebar to be at the top of the page you add the code as the first item on the page. If you would like the sidebar to appear halfway down the page, after a picture or heading for example, you add the code just after the picture code or just after the title. The height of the box depends on the amount of content it contains.