Custom CSS with Jetpack for WordPress Website Design

The Jetpack plugin now has a Custom CSS module for you to use to edit your WordPress Website theme. This means that you can customize your website design very easily, and more importantly, safely. Any changes you make here are easy to remove, and your default theme is still intact. Get started with the Jetpack plugin if you don’t have it installed.

Activate the Jetpack Custom CSS Module

In the admin sidebar, click Jetpack. Then scroll down through the Jetpack modules until you see Custom CSS. If you see a blue “Activate” button, click on it to activate the module. If you see the “Learn More,” and “Configure” buttons, this module is already activated. See the image above.

Let’s get started!

Add Custom CSS

To get to the “Edit CSS” area for your theme, you can click on Appearance > Edit CSS. You will be at a screen that looks like this:

Now let’s use the editor to add some custom CSS for our blog and post titles, and also customize the link colors to match the custom color we chose for our Google Font. We want to have all of our custom CSS in the Jetpack custom CSS Stylesheet Editor. Then we can remove the custom code from the WP Google Fonts plugin. The theme used is the Twenty Ten theme.

Add Custom Title Fonts

First copy and paste the custom font code that you used in WP Google Fonts plugin into the Jetpack custom CSS Stylesheet Editor. The editor will reorganize the code, but it’s still the same. There should be no change to your website.

#site-title a,
.entry-title,
.entry-title a,
.widget-title,
#site-description {
    font-family: 'Josefin Sans', sans-serif;
    color: #f680bf !important;
}

Add Custom Link Colors

The original color of the links in Twenty Ten is a blue color (#0066cc) that changes to a red (#ff4b33) on hover.
For the theme we are creating, we can make pink (#f680bf) links that hover to a light gray (#888888). So we add this code to the Edit CSS section – CSS Stylesheet Editor. Add it above the font code. (Note that #888 is shorthand for #888888.)

a:link, a:visited {
    color: #f680bf;
}
a:active, a:hover {
    color: #888;
}

Now all the links are pink, but the links in the post meta (at the top and bottom of each post) in twenty Ten were gray (#888888) and changed to red (#ff4b33) on hover. So let’s change them back to gray (#888888) and hover to our pink (#f680bf) color. Add this code below the link code, but above the title font code.

.entry-meta a,
.entry-utility a {
    color: #888;
}
.entry-meta a:hover,
.entry-utility a:hover {
    color: #f680bf;
}

We can also have the pink blog and post titles hover to gray (#888888). Add this at the bottom below the title font code.

#site-title a:hover,
.entry-title a:hover {
    color:#888;
}

Add a Sans-serif Body Font

A sans-serif body font would probably be nicer with the Josefin Sans titles, than the Georgia serif body font that Twenty Ten uses. Let’s just use the same sans-serif fonts that were used in the Twenty Ten theme for the titles. Add this at the very top of the code.

body {
    font-family:"Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}

This is what the CSS Stylesheet Editor looks like now.

Again this is all of the custom CSS we have added today. Note the order of the code.

body {
    font-family:"Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
a:link,a:visited {
    color:#f680bf;
}
a:active,a:hover {
    color:#888;
}
.entry-meta a,
.entry-utility a {
    color:#888;
}
.entry-meta a:hover,
.entry-utility a:hover {
    color:#f680bf;
}
#site-title a,
.entry-title,
.entry-title a,
.widget-title,
#site-description {
    font-family:'Josefin Sans', sans-serif;
    color:#f680bf!important;
}
#site-title a:hover,
.entry-title a:hover {
    color:#888!important;
}

Now you can go to Settings > Google Fonts, and remove the Custom CSS that you had there, and save it. You still need to have the Josefin Sans font in the drop down and at least one (or all three) of the h1, h2, h3 tags checked, or the Google font won’t be added to the theme for you to use in your own Custom CSS.

Next time we’ll look at changing the color of the navigation menu.

[Edited 12-31-14 to add:]

Add Custom Background Images

If you need to add a background image using your Jetpack CSS module, my friend, Deborah, shows you how to add the image URLs, so you won’t have a missing image.