As a moderator on the StudioPress support forums, I see a lot of questions from Genesis users each week. More often than not, those questions relate to making various changes to Genesis child themes – changing colors, altering padding, and other customizations affecting the way the themes look.
To be honest, sometimes it’s a little frustrating to see those questions because it’s so easy (in my mind, anyway) to find the answers. I found myself skipping over CSS threads in the forums because I kept thinking, Quit being lazy! You can take 30 seconds to figure that out for yourself!
Then something interesting happened.
I’ve been doing some training work with a designer who wanted to learn Genesis, and I realized he didn’t know how to use a tool like Inspector in Chrome (or Firebug in Firefox) to find CSS rules and make changes. When I put together a quick screencast for him, he said it completely changed the way he would approach design projects from this point forward.
Now, if a full-time designer doesn’t know how to use those tools, how reasonable is it to expect the average blogger or web user to know how? It was time to stop being a jerk and put together a tutorial.
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. Firebug is very similar, but since I’m a diehard Chrome fan, Inspector is what I use for my own workflow.
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. You can click any image to view it larger.
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 stylesheet 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 Couple of 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. 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.
Trying Inspector first will make it easier for you to get help. When I know a forum member hasn’t even tried to make a change themselves, I’m less likely to spend my time helping that person. But if they say, “I used Inspector in Chrome to change this but it didn’t work,” that tells me the person has made an effort and just couldn’t find exactly what they were looking for.
So what tools do you use to customize your site? Are you a Firebug or Inspector person, or do you prefer something else? I’d love to hear what works best for you!