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.
Hi Marz – Here are some answers for you.
1. The changes you make to templates only effect new pages, not existing pages. If you want to update the styles for existing pages, you have to edit the giant index.xml file found in your Domain.sites file. It’s less risky to just create new pages with your new template than to update existing styles in the domain index.xml file, but you can do it either way.
2. To change the nav bar font face and font size, search for: navbar-pargraph Often the font size is not specified for you in that section. Copy the code from somewhere else and paste it in there so you can change the size to a number you want..
To change the nav bar font colors, search for these terms:
navbaritem-normal
navbaritem-rollover
navbaritem-selected
The font colors are specified in those three sections.
For the blog and podcast items (that cannot be changed with the UI) search for these terms:
“summary title”
“summary date”
“summary body”
“summary read more”
Include the quotes when searching and remember that for the blog and podcast, there are two pages that include these “summary” areas so you’ll have to change the values in two places for the blog and the podcast XML.
thanks, suzanne, for your patience and for repeating this information again (and again and…). i appreciate your helpfulness. it turned out that i must have corrupted one of the xml files early on so that it was causing all kinds of odd problems. i knew something was up when i tried to add a blog page and the archive page was missing! i decided to start over and restored all the files to their originals and everything worked perfectly. good thing you advised us to keep a backup! thanks, again! marz
Hey Suzanne,
after I edited the index.xml file, don’t I have to compress it back into that index.xml.gz file?! …and when I’m trying to save the .xml file, it only let’s me save it as a Unicode (UTF-16) file, will that be a problem?! …and how do I get rid of the underlining of hyperlinks?
Thank You so much for Your help!
Sincerely Yours,
PHILIPP
Marz – it is so fun to hear that you guys are picking this stuff up and tripping on the same things :) Eventually you’ll learn all the tricks and secrets and you won’t make those same mistakes, well, not often. I’ve screwed up the blog in the exact same way – no archive page. It only takes one small type-o to make that happen.
Hi Phillipp – actually no, you do NOT have to recompress index.xml. iWeb will read it whether it’s compressed or not. But as I’ve said, you have to rename index.xml.gz to something else because if that file with its original name AND index.xml are present, iWeb will read the compressed version only and not the file you’re actually editing.
Now this bit about saving it as UTF-16 is strange – what are you using to edit the file? TextEdit? Some other code editor? You shouldn’t be prompted to do a save as… it should just save right back into the folder (scratching head).
To remove underlines on links, change these first three lines….
<sf:underline>
<sf:number sfa:number=”1″ sfa:type=”i”/>
</sf:underline>
to this single line…
<sf:underline/>
That will shut off the underlining of the style you’re editing :)
I’m trying to change the links and using your instruction but I’m not having any luck. When I look in the folder “/Applications/iWeb/Contents/Resources/English.lproj” I have 66 files including folders. When I go to the “Templates” folder there I see 7 folders plus “TemplatesInfo.plist” when I go into the “Welcome” folder and change the template code for link color like your instructions say I never see the change in my file.
What am I doing wrong, please help.
Casey
Casey, first make sure you have RENAMED index.xml.gz to something else. If you don’t rename it, iWeb will use that file to build a new page, NOT the file you’re editing. Its presence overrides that of index.xml. That’s the #1 reason why changes don’t show up.
Second, changing a template file does not mean that existing pages will be updated. I’m not sure if you were looking at your existing pages to see changes, but that’s a different process. You make changes the same way, but for existing pages, you have to edit the XML in your domain file NOT the template files themselves. It’s often easier to just change the values in your templates, then create new pages with the new templates and copy your existing content into the new pages.
If you have 100 pages, then maybe not. If that’s the case, then you’d have to open up the XML in your domain file and change the values there. Be very careful however. Make a back-up first and save that back-up on a different drive, or least different folder because if you screw up that file, you’d lose your entire site. Also, that XML contains the code for every page in your site so if you’re updating hyperlink colors, know that there will be an entry to change for every page you have. MassReplaceIt suddenly becomes the best application you own ;-)
Let me know if that doesn’t solve your problem.
Hey Suzanne,
just saw this tutorial as well. Do you know “Hyperlink Shader”? A small app from Frogdance that allows you to color hyperlinks. Quite handy, as I find.
Regards
Markus
Yes I’ve seen it. But not to confuse people here, that product does not and cannot do what this tutorial is explaining. It cannot change the hyperlink colors in your templates.
Can i use this same process to change the font color on my main blog page? I changed the background color on my blog to a dark grey and my fonts to a light grey individually using the inspector, but I can’t change the font in the main blog area or the archives. If I can use this process, can you tell me what the line of code looks like to alter these areas.
cfasano@cox.net
Yep, this is exactly how you do that. When you’re in the XML, you’ll need to search for these strings to find the code you want:
summary-title
sumary-body
date
summary-read-more
Remember that the blog and podcast XML have all three pages within that one XML file. The main page is in the XML first, followed by the archived page and then the entry page. This means you have to search for “summary-title” for the page on which you want to change it. If you want to change the instance on the main page only, then find summary-title for that page and not the other two.
The best way to make these changes is always one at a time. Make a change in the XML and then create a new blog page in iWeb to see if your change was the right one. Often I don’t find the right instance on the first try – using iWeb in this way will help you get it right. Don’t give up if you don’t hit the right one on the first try. You’ll find them eventually.
Thanks for your help. So far I haven’t had a lot of sucess but i’m sticking with it. One thing i’m unsure about is the path to index.xml. In your tutorial you said, “When you’re in the English.lproj folder, you will see seven sub-folders and one file named TemplatesInfo.plist.” But when I follow that path there are a bunch of files and folders. One of the folders is “Shared” and that one has the folders you described. Am I on the right track or have I misunderstood?
Thank you again for your help.
cfasano@cox.net
Sorry, you need to go one folder further… find the Templates folder and in there you’ll find the goodies.
I’m using the template aerolite ice. when i choose a new page, i’m selecting from the Aerolite JPG1 list. I love that Blog page, but I like the dark background from some of the other Aerolite pages. So I changes the background image and achieved the effect I was looking for. But the Summary font and Summary date and title etc are black, and I need it to be like a lite tan to show up. so i’m going to Iweb, (show package contents), contents, resources, english.lproj, templates, blog, and I control click on the shortcut to aerolitejpg-1blog.template and at this point i don’t have an option to “show package contents” i can only “show original” that brings me to the icon for aerolitejpg-1blog.template then control click “show package contents” and on to index.xml.gz. and then index.xml.
Now I’ve played around here quite a bit, but I cant find the exact lines that will effect the color of the text for the summary. I;ve changed ALL the colors after every mention of Summary and no visible change. Whew, any help you could give?
I’ve been using Hyperlinks Shader but it’s a pain if you have a dozen different CSS files to change and you republish your site every couple days… it takes a fair bit of navigation to get them all. It seems like your way is heaps easier in the longrun. What should I be looking for to change the visited site color and hover color? Do you have any RGBs for those values?