Welcome to the First Catalyst Theme Feature of the Week Post

In this series of posts, I’ll be detailing individual features of the Catalyst Theme. Some posts will be aimed at newer users to help them get their intended results a little quicker and discover how to do things they might otherwise take some time to find. Other posts will cover more advanced stuff.

Either way, I hope that before long you will have gained some benefit from what gets posted here.

Remember too, that if you already own the Catalyst Theme, you can download the 170+ page Catalyst Theme Cheat Sheet, packed full of useful tips and information, absolutely free of charge in the Downloads section of the Catalyst Forum.

As it happens, to get things going, this first post is going to be a kind of double billing.

Catalyst Theme Feature(s) of the Week

The Universal Font Controls and the Custom CSS Builder.

The Universal Font Controls are found in the Dynamik Options > Body Tab.

Universal Font Controls

They allow you to specify in one place, a standard font type, color and line height for any font options in any Dynamik Option Set – such as the Header, Navbars, Content, Comments, Sidebars etc etc (almost all Option Sets have some font elements that can be controlled with the Universal Font Controls).

Similarly, the Universal link control allow you to select the color of the hyperlinks, the color they turn to when hovered over and how underlining is used on links throughout the various font elements.

So, if the Universal Font Control Color is set to 111111 ( a very dark shade of grey) then it is applied to all the elements – like these in the Content Option Set.

Dynamik Options > Content Option Set Showing Font Colors

If you change the value for the Universal Font Color Control from 111111 to say F00000 and click the Save button, all the elements under Universal Control will be modified automatically – like this :-

Content Option Set After changing Universal Font Control Color Value

A font element can be excluded from Universal Control by unchecking the (u) symbol at the end of the particular line. Any changes made to the Universal Font Control will now not be applied to the elements that are unchecked.

As you can see, Catalyst Theme gives you a huge degree of control over colors, types, sizes etc for virtually any font element just through using easy selection boxes in the appropriate Dynamik Options Set. The Universal Font Controls also provide an easy way to apply changes consistently across multiple font elements.

However, some font attributes can not be changed like this. Applying Bold, Italic or Underline highlights to a particular element, or setting the left/center/right justification requires use of the Custom CSS tools.

For some people customizing CSS is something they’d rather leave well alone. Not everyone is a programmer right? Well, Eric and Seth designed Catalyst such that a non-techie can easily customize CSS for particular elements in a very easy to understand way.

For example, let’s say you want the Header Tagline Font to be Bold and Italicized.

The options for this element are font type, size and color. There are no highlight options.

Dynamik Options > Header Options Set > Header Tagline Font Settings

To set highlights, click the Custom button. This will open up a box where CSS code to customize that element’s font can be applied. If you know CSS code then you can enter the code right here and it will be applied as #tagline{your-css-code} .

Dynamik Options > Header Options Set > Header Tagline Font Custom CSS Box

That’s OK if you know CSS code and are happy just writing it in there.

Alternatively, and very easily if you’re not familiar with CSS code, you can click on the Show/Hide CSS Builder Button and click the Fonts tab. You will get a display like this :-

The Custom CSS Builder

All you need to do now is select Bold instead of Normal for the Font Weight Option and Italic instead of Normal for the Font Style, then click the Insert Font Weight and Insert Font Style buttons.

Building Custom CSS Code Simply and Easily

The code that is generated can be cut and pasted directly into the Tagline Font Custom CSS box that appeared when you clicked the #Custom button for the Header Tagline Font earlier.

Click the Save Button and your Tagline will now be Highlighted as shown here:

Effect of Applying Custom CSS Code to the Header Tagline

So that’s an overview of the Universal Font Control Options in Catalyst Theme and an introduction to using the Custom CSS Builder to allow complete control of any aspect of any font element!

It’s a very simple use of the Custom CSS Builder, but it shows how easy it is to apply custom changes to a particular style element.

Happy Designing!