Change iWeb Hyperlink & Navbar Colors

October 25, 2006

This article applies to iWeb 1.0 ONLY. A similar document for iWeb 2.0 theme customization can be found here:

Customize iWeb Themes and Edit XML

I continue to see people stating that it’s impossible to change hyperlink colors and navigation menu colors until after you publish your site. This is not true. It’s quite easy to update your templates with the colors YOU want and when you update the template, you never have to mess with any post-processing. You make a new page? Your colors are already there.

I’ve gone over this before in this thread but I’ll go over the quick and dirty version here as well. Those who want more detail can post a question and I’ll elaborate.

First, do you know how to get into iWeb’s inner folders? You right click or control click on your iWeb icon and select Show Package Contents from the pop-up menu.

Step 2

Once you’ve done that, you’ll see a new Finder window that shows a folder called Contents. Open that and then open the next folder Resources. Within Resources there’s a folder named Shared. Open the Shared folder.

You’re now looking at your collection of iWeb template files. You’ll notice that each template has seven individual page files – each file defines the layout and styles for the page for which its named. This is actually one of the two places where you’ll find the data/images that make up your iWeb pages. This location only contains the images. Now I’ll show you were to find the data file.

So you’re currently here:

/Applications/iWeb/Contents/Resources/Shared/

You want to go here:

/Applications/iWeb/Contents/Resources/English.lproj

Now if you speak another language and your Mac’s system language is set to the language you speak, substitue English with that language. If your system is set to English regardless of the language you speak, and you use the English templates, then stick with the English folder.

When you’re in the English.lproj folder, you will see seven sub-folders and one file named TemplatesInfo.plist. TemplatesInfo.plist is the file that registers the templates and tells iWeb what you’ve got in your collection. But we don’t care about that file for now. We’re after the template data files.

The seven sub-folders are aptly named for each of the seven page-types as you can see. Open the About Me folder.

Now you will see an “about me.webtemplate” file for every template you have in your collection. Good job. You’ve learned something new. Move on to Step 3.

Step 3

If you haven’t decided yet, now’s the time to decide which template you’d like to update. If you’re just along for the ride to learn something new, no worries. We won’t do anything you can’t undo.

Pick a template file now. Perhaps you chose the White template, or:

White About Me.webtemplate

Right click or control click on this file and select Show Package Contents from the pop-up menu. This will launch a new Finder window that displays the contents of the White About Me.webtemplate file.

You will likely see a handful of different files, but the file you want is the one named Index.xml.gz.

Index.xml.gz is the brain behind the template. Within this file are all the settings for the page you chose and it’s really not hard to find what you want and change it. So let’s take a peek.

Step 4

Double-click the file Index.xml.gz. This will reveal a new file named Index.xml. You might have to scroll down in your Finder window to see it. Rename Index.xml.gz to Index.xml.gz.backup in case you screw things up, you have your original.

Now, open Index.xml with TextEdit. Do not open the file with a code editor unless you have already formatted the file.

When the file opens, you’ll notice it’s one gigantic jumbled mess of stuff. No worries, we’ll straighten that out. All you need to do is a find/replace.

Find all instances of: ><

And replace with:

>
<

The line break is important so maybe just copy the lines right out of this post. When you replace all of those, the file will be far more easy to view.

Assuming you’ve completed that step. You’re basically ready to make your change and test it out! Not hard ey?

So let’s say you want to change your hyperlink color from grey to blue. Search for this string:

BLDefaultHyperlinkCharacterStyleIdentifier0

When you find that string, you will see a few lines below it, two lines that look similar to this:

<sf:fontColor>
<sf:color xsi:type=”sfa:calibrated-rgb-color-type” sfa:r=”.8″ sfa:g=”1″ sfa:b=”0.4″ sfa:a=”1″/>

This is how the template specifies color. It’s RGB100. Your Mac came with a program called Art Director’s Took Kit and that application can tell you the RGB100 values for any color you want. Tinker with that and you’ll have a lot of fun with this.

So I picked out a nice royal blue for you. The RGB100 values for it are:

R:0 G:25 B:100

What you need to do is update the color line to match those values:

<sf:color xsi:type=”sfa:calibrated-rgb-color-type” sfa:r=”0″ sfa:g=”.25″ sfa:b=”1″ sfa:a=”1″/>

Notice that you specify these in terms of a percentage, where 25 became .25 and 100 became 1.

Step 5

Save your file. It’s time to see your work in action. Open iWeb if it isn’t open already and create a new page using the template you’ve just altered. If you altered the White About Me page, then select that and create the new page.

It there are hyperlinks already on this page, you should already see that they reflect your new color. If there aren’t any hyperlinks, then type some text and create one. You should see your new link color right away!

Now if you don’t see the new color, either you picked the wrong page or you neglected to rename the Index.xml.gz file a few steps back. If you did not rename that file, then it’s still in control of your template. Rename it now and try again.

If you don’t like that color, simply swap back to the TextEdit page and change it until you like it – switching back and forth between the file and iWeb to view your changes. Once you’re happy, make note of the color you chose and make the change for the remaining six pages in the tempalte you selected. Just be sure to follow the steps for each page you edit. If you fail to see your change, again, check to see that you renamed Index.xml.gz.

Side Notes

You might want to duplicate and rename an entire template. If you’re pretty good within Finder then go for it, just be sure that you duplicate the files in both locations:

/Applications/iWeb/Contents/Resources/Shared/
/Applications/iWeb/Contents/Resources/English.lproj/…

Choose a unique name for the duplicated template and change every single file so that the new name replaces the old one. You would have to register this new template in the TemplatesInfo.plist file as well, but I’m not going to get into that here.

The thread I referenced at the top has all kinds of search terms to find the other hyperlink styles (rollover and visited) and all the navigation menu styles plus a bunch of other fun stuff.

Now, it seems long, but that’s because I wrote it well. The shortest version of this I’ve ever written was two sentences, but that was for a UNIX geek and he got it. It’s just as easy for you, but I write it out so that anyone can do this, because anyone can. It’s just not hard.

If you have questions about any of the steps, go ahead and ask.