Boxes
- Header
- Primary
- Secondary
- Tertiary
- Footer

Boxes

This page outlines each of the BOXES that contain the site contents. The design of the markup here is aimed at making styling easy, if a little long-winded, by allowing for very specific selection of the elements in any part of the site.

The BOXES are organised by the LAYOUT section they appear in and adhere to the source order of the actual HTML. You can assume they follow the .box <div> structure if an id is specified.

Also of interest is the page outlining the lower level CSS Hooks and the common layouts section.

Header

#top-links This is a container for the links in the 'top' category. They are written out in a <ul> element.
#tab-links This is a container for the links in the 'tabs' category. They are written out in a <ul> element.
#top-search The stripped down search form often found on e-commerce sites. It will typically contain two labels, one for the category drop-down and another for the keywords text field. It also contains a link to the search page. Find out more about the conventions used to mark up forms here.

Primary

Navigation

#breadcrumbs The breadcrumbs appear before any other content and will be present on every page and category (provided the pages have been created via the admin 'interface').
#subpages Subpages is a list of the sub-pages for any given page. It contains a <ul> of the links.
#subcats Subcats is a list of the sub-categories for any given category. It contains a <ul> of the links, and the links contain a small image (40×40 pixels).

Content

#news The main news section visible on news.html. For a single news article view there is no surrounding box but it follows the rules of the body layout with a few extras (click link for more detail).
#knowledge-base

Shopping

#product-list All product lists have a class name .product-list on the outer .box.
#product The product detail view container.
#search The advanced search form shown on the search results page.
#search-results - a product list
#basket The shopping basket
#checkout the checkout form steps - checkout, confirm, payment, callback
#enquiry-basket The enquiry basket
#enquiry-form - a datamate form variant
#bestsellers The bestsellers link category. See information on the links sub-structure for examples.

My Account

#login
#forgot
#register
#favourites
#order-pad
#my-details
#addresses
#my-orders
#my-users
#approve-orders

Secondary

#login
#mini-basket A mini shopping basket to indicate the current total and provide a link to the checkout screen.
#mini-enquiry-basket A mini enquiry basket to indicate the current total and provide a link to the enquiry screen.
#logos A box containing the credit card logos displayed on the basket and checkout pages.
#latest-news The latest news feed. You can add some javascript to turn this into a news ticker.
#secondary-links A box containing links (follows the links sub-layout)

Tertiary

#category-nav The list of categories typically in a sidebar or post-content block.
#page-nav The list of pages typically in a sidebar or post-content block.
#tertiary-links A box containing links (follows the links sub-layout)

Footer

#bottom-links A links list for the site footer.
.back-to-top This item is the back-to-top of page navigation link
#meta A container for the copyright and exchange rate service link.

Also see the Basic Constructs and Elements pages for information on common site features and constructs.