Change the Color of iWeb Hyperlinks
Today Murphy’s answering some reader mail. Steven wrote in because he couldn’t change the color of his hyperlinks using the iWeb interface. Apple doesn’t support changing the color in iWeb, but it can be done a couple ways.
You might have to watch this screencast twice to realize Murphy ultimately only changes one word in one file to perform this task. But along the way he shows you lots of stuff - and that might make this look complicated. It’s not.
What is the complication? iWeb doesn’t cooperate when you alter its output after publishing. But we can deal with that too.
You might want to watch yesterday’s screencast before proceeding to get a handle on what CSS is all about. Or watch it afterwards if you have more questions. Either way, today’s screencast goes hand in hand with What is CSS?
There’s another approach too: Edit the templates iWeb relies on for its themes. Detailed instructions are available. Murphy will probably tackle this process in the next few weeks. If you take this route you avoid wiping out your tweaks the next time you publish from iWeb.
Here’s something else to consider - Put multiple domain files in play. Why would you want to do something so awkward?
Here’s why:
You publish site A from domain file A. You tweak the published files on .Mac. The next time you publish from .Mac the untweaked files replace the tweaked. Time to re-tweak.
Instead:
Publish site A from domain file A. Take domain file A offline. (rename it).
Create domain file B and don’t make any sites with the same name as site A. When you publish from iWeb to .Mac your site A will remain unchanged, including your tweaks.
If juggling your domain files sounds like too much trouble, take a look at iWebsites, a donation-ware product.
What’s a domain file you ask? It contains all your iWeb sites, in edit-ready format. You should be backing it up from time to time, Murphy covered this earlier.
One more warning: taking a site published to .Mac out of the folder you published to could break things like counters and blog comments. You should test that stuff first.
So Steven, you can change your hyperlink color, by changing a single word in a single file. Or you can alter the templates. What’s it going to be?
Everyone: Get your .Mac snippet requests in! Murphy has a trial .Mac account for 60 days!!
12. January 2007 at 3:04 pm :
Great article! I have posted a link to it from my site at http://www.myilife.com/forum/tutorials.php. Please keep up the great work!
~Ryan
18. January 2007 at 4:06 am :
Hey Murphy!
Thanks for such a great tutorial. You’re a master!
This was really helpful to understand the code and structure. I assume you can use this same approach to color email links? They always seem to go white with anything with a “@” in it.
18. January 2007 at 4:08 am :
One other thing: You can change the text color of a regular link in iWeb by using the inspector, but the rollover behavior was super neat.
18. January 2007 at 1:34 pm :
Steven -
Email links are treated like web links, using the settings if you’ve made for “a” tags in the CSS.
Curious about how you changed the color of a “regular” link with Inspector?
-Murphy
31. January 2007 at 3:17 pm :
Hey Murphy,
Sorry it took a while to respond to you.
I can change the color of the regular links by typing a word, converting it to a link in the Hyperlink inspector and then selecting the text inspector and clicking on the color well. This brings up your Apple color palette where you can roll around and choose any color you like or by putting in RGB values if you change the tab at the top of the color inspector. This does not work for email, but thanks to you I now I know the work through!
31. January 2007 at 3:37 pm :
That’s funny. It doesn’t work for me. I tried a link alone, and a link with plain text as the next word. If I select the link and plain text and follow your steps only the plain text changes color. Do you see the color change right away or after you publish?
1. February 2007 at 5:56 am :
In case anyone is totally confused: You can change the color of the text when the BOX containing the text is what has been turned into a link. But if you select text and make the text the link, it can’t be made a different color. Unless you follow the screencast instructions above.
In many cases, creating a separate box to contain the link and lining it up would be a pain, especially on a page with many links contained within paragraphs of text.
3. July 2007 at 6:33 pm :
iWeb changed my hyperlinks into .PNG files so I can’t change the colors in the css file. Any way to avoid this?
Thanks!
3. July 2007 at 7:28 pm :
Lee -
Did you just select the text in a text box and make that a hyperlink? Or did you make the whole box a link (by selecting the box)? If you make the whole box a link I think you can set any color you like for the text right in iWeb. The problem is that it’s far more convenient to highlight some text and make it a hyperlink - but that’s the kind of link that requires a css change to fix the color.
19. July 2007 at 11:30 am :
In the detailed instructions on how to change the hyperlink color of the template, in step 2, the 7 sub-folders and the TemplatesInfo.plist file are found in /Applications/iWeb/Contents/Resources/English.lproj/
That folder in my mac contains a whole bunch of .nib files and some .tiff files. Then there is a Templates folder that opens the sub-folders and the plist file the instructions talk about, so I went there and continued as it is told in the instructions. I certainly renamed the Index.xml.gz file and saved my color changes but nothing happened. Whether I create a new page, close and open iWeb or publish the pages I see no changes in the link colors. Any idea what went wrong?
22. February 2008 at 7:32 am :
Murphy,
Thanks a TON for this screencast, as a recent convert to the mac world I was very surprised to see that a program like iweb would have such a limitation like this build into it?! Nonetheless, I still seem to be having issues. I have built a page with about 150 links on it and then have altered the text colors in the css code as directed in your screen cast; yet only some of the links seem to pick up on this. Any ideas as to why most of the links seem to be lingering on the old colors while some pick up on the alteration in the css? I should also mention that I am only presently publishing to a folder and will not be using .mac to finally publish the page, not sure if that would affect things or not.
Thanks