How do I change the color of this text?

June 27, 2016 2:04 PM

I am helping a friend with her WordPress customization and I've run into something I can't seem to fix. One bit of text on the website does not seem to be controlled by the CSS. How do I change it?

I have some WordPress experience and a moderate knowledge of CSS, so I offered to help a friend recolor her site. I swapped out the colors she wanted in the stylesheet and then noticed that the text on one page was too light to go with the box it is sitting in. The text is excerpts of blog posts. I can't find a class in the spreadsheet that seems to control it. (I searched "post" thinking it would find the relevant code, but nothing came up.) It doesn't change when I use the WordPress customize options. I also used the developer tools to see if I could narrow it down that way, but I was unable to highlight it and see the code. I was able to see that there is a lot of js on the page, but that is outside my realm of expertise.

The theme is Versatile, a child theme of Divi. There is a Divi editor built in, but I can't find anything pertaining to colors there.

Where should I look next?

(Memail me if you want to see the actual site. I don't feel comfortable posting it here.)

posted by Biblio to Computers & Internet (6 answers total)

What generally helps me in cases like this is to use the developer tools of my browser (generally Chrome or Firefox) and use the document inspector and select the element. This shows which part of the CSS is responsible for the layout of the selected element.
posted by IAr at 2:24 PM on June 27, 2016 [1 favorite]

Response by poster: I've tried using the developer tools in 2 browsers. They will only select the whole page. I can't select any individual element.
posted by Biblio at 2:31 PM on June 27, 2016

If you're inspecting the element (or trying to) or viewing the page source, go to where the code is and search through it for a few words in the text you're trying to find. For example, in Chrome, you'd click and choose inspect, then go to the bottom frame or pop out where the HTML is, then from there command/control F and paste in the first 5 words in that rogue text block. When you find it in the code, see what class is associated with it. Then you can look through the CSS that has loaded and see which file is controlling it and/or see if there is hardcoded style info attached to it. Try that and report back?
posted by instamatic at 2:46 PM on June 27, 2016 [2 favorites]

Response by poster: Ok, that worked, but the information doesn't help me. I get this result:
.et_pb_bg_layout_light .et_pb_post .post-meta, .et_pb_bg_layout_light .et_pb_portfolio_item .post-meta, .et_pb_bg_layout_light .et_pb_post .post-meta a, .et_pb_bg_layout_light .et_pb_portfolio_item .post-meta a, .et_pb_bg_layout_light .et_pb_post p {
color: #666;
Trouble is, when I find those in the stylesheet none of them are associated with that color. None of them have a color at all and when I try to add one nothing changes on the page.
posted by Biblio at 3:14 PM on June 27, 2016

Best answer: I believe the chunk of CSS you posted is actually coming from style.css in the parent theme (Divi).

You should be able to override it by pasting it into the style.css for Versatile, changing the color, and adding !important at the end:

/* Color Layouts */
.et_pb_bg_layout_light .et_pb_post .post-meta,
.et_pb_bg_layout_light .et_pb_portfolio_item .post-meta,
.et_pb_bg_layout_light .et_pb_post .post-meta a,
.et_pb_bg_layout_light .et_pb_portfolio_item .post-meta a,
.et_pb_bg_layout_light .et_pb_post p,
.et_pb_bg_layout_light p.et_pb_title_meta_container,
.et_pb_bg_layout_light p.et_pb_title_meta_container a {
color: #999 !important;
}
posted by belladonna at 3:31 PM on June 27, 2016

Best answer: I love you guys.

That totally fixed it, and now I know something new.
posted by Biblio at 3:35 PM on June 27, 2016 [1 favorite]