Plugin Updated Feb 10, 2024

CSS Hero

by The CSS Hero Team csshero.org v5.1.0 Unlimited sites

CSS Hero is a WordPress plugin by The CSS Hero Team that lets you restyle your site visually. You hover over an element, click it and change its fonts, colors, spacing or effects while watching the result live, with no need to write CSS by hand.

Version: 5.1.0
Released: Feb 10, 2024
Developer: The CSS Hero Team
Type: WordPress plugin
Licence: GPL
Included in: Every plan, or $5.59 a year on its own

What’s new in CSS Hero 5.1.0

Version 5.1.0 · Feb 10, 2024 Latest

ImprovedWOFF2 font format compatibility
ImprovedCompatibility fixes for WordPress 6.4

What it does

Small design changes to a WordPress theme usually mean hunting through stylesheets, finding the right selector and writing CSS that overrides the theme. This plugin replaces that process with a point and click editor that runs on top of your live site. You select the heading, button or section you want to change, then adjust colors, backgrounds, typography, margins and other properties from a panel, seeing each edit as you make it. It is meant to work with any theme or plugin on your site.

Your edits never touch theme or plugin files. They are saved to a separate stylesheet, so the original theme stays intact and changes can be undone, backed up or exported as CSS or LESS. Responsive editing lets you preview the site at standard or custom breakpoints and make device-specific changes for desktops, tablets and phones. People comfortable with code get a full CSS and LESS editor with live preview, CSSLint validation and custom media queries.

Best for

Site owners who want design changes without writing CSS
Freelancers and agencies restyling client themes
Developers who want a live CSS and LESS editor

Features

Point and click editing

Hover over any element on your live site and click it to edit its styles, with changes previewed in real time and no hand-written code needed.

Color picker with saved palette

Try out colors and backgrounds with the built-in picker. The plugin remembers the shades you use so you can build a personal color palette.

Google Fonts and TypeKit

Pick typefaces from the Google Fonts library or use TypeKit support, then adjust text styles for headings, body copy and other elements.

Responsive breakpoint editing

Preview your site on different devices using standard or custom breakpoints, and apply edits that only affect desktops, tablets or smartphones.

Separate, non-destructive stylesheet

All changes are stored in an extra stylesheet rather than in theme or plugin files, so your original theme stays untouched and edits can be undone.

Visual CSS effects

Create gradients, box shadows and text shadows through on-screen controls instead of writing the CSS rules for them yourself.

CSS and LESS code editor

Work directly in a CSS and LESS editor with live preview, automatic CSSLint validation and the option to add your own media queries.

Export and backup

Export your custom CSS or LESS code in one click to keep a backup or to add the styles to a site manually.

CSS Hero older versions

5.0.6Apr 18, 20231 fix

Members and buyers of this product can download older versions.

Questions about CSS Hero

Will it work with the theme I already use?

The plugin is described as working with any WordPress theme and plugin, letting you select and restyle elements from the header to the footer. It applies your styles on top of what the theme already outputs.

What happens to my changes if I stop using it or switch themes?

Edits are saved in a separate stylesheet and never written into theme or plugin files. You can export your customizations as CSS or LESS at any time, which gives you a backup you can reuse or add to a site manually.

Can I make different style changes for mobile and desktop?

Yes. You can preview the site at standard or custom breakpoints and make device-specific edits, so a change can apply only to desktops, tablets or smartphones.

Do I still get access to code if I know CSS?

Yes. Alongside the visual controls there is a CSS and LESS editor with live preview, automatic CSSLint validation and support for custom media queries, for anyone who prefers to write rules directly.

Is CSS Hero free?

The code of CSS Hero is licensed under the GPL, so anyone may use, change and share it. GPL Feast is a paid service: a plan or a single purchase gives you the download and automatic updates. The developer's own support, licence key and online services are not included.

Which version of CSS Hero is this?

Version 5.1.0, released Feb 10, 2024. New versions appear here when the developer publishes them, and members get them as automatic updates.

How do I update CSS Hero?

Install the free GPL Feast Updater on your site and connect it with your API key. It installs new versions of CSS Hero automatically and keeps a backup, so you can roll back.