Photoshop Guidelines

Need some guidelines for designing a website intended for our CMS?

Design for the main content (including borders) to be 950px wide or 750px wide. These 2 formats display well in most common IE browsers on a notebook PC. Use a pixel ruler, DPI is irrelevant for the web.
Ensure background is on it's own layer, or provide the image seperately. It should be a flat colour or a tileable wallpaper or gradient.
If you are making graphical menu buttons, create versions with and without text, for both mouseover/active and unselected.
Supply font names, sizes, etc for any fonts used, and font files if possible
Ensure a horizontal slice of your website can be tiled infinitely in a vertical stack. Eg so if the main content column becomes very long that your website will still look nice. Beware using vertical/angled gradients.
Screen resolution is always unknown, so any background image should be quite wide and high. If you are centering your template over a textured background, it is very difficult to line it up. The edges of the content area should be inseparate layers to the background, and should have some opacity. eg imagine that your content area might move a bit to the left of right.
When slicing your template, ignore the background, slice the left/right borders of the content, the menu buttons, the banner, and a thin horizontal slice.

More From This Section

Getting us to customise your template

Do you require a more customised look and feel, that reflects the professional branding needs of your company?

Importing a new template

tutorial on how to import a new design template on a site by site basis.

Specifying the DOCTYPE

Where can I set the DOCTYPE for my website

Custom template tags [TAGS] overview

Find out what the functionality specific tags will add to your template, eg how to add Zone2 content areas, or split menus.

CSS Menus

Here is some example CMS menu code

CSS Menus over Google Adsense

This seems to fix it if your CSS menus won't hover over google adsense... #menu { position:relative; z-index: 100; }

Photoshop Guidelines

Need some guidelines for designing a website intended for our CMS?

Template Variations [A-H]

Advanced users who have knowledge of HTML have the ability to create up to eight layout variations for the template

Stylesheets and CSS

Learn about Stylesheets and CSS

Showing products promotion status in the product list

Products now have classes added if set with a promotion status e.g featured, on sale. You can target these to add badges e.g. 'Hot', 'Sale' etc via CSS

CMS and Template Classes

Stylesheet classes tips for the pros. Learn more about some of our common CSS classes and how you can use them.

Add cartcount number to a template

Add a number that shows the amount of items in the cart somewhere in the template.

Template Classes

Standard Classes used or Detected by the CMS.

Custom Arrows on Dropdowns

Contentbox Background Mask

You can mask the shape of a background image or background colour.

Changing 404 Page Not Found

404 Errors happen when you delete a page or change a filename. It is best if you redirect these pages to a live page, but if you would like to change how your 404 pages look, follow these steps.