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.

Image

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’ve 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:

Image

The orange button and the button dividers looks out of place – don’t worry about that, it will get sorted.

Image

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.

ImageDownload 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 and remove this part:

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:

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

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

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:

To this:

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:

Image

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:

to this:

– 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.

Image

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

Did you enjoy this article? Please bookmark it onto:

Comments (2)

Subscribe to this comment's feed

Show/Hide comments

Name

Email

Website

Title

Comment

Write the displayed characters

Add Comment