The first tutorial is focused on one of the best looking (in my opinion) templates for Joomla. The template is called Internet Gazette and is available over at Rocket Themes.  The reason why I really like this template is because it doesn't look like a lot of Joomla templates that often got a portal looking theme. There are some really nice module positions and there is plenty of room to get creative with the colours.

Rocket Theme has launched a lot of new templates since Internet Gazette and a lot of them are def. more versatile, still Internet Gazette is highly recommended and can make some impact on your site.

For this template I will use the lovely template called InternetGazette, as I think it’s the most versatile template ever released for Joomla. In my opinion, it even beats the newly released June template called Versatility, perhaps not the same amounts of modules, but InternetGazette has got a good all round look that fits many themes and projects.

Oh well… enough talk lets get started!

Get Prepared

To make this project as simple as possible, we need to prepare our work. It will take a little time, but once sorted it will make life a lot easier.

Start cleaning your desktop!

Too many folders and files on the desktop will only confuse and add the risk that you might delete or rename the wrong folders and files. After you have cleaned the desktop make a folder on the desktop called “template-export”, all the altered files will end in this folder. Another nice thing to have on the desktop, is a shortcut to your font folder, just so you can drag newly downloaded fonts into the folder without a lot of hassle.

Software requirements for this project:

Adobe Fireworks for editing the template graphics. You can download a 30 day trial at the following address: http://www.adobe.com/products/fireworks/

A text editor of some kind in order to alter the CSS files. On a PC, PSPad is recommended, on a Mac, try Textmate . A dedicated CSS editor like Style Master is def. Recommended. Also, the Mozilla Firefox browser and a couple of plug-ins. More about this in, the next section.

Mozilla Firefox

So why do I need a new browser? I have Internet Explorer and I am happy with that! Well Internet Explorer might be all you need for browsing the net, but for web development, Firefox is a great tool, because you can download so many nice plug-ins that will make life a lot more easy. So go get the following right now:

Firefox: http://www.mozilla.com/firefox/

After you have installed Firefox, it’s time for a couple of free plug-ins. Go visit the add-on page:

https://addons.mozilla.org/firefox/extensions/

The two plug-ins you need to find are these

• Web Developer - https://addons.mozilla.org/firefox/60/
• Colorzilla - https://addons.mozilla.org/firefox/271/

After a hopefully successful install and a browser restart you should see these two new items in your browser:

Web Developer Tools

Colorzilla

Web Developer will be the tool, where we can see all tags, divs, styles, images etc. Colorzilla is a small tool to pick and copy colours from anywhere on the screen.

The Theme

So we need an idea for a new theme. This could be anything, but I will go for some online music site, based upon some of the bright shades of the original “Beige” version.

I will keep the site simple, with a small logo and a header text of some sort, we take it one step at a time.

Make sure you have a fresh installed InternetGazette template ready.

Download the templateConfig.inc.php file and set the template to the following: “wide, beige and center”.

After you have saved the modifications, upload the file and your template should look like this:

If some of the modules are not showing, you might need to add some dummy content in the right modules.

The first thing I want to do is remove the line that tells me where I am on the site (pathway), it destroys the nice horizontal layout of the two modules next to each other. So in FireFox I want to locate the right tag.

In Web Development choose “Information / Display ID and Class details”, suddenly you can see all sorts of nice stuff. Somewhere down the site, you can see the “Home” and the tag it got is “.pathway” – great we need to find somewhere in index.php where this gets loaded.

So download the index.php from the InternetGazette template folder and open it in your preferred editor. Scroll down to line 86, and you will find the following code:

Delete that line, save the file and upload. The pathway should be gone, and the two columns should line up nicely now.

This was just a minor issue, now lets move to the more fun part, the new colours and graphics. First we need to download the .png file for this template, you can get that from the Template site, the same place you found the InternetGazette template. The file should be named something like jan06_inetgazette_comp.png – place the file on your clean desktop.

Open the .png file with Fireworks. If you’re not used to Fireworks it might all look a little odd, don’t worry I will guide you trough the most important stuff. Also open your ftp program and navigate to the image folder of the InternetGazette template.

We will override a lot of stuff, so the site should not be your most important thing in life. If anything goes wrong, just un-install the template and install it again.

The most important windows to have open are properties, layers and frames. If they are not present turn them on within the “Window” menu in the top. In the frames menu click on “Beige” so we have the right template showing, the others are referring to the rest of the styles.

The layer menu includes all the graphical elements that the design is build upon, and in the top of layer menu you will find what is called “Web Layer” that includes all those light green slices. Slices are cut out elements of the design that with some CSS code makes the whole site. Small graphic chunks/slices are better for load times compared to big images. Even in broadband times that’s a good thing! If you want to turn off some layers or slices, just press the “eye icon” left to the layer and it will be turned off. Try and turn off the whole “Web Layer” so you can see the design without all the alien green stuff. All the lines that runs in every direction on the image, are just guide and slice lines, don’t worry about those. The green boxes are actually the only images that will be used for the template – remember that. Everything outside those boxes are just for good looks ;)

The Background

The first part of the template we will change is the background. I want a flat background, and a greyish tone instead of the green one. With the normal pointer tool “V” click one time on the background. In your property window you will now see all sorts of information, we need to choose “solid” instead of the suggested pattern. After you have chosen solid, the background should be without the pattern, but still with the green hue.

To remove that press click the hue/sat effect once and then the minus “-“, the background should now turn to grey as the bucket suggest. Now that the pattern and the effect have been removed, you can at the bucket tool select a colour, I choose one from the actual design and just a tad warmer - #F1F0E7 to be precise, pick one you like, don’t worry it will not be THAT hard to change later on.

And now we need to upload the new slices it involves. There are 3 slices in total. Press the eye icon to make the “Web Layer” active (the one with all the green boxes”. The 3 slices we need to save and upload are located here:

Let’s see if we can find the right names for those three files in Firefox. Launch Firefox and navigate to the site. In the “Web Developer” menu, choose “Images/View Image Information”. A new browser tab should open with a list of ALL images showing a preview, url, filesize and measurements – how cool is that? With the aid of this tool, locate 3 slices that shows some of the old green textured background. Mark and copy the filename as in the illustration (the file name should be used for the slices in Fireworks). After you have copied the 1st filename, return to Fireworks. Click on the slice number 1 left to the logo and in the property field paste the name you copied, and remove the last “.png” from the name.

Do that with the two other slices as well. The 3 names that should be used for the 3 slices are:

• ig_shadow_left_beige
• ig_shadow_right_beige
• ig_background_beige

Lets export those slices, and see if it works. We just take one at a time. Right click the 1st slice and from the right click menu, choose “export selected slice”, navigate to the folder we made on the desktop called “template-export” and press “export”, do that with all 3 slices. After that you should have a folder with 3 different png files in with the right names:

• ig_shadow_left_beige.png
• ig_shadow_right_beige.png
• ig_background_beige.png

Upload and overwrite the images to the FTP folder, go back to your site and refresh a couple of times to see the changes. It might take a couple of refreshes or a shift+refresh to make it work. You should now have a site with a bright un-textured background – right?

The Banner Background

The next we are going to change is the actual banner background, again I want a bright image, and perhaps make a simple horizontal shape instead of the wavy one we have now (just for the change of it). The way I will do this is probably wrong because I could not find a slice that suited the whole banner, but we will make a temporary one. In Fireworks turn off the Web Layers and remove the rest of the green guide lines with the V tool. Just drag the lines out of the stage and they are gone. Again with the V tool, try and hover over the different graphic elements to see the red bounding boxes. Click on the round logo button, the layer that belongs to this graphic element will light up in the layer palette on the right, if you can’t see it, try and scroll up or down in the layer menu. If you press other elements you will see that they are all placed in the layer group called “header”. Turn off the “header” section, so you just have a nice clean banner.

The banner is made out of two elements. A rectangle with a gradient, and a curved shape with another gradient. Click on the curved shape to select it, and turn it off in the layer menu. After that click on the red rectangle and note that it’s filled with a “Linear” gradient. Click on the small red square next to the bucket in the property panel, and you can now choose what colours that should be used for the gradient. I will pick two light ones from the current template. After that the banner should be updated to reflect the choices you made:

To make the banner a little more interesting I will add a horizontal reflection with a white’ish rectangle on top of it. Make a copy of the current banner by pressing alt+ctrl+d. Select the new rectangle and in the property panel, choose “solid” fill and make the colour white. Also in the property panel, change the height of the rectangle to 40, the transparency to 30% and align it on top of the other banner:

Now we need to add a slice over the new banner, and get it exported. Use the slice tool to drag out a square that fits the whole banner precisely! The left and right white borders should not be included.

Be as precise as possible, also use the coordinates and size numbers in the property panel to align it perfectly. It should be something like: w967/h98 and x14/y0. If other slices overlap the new slice, try and turn those off in the Web Layer menu. And a last thing to do is to name the slice as we did before (in Firefox) – the name for this slice is: ig_header_red. Export selected slice as we also did before, upload slice, refresh and watch a light banner (with old red logo on top of it).

The Logo

ImageFor the logo, I will use a cute little icon I found somewhere on the internet. The easiest icons to work with are those seen from a 1 point perspective and nothing dimensional. Try and see if you can find one that suits the purpose. If you find an image on the internet, make sure you check the license associated with it to ensure you can legally use it.

Open the image in Fireworks and with the V tool drag him onto the template. If the program mention something about “resample” just choose “don’t resample”. Place and size the logo, so he fits nicely in the left part of the banner. Make a copy of the image with alt+ctrl+d and reflect the image by choosing “Modify/Transform/Flip Vertical”. Align the new copy so it’s right under the other image:

We now need to make the “reflection” a bit more realistic. Select the lower head and from the top menu choose: Modify/mask/hide all. For a second he will be lost, but we will bring him back with the gradient tool. Select the gradient tool from the menu on the left, and try and drag over the area where we last had the little guy. With a couple of tries and a gradient that goes from black to white, you should be able to make it look like this:

Again rename slice, export slice and upload to your ftp, if everything works out as it should (remember to check sizes and names) it should look like this (I did the slice under the head as well, you can do that too). 

The Name

So now we need to alter the name of the site, and here we need to do a little thing to make the creation eaiser. If you look at the Web Layer, and see that slide for the text, you will see that there is not a lot of room for anything else than the default text. So we are going to change the size of the slice, and also alter the numbers in the CSS file (or we will get in all kinds of trouble).

So turn on the Web Layers in the layer menu, and change the size of the slice from w320/h58 to w400/h98 and align it right next to the logo slice:

Notice how the slice is as high as the one to the left and it now reach a little longer in the width. We need to remember the new size, so we can alter the CSS file to suit our needs. Open the CSS file from the templates CSS folder, it is called “template_css.css”. In order to find the right place to edit, check the site out in Firefox and in the Web Developer menu choose “Information/Display Block Size” – quickly you can see that the tag we need to alter is called: div#headertext 320×58”.

Around line 382 in the template file you will find this:

Old Code

New Code

Top should be changed to 0px because it will fill the whole height. Name the slice with the right name (this time it will be ig_headertext_red), and you have a little more space to get creative at. Ok back to Fireworks where we need to add some text. Choose your favourite font, and write some sort of name with the text tool. I have written “Beta Code Music” with the font called “Weltron Special Power”, and for the two first words I picked white as the colour and for the last word I picked an orange from the happy logo face. I also added a thin black line around the words and gave it a tiny drop shadow in the effects panel.

Turn on the Web Layers once more and export the slice with the text, upload image and refresh – your top banner with logo and text, should now be complete. If the banner looks odd and misplaced it might be because you forgot to upload the recently edited CSS file (I know I do forget that a lot).

When you start to change the look of the graphics and colours in such a template, there is a lot that doesn’t fit any more. Text colours, bullets, links, menu etc. In part two of this tutorial I will tell a little more about that.

I hope you understood just a tiny bit of all that I have written, and I hope you can use it for something in your future custom transformed template, and if you didn’t understand one thing, I just hope you appreciate your new browser ?

Have fun
Thomas Nielsen

Did you enjoy this article? Please bookmark it onto:

Comments (4)

Subscribe to this comment's feed

Show/Hide comments

Geoffrey said:

Hi Thomas, just testing comment section

September 16, 2006 | url

Yves said:

Hello Thomas, just visiting your site and also testing this nice comment section

October 10, 2006 | url

ric said:

Hi, thomas, Great tutorial. One thing: how do I add a left column? ric

April 07, 2007 | url

Libby o said:

This is SUCH a good tutorial! Thank you SO MUCH!! I had a hard drive crash, had to recreate a site from scratch and thought I'd lost your instructions forever...but I did find them again...PHEW! PLEASE, please, please keep these up for as long as humanly possible...their INVALUABLE. thanks again

October 16, 2007

Name

Email

Website

Title

Comment

Write the displayed characters

Add Comment