One of the things that seriously makes Catalyst Theme stand head and shoulders above the crowd of competing WordPress themes is that it allows fully customized site designs to be achieved without any need for coding.
It has over 800 design options that can be configured to allow control over most elements that you might want.
And they’re all nicely segmented into sensible sections to make it as easy as possible to find what you want.
Here’s an example from part of the Navbar options where you can change the fonts, backgrounds, borders, padding, and more, for the Active Page, Inactive Pages and Hover settings – all with simple selections.
Navbar Options
However, there are times when you might want a little bit more flexibility.
For many other themes, this might involve some coding. Great if you like that kind of thing, not if you don’t, and probably time consuming in any case.
Not so with Catalyst Theme!
The Catalyst Theme Custom CSS Builder
I have a confession. The first time I opened the Custom CSS builder, I put it away again…. didn’t think it was ‘for me’…. not my kind of thing.
How wrong I was!
The Custom CSS Builder extends the design capabilities of Catalyst Theme immensely – for any level of user. And it’s very easy to learn to use it effectively.
There are two main ways to use the Custom CSS Builder.
One is by building the complete code for a Catalyst CSS Element in the CSS Builder and adding it to the Custom CSS area in Advanced Options.
The other is to build a snippet of code for inclusion within an element that provides a #Custom Button. That is really easy to do and is what we’ll show here.
You’ll notice that many of the design options in the Dynamik child theme have a #Custom Button associated with them.
Here’s one for the Main Font for the Navbar.
#Custom Buttons
Clicking on this opens up a box where custom CSS code specific to that element can be entered. There is no need to include the element name or the opening/closing brackets as these will be automatically taken care of.
#Custom Button CSS Box
Now you can build CSS code to include in here, but without actually having to do any coding….
Let’s open the CSS Builder.
When you click the button shown below, the CSS Builder then opens above the Dynamik Options menu.
The Custom CSS Builder
You can select what attributes and their settings you want to include in the CSS code you’re about to generate.
In this case we’re looking at the Fonts tab and have chosen to include a few settings such as the font weight, colour, style etc.
Just clicking the “Insert” button for any attribute will include and build up the correct CSS code for it in the text box.
When you’re done, just drag and drop the code into the #Custom text box for the element you were working on and click Save Changes.
#Custom Buttons with CSS Code Included
You’ll notice that any #Custom Button that has Custom CSS code entered for it gets highlighted in a light green colour, making it easy to find elements that have been modified.
The result by the way looks like this….
Easy Modification to Navbar
As you can see the Navbar font has been modified, simply, quickly and easily using the the Custom CSS code builder.
The Custom CSS Builder provides a very easy way to build correctly formatted CSS code that can be copied across and included in the element concerned using its #Custom Button option.
In a future post, we’ll look at using it to build complete chunks of CSS for the various body elements, EZ widget area, Hybrid and Custom Widget Classes in Catalyst Theme.
All without programming! Because Catalyst provides full control, easily.
Have fun.
David.
David Pritchard is the author of the Catalyst Theme Cheat Sheet, the 200+ page guide to making the most of Catalyst Theme made available to licenced Catalyst users in the downloads section of the Catalyst Theme forum. David also has a site that covers aspects of SEO, WordPress, internet marketing techniques and other topics not directly related to Catalyst Theme itself at http://www.FastStepInternetMarketing.com
David
Just to say I had played with the Custom CSS builder previously and gave up because the info / instructions weren’t clear enough.
This tutorial of yours hits the spot beautifully, it’s simple and very very useful. (Have been using it all day).
Much appreciated and am looking forward to getting stuck into the next Custom CSS post you added today.
Marion
I’m in the process of comparing available WP frameworks, like Pagelines Platform, Flexibility 3, Gantry, to use in teaching an intro WordPress site design class to uni Art students. They’re familiar with using programs like Fireworks and Photoshop to create a design comp, that’s then sliced and exported for static sites in Dreamweaver. I’m interested to locate a WP framework that integrates well with this design workflow and is the most friendly to a visually layout and construction process.
A couple related questions would be;
- does the 200 page tutorial for Catalyst include an incremental project tutorial similar to the posted video of the bird lovers site? Any media supporting projects and classroom instruction is welcome.
- also, I read with interest about the new function to generate and export a child theme. Would these themes have the ability to be re-imported by the designer to be edited or cloned into alternate version using all the original tools of the Dynamik options?
Thanks,
Lon
Hey Lon,
Regarding your questions:
- The Catalyst Cheatsheet does not include any project tutorials at this time.
- Yes. When you Export a Catalyst Child Theme using Dynamik it includes a current Options Export file that can be re-imported at any time to re-gain access to all the Dynamik Options.
Eric