|
#1
Apr 29, 2009, 03:51 PM
|
|
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
Apr 29, 2009, 08:09 PM
|
|
|
|
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
Apr 29, 2009, 10:31 PM
|
|
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
Aug 15, 2009, 02:37 PM
|
|
|
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
Aug 16, 2009, 05:46 AM
|
|
|
|
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
Aug 16, 2009, 02:09 PM
|
|
|
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
Aug 16, 2009, 02:35 PM
|
|
|
|
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.
|
#8
Nov 22, 2011, 05:08 PM
|
|
Is there just a way to get rid of the theme's default handling of tables? I use tables a lot in a variety of different ways and it's extremely disconcerting to have code I've used for twenty years have no effect on the site.
Thanks in advance.
|
#9
Nov 22, 2011, 05:52 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Go to the table option and blank things out
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#10
Dec 26, 2011, 06:22 PM
|
|
Where should the CSS that overrides the table settings from the theme go? In the css.php? Which part?
|
#11
Dec 26, 2011, 06:45 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
You never have to edit CSS.php, just put any overrides in ato->add HTML/CSS inserts->CSS inserts and then they become a theme option
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#12
Apr 9, 2015, 04:19 PM
|
|
I've set my default table background color to #ffffe0 in Style Tables.
I want to set a specific table background color to #ffffff.
I added this id to CSS Inserts:
#whitebackground {
background: #ffffff;
}
and used this code for the table of interest:
<table id="whitebackground" border="0" width="800" cellspacing="0" cellpadding="3">
The table background color does not change, so apparently it's still getting it's instructions from the default table settings.
Here's the page of interest:
http://energycenterclearing.org/escaping-the-matrix2/
I'm using atahualpa 3.7.22 and wordpress 4.1.1.
Please tell me what I'm overlooking.
|
#13
Apr 9, 2015, 04:26 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
It's working perfectly well - use a code examiner - like FireBug in FireFox - and examine the table. You will see the <table...> is getting a white background assigned to it.
But what other elements might be getting a background color assigned to then??? (Remember, elements stack on each other like peices of paper.)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#14
Apr 11, 2015, 09:18 PM
|
|
I checked in Firefox, IE, and Chrome and the key table in each browser still displays in the default table background color of #ffffe0 vs. my specified color of #ffffff.
The source code shows:
<style type="text/css"> ...
table#whitebackground{background:#ffffff}table.whi tebackground{background:#ffffff}</style>
And my table shows:
<table id="whitebackground" class="whitebackground" border="0" width="800" cellspacing="0" cellpadding="3">
http://energycenterclearing.org/escaping-the-matrix2/
Please tell me what's wrong...
|
#15
Apr 12, 2015, 05:27 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
what other elements of the table might be getting a background color assigned to them???
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#16
Apr 12, 2015, 11:39 AM
|
|
I'm a relative neophyte when it comes to CSS, so please forgive me if I don't understand your question of what other elements might be getting a background color assigned.
I tried to assign each <td> the same id="whitebackground" but again, even though the source code shows it being picked up, the default background color comes through.
|
#17
Apr 12, 2015, 04:50 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Use the Firebug extension for Firebug and use the inspector icon to look at your source and see the CSS applied. Start at <table..>. In the code section, click on each child element of the table element and look at the CSS being applied.
You will notice when you click on the element in the source, the area it addresses will change color on the page. This will help you out.
If you are going to be making changes to a site beyond the standard options the theme gives you, you have to learn CSS. Here is a good CSS beginner toutorial to start with http://htmldog.com/guides/css/
btw - every css ID on a page should be unique, So if you have <table id="whitebackground'...> you shouldn't use that id on any other element on the page. Classes can be used in multiple places so you could have <table class="whitebackground"...>...<div class="whitebackground">....<p class="whitebackground"> etc etc
__________________
"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; Apr 13, 2015 at 07:38 AM.
|
#18
Apr 13, 2015, 02:19 PM
|
|
I don't know why this this was necessary, but I assigned the whitebackground id to a div element that surrounded the table and now the table background is white.
In my understanding, having the whitebackground id assigned to the table and every td of the table should have made the table background white. For some reason, that was not sufficient.
http://energycenterclearing.org/escaping-the-matrix/
If this is a bug, you may want to fix it, but since I have the result I wanted, you need not spend any more time on it.
Thank you for your help.
|
#19
Apr 13, 2015, 03:34 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Actually, had you looked and paid attention, you would have seen that there was a 'background-color: #ffffff;' being assigned to the <td>'s (table cells)
Now table cells sit on top (and cover) table rows and table rows sit on top (and cover) the table so setting the background color of the table to anything just gets hidden by the color of the table cells.
and yes there is a theme option (Table Body Cells) that handles the table cells, so there is no bug.
p.s. as I said already, id's should be unique - you should never have two elements that use the same ID.
__________________
"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; Apr 13, 2015 at 03:37 PM.
|
Thread Tools |
Search this Thread |
|
|
Display Modes |
Linear Mode
|
|