Support

Appearance, Upgrades

Custom Design » Editing CSS

Once you purchase the Custom Design upgrade, it’s very easy to get started with editing your blog’s appearance. To begin, simply go to Appearance -> Custom Design in your blog’s dashboard.

Then click on the CSS tab:

The CSS Editor will then load:

Customize CSS

If this is your first visit to the CSS Editor (or you have not yet added any custom CSS code), you will see a placeholder message in the editing window (enclosed in /* and */) . Please review the message, as it contains some important information about the upgrade. The message begins with…

/* Welcome to Custom CSS!

CSS (Cascading Style Sheets) is a kind of code that tells the browser how to render a web page. You may delete these comments and get started with your customizations.

When you’re ready to begin adding your custom CSS code, simply remove the message to get started.

If you’d like to view the theme’s existing CSS in order to help understand what you need to change to achieve a certain result, you can use a tool like Firebug (for Firefox), or Chrome’s built-in Developer Tools.

Editing Options

You have a few options when editing your stylesheet:

  • Content Width: This option should be used if you modify the width of the primary content area using custom CSS. WordPress.com will use the “Content Width” to determine the default size for full-size images, videos, and some shortcode widths when they are inserted into your blog. This option will not change the width of existing images or videos that have already been embedded. Also, this option will not change the width of the blog. Note: This option will only work with blogs that have the Custom Design upgrade.
  • Don’t use the theme’s original CSS: If this option is enabled, then the theme’s original CSS will be deactivated, and only your custom CSS rules will be applied to the theme. This is an advanced option and should only be used if you want to start adding CSS for your theme from scratch. If you would like to build on top of the existing CSS rules — which is the most common and recommended approach — then you can leave this option disabled.
  • Use this CSS in the mobile theme: If this option is enabled, then your custom CSS rules will also be applied to the Mobile Theme that is displayed when visitors come to your site from a mobile device.
  • Preprocessor: This is an advanced option for users who wish to take advantage of CSS extensions like variables and mixins. See the LESS and Sass websites for more information.

↑ Table of Contents ↑

Previewing and Saving

When editing CSS rules in the Customizer, your changes will automatically be applied to the preview window, but they won’t actually be saved until you click the Save button.

↑ Table of Contents ↑

Maintaining your Custom Header

If you copy and paste the entire original stylesheet into the CSS Editor (which many users will do), you will lose the custom header image that you uploaded previously from Appearance -> Header. This is due to the fact that when you copy the entire div which contains the header image directly, the image URL is no longer valid. As such, you will need to customize the header div so that it includes the updated URL (you can get this from your Media Library). Here is an example (using the Benevolence theme):

#masthead {
position: relative;
top: 0px;
background: url('images/masthead.jpg');
width: 700px;
height: 225px;
margin: 0px;
margin-top: 0px;
}

You would then need to update this to:

#masthead {
position: relative;
top: 0px;
background: url('http://you.files.wordpress.com/2009/06/my_bg_img.png');
width: 700px;
height: 225px;
margin: 0px;
margin-top: 0px;
}

Note: The div identifier will differ between themes. The above example uses the Benevolence theme, which identifies #masthead as its header area.

↑ Table of Contents ↑

CSS Help

Need CSS help? We’ve got you covered! Our support team can help you in the CSS Customization forum.

If you’re just getting started, there will be a learning curve, but CSS is a very valuable and reusable skill. There are a TON of great resources on the web to get you started with learning more about HTML and CSS.

Here are a few tips we live by:

  • Develop your stylesheets offline.
  • Use a CSS validator.
  • Take advantage of your browser’s developer tools. Under Firefox, install Firebug. For Internet Explorer, install the Developer Toolbar.

Tutorials

Books — if you’re old-school

Still confused?

Contact support.