Getting Started with CSS Hero v2

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 Walkthrough

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:

  1. Hovering the page you will see that a blue rectangle will conveniently highlight editable elements.
  2. 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.
  3. Generally, you might want to choose the upper selector of the list. Click it.
  4. 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

CSS Hero in iPad preview mode

CSS Hero in iPad preview mode

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 History Log of your saved actions in preview mode

The History Log of your saved actions in preview mode

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


Manage CSS Hero options here, includes Show Generated CSS, Clear CSS Hero Undo History and Reset to Theme default.

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.

CSS Hero is the definitive plugin to customize your WordPress themes with an easy and intuitive WYSIWYG interface.


Become a CSS Hero affiliate and earn 40% on each sale right now. Spread the CSS Hero word and share the wealth with us!
Start Earning →

Follow the Hero