====== 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 [[.:layout#common|common layouts section]].

===== Header =====

  * **''#[[.:boxes:top-links]]''** This is a container for the links in the 'top' category. They are written out in a ''<ul>'' element.
  * **''#[[.:boxes:tab-links]]''** This is a container for the links in the 'tabs' category. They are written out in a ''<ul>'' element.
  * **''#[[.:boxes: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 [[.:layout:forms|conventions used to mark up forms here]].

===== Primary =====

==== Navigation ====

  * **''#[[.:boxes: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').
  * **''#[[.:boxes:subpages]]''** Subpages is a list of the sub-pages for any given page. It contains a ''<ul>'' of the links.
  * **''#[[.:boxes: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 (40x40 pixels).

==== Content ====

  * **''#[[.:boxes: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 [[.:layout:body|body layout]] with a few extras (click link for more detail).
  * **''#[[.:boxes:knowledge-base]]''**

==== Shopping ====

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

==== My Account ====

  * **''#[[.:boxes:login]]''**
  * **''#[[.:boxes:forgot]]''**
  * **''#[[.:boxes:register]]''**
  * **''#[[.:boxes:product-list|favourites]]''**
  * **''#[[.:boxes:product-list|order-pad]]''**
  * **''#[[.:boxes:my-details]]''**
  * **''#[[.:boxes:addresses]]''**
  * **''#[[.:boxes:my-orders]]''**
  * **''#[[.:boxes:my-users]]''**
  * **''#[[.:boxes:approve-orders]]''**

===== Secondary =====

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

===== Tertiary =====

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

===== Footer =====

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

Also see the [[.:basics]] pages for information on common site features and constructs.