Custom CSS with Jetpack for WordPress Website Design

Jetpack Settings Page Activate Custom CSS

Note: You no longer need the Jetpack plugin to use Custom CSS. It’s now included in the WordPress Customizer.

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 “Additional CSS” area for your theme, you can click on Appearance > > Customize > Additional CSS. You will be at a screen that looks like this:

Appearance > Customize > Additional CSS

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;
}
additional css added

This is part of what the Additional CSS looks like now. Be sure to click the blue Publish button at the top to save the CSS.

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.

Google Fonts with No 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.

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


Comments

7 responses to “Custom CSS with Jetpack for WordPress Website Design”

  1. Steve V says:

    The Jetpack CSS module is a good way to edit the look and feel of your template without the dangers of editing your CSS files and messing up what your site looks like.

  2. Marcy Diaz says:

    Yes, the Jetpack CSS editor works really well for theme customizations!

  3. M.M. Justus says:

    I have a couple of questions for you. I realize this post is old, but maybe you’re still monitoring it?

    Anyway. I am using JetPack’s contact form on my website, but the button is large, traffic cone orange, and says “submit” on it. Is there *any* easy way to change the color and the wording? Understand that CSS terrifies me, and I would go a *long* way to avoid changing the CSS manually.

    • Marcy Diaz says:

      Thanks for stopping by. The orange button is styled from the Twenty Thirteen theme; I think that’s what you’re using. And you will need to edit the CSS to style your button differently. You should be able to change the text of the button in the Jetpack form. (Well, it looks like you have a green button now; that’s great!)

  4. Succhha says:

    Hi Marcy , I am using a free wordress template , named Hueman and want to customize the Jetpack email subscription widget { Subscribe to Blog via Email } . Can you please temme the css codes to modify the Placeholder and Subscribe button ? Thanks in Advance.

    • Marcy Diaz says:

      Thanks for stopping by. I haven’t written a blog post on styling Jetpack Subscriptions, mostly because it usually looks nice just as it is. It will pick up the styles in the theme pretty well. When I do style it, this is all I ever look at:
      .jetpack_subscription_widget {
      background-color: #444;
      padding: 30px;
      }
      .jetpack_subscription_widget #subscribe-email input[type="email"] {
      padding: 12px 16px;
      }
      .jetpack_subscription_widget input[type="submit"] {
      margin: 0 !important;
      }

Leave a Reply

Your email address will not be published. Required fields are marked *