WordPress Theme Change: Style Element Gotchas Screenshot

How to Change WordPress Theme Styling

I have given an overview of why to use child themes for your WordPress website, and now I will cover more detail about changing styling.

WordPress Theme Styling: Warning To Creative People

If you are artistic and creative, you are probably interested, more than most, in getting your WordPress theme looking just right.

Be careful before you commit yourself to changing CSS. It is the equivalent of telling your paint which color it should be, or your notes what frequency they should vibrate. It is technical. Some changes are quite easy, but do not let that simplicity fool you. When you tamper with an established WordPress theme, you are changing the way it was designed to look. Minor tweaks will not hurt, but what seems minor to you, such as moving the position of an element can impact on the whole structure of the page. I have seen grown designers cry when they swap brush and canvas for keypad and CSS stylesheet. One who thought he had avoided breakdown fell on his sword when he realized his efforts looked terrible in a different browser. Shrewdies are happy to help you fix your broken CSS – we are also happy to take your orders, and a little cash, and fix it for you.

Change WordPress Theme Styling: Preparation

First make sure you are using Firefox, Chrome, or better still – both. Once you have attracted some traffic, your Analytics software will tell you which other browsers you need to check your website with. However, for development, you need Chrome, and Firefox with the Firebug and FireFTP add-ons.

  1. Install One-Click Child Theme plugin
  2. Install your chosen theme
  3. Create a child theme

You also need to prepare your child theme from my explanation in the previous article about choosing your WordPress Theme (summary on the right). There are other ways to do this, so if you want to search the WordPress documentation for Child themes, that is fine.

Either way, once your site is running a child theme that is properly configured with links to the parent theme then you are ready to go.

Find Where To Change WordPress Theme Styling

Both the aforementioned browsers have an option in the right-click menu to Inspect Element, so right-click whichever element you wish to change and select Inspect Element. This will open a complicated window at the bottom of your screen. Clicking F12 also works, but does not position you anywhere near the element you want to change.

Take some time to familiarize yourself with the layout.

First, use your mouse, or better still, your cursor arrows to move up and down the page element structure. If you do that on this sentence, you will see something that looks like the image below. (Please note I highlighted the sentence to make it clearer – you do not need to do this.) Notice in particular, that a hierarchical structure is present. This is very important when you are changing styling. The style of the element you start with is often controlled by a parent element, further up the screen.

WordPress Theme Change: Find Style Element ScreenShot

WordPress Theme Change: Find Style Element

The <span> tags do nothing but mark that sentence. You can see that at the top of the styles list where there is an empty entry for element.style {}. Below that, you can see the font-size for the main entry text, and many more below it.

The key to success in changing your WordPress Theme Styling is to realize that you can try before you apply. Change the font-size and see what happens to the text. You are changing the parent element, so all the text on the page changes. Also note, that for numeric properties, you can click anywhere on the number then use up and down arrows to change the values.

In the real world, you probably want to change something a lot harder than a simple sentence span. Many themes set styling on the page headings. this is often done with the sole purpose of differentiating the theme, and you may want a much simpler heading so as not to detract from your exciting content.

Finding heading elements can be difficult, and removing styling is rarely a simple matter. It does get easier with practice, so if you have a specific problem, please point me to your website, describe what you want to change, and I will tell you how to do it.

Let us take, for example, the very subtle border on the secondary menu above. Personally, I like it, but I need an example to show you. First you have to find it. If you study the screenshot below, you will see a line that is slightly indented beneath the highlighted line. Invariably, if you try to select the secondary menu styling, you end up at secondary-menu, or even lower. At those levels, you will not find border styling. Following our search upwards principle, moving the cursor up one line reveals the border styling on the right-hand side. Which leads us to a second problem…

WordPress Theme Change: Style Element Gotchas Screenshot

WordPress Theme Change: Style Element Gotchas

We can get rid of the border easily in our local browser view, by clearing the tick next to border-top: 1px solid #2C2C2C. But we cannot simply omit it from our definition for #secondary-menu-wrap in our child theme, or we will simply get the original from the parent theme.

To change parent theme styling, you have to specifically override it with something different. Easy if it is a single property change, but less so when we have shorthand properties like border-top. This type of shorthand changes 3 properties at once: the width (1px); the style (solid); and the color (#2C2C2C). If we simply set border: none, or border-top-width: 0 most browsers will still use the original shortcut. Sometimes we can override a property by adding !important after the value, as border-top-width: 0!important.

You can try this for yourself if you wish, but the easiest way to get rid of an unwanted border, especially if it is set by a shortcut directive, is to change the border width to 0.

So, all you need to do to get rid of the border on a secondary menu is to add the following to the child theme stylesheet using the inbuilt WordPress Editor on the Appearance menu:
#secondary-menu-wrap {
border-top: 0 solid #2C2C2C;
}

Personally, to avoid tedious copying of long class and identity names, I highlight the CSS code in the browser, copy it to my child stylesheet, then delete the lines that I have not changed.

Change WordPress Theme Styling: Next Steps

If you are struggling to get WordPress Theme styling right, please ask in the website support forum. Please give a link to a page that shows your problem, as well as details of the theme you are using.