The graphic at the top of this post is a screenshot of this site with the Genesis Extender Custom CSS Builder activated. I use the Genesis Extender plugin on all my sites and all my client sites and the feature I use most of all is the Custom CSS Builder.
Not only does it write the CSS for you but it helps you find the selector you’re looking for, allows you to work on-page and shows you the results of the CSS changes instantly.
I’ve already written a general review of the Genesis Extender plugin, which you may want to check out before you look at the Custom CSS builder in detail.
The Genesis Extender is a plugin, which you can use with any Genesis child theme. If you want to create your own child themes then you need the Dynamik Website Builder… also from Cobalt Apps.
Dynamik is a theme, which you can customise using simple point and click options to create your own child themes.
Writing CSS using the front end Custom CSS builder
The developer of the Genesis Extender plugin is Eric Hamm of Cobalt Apps and Eric produces fabulous training videos to get you up and running with his plugins and themes in double quick time.
In this video Eric explains how to activate the Custom CSS Builder, highlight the CSS selector you’re looking for and write the new CSS code. He also demonstrates the various ways you can work with the CSS Builder.
The video is best viewed in full-screen mode so just click the icon at the bottom right of the video.
A great overview from Eric but just in case you missed anything, these are the main points covered:
- Activate CSS Builder – to activate the CSS Builder go to Genesis Settings > Extender Custom > CSS > CSS Builder
- Work in the backend – you can work in the WordPress backend (your dashboard) where you can write directly into the CSS Editor or you can activate the CSS Builder to write the code for you in the Builder Box and transfer it into the Editor.
- Work in the frontend – if you work in the frontend (on-page) you have the Builder Box and the Editor plus you now have the CSS Nav Bar and you can Enable Element Selectors, which helps you find the selector you need.
- Builder Box and Editor – the Builder Box is where you create your CSS before transferring it into the Editor area and saving it.
- Enable Element Selectors – when working on-page you can use the Enable Element Selector feature to find and highlight the various areas of the page. The areas are highlighted with a green background.
- Image Uploader – any images you upload using the Extender Image Uploader will be available in the CSS Builder for background images etc.
- Pop out CSS Editor – if you need more room, when working on-page, you can Pop-Out the CSS Editor and hide the Sidebar.
- Work with the Editor only – if you can write your own CSS then you can check the Editor only box to show only the CSS Editor without the CSS Nav Bar or Sidebar.
- Chrome developer tools and Firefox firebug – you can use the Custom CSS Builder in conjunction with Chrome Developer Tools (Chrome users) or Firebug (Firefox users). This allows you to cut CSS from Dev Tools / Firebug and paste directly into the Custom Editor.
When I work with the CSS Editor I work on-page and I use it in combination with Chrome Developer Tools – makes writing and saving that CSS oh so easy.
Other features of the Genesis Extender plugin
I’ve concentrated in this review on the Custom CSS Builder feature of the Extender plugin, but it does a whole lot more. Some of the features I’ll be covering in future posts are:
EZ static homepage – create a fully widgetised CMS homepage in just a few clicks.
Custom widget areas and hook boxes – add content in any location to your pages and posts using widget areas and hook boxes.
Custom conditionals – use custom conditionals to place the hook boxes and widget areas content on specific pages and posts.
Templates – create page templates by pasting in template code or using the built-in PHP Builder.
The Genesis Extender is a “must-have” plugin if you want to extend the functionality of your Genesis child theme, but don’t have coding skills. It really is your very own developer-in-a-box.
Pick up your copy of the Genesis Extender plugin
Like I said “I use the Extender plugin on all my sites and all my client sites and the feature I use most of all is the Custom CSS Builder.”
It saves me time, it saves me effort and it teaches me CSS at the same time.
The Genesis Extender plugin works with any Genesis child theme. You get it for a one-off payment, which includes all future updates, you can use it on as many sites as you like and it comes with a 30 day money back guarantee.
Hope you enjoyed the review folks and if you have any questions about the Extender please feel free to ask them in the comments below.