Forgot password? Sign Up

Support

Appearance

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.

Custom Design in Menu

Next, you will see the Custom Design welcome screen.

Custom Design Welcome Screen

To go directly to the CSS Editor, click either the “Try it for free” button to the right of the “Custom CSS” header, or the “CSS” tab:

Custom CSS

The CSS Editor will then load:

CSS Editor

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!

If you are familiar with CSS or you have a stylesheet ready to paste, you may delete these comments and get started…

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

Editing Options

You have a few options when editing your stylesheet, and these can be found directly under the editing window:

edit-css-newoptions

  • Add this to the [your current theme] theme’s CSS stylesheet - should be used to build on the existing theme stylesheet. You need to learn how to override the styles in the existing stylesheet to make any changes. Click on the view original stylesheet link to view all CSS code for your current theme.
  • Start from scratch and just use this – should be used if you want to start with only the theme’s HTML structure and recreate all of its CSS from scratch. Refer to the theme’s original stylesheet for reference, and make sure you have all rules/styles accounted for. If you are missing certain elements, the public view of the blog may appear skewed. Only the CSS code in the editing window will be applied to your blog with this option.

↑ Table of Contents ↑

Limited Width

edit-css-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 “limit width” to determine the default size for full-size images, videos, and some shortcode widths when they are inserted into your blog. Note that 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.

↑ Table of Contents ↑

Previewing and Saving

When editing your CSS, it is a very good idea to always preview your changes before actually applying them – regardless of your skill level. After making some changes to your CSS, you can click the Preview button.

Preview Stylesheet

A new browser window/tab will open allowing you to view your blog as if the custom CSS code were applied. You will see a message at the top of your blog, directly underneath your gray admin bar:

edit-css-preview-msg

If you like what you see and wish to save the changes, go back to your open Appearance -> Edit CSS window and click the Save Stylesheet button.

Save Stylesheet

If you have not purchased the Custom Design upgrade, you are still able to edit your CSS code; however, you may only preview the changes. The ‘Save Stylesheet’ option is only available to users who have purchased the upgrade.

↑ Table of Contents ↑

CSS Revisions

The CSS Revisions module shows any backup copies of your custom CSS. Each time you click Save Stylesheet a revision is saved. WordPress.com will store the last 25 revisions for each post on your blog. The CSS revisions allow you to look back at the recent changes and revert to an earlier version if you need to.

CSS Revisions

To compare CSS Revisions, select a revision date in the CSS Revisions section under the Editor. Select another date in the revisions list, click Compare Revisions, and you can check out the two versions of your CSS side by side, with changes clearly highlighted. To restore a previous version of your custom CSS, click Restore for that date and the custom CSS is reverted back.

revision-diff-cropped

↑ 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

Last modified: December 28, 2011

Still confused?

Contact support.

Follow

Get every new post delivered to your Inbox.

Join 24,683 other followers