How to override text color in child theme tables

  • Resolved mirgcire

    (@mirgcire)


    11 years, 3 months ago

    I created a child theme of twentytwelve. The color of the text in tables appears to be lighter than the body text. This makes it difficult to read, so I want to darken it up.

    In order to see what CSS rule was controlling the text color, I used the chrome browsers inspect element feature. When I select the text element and look at the “Matched CSS rules”, I see a lot of crossed-out rules.

    Am I correct in assuming these crossed-out rules have been over-ridden and the one that is not crossed out is the prevailing rule?

    If so, it appears that the prevailing rule in this case is called .entry-content {color:#656565;}. I am guessing that entry-content means table entry text, but that might be just wishful thinking.

    Well I added .entry-content {color:#000000;} to see if I could darken it up a little, but it had no effect. And there didn’t seem to be any evidence in the “Matched CSS Rules” that any of my child theme CSS rules are in effect, however the rendering is correct for the other rules, so it must be working.

    Bottom-line: How can I darken up the text in the table?

    You can view my site at lightningmandarin.com/level1/lesson-1

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)

  • Looks like you got it working with this.

    .entry-content table { color: #000; }

    If you still don’t see it as black, clear browser cache.

    Thread Starter mirgcire

    (@mirgcire)

    Wow … nice. Thanks for telling me.

    All I did was refresh the page and the text turned black. That’s just weird! I must have closed and reopened that page a dozen times last night. Now I can even see the child theme CSS settings in the Matched Rules window. … And another thing, I can finally see the favicon that I installed two weeks ago. I am going to blame this on Blue Host, since I can’t find any better explanation.

    Anyway … Thanks for trying it out.

    Thread Starter mirgcire

    (@mirgcire)

    Using .entry-content table { color: #000; } was (more or less) a guess.

    I searched the web high and low but never found what “.entry-content table” means. It seems mysterious to me that a billion (give or take a few million) lines of CSS rules work without tying themselves in knots.

    I would probably know a lot more if I read all the links in this codex page. But that seems daunting.

    By grepping the wp source code I found that <div class=”entry-content”> is applied all the text that is generated by the loop in posts and pages. So I am guessing that following it with “table” narrows the scope of the rule to content that is tagged with class=”table”.

    So the whole system must hang together by having a systematic structure and scoping of class tags that the CSS rules can be applied to.

    .entry-content table is a CSS rule rule that would apply to all content inside <table> tags within the block that has the .entry-content class. Try reviewing CSS Selectors.

    Thread Starter mirgcire

    (@mirgcire)

    Thanks esmi, that’s a great link. I am sure I will revisit that one many times in the future. I had no idea CSS was so complex.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to override text color in child theme tables’ is closed to new replies.