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!