Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
It’s not that simple unfortunately.
Use your browser developer tool and inspect any element that has colour applied to it. Note down the class (and/or HTML element) and move on.
Then, once you have a large list of classes, construct a CSS style in your Child Theme stylesheet or Custom CSS plugin that says;
.class1,
.class2,
.class3 {
color: deeppink;
}
That’s kind of what I’ve done, although I didn’t list them all together like that, but there’s still a couple I couldn’t find, as I’ve mentioned in another post. I’m also confused about how when I inspect elements, they often have id’s, yet I see no # signs in style.css (except for colors) Anyone care to explain that?
I’m getting better at the whole game, but it’s a steep learning curve…
I’m curious why you think the find and replace method wouldn’t work: if I search for #grey1(whatever the code is) and replace with #brown1(ditto), and do the same for #othergrey to #otherbrown. There might be a few hover colors that get missed, but wouldn’t that basically do the trick, or at least be less work than identifying all the classes individully?
Regards,
Robin.
I’m guessing the find and replace option on a copy of the whole stylesheet is a better approach…
No, you should not be using a copy of the parent style.css file in the child theme – it creates duplicate code and makes it much harder to manage/keep track of what you have changed.
I’m also confused about how when I inspect elements, they often have id’s, yet I see no # signs in style.css
Not all ids or classes are necessarily used in existing CSS – but you an always use them to add or modify existing styles, as relevant.
Ah Ha. Thank you. So I guess I could add an #identity that I find in the HTML to the stylesheet.
Exactly :)… This is a good CSS reference site if you need it:
http://www.w3schools.com/css/
