03/03: CSS Zebra Effect in Nucleus
Last month I wanted to make a zebra effect for the headlines list on my nucleus site bmxaction.net. I didn't find a plugin or something for it so I wrote a little script for it. It's actually really easy to get this effect.
First I made a little zebra.php file with the following code:
To add the this in the iteration of my items I went to the my headline template and added this in a phpinclude tag like so:
The last step is to add some css to make a difference in background:
That's it! Now you have a cool zebra effect.
First I made a little zebra.php file with the following code:
To add the this in the iteration of my items I went to the my headline template and added this in a phpinclude tag like so:
<li<%phpinclude(zebra.php)%>>
<div class="date"><%date%></div>
<h2><a href="<%itemlink%>" title="Read entry: <%title(attribute)%>"><%syndicate_title(50)%></a></h2>
</li>
<div class="date"><%date%></div>
<h2><a href="<%itemlink%>" title="Read entry: <%title(attribute)%>"><%syndicate_title(50)%></a></h2>
</li>
The last step is to add some css to make a difference in background:
.zebra
{
background:#CCC;
}
{
background:#CCC;
}
That's it! Now you have a cool zebra effect.


I am Wesley Luyten, on the net I'm also known as wessite. I am born and raised in Belgium, but I also have Canadian blood running through my body. I'm currently learning for my degree in engineer ICT, and I'm pretty much web addicted. I use a macbook pro to handle my computer business.
franky wrote: