|
Pieces Parts
for a cyclz index
Here's the story.index flavour used to produce this page:
<tr>
<td bgcolor="$cyclz::index1" width="67%">
<h2 class="$cyclz::ind_head">Friday's Blog</h2>
</td>
<td bgcolor="$cyclz::index2">
<h3>September 19, 2003</h3>
</td>
</tr>
Here's the cycles.index file that makes it all happen:
index1:#f0e7d7,#f7f2ea index2:#f7f2ea,#f0e7d7 ind_head:blue,purpl,green,yellow,red
Other Example
for a cyclz index
To see cyclz "in action," zip over to this site's blog index; note the alternating color "rules" that separate entries.
Here's the story.index flavour used to produce the page:
<tr>
<td class="hrule$cyclz::border_color" colspan="2">
<hr style="display:none;"></td>
</tr>
<tr valign="bottom">
<td><h4 class="index">
$dato</h4>
</td>
<td align="right" class="crumbs">
$crumz::crumz
</td>
</tr>
<tr>
<td colspan="2">
<h3 class="index">
<a href="$url$path/$fn.loner">$title</a>
</h3>
</td>
</tr>
Here's the relevent css that makes it all happen:
td.hrule {border-bottom:2px solid #33f;}
td.hruleblue {border-bottom:1px solid #6af;}
td.hrulered {border-bottom:1px solid #f99;}
td.hrulegreen {border-bottom:1px solid #6f6;}
td.hruleyellow {border-bottom:1px solid #ff6;}
It's worth noting how cyclz is combined with the html on this page:
<td class="hrule$cyclz::border_color" colspan="2">
- If cyclz is present, and css is active, the style class for this cell cycles through "hruleblue", "hrulered", etc.
- If cyclz is not present, and css is active, the style class is "hrule" for all iterations of the cell
- Finally, if css isn't active (or the browser is old, like NN4), the cell contains a plain old HR