• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Amethyst Website Design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

WordPress Tutorials CSS Styles, Widgets & Plugins

Custom CSS with Jetpack for WordPress Website Design

October 2, 2012 Updated on December 13, 2018 Marcy Diaz

Share this post:

TwitterFacebookPinterestLinkedInEmail

Jetpack Settings Page Activate Custom CSS

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:

Jetpack Custom CSS Stylesheet Editor

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.Jetpack Custom CSS for Titles and Links

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.

Share this post:

TwitterFacebookPinterestLinkedInEmail

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

Tell me about your website project for a personalized solution!

Contact Marcy »

___

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

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Comments

  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.

    Reply
  2. Marcy Diaz says

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

    Reply
  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.

    Reply
    • 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!)

      Reply
  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.

    Reply
    • 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;
      }

      Reply

Leave a Reply Cancel reply

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

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design
PO Box 94782
Phoenix AZ 85070

Phone: 602.759.0501
Email:

Contact Form
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework

This site uses cookies for the best browsing experience. By continuing to use this site, you accept our Cookie Policy »OK, got it!