[Help] Alternating Row Color in Custom Theme

bugsmi0 · August 2006

I had to update my 1.0.1 to the very latest release now I see it, apparently it wasn't added to the first 1.0.1 release

u2wedge · January 2007

can someone post the instructions on how to do this to the comments.php page? I've tried finding text etc. but cannot mirror the same results as discussion.php. Thanks in advance.

bjrn · January 2007

Vanilla now has an Alternate class for this, so all you have to do is edit the CSS (which is located in vanilladirectory/themes/theme/styles/stylename/). For instance:

#Comments li {
  background-color:red;
}

#Comments li.Alternate {
  background-color:blue;
}

u2wedge · January 2007

hey, I tried that and it worked, but now on the rows with the alternating color, you can see the original background color around the user's screen name? any ideas on how to prevent that?

bjrn · January 2007

You could do

#Comments li, #Comments li * {
  background-color:red;
}

#Comments li.Alternate, #Comments li.Alternate * {
  background-color:blue;
}

I think IE understands *, but I'm not sure. If that still doesn't work, perhaps you need to add !important like so:background-color:blue !important;

u2wedge · January 2007

well, that got me 95% there. the alternate colors are working and the issue with the background color leaking around the screen name is fixed... now when I post and it is time for the 'alternate' color to be chosen, the post is posted, the yellowfade kicks in, and there is a row of the alternate color behind any line that has text and the remaining post is white. then when I post again, the issue is fixed as the alternate color post is bumped up. see image here: http://i7.photobucket.com/albums/y263/vertiblog/alternatecolors.jpg

u2wedge · January 2007

update: I removed the asterisk and now the striped background issue is fixed, but yellowfade does not work on the alternate color post. any ideas?

Minisweeper · January 2007

Yellowfade can only fade from one colour to another. It's not possible to tell it to swap to different colours depending on the row it's on I dont think.

jimw · January 2007

I tried a fade technique with a modified RandomQuotes extension. Maybe it will be helpful.

The php looks like:
$quotedisplay .= '<p id="quote" class="fade-0066FF">' .$quote .'</p>';

And the css looks like:

#Panel p.quote span {
    font-color: #000000;
    width:180px;
}

What this does is to fade from blue to nothing.

Edit --- I just realized that I made myself a fade-anything extension and the code above is part of it. It uses js by Adam Michela he calls fade-anything-technique. I can upload it if anyone thinks it would be useful.