Hello again. It has been a while since the last tutorial, but time flies and.. well you know how it is. But I can say that I have missed you all, and I am looking foreward to this new tutorial.

I really feel bad about some of the templates over at Rocket Theme. Not bad as I don't like 'em, but I feel bad that some of the new ones gets so much attention, and the old one doesn't. Versatility, Versatility2, Carbonite, Mobius they are the hot stuff at the moment, and I really don\'t blame people for that - they are AWESOME!

But an "old" one that I haven't really touched is a template called Extremities2. I have no idea how popular it is, but for this project it's PERFECT!

Today we will be looking at an easy makeover, and turn the template into a Halloween theme, so let's get started!

Preparation

Well first of all you need a membership from Rocket Theme in order to get access to this template. And as with the other tutorials you will need the following tools to make it all a lot more easy:

• Fireworks
• Webdeveloper
• Colorpicker

Check the link section on the left to see them all.

But we will also need some source material for all this to work and look scary and Halloween'ish. We got something included in the template, that I see as a bonus for a project like this. The template uses a technique called "sifr" where you can give your headings another font, and Arial does not really scream Halloweeeen does it - so this is just great!

But more about this later on. We will need some photos or illustrations with some classic Halloween motives. This can be found all over the web, just make sure you have the rights to use it. But also make sure you find some quality stuff (and this can be hard in the free world). If you really want to give it that extra touch, then I would recommend www.bigstockphoto.com, they got a HUGE collection of images that can be used and the prices are very low in my opinion.

A lot of font sites includes Halloween themed dingbats as well, I'm sure you can find something interesting there as well. But before we get started make sure you got a few images, a couple of fun dingbats and similar decoration stuff.

The template

Well I assume you got Joomla installed and your'e ready to load a new template. So in the admin area of Joomla, load the new template "Extremities2" and set that as the default template.

After the template has been installed and set as default you need to edit the configuration file for the template. The file is located under /templates/extremities2 and it is called "templateConfig.inc.php".

Change the config file so you get the following:

Why green you might ask.. Well the font just fits our theme better. The menu to the right is just set like that so we do the same and our screenshots looks similar.

As you might have seen in the above template folder, there is a map called "sifr" along with the "js" folder this is where all the font change happens - but just leave that for now.

If you are curious about sfir (Scalable Inman Flash Replacement) then you can read more about it here: http://wiki.novemberborn.net/sifr/

But we wanna get creative now, not technical..

The Background

The background is the main part in this template that makes it all worn and scary. The background is using a tileable image to give that grunge look. I think it fits really well, but we should add some small details just to point the viewer in the right direction (halloween) and we are here to modify, so why not...?

Dingbats can be cheesey, but for season themes they can be fun. And for background stuff, small simple dingbats are great assets. If you have no clue about dingbats or where to find those, go have a look in the halloween section at DaFont - I am sure you can find something nice and free there.

I will settle with HalloWien as it is free and got a lot of nice and simple motives. Choose what you like, download and install the dingbat as you would with any other font. You can see HalloWien here http://www.dafont.com/hallowien.font

Before we start to edit anything, make a tutorial folder and copy all the needed stuff into that, and that includes a copy of the template png source file called "ex2_source.png". It's nice to have it all collected in one folder and then you won't overwrite important stuff. A folder structure could be like this:

You get the idea. Open the template source file "ex2_source.png" in Adobe FireWorks. In FireWorks make sure you got the following "palettes" open:

If some of them are not present then you can turn 'em on in the top menu under "Window". If you have turned on "frames" you can in that panel see the 3 colour version of the template. Click on frame 2 in order to activate the green version that we are using. The frame is called "2 green-hiking".

Now that we have the right colour version showing, lets have a look at the background. Try and click on the "eye-icon" next to "Layer 1" in the layers palette. If done right it should "remove" all stuff above the background so we can get a clear look at it. As you can see the background consist of one big image and it doesn't really look tileable, but after it's sliced it will be cut into 3 pieces top, middle and bottom. To be able to see where the background will be sliced, you need to open the web layer and make it active. Just click on the "eye icon" next to "Web Layer". In here you will find a lot of green boxes those represent slice areas. Try and disable all of those except for the last 3:

The 3 images that will eventually be made are called:

So we need to attach those name to the slices. Just remember that we dont want to add the .png part in the slice name, that is done when we set optimize to png. Click on the green slice that represent the top part of the image, and in the "properties" panel add this name: ex2_bg_top_grey.

Now we have that top image ready to be exported we just need one small thing first. Some custom stuff of course! So disable the weblayer so there isnt any green stuff in sight and load your text tool in the toolbar on the left - the shortcut would be "t".

For the font select the dingbat you downloaded earlier, and then add some well placed skulls and pumpkins around the top area. Dont add too much as it will get cluttered and look like crap.

The font colour should of course be the same as the other grunge stuff, this way it will blend in nicely and not stick out in an odd way that takes the focus away from the content.

Everytime you have typed one "letter" chose the arrow tool "v"to move the "letter" around. You can also press "ctrl+t" to transform the letter, for instance if you need to scale or rotate.

But I guess you have added something to the top slice by now.

The right top side got a few others, but I think that I will have to look for a new dingbat as the current one does not provide enough choices in my opinion.

With a quick search in Google I found a nice resource page over at about.com - there are some excelent dingbats there, if you scroll down a bit.

Now add more images to the two other slices (middle and bottom) and as we did before (still keep it simple), give the two slices the right name and save the file.

We are now ready to slice and see how the new background looks.

Slice the background

Making slices in Fireworks when many slice fields are present (the green boxes) can give some odd problems if not done right.

As the layers in the "Web Layer Palette" are arranged now a slice of the background would also give us other small files as we are below some of the other slices.

Well the above was not really clear but follow me on this. Try and drag the "ex2_bg_top_grey" to the top of the "Web Layer Palette" (just click and drag the layer):

This way it will be one big slice when we export the file. Make sure the file type is 8bit png (look in the optimize panel):

Right click the green slice box on the image and chose "export selected slices":

The next screenshot might not be that clear, but make sure that Fireworks saves the file with the following selected:

When you have exported all 3 background slices with the right name, you should try and upload those new files to your ../templates/rt_extremities2/images folder.

If all the above is done right, you should be able to see your new background. In case it doesn't change, try and do a "ctrl+f5" to reload images and css.

The hard part is now to look at the background and see if it seems random enough or if it is too "tiled" and systematic. It might take a few repositions of elements in order to get a good looking background. Just re-position the elements you dont like (dingbats) and do a new export slice.

Did you notice that the top right was boring and straight compared to the rest of the edges?

Well that is because we are missing something somewhere - perhaps some overlapping graphic, lets have a look.

Hehe.. I have looked for ages and the bg graphic shown on Rocket Theme is def. not the same as the one in the source file, its missing something up there.. Oh well until we figure out what happend with the top right, just take the marquee tool "M" and select a piece from the top left corner, copy it and paste, flip and rotate it - just so it fits nicely. Make sure your layer with the background image is selected before you copy from it. To select the layer just click once on it.

Most of the transform, rotate, flip tools can be found in the top menu under "Modify/Transfom"

A sudden scary idea!

Well I said make the background dingbats minimal and blend in etc.. bah lets have some fun.

If you make a layer below all your dingbats, you can paint in scary red and yellow eyes on some of those monsters. Do it with the pencil, its dead easy as the overlapping strokes will be covered by the dingbats. Only the eyes will be transparent.

Before you upload the new slices, you need to optimize the slices because of the new colors. So click on a slice box and go to the "optimize" panel. Choose 8 colors, and press rebuild. Some new colors should show up in the color swatches.

The new bg images will probably be a lot heavier than the default one, but you can optimize and do as you please. This is just for the sake of trying out some functions.

Well do the the same for all 3 slices and upload the new backgrounds. See if it all looks nice and fine.

But I don't know what resolution you run your monitor at, but if it's above 1200px wide you will probably notice that the new background elements does not have the same gray as the background. This happend because we are using more colors, and Fireworks gave us a new one.

Don't worry though it will only take a second to fix (if you remembered to install the right tools mentioned in the top). In your browser, use ColorZilla to copy the color code into your clipboard. Just click anywhere on the light grey color of the background. You will see that the light grey part is #333333 and the dark part (the body) got #313131 - and thats why they don't match.

We will change our body colour to this new #333333 and they should match nicely. In your template folder open up the css file for the green theme that we are using. The path to the file would be something like: ../templates/rt_extremities2/css/green_color.css

In the top of the css file you will find some code that looks like this:

Change that to:

Save the file and refresh with ctrl+f5 and your new background colour should blend in with the graphics nicely!

Now this was just one way to change the background and I am sure that with a little creative mind you can think of something else for decoration. You could have "vines" going down the side, chains, rope etc. be creative!

And this ends the chapter about the background.

The big picture

On the green theme we got a nice image with a tent and some deserted field. I am sure this could be used as a theme for some scary Halloween horror movie, but I think we should add a new image instead.

Well you need to find a new photo with some sort of scary Halloween motive. I am sure there are many free sites around, but I really urge you to try a commercial stock image site instead. Try www.bigstockphoto.com and search for Halloween - there are really a lot of perfect images with an edge over free images. I settled with a nice scary house:

Ok pay attention, your'e about to see a nice trick!

If you know Fireworks well this is not THAT big of a trick, but to newcomers it's a cute little feature.

Open the chosen image in Fireworks. Fireworks will give you a new tab for that image sitting nicely beside your source image. Select the image by clicking on it one time (a blue border will show around it) copy the image by pressing ctrl+c:

Now get ready for that big trick.

Press the tab to your source image, and reveal all layers and hide the web layer (this should show the entire image without the green boxes). Click one time on the camping image, so it's selected (blue border around it). In the top menu under "edit" chose "paste inside" and voila you new image is now resting inside the old image, and the old image is now a mask instead.

When you do the "paste inside" you might get a notice about if you like to re-sample the image chose "DON'T RESAMPLE".

Notice in the layer palette the small chain icon between the image and the mask, de-select that by clicking on it.

The reason why we clicked the chain is because we do not want to move or resize the mask at all - that should stay there as it holds the right position and size for the image we need to export later on. But if you have done it right you should now be able to resize, rotate and move the image so it looks just as you want it. Just press ctrl+t while the image is selected and you should see the handles that controls the image. Alter the image in any way you like, just make sure it's not too small and will show stuff under it:

If the colors or light don't match well, you can adjust that by the filters in the bottom property panel. Just select your image and add a filter with the "+" sign, for instance try hue/saturation filter as you can change colors, saturation and lightness.

You can add as many filters as you like, two are already present (something Andy from Rocket Theme did) - you can remove those with the "-" sign. But don't overdo it - we dont want to make odd bevels and stuff at this stage. A glow might look good, but beware it will most likely be cut off due to slicing.

Well we could stop with the image here, but the text part of the image does not really make sense in a Halloween kind of way - does it? I really dig the font already used, so I wont change that. The font is called "OptimusPrincepsSemiBold TTF" it's ready for donwload at Rocket Theme under the Extremities2 download section.

With the text tool "T" write something that makes sense. Perhaps think about a new color theme for the fonts. I chose I nice orange for the top text called "#FF9400" and a colour from the image for the grey part. You can select both text areas and the black baground (with ctrl+left click) and move it around, there is no need to keep to the old spot. When your'e happy with your image, activate the slice layer, move the right slice to the top and give it the right name:

Make sure that we have a jpeg optimize setting in the top:

Slice, export and upload the new image, and it suddenly got a lot more scary... or just a bit - the banner image is done!

SIFR

I mentioned "sifr" earlier. A technique that is able to replace normal web fonts into more cool looking ones. This is done with Flash and a little bit of Java. I will not in this tutorial talk about how it's done, we just need to change the colour as the font works as it is. So all the header tags will get a nice orange colour as mentioned before - #FF9400. The good thing about sifr is that we only need to change two lines of code in order to get the orange colour.

Open the following file with a text editor or somthing similar:

In here you will find two lines of code that needs a change:

Change that to the new colour:

Save and upload the file:

The red link colour is sticking out with this new orange colour, so I suggest giving the links the same colour as well. This is done in the css file belonging to the green theme. So edit the following css file:

The line we need to change first is this one:

Change to this:

If you feel it all gets a bit too orange, try changing the colour to another one. I kept the orange for the links, but went with a dark red for the "sifr" headers: The red colour I chose was "#990000". It only takes a second to try different combination, and pick whatever you think fits your mood and idea of Halloween best:

The active links that is now a light green will get the same red as I chose for my header, you pick whatever you like. But the active links are changed in the same css file as before. Just find the following lines:

Make sure they are the right lines as some does look very similar. Change to the new colour:

Also find this part of the css file:

And change to this:

Let me be honest with you. I am not really sure I think the colours I have chosen are THAT hot, but for the sake of it I'll keep 'em. But if you have tried these tutorials before you will know they are done in "realtime" and I change forth and back from time to time. In the end I might even chose a purple, black, yellow combination - we will just have to see. I'm sure you have chosen some wise colours that works better than mine right?

Oh well the chapter about "sifr" and links is done, lets move on!

The Logo

Well the logo in top is the next thing to look at so lets play with that a bit. If you click on the logo or the logo reflection you will see that they are symbols. If you click on the small arrow you will enter the symbol window.

In here you will be able to change the size and color and similar stuff. I don't want to use the symbols so for now I will just disable those two layers by clicking on the "eye-icon" next to the layer. So diasable those two layers, so we got a blank background to work with:

Chose the text tool "T" and write a new logo name. You might wanna use the font we used before, or perhaps you have found another one you like - it doesn't matter.

You could settle for a plain colour of some kind, but let's a little somthing to it instead. I think about a logo going from a warm bright orange to a darker and more muted red. This can be done with a circular gradient as fill. Select the logo and where you see the color swatch, click it and chose "Fill Options" - then circular gradient, edit and add some colors.

As we tried earlier you can also add a filter in the properties panel, perhaps a glow:

It might be a little empty up there so add some symbols, a pumpkin or some additional text - just make sure you don't go over the edge of the slice box. I found a cute little gothic something over at www.bigphotos.com - she seems to like being next to the logo. Def. not a perfect logo, but it's just done to give you some ideas:

By the way if you look at your top menu you can see that the link dividers are still having a colour from the old theme. That's an easy fix as it just involves adding another colour to a right border. Open the green css file called:

And find the following lines:

Change the hex color to whatever you prefer. Perhaps an orange:

If you dont like the right border at all, you could just comment out the lines with these characters:

With those signs "/* & */" the line will just be skipped, but you don't have to delete it. Another idea would be to give the border the colour black #000.

The last words

Well we have come to an end. This was not big die hard tutorial, and I hope every one were able to follow this to the end. As mentioned this was a fast, small and rather simple custom template. You could do so much more to give it a more intense look, and make it even more interesting.

Now you just have to fill your site with nice halloween content or if you just want a theme but with your normal content then perhaps add a few scary illustrations around.

Other things you could play with or perhaps stuff to give you some ideas could be:

There are really a lot of places where you could add your own special touches - be creative.

You can find a demo site where I followed this tutorial here: http://www.beta-code.com/joomla_tutorials/tutorial6/

I am sure you can find ways to make variations on this tutorial. I tried with a completely different background, and some other elements and colors.

Not really finished and a lot to adjust, but have a look here: http://www.beta-code.com/joomla_tutorials/halloween/

I hope you enjoyed the tutorial, feel free to comment on the article, take care and have a nice Halloween when it comes to a door near you!!

Did you enjoy this article? Please bookmark it onto:

Comments (1)

Subscribe to this comment's feed

Show/Hide comments

muyayo said:

Hello man. Very good work. Thanks about ur tutorials. I´m just wait the next

September 21, 2006 | url

Name

Email

Website

Title

Comment

Write the displayed characters

Add Comment