About This Article •
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 [...]
October 25, 2006 9:48 AM
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
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?
Hello, this question is regarding the removal of underline formatting on hyperlinks. Following the previous instructions and using MassReplaceIt, I was able to successfully change this but only in the blog template. Doing the exact same thing for either the photo or blank or other templates does not work. Are the lines we need to change in these templates the same in all cases?
Hi Suzanne,
The link in your original post is dead. I’m interested in changing the font and the font spacing in my navigation menu. Also, I’d like to change the font used on my main blog page as well as to make it justified… Any suggestions?
Thanks,
Toby
Hi, Yeah, how do i change the FONT and FONT-SIZE of the nav text? Iv successfully changed the color, but now i want to change the font.
Thanks!
Dave
Dave, I think I responded to your email for this one, but for others, search for:
navbar-pargraph
Yes, the word paragraph is spelled wrong in the XML so search exactly how I wrote it there. The font and font size are specified in that section.
Great tutorial! I’ve been tweaking and making all kinds of changes successfully, but two things are stumping me. 1) None of my images are showing up. I’ve made the changes in the xml file, placed the images in the /shared/template name folder and put aliases for them in the /english.lproj/templates/template name folder. What am i missing?
2)I replaced the header image in the xml file for my blog page, but it still shows the header image-area as a placeholder…not just the image (maybe this problem will go away if my first problem is solved?)
Thanks again…great work!!
You forgot to rename index.xml.gz.
That’s what i thought it was, but I’ve actually removed the index.xml.gz file. All my other changes are showing up (font styles and colors, image placements, etc) but the images themselves won’t show up. Any other thoughts?
Well there’s only two reasons why an image wouldn’t show up and that’s:
1. you forgot to change the filename of the image so it matches the name in the XML (or vice versa), or,
the XML is wrong, i.e. missing necessary elements to make the picture appear
If you’re going to swap images, it’s best NOT to mess with the XML at all and simply just replace the images that are in the folder already. Place your image in the folder, delete the original, but make sure your new image has the name of the original because obviously, the XML is looking for THAT filename.
thanks for all the info, Suzanne…
I’ve figured out how to change the font on the navigation menu with your help.
But I’m still wondering- how can I adjust the character spacing for the text in the navigation menu?
Also, what about the font used in the Blog- what section is that under in the XML file? I’d love to change that as well instead of going with the preset template font…
Toby, here’s the code for controlling kerning of letters.
<sf:tracking>
<sf:number sfa:number=”-0.02″ sfa:type=”f”/>
</sf:tracking>
The font in the blog has been covered many times on the iWeb forums at Apple and I’m sure in my comments here.
thanks Suzanne,
I’ll look for the iWeb forums and will explore your site for more answers. Best!
Hi, I was in process of following your direction to change the font colors for the nav bar as well as the hyperlinks and I got stuck trying to decrompress the Index.xml.gz file!! The file will not decrompress with Stuffit 10.0 or 11.0. Any suggestions how to get over this speed bump? Thanks very much in advance!!
All you have to do is double click the file to decompress it Tania. Then look through the entire folder for the decompressed version index.xml. It doesn’t necessarily appear next to the original.
Thank you for writing back, Suzanne. Still not working. I briefly see the Stuffit window pop up when I double click but then… nothing. Im on OS 10.3.9. Does it have anything to do with that? Thank you in advance!!
Hi Suzanne,
I pulled a copy of the Index.xml.gz file to the desktop, double clicked and received a file named /tmp/tarball.O0ouQxD1/About Me/Watercolor About Me.webtemplate/ndex.xml
Am I good to proceed with this one? Did not get a simple one just named index.xml, yikes!
Hi — I followed your excellent instructions, and it worked fine (I think; it made link text blue, mouse-over: gray).
However… I dislike the way iWeb creates the underline under link text, so I like to make the invisible text box around the text the link, and this eliminates the line.
Unfortunately, it also loses the dual-tone mouseover effect.
Is there a way to have my link and eat it too?
Thank you!
The code to fix the underlined links is at the bottom of this thread Armin :)
Tania, I have no clue why your system is extracting files the way it is. That is not the way OSX handles the decompression of files so I can only assume you have some third-party unzipping program installed that’s failing to unzip the file correctly.
Suzanne — the “this thread” link is expired. Any suggestion?
The template automatically creates links to other pages. Why are certain pages were
listed, others not. And how can I configure? Thank you!
Hi Suzanne,
Thank you for following up. I moved over to my laptop and do not have the same issue anymore. I have new issues now but I will spare you and check the blogs :)
Thank you!!
Tania
Suzanne,
I’m using your Zone template and I sucessfully changed my hyperlinks to match the nav bar so they are grey and when you mouse over them they turn black. The problem I now have is that when you go back to a page, the links that have been used stay black - they have not gone back to grey. My page is http://www.lett.ca . Is there a change I can make so that the hyperlinks only go black if you mouse over them like the nav bar???
Thanks so much for your help.
Regards,
Bill
Hi Bill, you should also change the color settings for the VISITED hyperlink settings. This is why they’re staying black. The visited hyperlink settings can be found the same way, by searching for “BLDefault” but instead of ending with 0 (default link) or 1 (rollover link), search for the one that ends with a 2 (visited link). Set the color the exact same way, but change it from black to the same grey used for the default link color. That will solve your problem.
Suzanne,
I’ve made a lot of changes to my website, thanks to your instructions.
There’s still one problem I’m having, though- and that’s exactly how to change the font size and kerning of the font in the navigation menu.
I’ve learned a lot about changing the XML code, and feel like I have a pretty good grasp on the concept.
But I have experimented and tried to change things with the code you gave me, yet I can’t seem to drop the code into the right place and have it affect the font on the menu.
Would you mind to point me in the right direction? Exactly where should the code in the order of the commands? Where can I learn more?
Hi Suzanne,
I finished building my first site - for a friend - thanks to your great guidance. I even managed to upload the site to her Yahoo ftp server and everything went smoothly with one exception: When the site launches on Safari, I have a multitude of fine grey strokes load initially. They nearly appear to be text box strokes. Once the text and imagery is loaded, the strokes disappear. Here is a link to the site
http://www.samanthameltzer.com
In Firefox, I have a different situation as the text initially appears to be a bunched-up mess.
What can I do for the site to load normal? Could you please suggest what I can do to prevent this from happening?
Thanks so much in advance.
Tania
Hi Suzanne,
One quick addition. Is this happening due to being published on the Yahoo server? Would the site load differently/without grey strokes on the .Mac server?
Thank you.
Tania
Hey Tania - did you get these issues fixed? I’m looking at that (gorgeous) site (nice work by the way!) and I don’t see what you’re describing.
Regarding Yahoo, I don’t think that’s an issue. Yahoo is a better server than .Mac (at least for now) because you actually have a number of services that .Mac doesn’t provide.
Hi Suzanne,
Thank you for your compliments :)
I had to let it go. I still see the frames appear but once the pages have been cached, they disappear. I learned a lot during this project. I was so grateful to have your resources of helpful information available. I would have never been able to manipulate the nav bar properties and tackle the inner sanctum of code. Now I have no excuses to hold off on building my own site :)
Thanks again!
Tania
You’re welcome - I like to have company in the world of GEEK so keep me posted on how your personal template develops. You do great work - it’s always nice to see people producing really nice design work.
You just made my day :)
Thank you so much.
I will keep you posted.
Have a great weekend,
Tania
hi there,
I used your info to reduce the font size of the navbar from 14 to 12px.
Now I’d like to create some more room and reduce the spacing between the navbar sections.
Do you know where I should look to modify that?
The item you want to change is the padding between the actual page links. To find that, search for the word ORIENTATION. That will get you into the section where the padding attribute is located. I forget the exact name, but you’ll see the word PADDING and there will be four variables: top, right, bottom and left. You’ll want to change the left and right padding amounts to get just the right spacing. Remember to do that for each page type as well. Changing one does not change them all as you probably know :)
hi Suzanne,
I went through what the PADDING tag in the template and found quite a few. I ended up changing the left and right values of some hoping it would make a difference and find the result but sadly there were too many.
If you have time could you help me narrow it down. There were a lot of SFWPadding-x (where x is a number) and I was wondering under which value you think it would be in.
Well, I thank you beforehand for your work here. It’s helped a lot of us trying to “GEEK” it up with iWeb. And it’s good to know we’re not alone.
Take care Suzanne…
Did you search for ORIENTATION? The padding you want to alter is IN that section. If the particular template you’re trying to alter is using the margin setting in that area instead, then monkey with those rather than padding, but it’s IN that section and that section alone. No need to search the entire set of XML.
The only bit of code in the Orientation tag is this:
I’ll try modifiying the “number” and “type” and see what happens…
Orientation is just the word you search on to find the section where the padding/margin need to be adjusted. Read the original instructions above again.
Hi Suzanne,
First of all, thank you for taking the time to write up this tutorial, I’m working my way through it now but I seem to have run into a snag. I don’t know how to convert the RBG numbers into decimal form. Do you know of any tools that might help?
Thank you,
Jessie
I use Art Director’s Tool Kit to get the converstions. It’s a handy program. I have it open all the time.
Suzanne, first of all thanks for the info. This makes iweb much more useable. I’ve been trying to change the font in the Navbar of my new template and despite following what I thought were the right steps (subbing in a different font name here
)
Whenever I try to create a new page with my template, 80% of the time I get the message missing font. Yet the supposedly “missing” fonts are showing up in other programs and in Iweb’s font editor. What gives? Any suggestions? Thanks
-Andrew
Hi Suzanne, just another quick question. I keep getting a “missing fonts” dialog when I open my new template. I’ve been playing with different font names in the sf:fontName tag, replacing the name in the quotes. The fonts I’m trying show up in Iwebs font dialog for normal text. Why are they not recognized when I call them in the xml document? Thanks for your help and the tutorial.
Hi Andrew - okay here’s the secret with specifying fonts. Often the name you provide is not actually the name that the computer understands. There’s an internal name for every font and the iWeb XML wants that internal name. Unless you have a font manager that shows you that name, the best way to know exactly how to specify the font is to use the font on a test page, publish the page to a folder and then look at the HTML code to see how the font name was written. THAT’S the name you need to enter into the XML :) Make sense?
The missing font error is related to the way you specified the font name. What you wrote in the XML probably seems logical to you, but it’s likely the display name and not the internal name of the font that the XML needs.
Thanks! Yep makes total sense, and of course, a minute after I posted my question, I figured it out. The -thin or -Regular or whatever that was included in the template at the end of the font name is not required. The way you suggested of finding out the true font names is much better than my guess and check version though. Thanks again!
Whoops, and sorry about the double post. Just getting used to this thing.
Excellent! It’s always great to see people digging around in the XML and making these updates. It’s not hard once you get the hang of it is it. :)
Nope, not too hard, it just takes a little fiddling around (and someone to point the way, like you.) Thanks again!
So I’m back with another question. I’ve been trying to mess with the navbar padding and spacing between items with limited success. I’ve been fiddling with both the SFWPPadding-10 number and the actual left and right margin numbers. The only one that does anything is the first one. Changing the left and right margin numbers doesn’t change anything in the navbar. How do I shrink the distance between navbar items (so I can fit more pages on one line?). Thanks again for your help.
Here is the part of the xml code I’m messing with. I’ve taken out the carrots and slashes and quotations and colons because somehow twitter doesn’t print them in a post, but assume the syntax is correct.
sfnavbar-margins
sfpadding
sfaID=SFWPPadding-10
sftop=2
sfleft=35
sfbottom=0
sfright=35
sfnavbar-margins
So for some I figured out my navbar issue. It was located under the navbar-text-margins tag, in which there was a padding tag. This padding tag changes the amount of space in between navbar objects. To get them closer, you can put in negative numbers. Worked for me. Guess I gotta fiddle first and ask questions later.
Good question!
The space that’s created between the navigation items is actually created by the nav bar separator. Depending on the theme you’re editing, there might only be a value of space specified in the XML OR there might actually be an image. Either way, search for the word SEPARATOR. If you see a value of “10″ there, set it to zero and you’ll recoup a lot of space between your nav items.
P.S. I can’t remember if there’s more than one instance of the word separator, but the one you want is near the very top of the XML.
Oooo I would not use negative margins. Remove the value set for the nav bar separator instead.
Ok, I’ll take your word for it. I changed those paddings back to 1. Thanks for the tip on the separator. There seem to be quite a few separator tags in the document, but I’ve found the rigth one (at least changing it is doing what I want.) The exact tag text (without syntax so it will display here) was:
sf:navbarseparator-minimum-size
sf:number sfa:number=2 sfa:type=f
sf:navbarseparator-minimum-size
Thanks again for the help and direction!
Yep you found the right one! Not hard ey? Now if you ever insert an image in there for your navbar separator, you’ll have to set that number there to match the width of the image you use. There’s a tip for the future :) If you want an example, download AquaPRO which is FREE and look to see how I did it in that template.
I tried reading through earlier entries to find the answer to my question, but I am not sure it was spelled out for me. This is my first time playing around with source codes thanks to this article and blog!!!!
I want to change the buttons on my Kids Blue Blank template navigation bar from the Star to an image of my choice or even another image in iWeb (i.e. smile face, etc). What is the code for the star image and where can I find it???
THANKS FOR EVERYONE’S HELP!!!
ps. Is there another source/book where I can get the codes for all the different styles, images, fonts, effects, etc in iWeb? And what is AquaPro?
Kagi you actually don’t have to edit any code for this one. You can simply replace the star images in the template with new ones that you’ve created.
You’ll have to be careful to make the new image the same height and width and the image will have to be a PNG image. I checked and the star image is… whoa… these are very strange images. I’m not sure why they did this.
Hum. Well here’s what you need to do. Right click on your iWeb icon and select Show Package Contents. This will open a Finder window. Open Contents, Resources, and then the Shared folder.
Now find the file named Baby About Me.webtemplate and right click on it. Select Show Package Contents. This will display another Finder window where all the page contents are shown. In there you will find the three images that create the stars in the template. One is for the normal state, one is for the rollover state and one is for the visited state.
Your new images need to be the exact same dimensions - and these are strange. They’re really long for some reason. Anyway, open the images with your graphics editor and replace the star with the shape you want, then save the image right back into the same folder. Do NOT change the file names of those images however because the code is looking for images with those names. Just change the star within the image.
If you don’t care about the rollover or visited effects, then copy the same new shape into all three images in that folder and save them all. They’ll be identical, but that’s okay - you need to keep all three in there or the template will tell you there are missing files.
Make sense?
Makes perfect sense! THANKS Suzanne!!!
Actually, after spending hours on it I figured that instead of changing the template code maybe I should just edit the picture file and then replace it in the folder exactly as you mentioned it.
But the only problem I have with that now is I don’t have a graphic editor for my new mac yet only iphoto where I have started to do weird things with the adjustment levels to change the colors at least for the nav bar images…its very strange though. You would of thought that a graphic editor would have come with iPhoto???
Can I download a free graphic editor somewhere. Ideally I’d like to get photoshop, but not really sure that’s an option right now.
Also, let’s say I wanted to change the template so that the default page fill is a color vs. an image as it is now. I know I can always change it in Inspector but I figured maybe it would be easier to do it in the template since I want all my pages for a certain site to have the same page fill. Can I replace the page fill image code to just a color fill code? Or is it just not worth it?
Again THANKS for writing back to me. I love this new project!!! Thanks to you and playing with it for hours I finally have a better understanding of all the codes…even changing the colors of the rollovers, visited, underlines, hyperlinks, fonts, etc. SOOOO COOL!!!!!!!!
Yes you can replace the image fill with a color fill. Let me see… search for page-fill. Then you’ll find the right section. You need to REMOVE the part called:
sf:textured-fill
There’s a alot of stuff in that chunk - a number of lines. Get ride of all of that and replace it with this:
<sf:fill>
<sf:color xsi:type=”sfa:calibrated-rgb-color-type” sfa:r=”0.82429236173629761″ sfa:g=”0.89149308204650879″ sfa:b=”0.92442208528518677″ sfa:a=”1″/>
</sf:fill>
Then choose the color you want obviously. Not sure what color I just pasted in there, but it’s going to be light.
Let me know if that doesn’t do the trick. I’m kinda rusty.
YOU’RE AWESOME, Suzanne! I didn’t need the extra line though just needed the color code after …it didn’t recognize it with the extra fill code for some reason.
Another Q, I wanted my page color fill to be aqua but I keep getting turquoise instead and I have checked the RGB numbers like a 1000x. Why is this? Also, I am using whole numbers for the RGB codes where are you/apple geting these decimal numbers from???
THANKS AGAIN FOR ALL YOUR HELP!!! I hope I am not bothering you too much…
Those aren’t RGB codes in there, those are RGB100 values which are very different than what you’re likely trying to put in there. You can never place full digits in there because RGB100 uses percentages of the three spectrums, not hex values like RGB255. The decimals are the percentages. You need to convert your RGB255 value to RGB100 and then insert the RBG100 values instead. I use Art Director’s Tool Kit to do that, but there are other applications that can handle that conversion.
Great find. Love the clarity of direction & ease. However, following all the directions, even the RGB100 conversion, I end up with black instead of royal blue hyperlink. Also, the code given as the iWeb default code is different. For the iWeb “Black About Me.webtemplate” the chain reads
When I change the sf:color xsi:type to:
Nothing changes in my existing docs, but when I create a new file page from a blank template, I get a black hyperlink text. Doesn’t
Instead of the thread sfa:calibrated-rgb-color-type” sfa:w=”1″ shown in the instructions, by iWeb thread reads,
sfa:a=”1″sfa:calibrated-white-color-type” sfa:w=”1″ sfa:a=”1″
When I change it to
sfa:calibrated=rgb-color-type” sfa:r=”0″ sfa:g=”.25″ sfa:b=”1″ sfa:a=”1″ I get a black hyperlink instead of the Royal Blue.
What am I doing wrong.
Hi Suzanne,
Thanks for this site and thank you for all you create in iWeb.
I want to do more than just change fonts and font colors or the images within the theme . . . when delving into the xml codes, I am having difficulty in finding what is a basic clean template so that I can go on and create one of my own . . .
I am currently looking at the codes used for your themes and templates to get the idea . . but hard to do without seeing changes as you go . . . darn those html editors for spoiling me . . .
I essentially would like to take one of my html templates and recreate it in iWeb . . . for it will be quicker and easier to add and update without having to alway load a super app to do everything. My page take advantage of the css so most of my change are there.
It will be a challenge to do each page . . . and was wondering what is truly need for each individual page when it comes to xml code just for a basic for photos, my albums, blog, podcast, movies . . .
any help is greatly appreciated.
Keep in mind I am new to xml but find it similar to html and css scripting.
Thanks for your time . . . and again I look forward to updating my favorite templates created by you for version 2.
Jacqueline, you can view your changes instantly by having iWeb open as you’re editing the XML. Once you make a change, just create a new page using that template you’re editing. Your changes will be visible.
I write pretty good instructions, but often people fail to rename the original .xml.gz file. If you don’t rename it, you won’t see your changes. iWeb looks at that file first so if it’s there, it’ll use it and NOT your new edited version.
Last time I’m going to say that ;-)
Ulitimately what you’re trying to do can’t really be done in iWeb without a theme generator. We had one for 1.0 but we don’t for 2.0 yet. We may not get one.
Suzanne,
I have tried to keep iWeb open while verifying changes — which as been great for the simple stuff . . .
I want to change the look and feel of the whole page. Being new to iWeb and wanting to take advantage of its simplicity and easy for my family and friends is why I am wanting to re-create our family web site over to be used with iWeb.
I have had to write lengthy details to family members who just have a hard time with adding photos to our site for all to have access and what have you . . . but with my iWeb site the family, most on macs, love the fact that they can contribute and create their own section without having to involve me. Presently, they give me the material and I create it for them, and when they need to update, I have to do it since none of them are familiar with html or creating their own pages . . . yada yada.
This is why I like iWeb — it meets all are need but like me, they found the initial templates and themes not suitable to their taste and refuse, like me, to give up the spices ;-)
Many of them love your templates and themes and love the fact they can mix and match . . . with simple changes to make it their own.
In addition to the family, I have another site in which I would like to keep the formate and make it accessable to the people involved to add and update.
I will keep plugging away — to find a solution that work for all camps.
You mention theme generator . . . never knew . . . what did the theme generator actually do . . ? Curious Mind wants to know.
Thank you again for your reply.
Who know, maybe a new generator will appear ;-)
The theme generator allowed you to create a site and generate an iWeb template FROM it. It was cool, but now it doesn’t work :(
WOW!
Who created the first theme generator?
Will they consider revamping their generator?
This sounds like what I am trying to do.
I am sadden to hear that it doesn’t work, maybe it can be fixed;-)
His name is Kevin Smith - he’s already looked at it but it was clear even to me that significant things had changed since 1.0. The method by which Kevin’s original generator work doesn’t even exist in 2.0. Apple moved half of the functionality within the app now, making that method defunct.
I haven’t read the 9 months of feedback, but would the solution be similar to change the text color for a blog entry page? Right now it shows red and, like the hyperlink and navbar, is unable to be modified within the iweb software. thanks.
Yep, the process is the same. If you’re talking about the entry page, I’m not sure what the search term would be to find the entry text, but I would just search for the first few words of the dummy text used in the paragraph. You’ll find it in the XML that way and then you can look to see which paragraph style is used for that text. Search for that paragraph style in the XML and you’ll find the place to change the color. But read the comments above because I explain all this and more.
i’m on its tail, but haven’t found the ’sfa:color’ text yet. the actual text line reads:
sf:ghost-text>Blue bird day
and I can’t seem to find where the color text. Is it referencing some other code? I’m a novice here.
Look up a line or two for something like this:
sf:p id=”SFParagraphStyle-123″
The ghost text is always wrapped in a paragraph and every paragraph has an ID. It’s that ID that you need to search for.
no luck. i can find color codes but don’t know what they are in reference to. also, in trying to identy the code for red so I could search for it, i notice i can’t find the Art Director’s Tool Kit. Anyway, this is the font color info i see.
sf:fontColor>
oh. here is one:
sf:paragraphstyle-ref sfa:IDREF=”SFWPParagraphStyle-44″/>
Right… now search for SFWPParagraphStyle-44. But make sure that you find the one that’s for the entry page and not the other two pages. If you read all these notes, you probably heard me say that all three blog pages are represented in that one XML file. The main page is at the top, the entry in the middle and the archive is at the end of the XML file so be careful to find the right instance of that paragraph style.
When you find it, you should see the color setting for the text and you can change it from there.
i found about 10 lines that include that could be the red text i want to modify (in all three pages of the blog actually). first, i am not sure how to identify which ones (or is it all) to change. second, i tried changing a couple, saved, opened a new blog page and nothing. thoughts? this is the line:
sf:color xsi:type=”sfa:calibrated-rgb-color-type” sfa:r=”1″ sfa:g=”0″ sfa:b=”0″ sfa:a=”1″/>
Yes, that’s the line. Good job. You can see the entries for the red, green and blue variables and since this one is set to 1, 0, 0 (100% red and 0% green and blue) you know you’ve found the red text!
What color do you want it to be. If you don’t have a tool to convert HEX colors to RGB100, let me know what the hex value is and I’ll get the RGB100 values for you.
alright. other probs. i read above about the “could not open…” message in iweb. i started over and from the first step of separating the lines of code, the message appears. back to sq. 1. the colors are another story. by the way, thanks for all your help so far.