Support

Appearance, Upgrades

Custom Design »Editing CSS

Custom Design, which is a feature of the WordPress.com Premium and WordPress.com Business plans, comes with a CSS editor that you can use to customize the appearance of any WordPress.com theme. It works by allowing you to add CSS to override parts of the theme’s stylesheet bit by bit or start fresh by turning off the theme’s CSS completely and building a new design from scratch. You may not edit HTML or PHP code, but there is an amazing potential to what you can do with CSS-only edits.

To access the CSS editor, go to Appearance → Customize → CSS in your blog dashboard.

css-editor

Default Placeholder Comment

If you have never added CSS before or if you have recently changed themes, you will see a placeholder comment in the editor enclosed in /* and */ with a welcome message. The placeholder comment can be deleted and replaced with your custom CSS.

/* This is a CSS comment, and anything inside the asterisks will be ignored. */

↑ Table of Contents ↑

Content Width

This option should be used if you have modified the width of the primary content area using custom CSS. The “Content Width” setting is used as the default size for full-size images, videos, and some shortcode widths when they are inserted into your blog. Note that it will not affect the size of some images and videos you added before changing the setting, depending on how they were inserted, and you may have to re-insert some of theme after changing the setting.

↑ Table of Contents ↑

Theme's Original CSS

By default, the custom CSS you add to the CSS editor will be loaded after the theme’s original CSS which means that your rules can take precedence and override the theme’s styles. You can turn the theme’s original CSS off completely by clicking the “Don’t use the theme’s original CSS” option in the Appearance → Customize → CSS panel. This will allow you to use any WordPress.com theme as a blank canvas for designing with CSS. This is an advanced option and should only be used if you want to start over and design the 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 the recommended approach—then you can leave this option disabled.

If you are looking for where to find the theme’s original CSS to use it as a reference, the best thing to do is to use your browser tools. Most modern browsers have a web inspector built right in. You can right-click and select the “Inspect Element” option to see the HTML of the item you clicked on as well as all the CSS that applies to it. Two popular tools for viewing CSS are Firebug for Firefox and Chrome’s built-in Developer Tools.

To help you get started, you can take a look at a support page with some brief screencasts on How to Find Your Theme’s CSS using the web developer tools included with browsers.

↑ Table of Contents ↑

Include Custom CSS in the Mobile Theme

Checking this option will apply your custom CSS to the Mobile Theme if you have opted to use it in your Appearance → Mobile settings.

The mobile theme has a body class of “mobile-theme”, which you can use to write styles that target only mobile specifically. Here’s a simple example that uses the “mobile-theme” body class to give the mobile theme a red background:

body.mobile-theme {
background-color: #ff0000;
}

↑ Table of Contents ↑

Preprocessor

WordPress.com has support for CSS preprocessors LESS and Sass (SCSS Syntax). 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. You can select which syntax you would prefer to use at the bottom of the Appearance → Customize → CSS panel.

↑ Table of Contents ↑

Previewing and Saving

When editing CSS rules in the Appearance → Customize → CSS panel, 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 ↑

CSS Revisions

The latest 25 revisions of your CSS edits are saved and can by accessed using the CSS Revisions link at the top right of the Appearance → Customize → CSS panel. CSS is theme-specific, so all of your CSS is moved to a revision when you change themes. To review or restore past CSS, use the CSS Revisions link.

css-revisions

↑ Table of Contents ↑

Maintaining your Custom Header

We recommend that you not copy and paste the entire original stylesheet into the CSS editor. Rather, please use it as a reference, and add only your own changes into the CSS editor.

If you do choose to copy and paste the entire original stylesheet into the CSS Editor, 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’re lucky to have a really amazing community forum on CSS where some volunteers as well as our support team help out with CSS questions and to provide resources so you can do more CSS on your own.

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.

The Daily Post blog featured a great series of CSS articles you might like as a starting point:

Here are a few tips:

  • Use a CSS validator.
  • Take advantage of your browser’s developer tools. Under Firefox, install Firebug. For Internet Explorer, install the Developer Toolbar. Take a look at our introductory videos for the Developer Tools built into Firefox, Chrome, Safari and Internet Explorer to help get you started.

Tutorials

Still confused?

Contact support.

Not quite what you're looking for?

Get Help