Alternating row colors

BoInG · 02-14-2006

It is possible to add alternating row colors to links listing page?

**Boby** · 02-14-2006

Quote:

Originally Posted by BoInG

It is possible to add alternating row colors to links listing page?

Sure!

Go to your "link.tpl" file, and find:

Code:

<table><tr>
{* show page rank *}
{if $smarty.const.SHOW_PAGERANK}
...

Edit the table tag like this one:

Code:

<table class="{cycle values="odd,even"}"><tr>
{* show page rank *}
{if $smarty.const.SHOW_PAGERANK}
...

And add to your CSS file (default is main.css)

Code:

.even {
   background:#fff;
}
.odd {
   background:#fcfaf6;
}

Or whatever you like.

Boby

BoInG · 02-15-2006

Tnq for your fast reply

It's working 8)

Mai pe romaneste - ms pentru ajutor

lostndazed · 04-11-2007

Okay, I'm at wits end here. This should be so-o-o simple.
The background color is not showing up in alternate the alternate tables.

I've added this to my main.css file in templates/Default/style

Quote:

.even2 {
background:#fff;
}

.odd2 {
background:#F8F8FC;
}

And to isolate the problem, I created a testCSS.htm page. Here's the code:

Quote:

<head>
<title>testing CSS</title>
<link rel="stylesheet" type="text/css" href="/templates/Default/style/main.css" />
</head>

<body bgcolor="#ffffff">

<h1>testing CSS</h1>

<table class="even2"><tr><td>Table 1 at even color</p></td></tr></table>

<table class="odd2"><tr><td>Table 2 at odd color</p></td></tr></table>

</body>

Couldn't get that to work, but I could see that the text had been formatted, probably arial size 10 or so. So to test further, I modified this code in the css file:

Quote:

.odd2 {
font-size: 12pt;
color: #CC0000;
background:#F8F8FC;
}

The text is a large red font, but no background color.
So I looked up background color in CSS.

Well, for the span property, it is written a bit differently (can't find an example for table background colors in CSS in my book).

So I tried this:

Quote:

.odd2 {
background-color:#F8F8FC;
}

The text became black and shrunk back down. But the background still looks white.

My CSS file is the default CSS file. This is driving me totally nuts. Since everything else works, why doesn't my alternating background color show up? So in desperation, I tried making the background color black.

Quote:

.odd2 {
background-color:#000000;
}

Guess what? That works. So here's my lesson to others.

Choose a different color for the background than #F8F8FC !! (It is too white to show a difference against white backgrounds.)

**goes off to take some aspirin**

searchangle · 05-21-2007

How would you do this if you converted the table into a div? My current code shows:

<div style="padding:5px; margin:5px; border-top-style: dotted; height:200px; border-top-color: #CCCCCC; border-top-width: 1px; cycle values

dd,even;">

You can see that I tried adding it like the above but dont know the css for this.......

Mr_Bill · 08-27-2007

Thank you for this worked out great

pnoden · 08-27-2007

Quote:

Originally Posted by searchangle

How would you do this if you converted the table into a div? My current code shows:

<div style="padding:5px; margin:5px; border-top-style: dotted; height:200px; border-top-color: #CCCCCC; border-top-width: 1px; cycle values

dd,even;">

You can see that I tried adding it like the above but dont know the css for this.......

You would need to add the class="{cycle values="odd,even"}" to the div like this:

Code:

<div class="{cycle values="odd,even"}" style="padding:5px; margin:5px; border-top-style: dotted; height:200px; border-top-color: #CCCCCC; border-top-width: 1px;">

Then add the classes .odd and .even to your CSS file.

Willy · 08-28-2007

And what if the <div> is allready styled through the main.css with a class, like <div class="something">?

**Boby** · 08-29-2007

You can assign more classes to an HTML element:

Code:

<div class="class1 class2 class3 class4">

Code:

<div class="class1 class2 class3 {cycle values="odd,even"}">

This DIV would now have the classes "class1", "class2", "class3" and "odd" OR "even" assigned.

You can now style the element in your CSS file by using one of the assigned classes.
If you have a custom styling set for let's say "class1" and now your HTML element has also "odd" or "even" assigned, you can override the settings with:

Code:

body .even {
   background:#fff;
}
body .odd {
   background:#fcfaf6;
}

You can also use "!important" but probably IE will ignore it

(bad IE)

Code:

.myclass {
   background:#ff0000 !important;
}

Willy · 08-29-2007

Thanks Boby,

What I did was remove the original class from the div and give it the class="{cycle values="odd,even"}. In my .css I added the original properties to .even and .odd. Apparently that works nicely, if I discover any issues later on I´ll restyle using several classes in the same div. I didn´t know that I can apply more than one class to one element.

**Boby** · 08-29-2007

Quote:

Originally Posted by Willy

Thanks Boby,

What I did was remove the original class from the div and give it the class="{cycle values="odd,even"}. In my .css I added the original properties to .even and .odd. Apparently that works nicely, if I discover any issues later on I´ll restyle using several classes in the same div. I didn´t know that I can apply more than one class to one element.

You can here combine the rules:

Code:

.odd, .even {
   /* add here common rules that both classes share (margin, padding, text-align, etc)*/
}
.odd {
   /* rules that apply only to class "odd" */
}
.even {
   /* rules that apply only to class "even" */
}

Willy · 08-29-2007

I see,

That works nicely, just applied this.

Thanks again and greetings.

dynn · 08-31-2007

do you have demo for this?

02-14-2006	#1
BoInG Join Date: Feb 2006 Posts: 6	Alternating row colors It is possible to add alternating row colors to links listing page?

05-21-2007	#5
searchangle Join Date: May 2007 Posts: 63	css? How would you do this if you converted the table into a div? My current code shows: <div style="padding:5px; margin:5px; border-top-style: dotted; height:200px; border-top-color: #CCCCCC; border-top-width: 1px; cycle valuesdd,even;"> You can see that I tried adding it like the above but dont know the css for this.......

08-27-2007	#6
Mr_Bill Join Date: May 2007 Posts: 157	Thank you for this worked out great __________________ MySpace Proxy oOoOo YouTube Proxy Last edited by Mr_Bill; 08-27-2007 at 08:45 PM.

08-29-2007	#9
Boby Supporter Moderator Join Date: Dec 2005 Location: Cluj-Napoca/Sighisoara (Romania) Posts: 4,468	You can assign more classes to an HTML element: Code: <div class="class1 class2 class3 class4"> Code: <div class="class1 class2 class3 {cycle values="odd,even"}"> This DIV would now have the classes "class1", "class2", "class3" and "odd" OR "even" assigned. You can now style the element in your CSS file by using one of the assigned classes. If you have a custom styling set for let's say "class1" and now your HTML element has also "odd" or "even" assigned, you can override the settings with: Code: body .even { background:#fff; } body .odd { background:#fcfaf6; } You can also use "!important" but probably IE will ignore it (bad IE) Code: .myclass { background:#ff0000 !important; } __________________ wanna say thank you? My phpLD Mods I am not a phpLD staff member, so please do not ask me to grant permissions, sales stuff, for access to the private supporter forums or phpLD 3.0+ download area. Before you report your problems, make sure it happens with the default package and not your highly modified code. Don't forget to use the search feature and do not bump threads to soon (allow at least 24h).

08-31-2007	#13
dynn Supporter Join Date: Dec 2005 Location: www.dynn.org Posts: 180	do you have demo for this? __________________ Submit URL Here - Add Site Link

02-15-2006	#3
BoInG Join Date: Feb 2006 Posts: 6	Tnq for your fast reply It's working 8) Mai pe romaneste - ms pentru ajutor

08-28-2007	#8
Willy Join Date: Aug 2007 Posts: 92	And what if the <div> is allready styled through the main.css with a class, like <div class="something">?

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode