Custom CSS

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.

To enable this feature, visit  Jetpack → Settings → Writing in your site’s dashboard. Scroll down to the Theme Enhancements section and toggle on the Enhance CSS customization panel option.

Starting with WordPress 4.7, you can now add custom CSS to your own theme directly from the Customizer. Just choose the Additional CSS tab when customizing your current theme to get started!

Jetpack’s Custom CSS feature allows you to add more features to that CSS editor, as explained below.

Adding Custom CSS

First, access the CSS editor via Appearance → Customize → Additional 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 helpful tips to help you get started.

When you’re ready to begin adding your custom CSS code, simply remove the message to get started or add your CSS after it.

Editing Options

You have a few options when editing your stylesheet, and these can be found directly below the editor:

• 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’ll be adding your customizations on top of the existing theme stylesheet by default. You can, however, choose to replace the existing theme’s stylesheet with your own CSS thanks to the Start Fresh option. 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.
• Media width: this option should be used if you have modified the width of the primary content area using custom CSS. The “Media 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.

Previewing and Saving

When editing your CSS, you’ll be able to preview your changes before actually saving them – regardless of your skill level.

If you like what you see and wish to save the changes, click the Save and Publish button at the top of the customizer window.

CSS History

CSS Revisions show prior versions of your custom CSS. Each time you save your changes, a revision is saved. Jetpack will store the last 25 CSS revisions made to any theme on your blog.

To view these revisions, you can click See Full History at the bottom of the Additional CSS window in the Customizer.

That will open the full custom CSS revisions history for the selected theme.

To compare CSS Revisions, select a revision date using the slider at the top of the Revisions 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.

Notes

Jetpack will include the custom CSS as an in-line stylesheet inside the document by default. However, if the custom CSS exceeds 2000 characters in length, Jetpack will generate an external stylesheet and link to it.

Privacy Information

This feature is de-activated by default. It can be activated by following the steps at the top of this page.