Wordpress Themes - WP Forum at BFA - Removing "Zebra" stripes on a table for one post/page

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)

- - Removing "Zebra" stripes on a table for one post/page - not entire site (http://forum.bytesforall.com/showthread.php?t=7540)

globalnerds

Jun 11, 2010 07:04 AM

Removing "Zebra" stripes on a table for one post/page - not entire site

I want to put a table in one of my pages for formatting purposes - and for this one table, I don't want the zebra strips. However, I want to keep them on the tables that already exist on my site for my other post/pages, and other tables that exist in this page. Is there a way to "turn off" the zebra stripes for just one table?

I am running WP 2.9.2 and Atahualpa 3.4.4. The site is www.eponaracingstable.com

Thanks!!

juggledad

Jun 12, 2010 06:01 AM

when you add the table, give it an ID= (see http://www.w3schools.com/css/css_id_class.asp for a reference) so you can uniquely identify it in a CSS Selector statement. Then you can add CSS Styling of your choice.

globalnerds

Jun 12, 2010 04:52 PM

Do you know what portion of the css.php has the zebra code. I tried to look for it, but it wasn't easy to find.

globalnerds

Jun 12, 2010 07:15 PM

I put the following in my css.php:

Code:

table.nozebra {

        border-width: 10px;

        background: #aaa;

        text-align:left;

}

table.nozebra th {

        border-width: 10px;

        background: #aaa;

        text-align:left;

}

table.nozebra td {

        border-width: 10px;

        background: #aaa;

        text-align:left;

}

table.nozebra tr {

        border-width: 10px;

        background: #aaa;

        text-align:left;

}

I then put the following in the table html:

Code:

<table align="left" class="nozebra" style="width: 90%; ">

But the table still has the stripes (in this case the table has 2 columns and 1 row). Take a look at the following link:
http://www.eponaracingstable.com/roster/air-attack

I am referring to the table that has no borders (where the horse is).

Thanks!!

juggledad

Jun 13, 2010 04:48 AM

1) don't make changes to css.php you will just have to make them again the next time upyou upgrade. Put any new CSS or CSS overrides in ATO->Add HTML/CSS Inserts->CSS Inserts. they will be added to the CSS and are stroed in the DB as an option wo you can upgrade and they will carry over.

2) the only reference to 'nozebrz' outside the CSS is on a '<td class="nozebra">'
but your CSS doesn't reference it. You would need a 'td.nozebra {...}' to work with that

globalnerds

Jun 13, 2010 12:45 PM

I moved those changed from css.php into the db portion as you suggested, thanks.

Wouldn't the :

Code:

table.nozebra td {

        border-width: 10px;

        background: #aaa;

        text-align:left;

}

take care of the

Code:

'td.nozebrs {...}'

But just in case it was not what you were referring to, I change the css portion to:

Code:

td.nozebra {

        border-width: 10px;

        background: #aaa;

        text-align:left;

}

td.nozebra th {

        border-width: 10px;

        background: #aaa;

        text-align:left;

}

td.nozebra td {

        border-width: 10px;

        background: #aaa;

        text-align:left;

}

td.nozebra tr {

        border-width: 10px;

        background: #aaa;

        text-align:left;

}

And I still don't see a change. fyi - I really don't want the borders that large, but it is a very easy way to see if this is working.

Thanks!!

juggledad

Jun 13, 2010 03:05 PM

I still don't see any <table> <td> or <tr> with the class 'nozebra' on the page air-attact

Please copy and paste the table so we can talk about the same thing in this thread

globalnerds

Jun 13, 2010 04:22 PM

If you view the source and search for "nozebra" it is there, but here is the code:

Code:

<table class="nozebra"><tbody><tr><td><a href="http://www.eponaracingstable.com/wp-content/uploads/airattack1.jpg"><img alt="Air Attack" class="alignleft size-medium wp-image-78" height="252" src="http://www.eponaracingstable.com/wp-content/uploads/airattack1-300x252.jpg" style="cursor: default; " title="airattack" width="300" /></a></td><td><ul><li>Overview</li><li>Pedigree</li><li><a href="http://www.eponaracingstable.com/roster/air-attack/air-attack-race-record">Race Record</a></li><li><a href="http://www.eponaracingstable.com/roster/air-attack/air-attack-photo-gallery">Photo Gallery</a></li></ul></td></tr></tbody></table>

The "<tdbody" portion is getting put in there after a save, I have no idea why. I have coded this in dreamweaver as the following:

Code:

<table class="nozebra">

  <tr>

    <td><a href="http://www.eponaracingstable.com/wp-content/uploads/airattack1.jpg"><img alt="Air Attack" class="alignleft size-medium wp-image-78" height="252" src="http://www.eponaracingstable.com/wp-content/uploads/airattack1-300x252.jpg" style="cursor: default; " title="airattack" width="300" /></a></td>

    <td><ul>

      <li>Overview</li>

      <li>Pedigree</li>

      <li><a href="http://www.eponaracingstable.com/roster/air-attack/air-attack-race-record">Race Record</a></li>

      <li><a href="http://www.eponaracingstable.com/roster/air-attack/air-attack-photo-gallery">Photo Gallery</a></li>

    </ul></td>

  </tr>

</table>

juggledad

Jun 14, 2010 07:14 AM

first off you have a hanging 'font-weight:normal;' in your CSS - probably the first line in the CSS Inserts, that should be removed.

second, this is your CSS

HTML Code:

td.nozebra {

border-width:10px;

background:#aaa;

 text-align:left

}



td.nozebra th {

border-width:10px;

background:#aaa;

 text-align:left

}



td.nozebra td {

border-width:10px;

background:#aaa;

 text-align:left

}



td.nozebra tr {

border-width:10px;

background:#aaa;

 text-align:left

}

A CSS Selector is made up of an elment name and a class or id. Lets look at your CSS Selectors.

The first is 'td.nozebra' - in english, this is saying 'everywhere you find a <td class='nozebra'>, apply these rules to it and it's decendents

The second is 'td.nozebra th' which says 'everywhere you find a <th> which is a child of a <td class='nozebra'> apply these rules to it and it's decendents

the rest of the selectors are basicly the same.

the problem is you have the class on the table not the <td> so these rule sill never apply. In addition, sometimes another rule is more specifid, so in order to override it you mneed to ad the '!important' clause.

So try this, remove all your css references with nozebra and try this

HTML Code:

table.nozebra td {

border-width:10px;

background:#aaa !important;

text-align:left;

}

titaniumbones

Dec 23, 2011 08:32 AM

I hope this thread is still active -- I tried the solution here and after a fair bit of work it still doesn't work for me. You can see an example here:

http://department-test-wp.hackinghistory.ca/test-page/

What I'm trying to do is to mimic the striping effect on a table where the alternating colors need to sometimes not switch every single row. I have the following in css inserts:

table.coursetable tr td {
border-top: 0px;
border-bottom: 0px;
}
table.coursetable tr.section,
table.coursetable tr.section td {
background-color: white;
border-top: 0px;
border-bottom: 0px;
}

table.coursetable tr.coursename,
table.coursetable tr.coursename td {
background-color: #f4f4f4;
border-top: 1px solid #dddddd;
border-bottom: 0px;
}

But if zebra striping is turned on for all tables, then these settings are overridden when atahualpa adds 'alt' to the tr class of alternating rows. This is in atahualpa 3.6.1. Will this work in a newer version?
Thanks so much fo hte help, matt

titaniumbones

Dec 23, 2011 08:33 AM

also, I meant to say that adding class='zebra' on indiv table when zebra striping is turned OFF for all tables, doesn't seem ot have any effect either.

lmilesw

Dec 23, 2011 01:40 PM

What happens if you add !important to your custom CSS entries with Zebra striping turned on?

All times are GMT -6. The time now is 11:39 PM.