Well we are back again with the custom template tutorial, this time it’s part 3. If you have been to www.beta-code.com lately you might have seen that the menu has changed quite a bit. I was simply hit by the sun, and decided to skip the black bar and make a nice orange one instead. So perhaps we should take a brief look of what I did.

Open up the template PNG file, and turn off the web layers. What we need to alter to make the nice orange bar, is the main gradient, a couple of lines and the dividers. I have chosen a couple of orange values from the logo, you can choose whatever you like. These are the graphical elements you need to alter:

Image

The colors are changed by selecting an element with the pointer tool “V” and then change the desired values in the property panel.

After you have altered the stuff you want, we need to export the elements/slices that changed during this procedure. Turn on your web layers and export the needed slices. Because we have done this a couple of times, the right slice names should still be there. Remember that the top of the banner consist of 1 logo, 1 header text and the actual background. Turn to chapter 1 for a reminder of this. Below are the slices that needs to be exported:

Image

After you have uploaded the new slices, and looked at the result, you might notice that the links and sublinks do not match the orange theme anymore, so we need to alter the CSS file a little bit. Open the beige css file, and go down to line 161, change the 3 lines you got there with the following code:

This should keep the white links, but turn the links into a darker orange to fit the visuals a little better. Of course if you need another value feel free to do that. I must admit that the white arrow next to a “daddy” link irritated me a little bit, so I removed that as well. This is not good for the usability, but looks meant more to me for a brief moment. I will probably take care of that later on. If you wanna kill the arrow as well, go find line 166, where it says something about a.topdaddy, and remove the lines 166-168 and add this instead:

Again feel free to experiment if you know how to find the right colors and their hex values. But if everything went smooth, you should have a nice orange menu instead of the black one, and I promise I won’t change it again just because it rains. If something on the other hand didn’t turn out as planned, try and look trough part 1 and 2 of this tutorial, and find more detailed info. But I am excited as we now need to style the content and see what we can come up with. As I write this, I have no idea what it will be like, but lets jump right to it.
Styling content with CSS

All the text, links, bullets etc. are controlled from the two css files in the template css folder. As you might recall they are called “template_css.css” and “beige_color.css”. Think of the 1st template as one that controls basic elements of all template variations (the stuff they got in common) and the last template as the one that makes one “sub” theme unique. So if you change a link color in “beige_color.css” it will only show in that template version not in “pga”, “light” or similar. So rest a sure, that no matter how much you destroy “beige_color.css” with me, you can always chose one of the other template variations and have a good looking site.

No doubt about it, Andy styled the templates in a good looking way so it’s hard to decide what we should change, but now that we have a tutorial I think we should change something. How about those red links? I was thinking of a nice orange instead or perhaps work with a good looking contrast of some sort - a blue of some sort. There are many ways to find some good colors, but now that we know our main orange color from the menu - #F29906, I have a good idea to find the perfect partner for that color. Try and visit one of the many color matching sites out there, for instance www.colormixers.com in here you can paste the orange color we have, and find some colors that suits it well.

Image

We can bookmark this theme, we can download a photoshop / illustrator file and we can even save all the colors as a text file (feel free to do that for further reference). Perhaps our orange color was just a bit unlucky in the looks, because in my opinion we didn’t get that many kinky blue ones, but lets try one of those and see if they work. The two bright ones are just way to bright for my taste, so let’s give the “dark” blue one a chance. It’s the color with the numbers: #3DB0BF.

But where in the “beige_color.css” file should we add that color? Well start by looking on your site, are those red links special for something or used for all links on the site? Well it does turn up all over both in back buttons, FAQ links, news items etc. so I think it’s just the “general” link color, so that should not be hard to find in the css file. When it comes to normal links we need to find something like “a:link” - and in the css file around line 9 you will find the following:

That means that links and visited links have the color #971111 but lets change that to #3DB0BF. Save the css file, upload and refresh a couple of times. Eeew I don’t like that blue color at all, I’ll try with the normal orange #F19906 instead. Perhaps we can have a blue color for mouse over. Hhmm the orange color is not THAT good either, a bit too light and perhaps too hard to read for some people? I guess with such stuff one would just have to experiment a little bit. I know one last place to visit for a good blue color, point your browser to this site: www.colorwhore.com they got a nice collection of colors. Press one of the color sections, and see if you can find something that suits a little better, perhaps even find a color for the links and one for when you hoover over the links. I looked around a little and settled for this blue color: #008CD2 perhaps not perfect, but if we change the bullets to something similar it might work. For the “hover” color I just took a blue color that was a tad darker: #3173AA. Oh but I didn’t tell how to change that color, well just go down to line 13 and find these:

Change the color value to the chosen one: #3173AA.

Image

Bullet time

But lets change the bullets now that we have our link color (whatever color you ended with). Go into your png template file turn off the Web Layer and select the first bullet/triangle on the left side of the template right under top stories. When selected paste the right color code into the property window:

Image

Turn the Web Layer (slices) back on, and give the slice the right name. And if you forgot where you can find the name, launch your site in Firefox and in the Web Developer extension, chose “Images/View Image Information”, in here you will soon discover that the bullet name is…… OH??.. this was def. not what I expected, for some reason the bullet is not shown on the page as an image, not a normal image, not a background image - I’m sure Andy did something clever, let me investigate right away. Well we all learn something new every day, and that def. includes me. For some reason list style images are not shown the same way as other images, I don’t really know why, but that doesn’t matter, we just need to find the names of those images.

The red triangles (those we just edited) are called: “ig_module_bullet2_beige.png” and the light grey ones are called: “ig_module_bullet_grey.png”. So for the slice name for the new blue bullet add this name: ig_module_bullet2_beige. Right click on the slice and chose export, upload to the server and see if the lists have changed:

Image

Ok the blue works, but I am not 100% sure about it… suddenly it got a little hmm dull and cooperative, not really that well suited for a music web site, but for now we leave it.

We have a much more urgent matter right now, and maybe you already know what I am talking about. But when we work with transparent images like the bullets we just modified, we need to define when the 8bit png image is transparent. Some of you did maybe notice that the bullet had a dark grey background on when it was placed in the “popular” module. You can’t see that on my image, as I have defined that the light grey should represent a transparent value for the bullet (hope you got it, it was a long an pretty technical sentence). I will try and explain it a little better, so keep attention.

For every single slice, you can define what image type and what image properties it should have. That means that some slice could be gif files, some could be jpg’s and some could be png’s. In this template we only use png images, but these single images can have different options. For instance if you have one slice that will only show on white background, you don’t need to define that it should be transparent, as long as it got a white background it will be fine (not very flexible if you decide to change background color one day, but for now it would work). Other images that show up on different coloured backgrounds, needs to be transparent or the image will get an ugly background in some places. A good example is the blue bullet we just made. The blue bullet will at the moment be shown on both a dark and light grey background “Latest News” and “Popular”. So if the blue bullet had a background color, dark grey for instance it would look bad in the light area. So we need to tell that slice that if it “meets” a dark grey or a light grey, it should just be transparent (so only the blue color shows up). And how is that done?

Well let me show you. Turn on the Web Layers so all the slices are visible, click one time on the slice of the blue bullet to activate it. Now navigate to the top menu and chose Window/Optimze or press F6, this should launch a panel on the right side of your monitor - most likely over your layer panel. Before I optimized my slice, I had the following color palette:

Image

The settings shown are for that single slice only. The red shades shows what the former bullet was made of and probably some extra shades as well. Try and press the “rebuild” button, to make Fireworks read a new selection of colors. After you press the button you should have some shades of blue instead. Now to add some colors that indicate when the image should “turn” transparent, click on the “Color Picker +” icon in the same panel and click on the two grey colors you want to add. In the palette you will see that they turn transparent (indicated by the standard square pattern most image applications use.

Image

Next time you export the bullet we made it will be exported with the new settings from the optimize palette. And if you had a grey box around the image before it should def. be gone now. There could be a small browser issue with some old browsers but most recent ones don’t mind 8bit png transparency (it behaves much like a transparent gif file). Some of the really nice browsers like the Firefox I know you use now ;) can handle 32bit png images, and that means try alpha transparency - and that’s lovely, but IE is not on that train yet (but I think the new version will finally have it implemented). But that was just a little bit about optimizing images in Fireworks. I could have written a whole chapter on this subject alone, but lets keep it here. Feel free to explore the options for your self.

Final words

Well I wanted to go into the content styling a little more, but as the last stuff took a little longer than expected, styling the content will be the next subject/chapter. So I hope next time will be without Fireworks and text styling only. So sorry if you had your mind set up for content styling, but the rest was important to know. And these tutorials are made on the go, so just a general warning from now on - I will never know what this ends up with, we just have to see every time.

Have fun
Thomas Nielsen

Did you enjoy this article? Please bookmark it onto:

Comments (1)

Subscribe to this comment's feed

Show/Hide comments

Drew said:

Must be my luck today but the images to the tutorial are not being displayed here either. Just the word IMAGE is in place where the picture should be. Any chance of correcting this? I know this is an old tutorial these days but it's brand new to me... Thanks Thomas! Awesome first part of the tutorial though!

October 27, 2008

Name

Email

Website

Title

Comment

Write the displayed characters

Add Comment