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.
Wow! I can’t wait to use this!
Thanks for this little tutorial. I still have a problem though. Seems like this altered index.xml file is not recognised. Probably because of not being compressed back to .gz file format. But I don’t find a way to do this. Mac Gzip 1.1.3 is not available and dropstuff won’t do it either. Any suggestions? Am I missing some really simple and abvious way to do this?
Hi Eltuna – the most likely reason that you’re not seeing your changes is because the original index.xml.gz file is still IN the folder with the version you’re working on. Rename index.xml.gz to index.xml.gz.backup and that will fix the problem. Let me know if that’s not it however.
I have renamed the index.xml.gz file, the erros message says “the template … could not be opened”. What I think is that program is looking for a .gz file which is no longer there because we’ve renamed one and decompressed the other.
Ah, no, that means you’ve made a mistake in the XML. This is a bad sign :) Unless you can hit undo to undo your mos recent edits, you may never find the change that’s causing this problem. I’ve screwed things up like that before and had to start all over because I was not able to find the error. I wish that wasn’t the answer I had for you, but that’s the problem. It has nothing to do with re-zipping the file at all. :(
OK I’ll start all over again tonight, no problem thanks to the backup file. Thanks for your help!
Worked like a charm! Thank you so much! This had been driving me nuts! :))
Good job you guys – I’m so glad some of you are trying this out. It’s just not that hard. One of the things I do to avoid making mistakes is save the file after just one or two edits and then create a new page in iWeb with it. iWeb is always open while I’m editing these files so that I can check the results of my edits immediate. If you get the dreaded, “iWeb can’t open the file” messages, you just undo your last edits and try to understand what your mistake was. this works very well for me so try that approach and you should do very well.
I’ve had good results too. Now I want to find out which template I used for some pages I made a while ago and I can’t remember. Is there a way to see to which template they refer to? I tried to change two already, but no change to the pages that were ready. Or does this only work for pages you create after changing the index file?
Indeed, the XML does contain the template name, but you would have to open your domain file’s index.xml file to see that. But beware, that file contains the XML for every page in your site. Back that file up before messing with it. Otherwise, send me a link to the pages and I’ll see if I can’t tell you which template it is.
Is there a mean to update the existing html files? or is it absolutely necessary to create new html files once the changes have been made in the corresponding xml files? I’ve managed to change the colors and it works with new html files but not with the old ones.
There is a way, yes. You do not have to recreate your pages, but in some cases, it might be safer to do just that. Here’s why.
The site or sites that you build in your iWeb window are stored in a file named Domain.sites. It’s located in your user library at this path:
username/Library/Application Support/iWeb/Domain.sites
If you hide file extensions, then your file will simply appear as Domain.
You can open this file the same way you open a template file, right click and select Show Package Contents. Within this file you may find hundreds of files – it depends on how large your site is or your sites are. However, there’s only one file in here that you’re after, and that of course is Index.xml.gz.
Copy this file and save it somewhere else, far, far away from this place. If you screw this file up, you’ve effectively destroyed your entire site so please do not skip that step. Copy and back it up!
With that complete, you can unzip that file, delete the compressed version (do not rename it – delete it) and then you can edit it the same way you’ve edited your template files. The only thing different here is that this version of index.xml doesn’t contain just one page, it contains the settings for every page in your site(s). So instead of just one instance of the normal hyperlink colors, there will be one instance for every page! Eeek! :-O
Just be patient while doing this and take your time. Make one set of changes and then test your changes by opening iWeb and viewing the pages again. Do not make numerous changes at once. If you mess something up, you may never find the error and you’ll have to start again from your back-up copy.
This is why I say, sometimes it’s just easier to create a new page and copy your content over. For Blogs, this can be a pain, but you might very well find editing the XML a bigger pain. ;-)
Thanks for all the advice, I’ve managed to find out what template I started from, but had to redo all the pages starting from a new page that used the desired colours. This was quick and painless as I just did ‘select all’ and paste and everything was right in place. Only thing that annoyed me was the fact that I couldn’t remove the text box from the welcome template, which I didn’t need. I just used it to make a signoff at the bottom and moved it in the richt position on every page. Next challenge is to see if I can let somebody else add content on anohter computer by sending them the domain file and explaining where it has to be. There is definitely room for improvement for this sort of things in iweb. Right now changing those index.xml files feels like living on the edge! e*
That text box you mention is locked on the page. It is possible to remove it however. You have to find this setting near the top of the XML that starts with:
sf:generic-title-attributes
and ends with
/sf:generic-title-attributes
change bl:pageStyle-visible=”true” to bl:pageStyle-visible=”false”
That will hide that text area. In that same section, you’ll find entries for all the other elements on the page but becare when removing these things. The blog and podcas pages require those for the widget to work at all. The blog and podcast titles are use for RSS feeds and in the iTunes store so you don’t want to delete those.
hi, thanks so much for this information!
i’ve successfully followed all the steps you’ve outlined above, so no problem there, not even with renaming the .gz file.
i’m still having problems. and sometimes changes take and sometimes they don’t. i’m wondering if:
1. iweb is flaky as to when the changes are made. sometimes they don’t take in existing pages but take in newly created pages. sometimes not. dont’ know if it’s a buffering thing or not.
2. perhaps i’m not using the correct tagnames for the attributes i’d like to change: the navbar mouse over and active colors, and the fonts and colors on the blog pages. i’ve looked in the master xml file you have posted on your site, but since the changes aren’t taking i’m not sure if i’m dealing with this problem or with #1.
thanks! marz