Really customizing the metamorph template

This article describes my experience customising the very nice looking rockettheme metamorph template for my site. I'm not aiming to repeat the information in the tutorials that come with it but rather to detail the things I've had to do to get it to work how I want it to.

Read this as an adjunct to the existing tutorials if you get into difficulty.

The logo

The logo customising tutorial that comes with the template is aimed at creating a logo that will fit in with the theme.

It starts by pointing the user to Fireworks. I'm a photoshop user for my graphics but I'll go with the free trial and see if its worth the $399.

Fireworks is a 300Mb download but installation is smooth. Before opening it, install the font supplied with the metamorph sources and be ready to replace the non working reference in the PNG with the newly installed font on your system.

Following the logo guidelines is fine for getting the text looking OK but you will still have the ring and two slashes logo element. This element fits in nicely with the site but its probably not something you really want associated with your logo. Furthermore, if you resize the slices you are likely to have your logo clipping badly on the website.

So after following the instructions, I went back to Fireworks in order to delete the icon (easy done) and then use the space to fit my logo in much better (ensuring that I don't resize the slices)

Then save them out as instructed and be sure to overwrite the bottom-logo.png in the root images folder and the logo.png in the relevant style folder.

Heading length

My article headings tend to be fairly long because I like people to know what they are about to read. If you don't keep them down to around 25 characters (!) Metamorph screws up the formatting by drawing the underline through them which looks really tacky.

This can be avoided by moving the heading graphic to the bottom. Find the line in your stage<n> css file that starts with .contentHeading and change it to the following:

.contentheading {background: url(../images/style4/left2-modh3.png) no-repeat bottom;}


There are currently no comments

New Comment


required (not published)


Australia: 07 3103 2894

International: +61 410 545 357