How to customize WordPress themes using CSS

blogtheme_06

In this article we will discuss about about the possibility of making quick customizations to a WordPress site without altering the theme files. It’s a resourceful guide for those who want to take their theme beyond its normal options. Please note that this is a guide towards making minor changes, not major overhauls. It is ideal for those who wish to make small edits to the overall layout of the site. And how do we do that? Here comes the term CSS, which stands for Cascading Style Sheet. CSS is a set of simple structured, alterable codes that control the look, formatting and behavior of any modern website. If you don’t know about CSS, we recommend you take a look at some tutorials around the web to get going.

CSS’s role in WordPress

Before going into the details of customizing your theme, let’s look at the very basics. In a WordPress theme, there must be always a base CSS stylesheet called style.css. This file sits in the root directory of a theme, meaning most of the theme’s styling will be found in the following address:

http://www.yourdomain.com/wp-content/themes/yourtheme/style.css

The main concept of CSS customization is to navigate the stylesheet to find the CSS classes that are affecting the elements you wish to modify, and then override them to your liking. Keep in mind that some themes choose to create multiple CSS files and link them up together in style.css, so you might need to navigate a bit to find them. It may seem like a lot of work to go through an entire site’s stylesheet to make changes, a useful tool called Web Inspector can do the heavy lifting for us.

How to use Web Ispector

You can use Web Inspector in Firefox or Chrome to view the source code of your page in an organized way. The main purpose of this tool is to quickly find the element you wish to modify, and find out which CSS classes affect it. Once you are aware of those classes, you can then proceed to override them with your own custom values.

These tools work in a fairly similar way: to open them up, you only need to press F12. This will display the inspector in the lower part of the window. From there on, you can see the source code of your page in the HTML tab, displaying all HTML markup elements as a collapsible, indented list. A quick method of quickly navigating to the item of your choosing is to right click it on the page, then hit Inspect This Element. This will immediately focus the web inspector onto the desired item, bringing it into focus.

How to find CSS Classes

Once an item is selected, you can then take a look at the right sidebar of the inspector. This sidebar displays all the CSS classes affecting said element, as well as their active attributes. These CSS declarations will be listed in order of specificity, meaning the ones with the most strength will be shown first, the second strongest second, and so on. Specificity is a very important thing to keep in mind, as it defines whether a declaration will be able to override another based on their order AND how specific they are. For example, take the following two declarations:

Line 16: .header .subheader { background:blue; }

Line 26: .subheader { background:red; }

Even though the second declaration is further down, the first one will have prevalence as it has a higher specificity (it selects the subheader class as a descendant of the header class). This is perhaps the most unintuitive aspect of CSS, and it may leave some users confused as their declarations may not have the desired effect.

How to Apply Changes

Once you find the classes you’re looking for, it’s time to override them. If you’re using one of our themes, you can make use of the Custom CSS field included in the Theme Options, built with the express intent of customizing your theme. You can find it in the Theme’s Options page. These CSS changes are normally added at the very end, so most of the time they will have preference over the normal stylesheet.

To apply your changes, you simply need to copy the same class declaration as it appears on the web inspector. Directly copying it will prevent most issues with specificity, making it simpler for you to tweak the design. These changes will be saved on the database, meaning that they’re safe from being erased on updates and site changes. This allows you to preserve them no matter what you do with your site.

Please keep in mind that to avoid making changes to the layout, you should try to avoid changing structural properties like paddings or widths. A good rule of thumb when modifying the CSS of an element is to stick only to design-centric properties such as colors, backgrounds, or fonts. Some mixed properties such as borders are best implemented using their longhand declaration, like border-color. This will preserve the other properties such as border width or border style, while letting you change the appearance to your liking.

For further customization of your WordPress site, please contact us.