Article: Getting started with a PageKit - Part 2

Level: Beginner. Published on 6 April 2004 in Getting started

Learn how to change the look of your PageKit, including colours and graphics.

In the last tutorial, we covered the structural basics of a PageKit - downloading, unzipping, changing the text, adding pages, linking it all together and then finally uploading the files to Web space.

This is all great, but it still looks like what you first downloaded. Admittedly it has structure and information, but not a great deal of individual flair - after all, thousands of other people have downloaded the same PageKit. We now need to change it to make it unique to us.

As before, we'll be using the Hi PageKit, and we'll persevere with the mythical subjects of Sue and her cats to give the site some focus. If you're feeling confident at this stage, you can experiment with your own design and follow the steps through, but otherwise it's a good idea to follow the tutorial exactly once or twice, just to get your head around how it all works.

Files

My edited Photoshop file for this tutorial is here.

All the files for the finished site are here.

We'll be using an image editor for this section. You can make some modifications without one, but to follow this tutorial all the way through you'll need some image editing software. Something like:

• Adobe Photoshop / Photoshop Elements
• Macromedia Fireworks
• Corel Paint Shop Pro or
• The GIMP.

The GIMP's free, but isn't the friendliest piece of software around. Having said that, the recently released GIMP 2.0 is a major improvement.

Fireworks and Photoshop are quite "pro" and are very nice pieces of kit, and Paint Shop Pro and Photoshop Elements both retail for around the $80-85 USD mark (on Amazon.com).

Personally I'd recommend Photoshop. It's the grandaddy of them all and will do just about everything. I'll be using Photoshop for this tutorial but you can do the same things with the others, in slightly different ways.

1) What's it going to look like?

The easiest way to design the new page is to start with an image of the full page. This is what I did when I first designed "Hi". You can download that initial design from the PageKit's download page (Download PSD file for this PageKit). A PSD file is a native Photoshop file. For instructions on downloading and unzipping, have a look at the last tutorial.

When you have the file hi.psd, open it up in Photoshop and we'll take a look at what we have. You should see this file:

You should also see the Layers palette showing three layers:

I'm not going to talk a lot about the intricacies of Photoshop in this tutorial, because you're just as likely to be using something different, and I also don't know your skill level. So if you're a novice with Photoshop or are using one of the other editors, you might well want to read the manual a bit as we go through! You may also find our Photoshop tutorials helpful.

Pick your colours

The first thing to do is to pick a new colour scheme for the site. The reason we're doing this in Photoshop first is simply because it's easy to see what it's going to look like when you're done!

I fancy a lighter, more contemporary theme for Sue's site, so let's try quite a vibrant olive-green colour for the background (I used RGB 180, 200, 3).

To do this, first turn off the layer that has the "hi" text on.

You can see that the photo is hanging over, but no matter. Make sure you're working on the "Background" layer and select right up to that left column, including that little bit of overhanging photo - we won't be needing that anymore. Use the Rectangular Marquee tool in Photoshop to select the square areas. When selected, fill it with your green colour (Edit > Fill in Photoshop). You should have this:

Doesn't look like much does it? But we can build on that. I chose a complementary yellow (RGB 235, 210, 2) and then selected and filled that bottom left square in the same way. I then filled the top left photo area with white to give a really clean look:

At this stage, you're saying, "but the text is a pointless colour now - you can't read it!" And you're right, so let's choose a darker colour. I chose a dark grey (RGB 51, 51, 51) and filled the text with that. Dark grey is just a bit softer than black - try both and you'll see what I mean. To fill the text, make sure the transparency lock is on in the Layers palette, and choose Edit > Fill as usual. You should then get this, which is much better and easier to read:

So, we're doing well, but there's a conspicuous gap at the top left. We need a logo of sorts, or at least something vaguely decorative. I've done a quick image using all the same colours to retain consistency, and you can see it here:

Well I'm happy with that basic design. The colours are nice and bright, and it looks cheerful and contemporary.

2) So how do I get that into my website?

I'm glad you asked. Some parts of this design can be achieved with changes to the HTML in the Web site, and some changes need to be done by breaking this full design apart and exporting certain elements as images.

Image elements

Let's look at where we need the images. When we left the design at the end of the last tutorial, we had it up in our Web editor, Mozilla's Composer. Lets open it up again and we can investigate where the images are, and hence what we need to export.

If you click on the top left area, you'll see a square highlight. This indicates that the area is an image:

So that's one. The other is actually a background image for the light blue left column. It's a one-pixel high horizontal stripe for the width of the column. When repeated many times down the side of the page, it "tiles" and produces that column.

These two images are called hi.gif and bgleft.gif. If you look in the images folder of the site you can see them, and it's these images that we're now going to replace.

Go back to Photoshop and bring up the Guides for the file we were working on earlier. You can show them by going to View > Show > Guides. When you have them up you should see horizontal and vertical blue lines across the image like in the picture below. These indicate where we're going to slice up the images for export.

At this point you should save your document, and make a backup of the file!

Using the Rectangular Marquee tool, draw a square around the top left "logo" area using the sides of the document and the guides to place the selection. Turn on Snap to Guides in the View menu to make this easier. We're going to crop the image down to just the size of that selection, so make sure your file is saved and select Image > Crop. When you've cropped it, you should see something like this:

We need to save this as a GIF file, so go to File > Save for Web and save as a GIF file, replacing the existing image hi.gif. (For help with Photoshop's Save for Web feature have a look at this tutorial.) When you've done that, revert the Photoshop file to its last saved state by pressing F12 or selecting File > Revert. You should find that your file reappears exactly as it was before you cropped it.

We now need the background image. Drag out a selection from the edge of the yellow left column area in a very thin line until you reach the vertical blue guide line. You should end up with a 1 pixel high selection, as follows:

Now crop that and you should get a very thin image like this:

Save that as another GIF, overwriting bgleft.gif in the images folder of the site. Again, when you're done, use the Revert command to bring the original file back.

Going back to Composer, I suggest you close any files you have open and then reopen index.html. You should now see that the left hand side of the page looks like our design. This is because we've replaced the original images, so they've updated automatically:

We're getting there. That's the image elements done. Half the page is OK at least!

Changing non-image elements

We'll be doing all the rest of the changes in Composer now. The next thing we need to do is change that page background colour. This is defined as a hexadecimal value within the page itself.

Go to Format > Page Colors and Background. When you have the dialog box up you can see a place to change the background colour. Click on the button for Background and you should see something like this:

You can pick a colour from the palette above, but we need the exact green we had in Photoshop. To find out what this is, go back to Photoshop and choose the green from the Photoshop file using the Eyedropper tool. You should see it reflected in the Tools palette in the "Foreground color" area.

If you now click on that foreground colour you'll see the colour picker dialog pop up, and you can read off the colour value (see below). We're looking for the 6 digits with the "#" next to it - this is the hexadecimal value for the colour. In our case this is "B4C803".

Make a note of the value, then type the value into the "background colour" field in Composer. Click OK and you should see that the page is now very nearly there! In the screen grab below I've flicked over to Preview mode since it's easier to see what's going on.

The big problem is the big blue splodge in the middle of the page. It's because the table containing the text has a background colour of its own. Because it's a foreground element, it's on top of the background colour we defined for the page. We just need to get rid of it, so that the background colour will show through.

Click on the table to select it, then right-click (Mac users control-click) to bring up the context-sensitive menu for this element. Choose Table or Cell Background Color right at the bottom, then when you have the dialog box up, click on the table checkbox at the top. I found that the HTML colour field was empty when I did this, and I just clicked OK to clear the background colour. If you find there is a colour value in the field, just remove it entirely, and click OK.

You should now find that the blue area has gone!

At this point you should save the file.

Those text colours

The text elements are still a worry though. Although Composer does have text formatting tools, the one thing it can't do is visually edit these fonts as they are currently implemented. Why? Because they're defined in an external style sheet. In this case our style sheet is called default.css and can be found nestling alongside the HTML files for the site in the same folder.

A style sheet defines things like the size and colour of the fonts. We're going to have to edit that by hand!

Open up default.css in Composer and you'll see that it opens as text. Don't panic!

The main things we're interested in changing are the colours, and like the background colours we changed earlier, they're defined here in hexadecimal format - 6 digits. The colour we want to change is this: "8792BD". This is our fairly useless bluey colour, and we need it to be our nice dark grey, which has the simple "hex" value of "333333".

All we have to do is change every instance of 8792BD for 333333!

So go through and do that, making sure to preserve the syntax.

Save the file but leave it open for now. When you reopen index.html you'll see that the text colours have changed to something much more usable!

Now's a good time to open up index.html in an actual Web browser to get a feel for how we're doing. Here's how it should look:

Pretty good, but the links are still a bit light. This is because links have their own special colour definitions in the style sheet. It's less noticeable in Composer because it doesn't display accurate link colours when they're defined in an external style sheet.

So go back to the style sheet that's open in Composer, and we'll try to rectify this! I think we'll have a nice complementary dark burnt orange for the links - say "743C00", and another colour for rollovers - "485000". There are four states for the link, depending on what you're doing with the mouse at any time:

a:link { ... }

This is the style for a normal, never-visited link on the page.

a:visited { ... }

If you've clicked on a link previously, this style is used to display the link. It's a visual cue that you've visited something already.

a:active { ... }

This is the style you see when you're clicking on a link.

a:hover { ... }

And finally, this is the "rollover" state, when you position the mouse over a link.

So to change the colours, we might try:

a:link
{
  color: #743C00;
  font-family: arial, helvetica, sans-serif;
  font-size: 10px;
  text-decoration: none
}
               
a:visited 
{
  color: #333333; 
  font-family: arial, helvetica, sans-serif; 
  font-size: 10px; 
  text-decoration: none
}

a:active 
{
  color: #485000; 
  font-family: arial, helvetica, sans-serif; 
  font-size: 10px; 
  text-decoration: none
}

a:hover 
{
  text-decoration: none; 
  font-family:arial, helvetica, sans-serif; 
  font-size: 10px;
  color: #485000
}

Save the style sheet and have another look in your Web browser. By the way, a quick tip: If you can't see any change when you hit Refresh/Reload in the browser, first make sure you did indeed save all the files. If you did then it's probably cached. You can get round this by holding down Shift on the keyboard and hitting Refresh/Reload on the browser at the same time. This can be the bane of a developer's life, and sometimes you have to quit the whole browser to see style sheet changes!

Hopefully you should now see this:

And there we have it - a nice shiny new design!

Nearly there!

That last thing we have to do is apply these changes to the other pages we made in the last tutorial. You'll find that the text and image changes are site-wide, since they're updated from a central place. However, you'll need to redo the steps for the page's background colours. It's a bit fiddly but quite quick when you get the hang of it!

The full checklist for each page would be:

1. Page background colour (set to "B4C803")
2. Text table background colour (set to "none")

Save each one as you go and you should then have a full site with the new design. And that's it!

We've changed the colours, and the logo, and applied that across the entire site. You can get the files for this new version here.

You should now be a bit happier with making your own version of this PageKit, and also applying the principles to other PageKits. Here are a few other things to try:

• Changing the font sizes and faces from within the style sheet (more tutorials here)
• Adding your own logos and colours
• Changing the page layouts

Good luck!

Simon
ELATED : )

The end

That's the end of this article. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.

Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!

If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!

Top of Page