If you were to move your mouse over the links on thesitewizard.com, such as the following link to this KompoZer Mouseover or Rollover Tutorial, you will notice that it is highlighted: the words turn black and the background takes on a shade of green. This article explains how you can achieve such mouseover or hover effects with links on your site using the free WYSIWYG KompoZer web editor.
This article assumes that you already have a website created using KompoZer. If this is not true, you should read How to Create or Make a Website: The Beginner's A-Z Guide followed by the main KompoZer tutorial series, How to Design and Publish Your Website with KompoZer.
I should also mention that this article applies to changing the appearance of your normal text links in the body of your web pages. If you are thinking of creating button links with hover effects like what you see on the left column of thesitewizard.com, a more relevant article is How to Add a CSS Navigation Button Menu to Your Site with KompoZer.
Start up KompoZer and load your web page.
Click "Tools | CSS Editor". That is, click the "Tools" menu, found at the top of KompoZer, then when the Tools menu appears, click the "CSS Editor" item in that menu.
A dialog box, entitled "CSS Stylesheets", should appear. To change the colour (or "color" if you use US English) of every text link when your mouse hovers over it, make sure that the "custom style rule" radio button is selected, then type "a:hover" (without the quotes) into the blank field just above the "Create Style rule" button.
Click the "Create Style rule" button.
The dialog box should change in appearance to show a new "Style rule" for the "selector: a:hover". Look at the series of tabs at the top of the dialog box. Click the "Text" tab.
The "Text" tab allows you to change the colour of the words appearing in the link. To do this, look for the line called "Color:" in the dialog box. It should be followed by a blank field and a rectangular button, all on the same line. Click the rectangular button.
The "Text Color" colour picker dialog box should appear. Select a colour by clicking it. Notice that when you do so, the "Hex:" field in the dialog box changes to contain a series of letters and numbers, preceded by a hash ("#") sign. This is the text representation of the colour that you picked that will be inserted into your web page. Click "OK" when you've finished selecting the colour.
Now click the "Background" tab at the top of the dialog box. The text colour that you changed earlier only modified the colour of the words appearing on your page. If you want your text to have a highlight colour, the way thesitewizard.com's text links do, then you will also need to change the background colour of the words when the mouse hovers over them.
Near the top of the dialog box, look for the "Color:" line again, and click the rectangular box at the end of that line.
Once again, you will see a colour picker, this time entitled "Block Background Color". Select the colour you want for the highlight and click OK.
Finally, click the "OK" button to dismiss the "CSS Stylesheets" dialog box.
You can check to see if your colour scheme is readable by clicking the "Preview" tab at the bottom of the KompoZer window, and moving your mouse over any text link on your page. You should be able to see your new rollover or mouseover colours at work.
The above procedure only teaches you how to change the mouseover colours of a text link. If you want the default text link colours to be changed as well, do the following:
Click "Tools | CSS Editor".
Look at the top of the dialog box that appears. There are four icons (buttons) above the leftmost column. The first icon, or button, has a down arrow. Click the down arrow. A drop down menu should appear. Click the "Style rule" item in that menu.
You should be returned to the "New style rule" page that you saw the first time you used "Tools | CSS Editor". Once again, make sure that the "custom style rule" radio button is selected, and type "a:link" (without the quotes) into the blank field just above the "Create style rule" button.
Click the "Create style rule" button.
Go to the "Text" or "Background" tab, or both, to change the colour of the link. The procedure is the same as when you modified it for the "a:hover" effect.
As before, click the "OK" button when you're done.
The colour of a link that has been previously clicked can also be changed. To do this, follow the above procedure for "a:link", but instead of entering "a:link" in the blank field as you did earlier, enter "a:visited" (again, without the quotes).
Although you have almost unlimited power to control the colours of all your links, there are usability considerations that you need to think about before changing the default colours.
The default browser colours for the links, blue underlined text for unclicked links and purple underlined text for ones that have been clicked before, are universally understood by web surfers everywhere. If you change them from the default colours, your visitors may not realize that your uniquely coloured text are actually links that can be clicked, mistaking them for an attempt to create a colourful page. Likewise, if you change the colour for visited links, visitors may not be able to tell which links they have already visited, and which they have not. This in turn reduces their efficiency when they move around your site, since it may force them to reclick links just to find out if it leads to somewhere they have already checked. For this reason, many sites, including thesitewizard.com, leave the default text link colours as they are, configuring only the hover effects.
Don't misunderstand me: I'm not saying that you should never change your link colours. Far from it. I'm sure there are many web design colour schemes that will look awful if the links appear in their default blue. I'm merely saying that before you go wild changing colours, remember that there are usability consequences to having a non-standard colour scheme. By all means change colours when there is a need; but if the existing link colours work fine on your site as is, leaving them at their default has definite advantages.
Note though that the above caveat does not apply to the hover (rollover) colours. Since there are no defaults for that, adding rollover colours, if correctly done, may improve usability rather than decrease it.
Copyright © 2009-2018 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
