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 »

[SOLVED] How to Override Table CSS?


  #1  
Old Apr 29, 2009, 02:51 PM
jkestler
 
4 posts · Feb 2009
[SOLVED] How to Override Table CSS?

I'd like to style a few HTML tables differently from the theme's "global" styling that I'm using on most pages. The usual methods--CSS inserts, inline CSS--don't seem to work on tables.

Any help is much appreciated!
  #2  
Old Apr 29, 2009, 07:09 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Are you giving the tables a class or better, an ID, so you can address them through CSS?

<table id="table-3">....
</table>


CSS Insert:

HTML Code:
table#table-3 {
...
}
table#table-3 td {
...
}
  #3  
Old Apr 29, 2009, 09:31 PM
jkestler
 
4 posts · Feb 2009
Thanks very much.

Turns out the problem was that the CSS override didn't take effect until I published. In "preview" or "private" the default CSS applied, apparently.
  #4  
Old Aug 15, 2009, 01:37 PM
jankph
 
93 posts · Jul 2009
ATA 3.6.4 and WP 3.1
Overriding table CSS - styling table cells

Is it possible to expand on this? E.g. styling individual cells within the selected table, as in

Code:
table#table-3 td#td-1 {
font-color:#666666;
}
I tried the above, but I cannot make it work
  #5  
Old Aug 16, 2009, 04:46 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
If the table TD cells don't have this class td-1 then it won't work. If you're creating the table yourself you could add the class

<table>
<tr>
<td class="td-1">...</td>
<td class="td-2">...</td>
<td class="td-3">...</td>
</tr>
</table>

CSS Insert

td.td-1 {
color:#666666;
}
td.td-2 {
color:#777777;
}
td.td-3 {
color:#888888;
}

Also, it's color, not font-color
  #6  
Old Aug 16, 2009, 01:09 PM
jankph
 
93 posts · Jul 2009
ATA 3.6.4 and WP 3.1
Thanks. It works.

I'm still a CSS novice, and I couldn't see the difference between id (for the table) and class (for the cell), let alone the color thing. Better read up on that subject, I guess.
  #7  
Old Aug 16, 2009, 01:35 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
A ID should only appear once on a page. A class can appear multiple times, on multiple, even different elements: <div class="myclass"><span class="myclass">

I suggest to give elements both an ID and a class. That way you can "group style" all elements with the same class, and then, if required give each element an additional, individual style through its ID.

HTML:
<div id="myid" class="myclass">...</div><div id="otherid" class="myclass">...</div><div id="thirdid" class="myclass">...</div>

CSS:
div.myclass { width: 300px }
div#myid { background: red }
div#otherid { background: green }
div#thirdid { background: blue }

All 3 DIV#s will be 300 pixels wide, but each one has a different background color.

An ID has higher priority than a class:

HTML:
<table id="myid" class="myclass">

CSS:
table#myid { background: green }
table.myclass { background: red }

The table background will be green even though the red color was applied after the green color, and due to the CSS rule "later rule takes precedence over earlier rule" it should be red. But the table was already given the color green through its ID, and the class cannot overwrite the ID.

In CSS, ID's are referenced with a hash sign, classes with a dot

selector.classname { property: value; property2: value2 }
selector#idname { property: value; property2: value2 }

The selector (a HTML tag such as table, td, div, span, hr, p, a, ...) can be abandoned but should not (in my opinion) to avoid possible conflicts and unexpected results:

.classname { property: value; property2: value2 }
#idname { property: value; property2: value2 }

... unless it is desired to style multiple elements with the same classname. Then it can make sense to leave out the selector name (as shown above) for the sake of shorter code

It is also possible to apply CSS without ID's or classes, with just the selector. This is a shotgun approach as it will be applied to all matches on the given page:

p { property: value; property2: value2 }

... styles all paragraphs on the page.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] how to override Atahualpa default 404's? gjt Atahualpa 3 Wordpress theme 11 Dec 10, 2012 06:37 PM
[SOLVED] Problem with table styling Edu_Sanzio Atahualpa 3 Wordpress theme 3 Jul 9, 2009 05:22 AM
Big gap before my table renders shilldiy Atahualpa 3 Wordpress theme 4 Apr 14, 2009 02:40 AM
How to override CSS in widget "Text" ?? joe hark Sidebars & Widgets 2 Mar 1, 2009 10:43 PM
Editing the table style and in the posts kirinafa Atahualpa 3 Wordpress theme 1 Mar 1, 2009 03:54 PM


All times are GMT -6. The time now is 05:41 AM.


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