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 (enclosed in /* and */) . Please review the message, as it contains some important information about the upgrade. The message begins with…
/* 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.
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 under the editing window:
- Add my CSS to [your current theme] CSS stylesheet - should be used to build on the existing theme stylesheet. You need to learn how to override the styles in the existing stylesheet to make any changes. Click on the view original stylesheet link to view all CSS code for your current theme.
- Don’t use [your current theme] CSS, and replace everything with my own CSS. – 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.
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 gray 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.
CSS Revisions
The CSS Revisions module shows any backup copies of your custom CSS. Each time you click Save Stylesheet a revision is saved. Jetpack will store the last 25 revisions for each post 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. Select another date in the revisions list, click Compare Revisions, and you can check out the two versions of your CSS side by side, with changes clearly highlighted.
To restore a previous version of your custom CSS, click Restore for that date and the custom CSS is reverted back.
