Links


There are a few links categories that are different to the ones intended for high-level navigation. These are the bestsellers, secondary-links and tertiary-links. They all follow the same pattern but differ in location in the main layout.

These link sections are contained within a BOX and follow a similar /sub-box/ pattern. For example:
 

<ul>
<li class="odd a one merch-highlight-bestseller-link">
<div class="ltl"><div class="ltr"></div></div>
<div class="link-box">
<a class="link" href="..." title="Merch Highlight">
<span class="image"><img alt="..." src="..." /></span>
<span class="description">Merch Highlight</span>
</a>
</div>
<div class="lbl"><div class="lbr"></div></div>
</li>
<li class="even b two keyrings-bestseller-link">
<div class="ltl"><div class="ltr"></div></div>
<div class="link-box">
<a class="link" href="..." title="Keyrings">
<span class="image"><img alt="..." src="..." /></span>
<span class="description">Keyrings</span>
</a>
</div>
<div class="lbl"><div class="lbr"></div></div>
</li>
<li class="odd c three product-highlight-bestseller-link">
<div class="ltl"><div class="ltr"></div></div>
<div class="link-box">
<a class="link" href="..." title="Product Highlight">
<span class="image"><img alt="..." src="..." /></span>
<span class="description">Product Highlight</span>
</a>
</div>
<div class="lbl"><div class="lbr"></div></div>
</li>
</ul>



A few things should be familiar by now but let's look at it from the top.
 

  • <li class="odd a one merch-highlight-bestseller-link"> \ Each <li> has a set of class names to provide the styling hooks you may need.
    • .odd / .even These classes alternate between list items so you can create striping or 2 column lists for example.
    • .a / .b / .c These classes alternate every 3 list items
    • .one / .two / .three / .four These class alternate every 4 list items
    • .xxx-bestseller-link / .xxx-side-link This class name reflects the link text (lowercase with white space turned into hyphens and non-alphabet characters removed) with the link type appended. 'Side Links' are the links in the sidebar categories under #secondary and #tertiary.
  • <div class="ltl"><div class="ltr"></div></div> \ Just like the .box layout these <div>s are to help you create border effects on individual links. The 'l' before 'tl' stands for 'link' and the 'tl' stands for 'top left' and so on. See BOX layout for information on this convention.
  • <div class="link-box"> \ A wrapper that contains the <a> itself. This could be useful because of the web browsers that struggle with complex CSS applied to <a> anchor tags.
  • <a class="link"> \ The link itself.
  • <span class="image">...</span> \ A <span> to contain the image can come in very handy for fine-grained layout control.
  • <span class="description">...</span> \ A <span> to contain the description can come in very handy for fine-grained layout control. eg. hiding the description altogether.