About this template (H1 heading)

This template uses feux sidebars. The sidebar is actually a background image that repeats vertically down the page. The included photoshop document has the sidebar images included so all you need to do is change the color and output the images for an entirely new look for the sidebars.

Changing sidebar widths (H2 heading)

To use sidebars of different widths, you first create your sidebar width and content width using the 960 grid classes (you can read more about the 960 grid system at http://960.gs/). This template uses a 12 column grid, so you can have any combination of sidebar/content grids as long as they add up to 12.

So for example, you can apply the grid_3 class to your sidebar div and the grid_9 class to your content div. This would give you a 210 pixel wide sidebar and a 690 pixel wide content area. There is a 30 pixel "gutter" between grid columns, and also a 15 pixel margin on both sides. So this adds up to a total page width of 960 pixels.

For another example, to create a grid_3 left sidebar, a grid_3 right sidebar and a grid_6 content area, you would apply the grid_3 class to both sidebar divs and a grid_6 class to the content div. This would give you sidebars with a width of 210 pixels and a content area width of 410 pixels.

See the template file source code to see how the grid classes are applied for different page layouts.

Using the 960 grid push and pull classes (H3 heading)

Since this is an SEO-optimized template, the sidebars are always lower in the source code than the content. So you also need to apply the "push" and "pull" classes to your layout divs in order to properly position them in relation to the content area.

If you are using a left sidebar layout, you need to apply a "pull_x" class to your sidebar div with the 'x' value being the grid with of your content area. You also need to apply a "push_x" class to your content div with the 'x' value being the grid width of your left sidebar. This results in the content area being "pushed" over the width of your sidebar and the sidebar being "pulled" over the width of your content. Your site displays as intended with a left sidebar, but the source code is optimized for search engines so the content displays first.

If you are using a right sidebar, you do not need to apply the push or pull classes because the layout divs are in the correct order (content then sidebar).

If you are using both left and right sidebars, you need to apply the push and pull classes to the left sidebar and content divs as described above, but you do not need to apply any extra classes to the right sidebar div as long as your source code order is content then left sidebar then right sidebar.

View the source code of the template files to get an idea of how the push, pull and grid classes work. It's very simple once you understand the concept behind the 960 grid system.

Using feux sidebar background images (H4 heading)

The sidebar background image is applied to the container div that wraps both the sidebar and the content areas. To apply a left sidebar image, use the class lsb_grid_x, with the x representing the grid width of your sidebar.

To apply a right sidebar background image, use the class rsb_grid_x, with the x representing the grid with of your right sidebar.

To apply both left and right images, which are actually one single image, use the class bsb_grid_x_y, with the x being your left sidebar grid width and the y being your right sidebar grid width.

The template includes images for grid_2 to grid_4 sidebars for both left, right and both. If you want different image sizes, you can edit the images in the included PSD file. You can also make the left and right sidebars different colors simply by editing the PSD.

Editing the included PSD file (H5 heading)

The template includes the PSD file that was used to create all the images in the template. The PSD is already sliced and optimized for output. You can open the PSD in Photoshop, make your changes and use the 'Save for Web and Devices' command to export your images.

The easiest way to export your images back to Dreamweaver is to set your slice output options to save ONLY the slice name and file extension. Uncheck the option to save your images in a folder named 'images'. When you save your slices, choose 'All user slices' from the drop down menu and export your images directly to the images folder in the template.

This will export and overwrite all images to the template and will include any changes you made to the PSD file. When you go back to Dreamweaver or refresh your site preview in a browser, your new images should be visible (if you're previewing locally).