Customize Theme CSS via a Child Theme — UXBARN

Customize Theme CSS via a Child Theme

This entry is part 4 in the series Getting Started with Theme Customization

Do you want to adjust the colors in some area of the theme? Do you want to display or hide some section? Or, do you want to change the fonts used in the design? Yes, you can achieve all that by customizing the CSS of the theme.

Basically, there are three common methods to customize the CSS of a parent theme we are going to show you in this article. Please read on for the detailed information.

How It Works

Before showing you the customization methods, we want to talk about the basic a little. The general idea for overriding CSS code is that if there are two CSS rules with the same selector, the later one overrides the first one.

For example, there is a CSS rule like this:

[css]
.post-title {
color: #000;
}
[/css]

And if you create a new CSS rule right below the first one to make the title white like this:

[css]
.post-title {
color: #000;
}

.post-title {
color: #fff;
}
[/css]

The second rule will have an effect on the element instead of the first one. This is why the custom CSS code you put in the style.css file of a child theme (that is loaded after the parent theme’s stylesheets) can override the one from the parent theme.

However, that is just the very first basic rule for overriding CSS code. There are more rules you need to know such as the use of “!important” and CSS Specificity Value (this is a must).

We are not going to talk about the details on the CSS knowledge topics here as this article only aims to guide you on how to apply your custom CSS code to customize the theme styles. For more information, we would suggest reading these articles:

Now, let’s see the common methods for overriding the theme CSS.

Overriding CSS in a Child Theme

After creating a child theme, you can simply add your custom CSS right in the style.css file of the child theme. You can use the file to override existing CSS rules or to create new CSS rules for the theme elements. Once you saved the file and have applied the custom CSS correctly, you should see your changes after reloading the front end.

Tip: To edit the code right in the WordPress admin area, we recommend WPide plugin for the job.

Overriding CSS using a Plugin

There are many plugins out there providing an option allowing you to save your custom CSS. Here are some of them you can try:

Overriding CSS in Our Customizer

If you are using any of our themes (Fineliner in this case), you can just go to the “Appearance > Customize” menu and open the “Others” section. There you will find a box for entering your custom CSS. You can also see your adjustment in a live preview screen instantly.

The Custom CSS option in the Customizer module of Fineliner
The Custom CSS option in the Customizer module of Fineliner

Tip: Click here to learn more on how to inspect the HTML elements and their CSS on a page.

Conclusion

The method of how you can enter custom CSS to customize the theme CSS is easy. You can do that by either using a child theme, third-party plugins, or the Customizer module in our themes (or the mix of them, but we strongly recommend using only one preferred method as it will be easier to maintain).

The difficult part is that how to correctly apply the correct CSS rules to override the existing ones and how to properly create new rules to apply to HTML elements. We would also suggest studying the concept of CSS Specificity Value which is a must when customizing the CSS rules.

In this series: