OUTDATED CONTENT NOTICE
This manual refers to CSS Hero v2.
If you are looking for the v3 manual, head over here.
Editing a theme with CSS Hero is very easy. Within minutes you will discover a new world of creative possibilities worth exploring.
Please mind that CSSHero can edit out of the box, zero configuration necessary, this list of compatible themes. We recommend starting out your experience with CSS Hero using one of those!
If you are using another [unsupported] WordPress Theme, or maybe your own custom Theme, a simple quick configuration is needed; you should definitely get started with the quick configurator tool.
Moreover, an experimental, beta feature, allows for unsupported themes some less precise but automatic configuration attempting to recognize the Theme selectors from the Theme’s stylesheet: discover Rocket mode.
For Developers: If you are coding your own WordPress theme and want to customize at it’s best the interaction between CSSHero and your theme, you can visit the developer knowledge base for more details. It’s really easy and an explanatory video is provided.
Video courtesy of @wpbeginner
Starting CSSHero – The Lightning Bolt Icon
After installing the CSSHero WordPress Plugin, on each public page of your site you will see a blue Lightning Bolt icon on the top right corner. This icon is shown only to site administrators and looks like this:
Click the icon to start loading the CSS Hero editor.
Hang on a few seconds, Hero’s control bar will show up on the right side of your screen:
The Main Toolbar
This little toolbar will probably become your best friend as it will hopefully guide you in your editing experience, let’s dive into each button’s functionality:
This is the main editor trigger, by firing this icon you will be asked to click the element you want to edit on the page. You can find more details here or grab the basics below:
- Hovering the page you will see that a blue rectangle will conveniently highlight editable elements.
- After clicking an element on the page, a list of possible selector targets will appear in the CSSHero panel on the right side of your screen.
- Generally, you might want to choose the upper selector of the list. Click it.
- The Properties Panel will be shown – get ready for some theme editing fun. Please keep reading this article to understand the plugin logic before getting into the wild.
Launches the CSS Hero Inspector Plugin if available. Read more about the Inspector here.
Change the View – The right Responsive Workflow for your WordPress Theme
This is the device mode icon, here you can switch between desktop, tablet and mobile device preview mode to have a instant glance of how your work will display on handheld devices. Please note that edits committed in device mode will apply only to the current device mode. You can read more on this page
Undo/Redo – History
History: here you’ll be able to manage and browse your edits history for the current theme, a detailed list of date\time based history of your edits will be stored here. Previewing and restoring a previous step of your work is now possible. To preview a step history simply click on the eye icon and you’ll enter preview mode, while in preview mode the blue trigger will turn green and no edits will be possible. To edit a previous history step you’ll have to activate it. You can read more on this page
The Preset System – A Universe from a single WordPress Theme
A preset is a set of options saved and stored. You can store unlimited presets for each theme, let’s say that you want to run an A\B test or simply want to save a snapshot of your work, now you just have to store it as preset, Hero will store it and reactivating it will be matter of one simple click. Keep snapshots of your work always at your fingertips!
You can read more on this page
Share CSS Hero
Consider showing us some love and spreading the word, we’d truly appreciate that and may help other people saving time and money.
Full Screen Mode
Full screen mode it’s quite self-explanatory, however this allows you to enter in fullscreen editing mode, we consider this a distraction-free mode and we did almost all the site you’re browsing now with this feature on. You can read more on this page
Closing the Interface, Hero takes a break
Shut down the editor and get back to normal browsing.