Support

Appearance, Upgrades

Custom Design » Custom CSS

Custom CSS is part of the Custom Design upgrade — $30.00 per blog, per year — and it allows you to customize the appearance of your blog by editing your theme’s CSS (Cascading Style Sheet). Custom CSS allows you to change fonts, colors, borders, backgrounds, and even the layout of your blog.

You can see some example sites using the Custom Design upgrade to edit their CSS in our post on Infinite Theme Styles with Custom CSS.

Making the best of this feature requires some experience with CSS and HTML, or at least a willingness to learn. See the CSS Help section further down this page for more information.

If you’re looking for a WordPress-savvy web design firm, check out CodePoet, a directory of consultants who specialize in building beautiful and efficient WordPress sites.

Frequently Asked Questions

Does the Custom Design upgrade let me edit HTML?
No. The Custom Design upgrade allows you to edit CSS only. You can change the appearance of a theme, but not its HTML markup, PHP code, or content. You can customize the stylesheet of any theme available on WordPress.com. Some themes, like the plain but versatile Sandbox and Toolbox, are blank canvases waiting for your custom CSS and images.

Does the Custom Design upgrade let me upload themes?
No. Uploading custom themes is not supported on WordPress.com. Read more about this here.

Can I use Custom CSS with the Custom Design upgrade to make minor visual changes to an existing theme?
Yes. You are only limited by the abilities of CSS and your own CSS skills. You can choose to add your CSS to an existing theme, without removing the theme’s normal styles. This makes it possible to make minor changes quickly and easily, with just a few lines of CSS.

Can I use Custom CSS with the Custom Design upgrade to make major changes to my blog’s layout?
It depends. Instead of adding your styles to the theme’s existing CSS, you can override it completely and start from scratch. We have over a hundred themes to choose from, each with different HTML structures and properties. Sandbox and Twenty Ten are particularly flexible, and can be rearranged into many types of 1-, 2-, and 3-column layouts. Again, you will be limited only by the abilities of CSS and your own CSS skills.

Can I use CSS rules like @import and @font-face?
WordPress.com currently does not allow loading outside files via CSS.

I’m not sure if the Custom Design upgrade is for me. Can I try before I buy?
Yes! Go to Appearance → Custom Design in your dashboard and click the CSS tab. You can write or paste your own CSS styles into the textbox provided, and use the Preview button to see how it will look with your current theme. The CSS changes you try with the Preview function will only be visible to you, so you can test and edit to your heart’s content.

We highly recommend using the Preview function to try your stylesheet changes and CSS techniques before deciding whether or not to upgrade.

If you’d like to preview your custom CSS with a different theme, but without changing the appearance of your live blog, you can register a second blog and use it for testing. Just make sure you choose the right blog when you decide to upgrade!

I purchased the Custom Design upgrade and changed my mind. Can I get a refund?
Yes. Please check our refund policy on upgrades.

Are my custom CSS styles used instead of my theme’s standard styles, or in addition to them?
It’s up to you – you can choose how to load your custom CSS on the Edit CSS page:

  1. Add to existing CSS – this will load the theme’s standard stylesheet first, then apply your custom CSS rules afterwards. Choose this option if you just want to make some minor adjustments to a theme, such as changing the text or background color.
  2. Start from scratch and just use this – the theme’s standard stylesheet won’t be loaded at all. Choose this option if you want to start from scratch and design everything yourself.

Can I apply my CSS to the mobile theme, Minileven?
Yes. You can opt to apply your Custom CSS to Minileven, our default theme for mobile browsers. To enable this option, locate the Custom CSS Settings box beneath the CSS Editor. Next, check the box next to  “Apply this CSS to the Mobile Theme”. Your styles will now apply to Minileven. Minileven has a body class of “mobile-theme”, which you can use to write styles that target Minileven specifically. Here’s a simple example that uses the “mobile-theme” body class to give Minileven a red background:

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

Can I upload images for use with my CSS?
Yes. You can upload an image to your Media Library, then refer to it by its direct URL from within your CSS stylesheet. Here’s a simple example of how to use a background image in your stylesheet:

div#content {
background-image: url('http://example.files.wordpress.com/1999/09/example.jpg');
}

I messed up. How can I reset my theme’s styles?

Go to Appearance → Custom Design, click on the CSS tab, remove all CSS code from the Editor, and click Save Stylesheet.

What happens if I unsubscribe from my Custom Custom Design upgrade?
All upgrades on WordPress.com are renewed yearly. Should you choose to cancel your subscription, your custom CSS will no longer be applied to your site. We’ll keep your last saved changes around, but if you would like them applied to your site you will need to resubscribe.

↑ Table of Contents ↑

CSS Help

Need CSS help? We’ve got you covered! Our support team can help you in the CSS Customization forum and you can get familiar with CSS via our CSS Basics page.

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.