When you hop on CSS Hero support forums to talk feature requests, we are ALL ears. Truly, we appreciate you taking the time out of your day to let us know how we can make CSS Hero… well, even more heroic! So we got the message: You want a more flexible way to customize your WordPress theme. And we are excited to announce that CSS Hero 2.3 and the subsequent releases will accomplish exactly that!
As you know, if the main theme stylesheet styles two elements the same way, CSS Hero will also automatically style them the same way across your website. That means that on most themes, once you adjust an H2, for example, CSS Hero will style it the same way across your entire website. That’s very convenient in a way that you won’t have to go to every page to adjust that H2. However, if you wanted a different color H2 on only one of the pages or on a limited selection of pages, the only options you had were applying CSS Custom Class or CSS ID, depending on the situation, and if your theme allowed it.
CSS Hero 2.3 and the following versions will make it simple and easy for you to edit just this one particular element, or this one page, without the changes transferring to all the other elements of the same class or all the other pages. It’s a WYSIWYG, no-need-to-get-your-hands-on-code solution. Welcome the new level of flexibility when it comes to editing your theme with CSS Hero!
Up to 2.3 version, you could use both the left and right mouse click to select an element on the page and send it to CSS Hero editor. Since 2.3, using the right click will open a dropdown with useful selective editing options, while the left-click event is not changed.
Here’s what it looks like when you right-click on an element using CSS Hero 2.3:
Edit Only This – new option in CSS Hero 2.3
In the following releases, you can expect a few other useful options in addition to Edit Only This:
- Edit Only on This Post
- Edit Only on This Page
- Edit Only on This Post Type
Isn’t that exciting?
Let’s take a closer look at how you might use Edit Only This option that comes in CSS Hero 2.3.
CSS Hero 2.3 – Now, you can ‘Edit ONLY THIS’
Do you have more than one instance of the same element on the page, but want to edit only one of them? Launch CSS Hero, grab the selector tool (the blue spinning wheel on top), and right-click on the element you want to style in a unique way. Then, use the new Edit Only This option, and CSS Hero will edit only the chosen instance of an element. For most themes, these edits will also extend to all of the exact same elements on other posts or pages.
Need some extra emphasis?
Use Edit Only This option to highlight the most important item out of a series. For example, you have a series of blurbs with blue icons. You want to change the icon color to orange and make the most important blurb stand out by making its icon green. Simply right-click and select Edit Only This to achieve that result.
For example, you want to edit the blue blurb icons with CSS Hero.
When you edit one of the icons, they all change color.
Need some extra emphasis? Right-click and select Edit Only This to change the color of only the leftmost icon
Another example of using Edit Only This option is highlighting a single, most important item from a list.
Highlight an item from the list by using ‘Edit Only This’ option – new in CSS Hero 2.3!
Crave variety?
Another situation when Edit Only This option will be extremely useful is when you want to introduce some variety to the same class items you have on a page. For example, you have two buttons on a page, and you want to make them different colors. In CSS Hero versions before 2.3, when you selected and edited one button, both of them changed. Now, you can use Edit Only This option and get yourself some different color buttons.
Download CSS Hero 2.3 from your CSS Hero Dashboard (if you are an active member) and give the new version a spin! In case you need CSS Hero upgrade instructions, here’s the link to the tutorial video.
What do you think about Edit Only This and the other new features coming up? How will you be able to apply them on your site? Let us know below!