Appearance, Upgrades

Custom Design »How to Add Custom CSS

Advanced CSS controls

Media 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 when they are inserted into your blog. Note that it will not affect the size of some images you added before changing the setting, depending on how they were inserted, and you may have to re-insert some of them after changing the setting.

↑ Table of Contents ↑

Start Fresh

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 My Sites → 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 ↑

Custom CSS in the Mobile Theme

Checking the On Mobile option will apply your custom CSS to the Mobile Theme if you have opted to use it in your Appearance → Mobile settings in your WP-Admin dashboard.

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 My Sites → Customize → CSS panel.

Pages: 1 2 View All

Still confused?

Contact support.

Not quite what you're looking for?

Get Help