How to make a custom Joomla template!

Part 2

NOTE: This Tutorial has been donated by a Thomas Nielsen. This work is licensed under a
Creative Commons Attributon NonCommercial ShareAlike 2.5 License.

Lets continue with the menu bar

If you have not already tried it, please take a look at part 1 of this tutorial before attempting this
step. Before we start styling the actual CSS, there is a little more of the graphics we need to
change. Let’s begin with the menu bar. Perhaps we should try with a dark contrast to all the bright
stuff – black perhaps?

Open the Fireworks .png file (I hope you saved it), also make sure you have your folder with
exports close at hand, and also a browser window pointing at your site (I hope you are still using
Firefox and enjoy the new way of surfing).

In Fireworks turn the web layer off so you can enjoy and handle the graphics. The menu bar
consists of a long rectangle with some dividers. We will change the rectangle first. Select the
rectangle with the V tool, and note that it’s filled with a gradient. Change that to a gradient that
goes from black to a dark grey. If you have forgotten how to alter the gradient, turn back a few
pages of the tutorial. As with the banner background I will add a light rectangle on top of the
black one and fill it with white. So copy the banner with alt+ctrl+d and change the height to about
12px, make the fill a sold white and turn down the opacity to 25%, adjust the white bar so it sits
on top of the black one.

Turn on the Web layers so we can export the slice. The name can be found via Web Developer in
Firefox – Images/View Image Information, but I won’t mind telling you the name you are looking
for, it’s “ig_menu_bg_beige”. So add that to the slice properties and export + upload + refresh a
million times. Oh and now we got….

Oops – we forgot to export the slice under the yellow face as well. You see that has off course
changed too (it was green before). This slice got the right name, so just right click and choose
export selected slice. And now we have:
The orange button and the button dividers looks out of place – don’t worry about that, it will get
sorted.

So as mentioned lets have a look at the dividers.

They are very small so you might need to zoom in
a little on the graphics. When clicking on one of
the dividers you might notice that you don’t get
any options for changing colours, and that’s
because it’s a symbol. A symbol means an item
that you use a lot and with one change, you
change all of those symbols – pretty nice for the
designer, as it would take ages if he should change
all the dividers one by one. But in order to add
new colours, double click on one of the symbols
and that should launch the symbol editor. Again zoom in on the little creature also make the editor
a little smaller so you have access to the main image with the colour picker. Change the two lines
in the divider to something more appropriate – perhaps a dark and light grey – picked from the
main image, try a few to see if it works. After you are happy press “done” in the editor and all
instances of the symbol should change. Oh and zoomed in I see we need to take care of a few
lines (red and green), we will sort that out later.

As we have done many times now, find the right slice name in Firefox, add it to the Web Layer of
the divider and export + upload + refresh. If you look closely in the browser, one of the dividers
has not changed, that is because it is another instance – the daddy divider, used for top level drop
down items. And to be honest I can’t see the instance in the Fireworks template either, so perhaps
we should just download the image manually and change it in Fireworks.

Download the image called “ig_menu_divider_daddy_beige.png”. Open it in Fireworks and

just use the colour picker and bucket to alter the daddy of all dividers. If you know Windows Paint,
this should be an easy task. Save the image and
upload – it should have changed now.

So if we should sum up what needs to be done in

the header/menu department it would be
something like this. Sort out the dotted dividers in
the header, style the search box a little and finally
change the menu colours so they fit in a little
better. So we leave Fireworks for a little while and
start working with the CSS files instead. Oh and
you get to try your new nifty little colour picker
plug-in 

I could start to explain a lot about CSS, but we don’t have time for that, and I would not be the
right man to tell you about it, so search the net if you need some CSS advice, I’ll help in this
tutorial, but more in a “find and replace” kind of way. What I will start with is to remove the active
section orange. Main menu links will turn orange on mouse over. I will remove the blocks of
colours on the main level, as I don’t think they fit our curved black bar. So in Firefox we need to
pick the right orange colour. Click on the colour picker in the left bottom corner and hover your
cursor over the orange in the logo. When the right colour shows in the bottom corner field, click
once more to copy the colour code. Download these two template CSS files from your Gazette CSS
folder: “beige_color.css” and “template_css.css”. Open the first one in your chosen CSS editor
(notepad will do). Scroll down to the Sucker Fish area around line 140.

Remove this part

#nav li.active {
background: #e97f38;
}

That should take care of the big orange block!

The white links should change to orange text, and the big red box should not show up in the top
level of the menu. Let’s change that. Scroll down to line 159 and change this:

#nav li.sfhover a {background-position: 0 -35px;}

To this: (this is the orange colour we got with the colour picker)

#nav li.sfhover a {background-position: 0 -35px; color: #F39B08; }

And to remove the big red box, scroll down to the last part of the CSS file and delete all this:

#nav li:hover, #nav li.sfhover {background: #830e0e;}

Save the file and upload, see if the red box is gone and the links are nice and orange when you
hover over them with the mouse. Something is going on with the dividers we will look at that later
on. Take your colour picker and choose a dark colour from the menu bar. Scroll down to line 180
and change this part:

#nav li li li li.sfhover ul{background: #6d6d4e;

border-bottom: 1px solid #5B5B41;
border-right: 1px solid #5B5B41;}

To this:

#nav li li li li.sfhover ul{background: #131313;

border-bottom: 1px solid #5B5B41;
border-right: 1px solid #5B5B41;}

This should take care of the drop down boxes, so they fit a little better. Perhaps the black is just a
little too much, so try and change the #131313; to other colours from the colour picker, remember
to save and upload in order to see the effect. The two other border tags are line width and line
colour, you can play with this if you like as well. I ended up with this combination:
But play with the colours as much as you like, you can always change it back. Just don’t change
too many things in one go, as you might get confused of what stuff does what.

The header text is currently white, not very visible with the new light background, so let’s change
that do a dark grey picked from the menu bar. In the template_css.css file scroll down to line 370
and change this:

div#header div, div#header td {color: #fff;}

to this:

div#header div, div#header td {color: #656565;}

– much better right?

The search box does in my opinion stick out a little too much. This can be changed by adding a
darker background colour. Pick a light grey colour from the menu bar, and in the beige_color.css
go down to line 65 and replace the background colour #fff with #D2D2C9 – again this works
wonders in my opinion.

In the beginning of all this I did not like the dotted lines in the top, but now with the dark text and
dark search box, I think they fit well enough to leave them alone for now. I know I promised to
change how the dividers behave, but as the links in both the top menu and submenu are
connected in the CSS, it seems to be a lot of trouble to alter just for this tutorial – perhaps next
time. If some kind soul can see it fixed without a hassle please let me know.

So this is the end of part 2, in part 3, I will change some stuff in the content area, so it suits our
new theme better.
Have fun

Thomas Nielsen