CSS Hero is a power tool that lets web masters modify the design of their site using a front-end editor. You can see the changes live as you make them and the changes you make are “non destructive,” which means that you can easily undo previous steps. This makes CSS Hero a good tool for new users ready to take more control of their site design.
CSS Hero is a premium plugin that you purchase from the product website. It works with all popular themes, page builders, and plugins. There are live demos on the CSS Hero website that you can use to test out the plugin, as well as a pretty extensive help section that has a number of step-by-step videos. Pricing is pretty reasonable and there are occasional sales when you can get a great discount. The new CSS Hero version 5 is available for download.
Everybody knows that the core themes that come with WordPress are very fast and well coded, but sadly they don’t have many style options. So I picked the core Twenty Sixteen theme to use to show some of the features of CSS Hero. Don’t let the name “Twenty Sixteen” put you off. The core themes are responsive and kept up to date with the latest WordPress changes. It has a traditional type of header with the logo on the left and a menu on the right.
The test site has a bunch of posts created with dummy content.
As you can see from the screenshot, the design is a bit stark. The theme Customizer has a few color options, more than most core themes. I change the Main Text Color to a dark blue, but otherwise leave everything the same.
Using CSS Hero
You install the CSS Hero plugin by uploading it. Once it is activated you enable the license by going through a few steps within the admin to register your website. You will need the username and password you used to purchase CSS Hero.
You can launch CSS Hero from the post list screen.
Probably the main way to launch it though is from the top admin toolbar.
Header, Sidebar, and Home Page
I launched CSS Hero and then double clicked on the top of the top of the page, which we see is named the masthead. In the image below see that the page is in a frame with CSS Hero controls on three sides. On the left is a panel with two tabs. It is now on the CSS Hero tab where we see an accordion of panel sections just as you see in lots of page builders. Below that is a code area that shows the CSS element that was clicked on. The other tab is the “Inspector,” which is more of a code view.
I clicked on the Spacing panel to adjust the padding of the masthead. See how the theme has a default 84 pixels above and below the content of the masthead. You can change the values you see by clicking on the number box in the diagram, moving the sliders, clicking into the number boxes to the side of the sliders, or clicking on the plus or minus signs next to the number boxes.
I adjust the padding to 30px above and 40px below. Already the header area is looking better. Note how when I made changes we see them automatically in the code area below. Note also at the top there are breadcrumbs showing the level of where we are editing on the page.
I want to add a line between the header and the content, so I click on the border panel, the bottom border square, adjust the width, and paste in the light gray color I want. CSS Hero has this cool option to create a variable that you can reuse elsewhere, so you don’t need to, for example, remember the color hex code. You access this by clicking on the @ symbol. I gave it the name and clicked the Set button. I then made the border a bit thicker so it would stand out more.
Here is what the border looks like. It is a bit subtle, as I want to move away from the stark default nature of the theme.
Now to style the widgets on the sidebar. To start, I want to apply our light gray color to the background of the widgets. To do that I right click on one of the widgets and pick the Alternatives menu item. There I see a general widget class “.widget” and I pick that.
I then go to the background panel on the left, click the @ sign next to the color, and get the variable to apply it.
While we are looking at the background options, CSS Hero has the ability to use an image for the background. When you click the image option you can load an image from the media library or you can browse the images from Unsplash directly from within the editor.
There is also the option to apply a background gradient, including mesh gradients.
Next, I click on the Spacing panel and add left and right padding.
Lastly, I want to get rid of the list dots on two of the widgets. This is a bit harder as WordPress has converted the Categories widget to a block group. I right click on the widgets and select “Only this” to target the individual widgets. In the code editor on the left I add “list-style-type:none;” to remove the dots. Note at the bottom of the window we see the HTML code for the page and also the applied styles from the theme to the bottom right. You can see this by clicking on the “Inspect HTML” bottom menu item. I used this information to make sure I was targeting the correct elements.
If we look at the actual content of the page, we see that the theme shows archive list as first the post title, then the excerpt, then the featured image, and then the full content with the post meta next to it.
We don’t want both the full excerpt and the full content. I click on the except under the post title to select it, then click on the Display panel on the left. I click on the X option for display none. The excerpt is no longer shown.
I also want to limit the length of the content that is shown. It doesn’t make sense to show the full content in the archive. I hover the mouse over the content text until the entry content is selected, not the individual paragraphs. I search online and find a post on Stack Overflow that gives the CSS to limit what is shown and paste that into the code editor. I set it to show 10 lines.
Finally, I adjust the title size and padding below the title using the controls in the panels. Here is a before and after.
I’m done with the home page, but it is always a good idea to check the changes to see how they display on different device sizes. CSS Hero has icons at the top center for quickly switching between device sizes. Note the blue dot by the left icon, which is for desktop. This shows that there on edits for this. The Way CSS Hero works is any edits made apply to the selected device size and all smaller ones. So all of the changes we made will apply from desktop down. If you made a change with tablet selected, for example, then those changes would apply to tablet and smaller sizes. On thing to keep in mind is that those buttons are for common device sizes, but your theme may have custom breakpoints. You can move the displayed frame to expand it or make it thinner, to check custom break points, if there is something you need to examine.
I toggle through the different sizes and everything looks good. I save the changes so far using the button in the lower right corner.
Single Post Page
Next I want to look at styling the post single. Normally when you click something on the page with CSS Hero active, you are selecting that element for styling. To navigate between pages there is a toggle on the top bar that switches between edit and navigation modes.
On a single post page, I toggled back to edit mode. I noticed that the post meta information looked a bit spread out.
I hovered the mouse over that area until all of it has the selection border around the fields and then clicked on it to select it. Using the panels as we have done before I adjusted the line height, padding and background color.
I thought this looked tighter.
The post single looked good, but what about pages? I went to the sample page and noticed that the quote text was huge.
I used the controls in the Typography panel to adjust the text size.
Other CSS Hero Features
I imagine that as I add more content to the site that I’d see other areas that could use tweaking. However, I’m OK with things so far and I think you get the idea about how CSS Hero works. Lets take a quick look at some of the other options and features.
Here I have the block quotes selected and notice that area in the top right. The blue number 2 tells us that there are two elements that the changes will apply to. The blue plus sign is where you can add your own class if you want to.
There is also a “Normal” option with a drop down. This is where you can toggle to hover if you want some special styles for that.
On the top bar you can see the undo and redo buttons. Next to those is the button to open the history panel. You can click on one of the the date / times in the list to go back, if you made a mistake.
The project button opens up a drop down giving you access to a list of features.
- The Variables menu item opens a panel where you can see the variables you’ve already created and add new ones.
- The Edits Browser lets you look at all of the edits made so far.
- The Media Query interface lets you add new breakpoints.
- The CheckPoints interface is like history, except that you can group a bunch of edits, save them as a check point, and then come back to them later.
- You can upload fonts with the Custom Fonts interface.
- You can discard all of the edits with the Reset Edits option.
CSS Hero has some extras that are found under the Tools menu. You can style the WordPress login page, View the site as a logged out user, show hover styles, and go to the documentation library on the plugin website. Next to the Tools menu is the button to close CSS Hero and exit the editor.
On the bottom there is a bar that also has some options.
CSS Hero lets you add video backgrounds and gives you access to some free videos from within the editor.
The page inspector opens a code view of the current page with the styles being applied showing in the panel on the right.
Want to see how the site looks on your mobile phone? There is a QR code generator to make it easy to go to a link from your mobile.
The hierarchy button opens a popup that shows you the pages on your site, so you can see if there is something you need to style.
The editor preferences button, the gear icon, opens a panel where you can set options related to how CSS Hero shows. You can adjust things like the entire editor theme, the font size, and position of the editor pane.
We will look at the export option in the next section below. In the far bottom right there is a Cancel button to cancel all of the edits since the last save, and a Save button for saving your work so far.
What Are the Options After Editing?
CSS Hero creates a style sheet in the upload directory. As long as you have the plugin installed and activated the changes you made will be live. Note that CSS Hero does not lock you in. If you find that you no longer need to make style changes, you can export the CSS code and paste it into the theme Customizer CSS section. To do this, click on the export button in the lower righthand corner. Then select the CSS tab and click the copy CSS button in the lower right of the popup. After you put the code into the Customizer you can remove CSS Hero and your changes will be preserved.
Summary and Discussion
CSS Hero will probably appeal to users who don’t know CSS very well and are learning. Some things to keep in mind are that the plugin is a CSS editor and not an HTML editor. You cannot use CSS Hero to change the HTML and PHP files. Also, it is possible to use the developer tools that come with your web browser and manually test and write the CSS code by hand. As we saw in the examples above, there was an advanced usage for limiting the excerpt length, where I searched online for the CSS and then added it using the CSS Hero code editor, so all possible advanced and unusual styling options may not be available via the GUI. CSS Hero is a time saving convenience as it allows you to test and apply styling from within WordPress. It makes all of the common types of CSS options available in the side panel, so you don’t have to know the syntax.
The CSS Hero team continues to improve and add new features. CSS Hero comes with a lifetime purchase option that will appeal to many site owners. I hope this walk-through helps you decide if CSS Hero would be useful in your site building.