Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

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


  #1  
Old Jun 11, 2010, 08:04 AM
globalnerds's Avatar
globalnerds
 
43 posts · Nov 2009
Saratoga Springs, NY
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!!
__________________
Gary GlobalNerds.com
  #2  
Old Jun 12, 2010, 07:01 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Jun 13, 2010 at 04:07 PM.
  #3  
Old Jun 12, 2010, 05:52 PM
globalnerds's Avatar
globalnerds
 
43 posts · Nov 2009
Saratoga Springs, NY
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.
__________________
Gary GlobalNerds.com
  #4  
Old Jun 12, 2010, 08:15 PM
globalnerds's Avatar
globalnerds
 
43 posts · Nov 2009
Saratoga Springs, NY
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!!
__________________
Gary GlobalNerds.com

Last edited by globalnerds; Jun 12, 2010 at 08:17 PM.
  #5  
Old Jun 13, 2010, 05:48 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Jun 13, 2010 at 04:08 PM.
  #6  
Old Jun 13, 2010, 01:45 PM
globalnerds's Avatar
globalnerds
 
43 posts · Nov 2009
Saratoga Springs, NY
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!!
__________________
Gary GlobalNerds.com
  #7  
Old Jun 13, 2010, 04:05 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Jun 13, 2010 at 04:08 PM.
  #8  
Old Jun 13, 2010, 05:22 PM
globalnerds's Avatar
globalnerds
 
43 posts · Nov 2009
Saratoga Springs, NY
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>
__________________
Gary GlobalNerds.com
  #9  
Old Jun 14, 2010, 08:14 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old Dec 23, 2011, 09:32 AM
titaniumbones
 
3 posts · Feb 2011
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
  #11  
Old Dec 23, 2011, 09:33 AM
titaniumbones
 
3 posts · Feb 2011
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.
  #12  
Old Dec 23, 2011, 02:40 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
What happens if you add !important to your custom CSS entries with Zebra striping turned on?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to post on 2 seperate "Pages" or "Cats" TPR Atahualpa 3 Wordpress theme 18 Aug 4, 2010 09:24 PM
Removing header, footer and sidebars for a "splash" page mactony Header configuration & styling 29 Jun 9, 2010 08:10 PM
How to select "Only Exerpts"/"Full Posts" for certain post? shus Center area post/pages 4 Jan 19, 2010 02:41 PM
Archives Page-How can I add the date before the post title when using "postbypost"? fromtheranks Atahualpa 3 Wordpress theme 8 Jul 25, 2009 10:52 AM
How to style "post icon" and "post comments" text Whatsthatcat? RSS, Feeds & Subscribing 3 Apr 1, 2009 10:41 AM


All times are GMT -6. The time now is 01:49 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.