Using Images in a Catalyst Theme Site

In this week’s feature post I’m going to take a look at how Catalyst Theme makes it easy to include images as part of the site’s integral design using the Image Uploader functionality that it provides.

This is distinct from the standard functionality that WordPress provides to upload (or insert from the Media Library) images directly into the content for Posts and Pages etc.

Catalyst Theme allows you to include images throughout the structure of the site itself simply and easily.

For example, throughout the various tabs of settings in the Dynamik Child Theme, you will notice drop downs that allow the Background type to be defined for a given element.

These include background areas for the Body area, the Wrap, Header area, Navbars, Content areas, the Footer, Sidebars etc

The choice provided in the drop down is to use a solid colour, to leave it transparent, or to use an image as the basis for the background concerned.

Here’s an example of using solid colours for the various states of the Navbar Buttons.

Example Navbar Backgrounds Settings

This provides for a very plain colour effect for the area concerned as we can see here where the Navbars are solid red.

Example of Navbars using Solid Colour Backgrounds

The Main Navbar Background colour is set to a solid deep red with the Inactive Pages set to be Transparent so that these let the colour of the main background come through, and the Active Page is displayed as a solid grey colour.

If a more ambitious effect is required, this can be achieved by using images for these backgrounds instead.

Using the Image Uploader in Dynamik Theme we just select and upload suitably sized images.

Now, as you’d maybe expect from everything you may have read in other Feature of the Week posts by now, Catalyst Theme provides a great deal of flexibility in how you can utilize the uploaded images.

For example, you can use an image so that it is used in the area concerned just the once and does not repeat.

Or you can set the image to repeat horizontally to fill the space, or repeat vertically, or both.

When using an image, any part of the area involved that is not covered by the image can be set to fill with a specified colour, or to be transparent.

And this can be done for each and every background area on an individual basis as required!

As we can see here in the Image Uploader in the Dynamik options, I have uploaded two small image files, both 40 pixels high and only 5 pixels wide.

The Image Uploader in Dynamik Options

We can now select these images in the settings for the various backgrounds in the Navbar options in Dynamik.

Navbar Backgrounds Settings with Image Type Selected

Although the height of the images is set to match the Navbar height, the images are purposefully narrow so they can be set to repeat horizontally to fill whatever the various widths of the Navbar buttons might be.

Now the result is a site with Navbars that now look a little nicer maybe, with the gradient colours of the images providing a degree of highlight to the Navbar areas.

Navbars Using Image Based Backgrounds

Catalyst allows you to incorporate images like this throughout the site, simply, quickly and with dramatic effect.

Have fun.

David.

David Pritchard is the author of the Catalyst Theme Cheat Sheet – the 250+ page guide that helps users make the most of Catalyst Theme. Licenced Catalyst Theme users can get their FREE copy in the downloads section of the Catalyst Theme forum. David also has a site that with guides to using Catalyst Theme, WordPress, SEO, internet marketing techniques and other topics at http://www.FastStepInternetMarketing.com