There are times when you want to customize the look and feel of the elements in a WordPress theme design. For examples, adjusting the font size of a sidebar, changing particular text color in the content area, reducing the padding of the header area, etc.
But if you are not sure how you can find the element selectors to use in the custom CSS code, please read on. We are covering the basics that will help you get started on the topic.
Requirements
- Chrome Web Browser
We are going to use the Developer Tools in Chrome so the browser is required. - Knowledge of HTML and CSS
You should have at least the basic knowledge of HTML and CSS and how they work with each other in web page code. If you are new to this, we would suggest reading the tutorials here. You might also find more tutorials on Google. - WordPress
Yes, it is required because we are talking about editing the CSS in a WordPress theme! - Custom CSS Plugin
There are two recommended ways to edit or override the CSS of a theme. First, you can create a child theme and put your custom CSS code in the “style.css” file of the child theme. Second, you can find and install a plugin that has custom CSS functionality so you can put your code in the plugin option. For editing only the CSS, we would recommend the second way.
If you are using our themes, you do not need any third party plugin for the custom CSS functionality. You can simply use the Custom CSS option in the Customizer of the theme. The Customizer also shows the live preview so you can see your changes instantly.
In this article, we will use one of our business themes, Schon, for demonstration.
Let’s Start
- Open the web page you want to find and adjust the HTML elements with Chrome. In this case, we open the About page like the below image. We want to make the font size of the tagline in the header area bigger and bolder.
The About page of the Schon theme - Move your mouse cursor over the element you want to adjust and do the right click on it. You will see the context menu showing up. Now choose “Inspect” menu at the bottom of the list.
Start inspecting the element - You will see the Developer Tools window showing up and the element tag in the HTML code and the one on screen are both highlighted. On the right side, you will see the CSS rule that is currently applied to the element and the file that contains the CSS code (“style.css” in this case). You can try editing this rule and the changes will display instantly. But remember that all of your changes here only last until you reload the page.
The inspected element is highlighted in the code and on screen Tip: You can also directly click on any other element tags in the HTML code in the Developer Tools to inspect them. Or, press “CTRL + F” to type and find the elements you are looking for.
- Now we know that the ID of the inspected element is “tagline”. Then we are going to test a new CSS rule for making it bigger and bolder. Click the “+” icon in the right panel to create a new rule and make sure that the selector is correct (“#tagline” in this case). Try adjusting the “font-size” and “font-weight” in this new rule as you can see in the image below.
Test your new rule in the Developer Tools Tip: If you click on the “inspector-stylesheet” file of the created rule, you will see a temporary CSS editor. You can then enter your custom CSS in the editor to test out every custom style before applying them to the site.
- You see that the tagline on screen is now bigger and bolder which means that the new rule works. When you are OK with the adjustment, copy the CSS you created and it is time to add it into the theme.
- In the admin panel of our Schon theme, we go to the “Appearance > Customize” menu to open the Customizer page. Under the “Others” tab, we paste the CSS code we created into the Custom CSS box. The live preview will also be updated so we can see the changes before clicking the Save button.
Custom CSS is added in the Customizer - That’s it. After saving, the tagline of the site will be bigger and bold as we wanted.
Conclusion
That was pretty easy, wasn’t it? 🙂 However, the steps we showed you here are just the basics of how to inspect and adjust the CSS of elements. In some cases, you might have to inspect many elements before you find the CSS rules and selectors you are looking for. We hope this article is helpful and you can get the main idea about how to use the tools for this kind of tasks.
For more information about the Developer Tools, you can find it here: https://developers.google.com/web/tools/chrome-devtools/