Changing the layout and appearance of your website Sidebar

This article helps you understand how to change the layout and appearance of your Worpdress sidebar.

Basic concepts

If you haven’t done so already, you should familiarise yourself with how your OM4 site is laid out. The diagram below shows the basic layout of all OM4 sites – even though it looks different to yours, if you look carefully you will see the same elements in use on our site. There is a link to this diagram from your Site Design page if you ever need to refresh your memory.

Review it and pay particular attention to the Sidebar and the Page elements.

How many sidebars and where do they go?

You can choose to have 1 or 2 sidebars, and you can place them on the left or right of the page.

To change the sidebar settings, go to your Dashboard and choose Design, Site Design.

In the very first section of the Site Design page, you can make choices about how your page is laid out.

Familiarise yourself with how your site is laid out using this diagram.

Change your sidebar layout using the following options:

1. No. Of Sidebars – Choose whether to use 1 or 2 sidebars.
2. Sidebar Location – place the sidebar (or sidebars) to the Left or Right of your content.
3. Sidebar Width – most commonly 180px. The width will apply to both sidebars if you have two.
4. Page Width – set the overall width of the page (Content plus Sidebars).

Choosing Left or Right sidebars

You can choose to place your sidebar (or sidebars) to the left or right of your page. If you have two sidebars, it applies to both.

Usability testing shows that the top left of your page is the prime ‘real estate’ for your copy, so putting your sidebar on the right is best if you want your content to get the most attention.

Using two sidebars

A Page Width of 1024px is recommended if you want to use 2 sidebars. Using 900px is probably the minimum (allows for 500 px of Content, plus 2 x 180px sidebars plus margins/padding. If your header artwork is designed for an 800px layout, you may need to update your header artwork.

When you choose 2 sidebars for the first time, your site will not format correctly until you place at least 1 Sidebar Widget into to Sidebar.

Setting sidebar appearance options

In addition to sidebar layout options, you have options that determine how your sidebar content appears.

To set sidebar appearance options:

• Go to Dashboard, Presentation, Site Design
• Scroll down to the Sidebar section, about two thirds of the way down the page

The easiest way to find out what each option does is to experiment a bit. But here are some notes that may help.

Sidebar Font Size	Makes the text in your sidebar larger or smaller. A Font Size of 1.2 em is a good starting point. Changing the font size you use on your main page content will affect sidebar font size, so you will need to review your sidebar font size if you change that. Your font size is set using the em measure to provide the maximum accessibility for users who choose to resize their browser font size.
Sidebar Line Height	Increase if you want more space between lines in the sidebar.
Sidebar Padding	Lets you increase or decrease the amount of padding on either side or your sidebar. Your text will wrap automatically within the sidebar.
Sidebar Side Border	solid 1px black – will put a black line down the side of your sidebar to separate it from your page content. dashed 2px #ccc – will put a dashed grey border down the side (you can use hex colours with a # in front of the number). none – will remove any border from the sidebar. The border option lets you enter any valid CSS border value. So you can try different styles (solid or dashed are two examples show above, but also you can try dotted, double, groove, ridge, inset or outset), different widths (1px and 2px are shown above, but you can use any size or thin medium thick) or colours (you can examples of black – a named colour – and #ccc – a hex colour above). If you want to learn more about CSS border settings try reading these resources: how to set borders or how to use named colors or list of hex colours.
Sidebar Title Colour	Controls the colour of the sidebar headings. Use named colors or use hex colours
Sidebar Title Background Colour	Lets you put a shaded background behind the sidebar headings. This can be a good way to separate the different sections in your sidebar (by default they will have a light underline for each heading). Use named colors or use hex colours. #CCC is a light grey, and #FFF is white.
Sidebar Bullet Style and Sub Bullet Style	Lets you choose how bulleted items appear in your sidebar. Choose from square, disc (solid circle) or circle.

So there are a lot of options to help you change you way your sidebar looks. Experiment to find the right combination for your site.