Change the Color of iWeb Hyperlinks
Share
Note: This post was created based on the first release of iWeb.
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
7. January 2009 at 9:50 pm :
I created my site and inserted a number of links. I did the same thing for each of the links, but when they are viewed some appear red and some appear black. When i view the site on the macbook i created the site on (using firefox, all appear as black). When i use another macbook, some appear red and some black (both through firefox and safari). When i view the site on an hp notebook using firefox, some appear red and some appear black? Am i going mad? Can anyone give any tips on this?
8. January 2009 at 2:41 pm :
I figured it out - what a dummy - you probably all know this already, but in case anyone like me is a complete novice to this - in hyperlink inspector under the format section (appears to the right of hyperlink) it lists the colours that hyperlinks will appear as normal, rollover, visited and disabled - my links were behaving exactlym as they were meant to.
18. January 2009 at 7:27 am :
Guys,
I’m not an expert at this stuff and I don’t claim to have the perfect solution but I came up with one when I ran into this problem:
I just wanted to be able to keep my color settings and not have a line underneath all the links. So I decided the best way for me was to simply create transparent boxes fitted and sized underneath the text elements I wanted to link and I hyperlinked the boxes (not the text). It didn’t seem to be much trouble and it worked. Text doesn’t change color after clicked on - but its a sacrifice I decided was worth accepting.
So: Decide what text you want hyperlinked. Create a transparent box fitted and sized on top of the text. Hyperlink the box itself.
I could keep all my font colors the way I want them and no underlines.
Good luck to all. This sight is very helpful btw. Thanks.
A.
12. March 2009 at 3:47 am :
The post on changing hyperlink colors in iweb is so incredibly helpful!! Nowhere else seems to be able to address this issue as completely and thoroughly as you have. I’ll stay tuned for more tips along the way, thank you so much for your time!!
1. January 2010 at 8:31 pm :
Hello I am hoping this conversation is still “live” since it’s now 2010 (happy new year). I have an old version of iWeb 1.1.2 and also the website listed below was done by a friend using another program. I want to update the site, lighten it up, etc. and thought I should give it a crack on iWeb then upload the files to my GoDaddy account - maybe also keeping a .Mac version, although I’m not sure why i would do that. My domain and hosting is already paid for, etc., just want to update the look.
I want to change the hyperlink color since they grey is so hard to see on my new design (as yet unpublished) so I think this tutorial will really help. I’m wondering if the process would be different for me since I’m not publishing to .Mac but to my own hosted site. Would I still move the site folder to be on the same level as iWeb?
kinda confused -
thanks SO SO much for this information! and any help you can offer…