Rowan Cottage : CSS_in

Rowan

Cottage

About

iWeb

Hyperlinks and CSS in iWeb

Messing around with iWeb’s CSS files

I thought I’d do a little article on this as it’s been asked a number of times before now on the forums, but also because I’ve managed to tweak things a little on our own site if you’ve noticed. Wot d’yer mean, you’ve not noticed!

This is the basic black template that you get with iWeb, but if you look carefully, you’ll see that my links are slightly different from the default link you get with the black template. More specifically, unvisited links are grey with a grey underline and a dotted orange line like this one, visited links are grey with a grey underline only, and when you hover over a link, it goes orange with a solid orange line. You’ll also have noticed the navigation bar links at the top of the page have dotted orange underlines if unvisited, and solid orange underline on hover. Normally, the links for the black template are white with white underline and they are grey when you’ve visited the link, and go light grey when you hover. If you have trouble picturing all this, don’t worry, I’ll show you below.

Now, I haven’t altered or tweaked the XML file for the template here, but I have done some post-production (as ever with iWeb, small tweaks and snippets need to be added after publish). Don’t worry, it’s not a great undertaking, but I feel the results are worth the little extra effort. My links are now a bit more visible and it adds that extra touch of interactivity to the page. OK, we’re only talking about links here, so let’s not get carried away.

By the way, I’m telling you about this because we’re only talking about changes to what are basically text files, so I feel it’s not hard, and it’s something most of you can do. So, if you do want to know how to do it, read on.

How iWeb defines its link appearance

Obviously as I mentioned above, the appearance of hyperlinks in a particular template depend on the XML. I would rather not get into all of that right now - I think it’s more for advanced fiddlers like Suzanne and the like. We’re talking simple changes here! Anyway, what happens when you publish is that a CSS file (that defines the appearance of hyperlinks and other page elements), is placed in each folder for each particular webpage of your site [CSS stands for cascading style sheets. If you want to find out more check the link at the end of the article].

Now don’t ask me why iWeb generates a CSS file for each page, rather than generate just a single CSS file that defines the appearance for your whole site. It’s just how it works at the moment.

All I really need to say is that a CSS file is just essentially a text file with the information that your browser uses to define how your webpage appears. If you alter this text file, you can change how your hyperlinks appear.

So what I will do now is go through some basic changes and you can see the effects. And you can then see how I exactly get the hyperlinks appearance you can see throughout our site.

What this technique doesn’t work for

If you want to change the navigation bar, modifying the CSS files will not make any difference. The navigation bar appearance is governed by the settings within the iWeb application itself, and are different for each template you use. You can alter these settings if you wish, but it is beyond the scope of this article.

If you have no text links at all on your pages, there will not be any CSS code to modify. For example, if the links on your page are graphical images that are hyperlinks, then you will not have any CSS code to modify. Also, if you have hyperlinked textboxes rather than text itself, then there will be no CSS code to change either. If your text has been rendered as an image by iWeb, then again, there will be no CSS code present.

The technique described will not work to create text image rollver links or to change their colours. To create text image rollover links check this article on graphical tips for iweb.

So in summary, this technique only works for ordinary text links in iWeb pages, which should in all likelihood, form the majority of your links on a page of text.

What’s in the CSS file?

The best way to try this all out is with a test page that has a number of links on it. Create a test page in iWeb. Put some links in the page. Then publish your site.

Now you need to get the CSS file for that particular webpage. For instance, if your test page is called test1, you will find the webpage is called test1.html, and the folder with everything for that webpage will be called test1_files. Inside this folder will be the CSS file you need to look at, and it will be called test1.css.

Open test1.css with TextEdit. You will see a load of text with things like .Body, color, font-family, margin etc.

Scroll down to somewhere near the bottom. You will find something that looks like this:

a {

    color: #ffffff;

    text-decoration: underline;

}

a:visited {

    color: #969696;

    text-decoration: underline;

}

a:hover {

    color: #b0b0b0;

    text-decoration: underline;

}

Now yours may be a little different in terms of the numbers. These are just the RGB values of the colours that the browser will use to display the hyperlinks. To check what these colours actually look like and the RGB values of colours that you want to pick, download and install Superpixel’s useful free widget Picker.

What I will do now I go through some changes and you can see what effect they have.

Check out this link (01)

This is what the basic links looks like, for the black template.

ffffff = white, 969696 = grey, b0b0b0 = light grey, underline under each type of link

Check out this link (02)

Check out this link (03)

Here we change the colour of each link, visited link, and hover link. And we remove the underline on hover.

66ccff = sky blue, 0080ff = aqua blue, cc66ff = lavender, no underline on hover

Here we remove an underline from a link, and add hover details.

00ff00 = spring green, 808000 = asparagus green, 800040 = maroon, ff0000 = red, cc66ff = lavender, the hover is 1 pixel wide red box around maroon link, with lavender background colour, and no underline

Here we add a faint dotted orange line to already underlined unvisited links, we don’t have the dotted line if the link has been visited, and we add a solid line and colour change on hover. All designed to fit in with the colour scheme of the whole site.

7f7f7f = tin grey, ffcc66 = cantaloupe orange

You’ll note that I used some extra properties like border and background-colour that weren’t there before. There are in fact other properties you can set for text. See link below.

The best thing to do is mess around with settings in the CSS file for your test page until you get the appearance you want. Then all you do is replace the basic link properties with your customised properties in your real CSS files.

a {

    color: #ffffff;

    text-decoration: underline;

}

a:visited {

    color: #969696;

    text-decoration: underline;

}

a:hover {

    color: #b0b0b0;

    text-decoration: underline;

}

a {

    color: #7f7f7f;

    text-decoration: underline;

    border-bottom: thin dotted #ffcc66;

}

a:visited {

    color: #7f7f7f;

    text-decoration: underline;

}

a:hover {

    color: #ffcc66;

    text-decoration: none;

    border-bottom: 1px solid #ffcc66

}

So you’d open up the CSS file for the page you want to modify in TextEdit. And you’d replace the text in the left hand box (the default style) with the text in the right hand box (your custom style - obviously the text shown is my style - you’d just replace the default with your own style of course!). For a guide to using TextEdit to replace text - see the article on PayPal Buttons. But bear in mind there are other search and replace applications available, for instance Taco HTML Edit, and MassReplaceIt.

When you’ve done all the replacing, save your CSS file. Note that you need to do this each time you republish, or if you save a copy of the CSS file, you can replace the newly published file with your old modified one, saving having to re-edit it each time.

Links

www.w3.org on CSS - lots of links there to other resources

Colour picker widget from Superpixel

Taco HTML Edit

CSS properties reference