First, upload and activate the plugin. Once the plugin is activated you’ll see two new menu items added to the Appearance menu:
- Custom CSS
Click one of them (it doesn’t matter which) and you’ll see the field to enter your license key. Enter the key and click Continue. It will take you to the screen for the one you clicked on in the menu.
Each of those menu items takes you to a code editor. This is the code editor for Custom CSS, but they both look the same except the Custom CSS has a button to add to the visual editor and a button to start the live view. The code editor includes syntax highlighting, automatic indenting, and line numbering.
The pro version also includes namable tabs. These are virtual files, used to improve organization, that combine into a single file when you publish them. You’ll get a single CSS file and a single JS file. Click the buttons in the upper right corner of the editor to create a new tab.
The Save and Publish buttons let you save or publish the tab you’re working on or you can select Save All or Publish All for all tabs. Saved files let you preview the results before they’re published. Anyone that’s logged in with the proper permissions can also see the results.
The files are combined and delivered from the server instead of the database. You can also choose to minify your files.
When you save your code you get a revision history, so you can easily get back to a previous version of the code. When you save or publish the code it uses AJAX, so the page doesn’t reload. This keeps your place in the code.
You can also export and import your files. Click the Download button to save the code as a file. You can upload the file using the Choose File and Upload buttons. This will save a lot of time if you use the same or similar settings on other websites.
The Expand Editor button removes the WordPress menu and the buttons to the right of the editor window, allowing the editor to use the full width of the screen so you can code without distractions. Click Contract Editor to get the menus back.
Custom CSS’s live view lets you see the changes on the frontend as you type them. It also supports SCSS so you can use variable and nesting.
Here’s the example post before I make any changes.
I’ve added a new tab and renamed it Text (not the best idea for naming conventions, to be honest). I then added CSS to change the header and body text. I’ve made the h1 header text brown and center-aligned it. I’ve changed the body text to Verdana, made it 20 pixels, and changed the color to gray.
I selected Live View so I could see the results. This opened the website in a new tab. I could navigate to any page or post and see the results. I can see the results immediately.
I changed the text to green and the change was made instantly. This live view is great for seeing the changes before publishing them. I’ve always liked the ability to experiment without anyone else seeing it.
It’s also compatible with Sass CSS. Here’s an example from the Sass website. It automatically compiles to standard CSS when you save it or when you view it live. It includes an SCSS tab when you open the editor. You can add more SCSS tabs by clicking on + SCSS in the right upper corner of the editor. You can’t use the regular CSS tab for SCSS. It has to have an SCSS tab.
The live preview works with SCSS too. It compiles to standard CSS with you view it.
It also includes revisions. I can click on any revision and to see it, use it, or delete it. You can also delete them all at the same time by clicking Delete Draft Revisions.
The license is valid for one year from date of purchase and includes free updates and support. You can still use the plugin after the license expires, but you won’t be able to re-activate it if it’s deactivated from a website.