alternate row colours

Discuss news styles, css code, and other Coranto customizations in here...the possibilities are endless, so have at it!

Moderator: Spunkmeyer

alternate row colours

Postby Spalace » Mon Mar 19, 2007 3:44 pm

I have a page on my site where it displays the current top scorers for the club but I'd like to have every other row to be a different colour.

Code: Select all
<table width="250" border="0" cellspacing="2" cellpadding="0"><tr>
<td bgcolor="#666666">Heading</td>
<td bgcolor="#666666"><div align="center">Heading</div></td>
<td bgcolor="#666666"><div align="center">Heading</div></td></tr>
<tr><td bgcolor="#eae9e4">name</td>
<td bgcolor="#eae9e4"><div align="center">10</div></td>
<td bgcolor="#eae9e4"><div align="center">1</div></td></tr>
<tr><td bgcolor="white">name</td>
<td bgcolor="white"><div align="center">8</div></td>
<td bgcolor="white"><div align="center">2</div></td></tr>
</table>


This is the page i'm working on: http://www.superpalace.co.uk/squad_list.asp

I know someone posted about this on the old site but couldn't find it here.
Spalace
 
Posts: 36
Joined: Tue Feb 20, 2007 8:52 am
Location: London

Postby Spunkmeyer » Mon Mar 19, 2007 6:30 pm

Are you generating these tables by hand? Or is it done dynamically?

If it's dynamically generated, you can just add the css code to your output

If it isnt dynamically generated and you're taking the time to enter these numbers by hand, you should be using CSS styles as opposed to bg="#c0c0c0" etc. So you could use something like the following:

Code: Select all
td.bg1 { background-color:#666666;}
td.bg2 {background-color:#eae9e4;}

then apply it to the html using:

<table>
<tr>
<td class="bg1"></td>
<td class="bg2"></td>
</tr>
</table>


Hope this helps.
"God Bless the Portable Grassy Knoll"
Spunkmeyer
 
Posts: 69
Joined: Wed Jan 10, 2007 4:36 pm
Location: Whistler, BC, Canada

Postby SrNupsen » Mon Mar 19, 2007 6:56 pm

A quick search in the old forums gives this:



Step #1: Insert this code in your news style.

Code: Select all
<PerlCode>
@OurColours = qw(#ffffff #e8e8e8);
$SwitchColour = $OurColours[($NextColour++ % @OurColours)];
</PerlCode>


Step #2: Insert the Field <Field: SwitchColour> in your news style where you want the value to be indicated.

Note: Value1 and Value2 to be changed to values you want alternated. Add more values after those two if you need to.

Example uses:

Alternating between 2 background/forground/font colours: (Value1=#FF0000, Value2=#0000FF)

Code: Select all
<table>
<tr>
<td bgcolor="<Field: SwitchColour>">
<h1><Field: Subject></h1>
<p><Field: Text></p>
</td>
</tr>
</table>


Alternating news item positions between left and right via layers: (Value1=left, Value2=right)

Code: Select all
<div align="<Field: SwitchColour>">
<h1><Field: Subject></h1>
<p><Field: Text></p>
</div>
-----------------------------------------------------------------------------------------------------
Coranto is free software. I am available for custom work or troubleshooting.

http://www.sundaune.no - transkripsjon, webdesign, nettsider, tekstbyrå
http://www.vagbladet.no - satire, politikk, kultur, sport, nettavis
-----------------------------------------------------------------------------------------------------
SrNupsen
 
Posts: 2229
Joined: Tue Jan 09, 2007 6:46 pm
Location: Nesodden, outside Oslo, Norway

Postby Spalace » Tue Mar 20, 2007 9:02 am

Thanks for both the suggestions.

I've used the one SrNupsen provided and it's worked a treat.

Thanks alot!
Spalace
 
Posts: 36
Joined: Tue Feb 20, 2007 8:52 am
Location: London


Return to Customization

Who is online

Users browsing this forum: No registered users and 2 guests

cron