HI, I've been reading the documentation and am slowly starting to understand some concepts the biggest breakthrough came when I realized I had to first learn how WP itself worked. So I'm headed down that path. But my initial motivation was just to change the text color in the header. Do I really have to write a function to do that? Isn't CSS still an optio for such simple tasks? If so, what would the name of the selector be? Any tips would be appreciated, including good tutorial sites.
Thanks, Mike
Hey Mike,
The very best way to find which class attribute to target for styling is to open up Developer Tools in either Chrome or Firefox. You can click on the HTML element in the "Elements" tab. What does this tell you?
- The HTML tag's structure including the
classattribute, microdate, and more. - The CSS assigned to that element in the "Styles" tab.
For example, if you're using Chrome, you'd right click on the header component of your website. And then select "inspect" in the menu. It defaults to show you the HTML Elements structure (DOM) and the Styles. Look at the `` element. Here's the default out of Beans:
<header class="tm-header uk-block" role="banner" itemscope="itemscope" itemtype="http://schema.org/WPHeader">Look at the class attribute. You have tm-header (which is in Beans) and uk-block (which is UIKey). In this instance, you'd target tm-header for your styling.
In your child theme, use either the style.less or style.css file and add the following code:
.tm-header {
background-color: #ccc; /* change the color to what you want here */
}Bam, you're done.
Need a starting child theme? Click here to go to the Themes page.
Let me know if you need more help.
<happy coding>Tonya
Thank you, this is very useful information for me, I am going to use it soon!