Appearance, Upgrades

Custom Design »How to Add Custom CSS

You can use the CSS editor to customize the appearance of any site. It works by allowing you to add your own CSS styles, which allows you to override the default styles of your Theme. To access the CSS editor, first launch your site customizer then click on the CSS tab to access the CSS editor.

custom css

Note: you must have either Premium or Business active on your site to be able to add custom CSS to your site

Default Placeholder Comment

If you have never added CSS before or if you have recently changed themes, you will see a placeholder comment shown below.

Welcome to Custom CSS!

To learn how this works, see

The placeholder comment can be deleted and replaced with your custom CSS or left in place; it does not affect the code you add below

↑ Table of Contents ↑

Previewing and Saving

When editing CSS rules in the site customizer CSS panel, your changes will automatically be applied to the preview window, but they won’t actually be saved until you click the Save & Publish 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 CSS panel.

↑ Table of Contents ↑

What if I change themes?

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.

↑ 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.


See next page for advanced CSS controls

Pages: 1 2 View All

Still confused?

Contact support.

Not quite what you're looking for?

Get Help