Open Source Logo Work-Around for RocketTheme

by vitalbodies on June 9th, 2009

Open Source Logo Work-Around for RocketTheme:
How to make your own logos without Fireworks for RocketTheme templates.

VitalBodies bought a RocketTheme template for a job for a customer web site, only later to find out that you need to buy a special program (Adobe Fireworks) just to edit the graphics. VitalBodies uses all open source software so that did not sit all that well. In order to edit the logo and other graphics we needed a work around so we wrote this guide for us and all RocketTheme users. RocketTheme produces very nice templates for open source Joomla!.


The first step is to find the logo and the basic things that relate to the logo like the CSS.

NOTE: If you right click on the logo on your new RT site you will not be able to access the logo as there is a blank image in front of that logo.

Instead log into the Joomla panel and go to EXTENSIONS > TEMPLATE MANAGER.
Click on your template.
The click on the EDIT CSS button.
On most RT templates there will be a CSS for the main document.
On Mynxx for example that is template.css.
Click the radio button and choose EDIT.

On most templates, right at the top you can see the size of the logo.
So for example in Mynxx:
/* This is the Main template logo, Edit this to match the width and height of your new logo image */
#logo {width: 260px;height: 44px;}

Remember that size.
It is easiest to make your logo the same size and not mess with the CSS.
If you create your own logo and make it a bit larger or smaller you will need to change this size.
If you change the height you might even need to change the height of the HEADER. That is advanced to some degree so you might want to avoid that if you are not sure.

And if you scroll down a bit farther looking for the word logo:
#logo {float: left;margin-left: 10px;position: relative;}
#logo:hover {text-decoration: none;}
.logo-text {position: absolute;right: 3px;top: 15px;text-transform: uppercase;font-size: 13px;}

And then CANCEL again.

Next let’s find the actual logo itself using FTP.
FTP into Joomla on your site and navigate to the TEMPLATES directory.
Double click your template (in my case it was rt_mynxx_j15)
From here on out, your on your own, as it depends on the template where they store the logo and how many there actually are.
In Mynxx for example I found logo.png in a directory called IMAGES in subdirectories called LIGHT and DARK.
Download the the logo graphic(s) and remember where you got them from and where you downloaded them to.

If you downloaded the RT sources for your template, you received a font or fonts.
If you want to use them, you will need to load them into your Operating System.
For Ubuntu Heron, Ibex and Jackalope check out this blog post I wrote:

Open the logo.png (or what ever yours is called) in GIMP, INKSCAPE or both or your favorite open source program for creating graphics.

In Ubuntu Heron, Ibex and Jackalope, these programs are free and super easy to install.
See this blog post I wrote for how to install literally hundreds of free programs that come with Ubuntu and many that do not:

You can also just start with a new document in your favorite open source graphic program and simply make the graphic the same size and your set to go.

I like to open the original graphic and study it:
Does it have a transparent background?
Are the letters light or dark of in the middle range somewhere?
Is the text centered or way off to one side?
High or low, bold or subtle?
This gives a nice starting point.

In GIMP I like to check the IMAGE > MODE and see if the image is Indexed, or RGB or Grayscale.
If you want to change the original image you might want to change the mode to RGB if you want more or different colors.

As the creative types we are, we do not have to do what the RT people did, but you at least know they did the math (so to say) and worked out the bugs as far as what works for the template.

Once you have created and saved your new master piece logo you just need to FTP in to Joomla again (rename the original) and upload your new logo.
Some of you might need to change the CSS if you made the image larger or smaller than the original.

This is a brief tutorial (not exhaustive), use at your own risk and yes, there are likely to be typos…
Back up and all that other safety stuff and have fun!

Did you use this guide to make a new logo? Show it off here, by adding it to a reply.

Here is what we created: logo1

An additional note is that the little images for the variation chooser are located in the folder if you decide to change them to match your site.

From Ubuntu

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS