Today we’re extremely pleased to introduce you the latest addition to our compatible themes list. Ladies and gentlemen please welcome Upfront and say hello to a new way to build and customize websites.
For those still unfamiliar with it Upfront is a superbly designed and coded WP framework by the WPMU DEV Team. If you’ve been living in a cave for the last 10 years and don’t know WPMU DEV it’s time to pay them a visit and at least give a shot to their superb Blog which is a daily read here at the CSS Hero headquarters.
Upfront comes with 4 one-click-install child-themes:
Each of them sports a different look and feel and they all share the same Upfront core functions which will easily guide you in publishing dynamic pages in no time with the Upfront Builder.
Ready for a Live Demo ? Try CSS Hero on this Theme Launch Demo
Exclusive and limited offer!
Follow this link to get a 60% OFF on UPFRONT + 140+ PLUGINS & UNLIMITED EXPERT SUPPORT BY WPMU DEV
Building custom structured web pages with Upfront is extremely easy as each component comes with a bunch of options you can easily arrange to meet your needs plus you can now fully customise the way it looks with CSS Hero in no time as it’s fully Hero Ready!
Let’s move on and see how CSS Hero works on this great framework. In the following experiments we’ll use one of Upfront child-themes: Spirit (my personal favourite) however Hero works amazing on all of them!
Customising out of the box
Let’s see how we can easily customise one typically annoying element to deal with such as a menu with his sub-menus. That will take no more than a single minute and absolutely no coding experience, what you have to do is simply to click the elements you want to edit and choose which parameter you want to customise.
In the following video we’ll focus on some very basic edits such as colors and fonts however there’s plenty of options you can play with for each menu item status (including hover, active and visited).
Pretty cool huh?
Now this is how Hero works out of the box on Upfront allowing you to have full control on each element aspect with just one click, however if you’re willing to get the best out of this killer combination here is a bonus tip that will surely help you making your design process more concrete allowing you to extend customisations across multiple pages with no big effort.
Using Upfront global IDs
Upfront allows you to set each region and element with an ID, an ID is a unique label you can set to each element to identify it. IDs support alphanumeric values, please avoid blank spaces 🙂
Moreover that ID can be set as ‘global’ allowing that same element to be replicated across different pages.
Of course Hero loves that and will automatically grab that ID for you allowing you to provide consistent edits across multiple pages with ease for both the main region area and all his inner elements.
Extend it to meet your needs
If what you’ve seen till now is not enough you can even extend Hero’s built-in configuration for Upfront to meet any particular need. In the following example we’ll add a Spirit specific class to our editable elements list via Quick Config. With this little tool and a bit of Firebug\Chrome Inspector experience you can get an extra control layer to CSS Hero making it work as you prefer.
Hero get’s the new provided class and returns customisations for all elements sharing that specific class, of course it’s now up to you in providing him the right classes, a minimum CSS knowledge would be required, however it’s really easy to revert some CSS Hero edits either by using the Reset Property button or by browsing back CSS Hero’s edits history.
Conclusion
We strongly believe that this combination of products will result extremely helpful to many of you whether you’re a newbie or a skilled developer, moreover the wonderful guys at WPMU DEV provided us a special discount code for those willing to get Upfront + all the wonderful products they provide at premium.wpmudev.org, so go grab it now!
Exclusive and limited offer!
Follow this link to get a 60% OFF on UPFRONT + 140+ PLUGINS & UNLIMITED EXPERT SUPPORT BY WPMU DEV