The Custom CSS Editor allows you to customize the appearance of your theme without the need to create a child theme or worry about theme updates overwriting your customizations.
Adding Custom CSS
First, activate the Custom CSS module on the Jetpack dashboard, and then you can access the CSS editor via Appearance → Edit CSS.
If this is your first visit to the CSS Editor (or you have not yet added any custom CSS code), you will see a placeholder message in the editing window. Please review the message, as it contains some important information about the upgrade. The message says:
Welcome to Custom CSS!
CSS (Cascading Style Sheets) is a kind of code that tells the browser how to render a web page. You may delete these comments and get started with your customizations.
By default, your stylesheet will be loaded after the theme stylesheets, which means that your rules can take precedence and override the theme CSS rules. Just write here what you want to change, you don’t need to copy all your theme’s stylesheet content.
When you’re ready to begin adding your custom CSS code, simply remove the message to get started or add your CSS after it.
You have a few options when editing your stylesheet, and these can be found directly on the right of the editing window:
- Preprocessor: the CSS editor 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.
- Add-on: when making changes to your site’s design, you can choose to build on the existing theme stylesheet (Add-on CSS), or replace the existing theme’s stylesheet with your own CSS. This second option should be used if you want to start with only the theme’s HTML structure and recreate all of its CSS from scratch. Refer to the theme’s original stylesheet for reference, and make sure you have all rules/styles accounted for. If you are missing certain elements, the public view of the blog may appear skewed. Only the CSS code in the editing window will be applied to your blog with this option.
- Mobile Compatible: if you use Jetpack’s Mobile Theme, you might want your CSS changes to be applied to the mobile theme as well.
- 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 them after changing the setting.
Previewing and Saving
When editing your CSS, it is a very good idea to always preview your changes before actually applying them – regardless of your skill level. After making some changes to your CSS, you can click the Preview button.
A new browser window/tab will open allowing you to view your blog as if the custom CSS code were applied. You will see a message at the top of your blog, directly underneath your black admin bar:
If you like what you see and wish to save the changes, go back to your open CSS Editor window and click the Save Stylesheet button.
The CSS Revisions module shows prior versions of your custom CSS. Each time you click Save Stylesheet a revision is saved. Jetpack will store the last 25 CSS revisions made to any theme on your blog. The CSS revisions allow you to look back at the recent changes and revert to an earlier version if you need to.
To compare CSS Revisions, select a revision date in the CSS Revisions section under the Editor. On the next screen, the revision you selected will be shown side-by-side with the current version highlighting the differences between the two. A red highlight indicates something was removed while a green highlight indicates something that was added.
To restore a previous version of your custom CSS, click Restore for that date and the custom CSS is reverted back.