Meet CSS Hero v3
CSS Hero is the definitive WordPress plugin to easily customize the look of your Themes and Plugins with an easy and intuitive point and click interface. It will allow you to easily change colors, fonts, backgrounds, pretty much whatever on your site.
Purpose of the plugin
It’s like a precise painting brush to refine the looks of your site.
It is NOT a bulldozer to revolutionize your Theme’s structure, or edit content in any way.
How does it work, technically?
In a nutshell, it’s nice, clean, and non-destructive: CSS Hero is a live WordPress Theme editor that works without modifying any of your theme files.
It’s easy to grasp visual CSS editing interface will allow you to visually tweak your site, without harming performance & speed: CSS Hero is widely compatible with many environments and it is built to be light and tolerant.
From a technical standpoint, CSS Hero only generates and enables an extra CSS stylesheet that cleanly overrides your Theme’s original stylesheet.
This CSS stylesheet is a single static file, so your site will not be any slower when browsing it.
No other resources are consumed, no other script is added, no php, no js, no bloat whatsoever is added to your site.
For your convenience, your edits are also stored as data in the database as well, in a specific, separate database table, typically wp_csshero3.
These data are accessed only while editing with CSS Hero and hold up your editing history as well.
Performance-wise, since all the heavy lifting is just done by your own browser, and only while using the editor, the server side impact it’s almost zero.
How do I install the plugin?
CSS Hero behaves like a standard WordPress plugin. It’s installation / upgrade procedure is easy and trivial.
After installation, you will be prompted in the /wp-admin/ screen, to activate your product’s license.
This is generally an instant, couple-click operation.
Here is a video referring to a former version, but still relevant, illustrating how to install from scratch, activate, update the plugin:
How do I launch the editor?
After product activation, you will notice a new “Edit with CSS Hero” link on your top WordPress administration bar, appearing both in the frontend and in the /wp-admin/ backend.
Clicking this link will launch the CSS Hero editor on that page.
ALTERNATIVELY: Should you have hidden the wp admin bar from your frontend, [it’s a user preference], remember that:
- You can launch CSS Hero from the /wp-admin/ as well,
- …and then navigate – inside the editor – just switch the “click mode” to the navigation (mouse icon)
- You can launch CSS Hero from the page editing screen – and you will directly edit THAT page
- You can manually launch CSS Hero on any site page just adding ?csshero_action=edit_page to the browser URL.
EG: you are visiting a page with an URL like https://www.mysite.com/my-page/ – you can start editing that page opening the URL: https://www.mysite.com/my-page/?csshero_action=edit_page
FOR FORMER USERS: In the past CSS Hero had a bolder, bigger launch trigger, the “blue bolt” button. We’ve removed that in v3 – chooosing a more lightweight, elegant, standards-compliant way to launch the editor.
Getting Started – Video Series
Instead of writing tons of text that nobody enjoys reading, we’ve opted for producing some quick video introductions to each aspect of CSS Hero. Consider it a work in progress.
Using UnSplash to find royalty-free images to use as backgrounds
The Inspector: review and edit the generated CSS CODE. CSS /JSON Export
An awesome built-in tool to review and edit freely the generated CSS code
Covering Responsive Modes + the “LARGE SCREENS ONLY” options
Troubleshooting / Support
Somebody else has been there before maybe!
First of all, don’t panic. Please check out this troubleshooting post. We are trying to keep it up-to-date with all discoveries regarding potential trouble, incompatibilities with Plugins or hosting services.
Still no joy? Let us help you
If you can’t find any useful information after a thorough reading, head over to the v3 forum room and post politely a question opening a new thread.