Customize

Custom Design »Custom CSS

Table of Contents

Custom CSS

Custom CSS is part of the Customizer, and is a feature of the WordPress.com Premium, Business, and eCommerce plans. You can add custom CSS to your WordPress.com blog using the CSS Editor in My Sites → Design → Customize → CSS in your blog dashboard.

Note: For sites on our WordPress.com Business and eCommerce plans with plugins installed, the Custom CSS section can be found in My Sites → Design → Customize → Additional CSS in your blog dashboard.

CSS stands for Cascading Style Sheets. It is a markup language that controls the appearance of HTML elements on a web page. There is almost endless potential to what you can do with CSS to modify the design of a website, as evidenced by the very popular CSS Zen Garden project, a showcase of what can be done with only CSS to change the appearance of one single HTML file.

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

If you’re looking to get one of the many WordPress.com themes customized and you’re not interested in learning CSS yourself, we recommend hiring a designer to make the changes you need.


↑ Table of Contents ↑

CSS Help

Need CSS help? We can provide limited CSS support through live chat or email. Feel free to reach out and we’ll let you know if we can help with your CSS request. Otherwise, we can help point you in the right direction!

To learn how CSS works on WordPress.com, see Editing CSS. If you are new to CSS, try checking out a CSS tutorial such as HTML Dog’s CSS Beginner Tutorial first.

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 that could help:

Suggested CSS Tutorials

Suggested CSS Books

↑ Table of Contents ↑

Frequently Asked Questions

Does Custom CSS let me edit HTML? 

No. Custom CSS allows you to add or replace CSS for themes only; it does not give you access to change HTML markup or PHP code. You can turn any WordPress.com theme into a blank canvas by turning off the theme’s CSS in your custom CSS settings.

Does Custom CSS let me upload themes?

No. Uploading custom themes is supported on WordPress.com Business and eCommerce plans only. Read more about this here.

May I remove credit links such as ‘Blog at WordPress.com’, theme, font, or toolbar links? 

All WordPress.com users are required to maintain the Admin Bar (the dark bar that appears at the top of WordPress.com sites when logged in). Customers on WordPress.com Business and eCommerce plans can contact support to help remove the Admin Bar if required.

The footer credit can be hidden if WordPress.com Business or eCommerce is active on a site. Please do not use CSS to hide or alter the credits if you do not have either of these plans.

All WordPress.com users can choose among several options for the footer credit, from a minimalist WordPress.com logo to text options like “A WordPress.com Website” or “Powered by WordPress.com.” Please refer to this documentation for further information.

Modifying the style of the footer text (i.e. colors and font size) is fine as long as it’s still readable. Using CSS, you can also add content like a copyright notice to the existing footer.

Can I use Custom CSS to make minor visual changes to an existing theme?

Yes. This is the most popular option and the simplest to implement. If you just add small snippets of CSS for changes you’d like to make to an existing theme, those will be applied after the theme’s CSS is loaded and therefore override the theme CSS without requiring you to manage an entire separate set of CSS. This makes it possible to make minor changes quickly and easily with just a few lines of code in the CSS editor.

Can I use Custom CSS to make major changes to my blog’s layout?

Major changes are certainly possible with custom CSS, but how easy they are to make will depend on the theme and your CSS skill. Instead of adding your styles to the theme’s existing CSS, you can override it completely and start from scratch, essentially turning any WordPress.com theme into a blank canvas. Some themes are more flexible than others, and the best way to find out what is possible is to start experimenting.

Can I use CSS rules like @import and @font-face?

WordPress.com Premium currently does not allow loading outside files via CSS, but is possible on WordPress.com Business and eCommerce.

Can I use web fonts in CSS?

The fonts panel in My Sites → Design → Customize → Fonts allows you to choose a font pair. You are limited to those two web fonts on the front end when working with CSS. In addition, if WordPress.com Business or eCommerce is active, it’s possible to add additional fonts using 3rd party plugins.

Are my custom CSS styles used instead of my theme’s standard styles, or in addition to them?

It’s up to you—there are options for both! You can choose to add CSS incrementally to override the theme’s existing CSS (this is the most popular option) or you can start fresh without loading the theme’s original CSS at all. If you add to a theme’s existing CSS, the theme’s standard stylesheet will load first, then your custom CSS rules will be applied afterwards. Choose this option if you just want to make some minor adjustments to a theme, such as changing the appearance of text or background color. If you start from scratch, 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?

Yes. You can opt to apply your Custom CSS to mobile themes, our default theme for mobile browsers. To enable this option, go to My Sites → Design → Customize → CSS and look for the settings below the CSS Editor.  Check the box next to “Include this CSS in the Mobile Theme.” Your styles will now apply to Minileven. The Minileven theme 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 My Sites → Design → Customize → CSS, remove all CSS code from the editor, and click Save.

What happens if I unsubscribe from my WordPress.com Premium, Business, or eCommerce plan?

All upgrades on WordPress.com are renewed yearly. Should you choose to cancel your subscription, your custom CSS will still be saved but it will no longer be applied to your site for others to see. If you would like them re-applied to your site you can repurchase your upgrade and the styles will be re-applied automatically provided you haven’t changed themes. If you have changed themes, you will find your past CSS in the CSS Revisions link located above the editor in the CSS panel.


Still confused?

Contact support.

Not quite what you're looking for?

Get Help