Different colors for different rows

Josh
Topic Author
Visitor

04 Nov 2012 20:21 #2701 by Josh

Different colors for different rows was created by Josh

I would like to alternate colors for different row like this site here: www.redeemer-canrc.ca/audio-video

How do I go about doing this? Thanks

Please Log in or Create an account to join the conversation.

Thomas Hunziker
Offline
Administrator

04 Nov 2012 20:37 - 04 Nov 2012 20:38 #2702 by Thomas Hunziker

Replied by Thomas Hunziker on topic Different colors for different rows

You can use the CSS classes "odd" and even" for this. Add this CSS code to your templates css file:

Code:

tr.odd {
    background-color:#eee;
}

This will add a grey background to every second row.

Last edit: 04 Nov 2012 20:38 by Thomas Hunziker.

Please Log in or Create an account to join the conversation.

Josh
Topic Author
Visitor

05 Nov 2012 03:40 #2703 by Josh

Replied by Josh on topic Different colors for different rows

Thanks worked great!!

Please Log in or Create an account to join the conversation.

Josh
Topic Author
Visitor

10 Nov 2012 02:49 - 10 Nov 2012 02:53 #2712 by Josh

Replied by Josh on topic Different colors for different rows

Ok, now that I have that working...Is there anyway to change the highlighted row color...currently it is light green. Also, is there anyway to change like the vertical and horizontal lines so it looks more like a table. I think they are currently white. Thanks

Last edit: 10 Nov 2012 02:53 by Josh.

Please Log in or Create an account to join the conversation.

Thomas Hunziker
Offline
Administrator

10 Nov 2012 07:38 #2714 by Thomas Hunziker

Replied by Thomas Hunziker on topic Different colors for different rows

The light green can be changed using the CSS class "ss-current":

Code:

.ss-current{
  background-color:##F78181;
}

would get you a light red.

If it doesn't work you can try to add an !important to it:

Code:

.ss-current{
  background-color:##F78181 !important;
}

How the table looks depends on your template. SermonSpeaker uses the CSS class "category" here. You can style the table using

Code:

table.category{
  ...
}

Maybe this can help you further: www.somacon.com/p141.php

Please Log in or Create an account to join the conversation.

Josh
Topic Author
Visitor

11 Nov 2012 03:40 #2717 by Josh

Replied by Josh on topic Different colors for different rows

Thanks for your help.

Please Log in or Create an account to join the conversation.

Time to create page: 0.105 seconds