Modifying Theme Design with Custom CSS

There are a lot of times when you’ll want to customize one of our WordPress themes to make it suit your brand or personal style. Making small changes is easy, especially with the custom CSS editor that comes with all our premium themes.

It helps if you’re familiar with CSS, but you’ll be amazed at how much you can do without knowing the first thing about coding.

For this guide, I’m going to use Google Chrome. You can use Firefox with the Firebug extension, but I wont cover that here.

If you haven’t upgraded your theme to the premium version, you’ll need to create a child theme or use Jetpack to make CSS changes.

Open Chrome and navigate to your site. Chrome has an incredible set of web development tools built in. Navigate to View > Developer > Developer Tools from Chrome’s main menu. Make sure you have the Elements tab selected.

Lets say we want to edit the call to action button on the Pitch home page. We’d like to change its background color. The first thing we need to find out is what CSS selector Pitch uses to specify the background color so we can override it in our custom CSS.

For this, we’ll use the inspector tool. Click on the magnifying glass icon in the bottom corner of the Developer Tools.

Hovering over an element now shows you information about that element, and clicking, locks that information in place. So click on the element you want to edit.

The Developer Tool gives you the CSS that Pitch uses to specify the elements visual style under the heading Matched CSS Rules.

This is the CSS you’ll see in that block. Don’t worry, it’s not as scary as it looks.

#call-to-action a {
  position: absolute;
  top: 50%;
  margin-top: -17px;
  right: 25px;
  display: block;
  background: #474747;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: white;
  text-decoration: none;
  text-shadow: 0 1px 0 black;
  font: italic 12px 'Droid Serif', serif;
  padding: 10px 40px;
}

Pitch uses the selector #call-to-action a and the property background: #474747; to specify the background color of the call to action button. #474747 is just the hex representation of a color. Here’s a color picker to get hex codes.

Now, in your WordPress admin, navigate to Appearance > Custom CSS (or open up the style.css of your child theme if you’re using one of our free themes). We want to overwrite the background color specified by the call to action button selector, so we’re going to create our own properties for the #call-to-action a selector. Here’s the code we’ll use.

#call-to-action a {
  background: #333333;
}

This code says; for the element #call-to-action a (our CTA button), change the background color to #333333 (a darker shade of grey). Click Save, and your changes will go live.

That’s all there is to changing the look and feel of elements. You can experiment with specifying your own properties by modifying the ones you see in the Matched CSS Rules.