How to Customize Your Genesis Child Theme with Chrome’s Inspector

Using Inspector to Customize Genesis Themes (Video)

Using Inspector to Customize Genesis Themes (Text Walkthrough)

If you’re not a fan of video, here are text instructions for using Inspector to customize your Genesis child theme.

For the purposes of this tutorial, I’m going to change a few elements of the dark gray navigation menu on the Genesis Sample child theme.

Step One: Locate the element you want to change, right-click on it, and choose Inspect Element.

On my test site running the Sample child theme, I hovered my mouse over the nav bar and right clicked.

 

Once you right click, the Inspector will pop up on the lower half of your browser window. You’ll see the page HTML on the left and the CSS rules on the right.

 

 

Step Two: Identify the correct HTML for the element you want by hovering.

In this case, I want the primary nav menu itself, but I could also hover over the wrap to see its CSS properties as well. As I hover, the element I’m hovering over will be highlighted to make it easier to find what I want. Once I click on the correct section on the left HTML side, I’ll see the CSS rules for the nav menu on the right.

 

If I wanted to edit a particular item within that section, such as the individual menu items, I could click the arrow to the left of the menu on the HTML side to open it further:

 

Step Three: Look at the CSS on the right and click on any rule to edit, change, or remove it. (Note that this is only a preview and will not actually change anything on the site permanently. If you mess up, just refresh the page and you can start over.

Let’s say I want to change the background color of the menu to teal (my favorite color!) instead of dark gray. If I look at the CSS section on the right, I’ll see background-color: #333; as one of the CSS rules for .nav-primary, so I can click over there and change it to #017172, which is my color of choice.

 

Step Four: Go to your Appearance > Editor to make the change permanent.

In this case I’ve decided I’m happy with the change, so I’m going to go change my stylesheet to reflect what I just previewed in Inspector. Since the rule I changed was the background for .nav-primary, that’s what I need to find in my style.css file to change.

If you open your stylesheet in Appearance > Editor (or in a text editor), you can hit Command+F (or Control+F if you’re using a PC) to bring up a search box. By typing in “.nav-primary” I can find what I’m looking for quickly, though I may have to use the arrows to go through each result if that particular term is used more than once (and many of them are).

 

I’ll change that #333 to #017172 like I did in Inspector and save my stylesheet, then when I look at the front end of the site again without Inspector, I’ll see the teal nav menu instead of the gray one:

VOILA! I’VE JUST USED INSPECTOR TO FIND AND IMPLEMENT A CUSTOMIZATION TO MY GENESIS CHILD THEME IN A MATTER OF A FEW MINUTES.

A Few Notes About Using Inspector

DO NOT place your CSS changes at the bottom of your stylesheet. In some cases, you might get lucky, but usually this won’t work. Instead, you need to search for the element you changed in Inspector, find the existing rule, and alter it. (Or copy the existing rule, paste into Appearance > Custom CSS, and then alter it.) Otherwise, if you duplicate a rule at the bottom, the one higher up in the stylesheet will override it. Plus it’s easier to find things later if you put the rules in the right sections – Genesis stylesheets are very orderly and make things easy if you work with them instead of around them.

Sometimes changes won’t work when you think they should. If the CSS rule you’re editing in Inspector is overridden by another rule elsewhere in your stylesheet, your changes may not take effect. Likewise, if the element you choose isn’t specific enough, your changes can spread to other areas of the site as well.

It takes a bit of trial and error to get comfortable. Like anything else, using Inspector to customize your child theme takes practice and patience. It can be very frustrating to know what you want to do but not see it happen that way on the screen.

If all this sounds yucky and too technical, you don’t have to do it at all! If the thought of touching your theme’s stylesheet makes you want to throw up, never fear! Thanks to a new Genesis plugin called Design Palette Pro, you can easily change colors, fonts, and other elements of your site without ever using Chrome’s Inspector. I have tested this plugin extensively and it’s fantastic for people who just want an easy way to customize a Genesis child theme.