From the BlogSubscribe Now

Catalyst theme framework – how to reproduce a theme

customise with catalyst theme framework

A couple of weeks ago I published a post about the Catalyst theme framework and with that post I included three videos by the developer Eric Hamm.

The videos gave you an introduction to the Catalyst framework, but they didn’t show you how to use Catalyst in anger, how to produce your own theme.

Enter stage left another of Eric’s fabulous videos in which he shows you how to customise the default Catalyst install to reproduce another theme.

This is a long video, but you can watch it in bits and pieces and you can jump forwards and backwards using the progress bar at the bottom of the video.

In the video Eric starts with a theme he wants to reproduce and he customises the Catalyst default theme to achieve it.
You could start with a theme, a graphics comp or even a rough sketch and then produce your theme.

Let’s take a quick look at the main points covered in the video… I’ve added approximate timings from the video.


Start with the shape, the layout, the structure

The first thing to do is to get the layout right and these are the steps that Eric covers:

This section starts at approx. 4 min 30 secs

  1. Move the navbar above the header.
  2. Remove / hide the header.
  3. Move the footer outside of the wrap.
  4. Set the default layout to left sidebar.
  5. Set content width to 550px.

That’s the layout sorted, time to get creative with CSS and images.


Colours, margins, padding and images – styling with CSS and adding images

Once you’ve created the layout of your site the heavy lifting is all done.
All you have to do now is style the various elements and add images.
That’s what Eric moves on to next.

This section starts at approx 10 min 30 secs.

  1. Body background colour, footer border and background and footer text colour for main text and links.
  2. Remove wrap padding from nav and add container wrap padding.
  3. Rounded corners for wrap, internal containers and nav bar.
  4. Box shadow removed from wrap, text centred in footer and wrap margin reduced.
  5. 23 min 20 secs – Grab screenshots of various graphics and gradients using Snagit.
  6. Use the Catalyst image uploader to upload images and add main background to navbar.
  7. Navbar – set font size and colour, remove borders, add margins and padding and add divider.
  8. Add background images to sidebar headings and breadcrumbs, text colour and size plus padding and rounded corners.
  9. Add search box and apply padding.
  10. 38 min 12 secs – Create logo by adding text widget with image link to the top of the sidebar.

That’s it folks, job done.

Sure it would take most of us a lot longer than Eric’s twenty minutes, but by watching the video and applying the same principles to your own site… you could create just about anything you can think of.


A few tools to lend a hand and ease the load

In the video Eric mentions three tools, which he uses to help him customise Catalyst.
Just to remind you, these are the tools he mentions:

Firebug – demonstrated at approx 40 min 20 secs to find the text widget ID.

Snagit – demonstrated at approx 8 min 56 secs to find the dimensions for the left sidebar and content area.

Instant Eyedropper – demonstrated at approx 11 min to obtain colour codes.

He also makes extensive use of the Custom CSS builder, which comes as part of the Catalyst framework and is a real help in writing CSS.
Eric demonstrates the custom CSS builder at around 18 min 30 secs.


A big thank you to Eric and we’d love to hear from you

First a big thank you to Eric Hamm for producing a fabulous video and a great Catalyst resource.

The video is part of the Catalyst screencasts series so if you liked this one head over to the Catalyst website and check out the other screencast videos.

And now it’s your turn.
Are you already a Catalyst user?
How do you produce your themes, do you start from scratch or do you use a theme framework?
Do you have any questions about the Catalyst theme framework?
Are you using Catalyst for a PSD to WordPress service?

We’d love to have your thoughts on anything and everything in the comments below.

catalyst wordpress theme framework