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 (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 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 theme 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 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.
Jetpack של וורדפרס.קום 