RootsWeb Banners, Hyperlinks, and CSS

The default styling for hyperlinks is blue if not visited and purple if visited. You can use CSS to apply style rules to change how the hyperlinks display if you want them to appear other than the default. As an example:

a:link { font-weight: bold; color: #CC3300; background: transparent; text-decoration: none; }
a:visited{ font-weight: bold; color: #00CC66; background: transparent; padding: 0px; text-decoration: none; }
a:hover { font-weight: bold; text-decoration : none; background: #660066; color: #FFFFFF; }
a:active { font-weight: bold; text-decoration: none; background: #E2DEDE; color: #000000; }

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

This site provides three sets of style rules to cover how the hyperlinks for the top menu, left side menu and those within the content area are displayed.

The Problem

Styles targeting hyperlinks can interfere with those in the Rootsweb banners. In this EXAMPLE the hyperlinks are styled and interfere with the RootsWeb banner. Hover over any hyperlink in the RootsWeb footer to see the problem.

The explanation is simple, the "a" styles are generic, i.e. they will affect ANY link on the page irrespective of whether it has an "id" or a "class."

NOTE: If you have other CSS styled hyperlinks as part of your style sheet like a menu, those styles will not be affected.

The Solution

Fixing the problem is easy. Place your page content inside of a #container or #wrapper and target THAT container for your hyperlinks.

In this EXAMPLE, the content for the page has been placed within a container div (#container), and the hyperlinks are styled using the container div's id. Hover over any link in the RootsWeb footer to view the difference in the hyperlink syling.

#container a:link { font-weight: bold; color: #CC3300; background: transparent; text-decoration: none; }
#container a:visited{ font-weight: bold; color: #00CC66; background: transparent; padding: 0px; text-decoration: none; }
#container a:hover { font-weight: bold; text-decoration : none; background: #660066; color: #FFFFFF; }
#container a:active { font-weight: bold; text-decoration: none; background: #E2DEDE; color: #000000; }

Now your RootsWeb banners remain styled as they should be.

My thanks to Barry Carlson for reminding me that styling hyperlinks can be a problem and providing the solution to the problem.

Another Solution

When your page has has been loaded to the RW server, it will be served in the following manner:

<body>
<div id="RootsBanner-SearchWrapper">
<!-- Rootsweb top banner -->
</div>
<div id="userContent">

<!-- your page contents go here -->

</div>
<div id="fp_ftr">
<!-- Freepages bottom banner -->
</div>
</body>

You could target div#userContentFP to style your hyperlinks BUT you will NOT be able to view the results on your local computer as that div is loaded from the server.

Simplifying multiple link styles

I tend to style each of the links separately in my templates so that someone just beginning to work with using CSS can understand each of the rules. See the example below:

a:link {
font-weight: bold;
color: #640E0E;
background: transparent;
text-decoration: none;
}
a:visited{
font-weight: bold;
color: #640E0E;
background: transparent;
padding: 0px;
text-decoration: none;
}
a:hover {
font-weight: bold;
text-decoration : none;
background: #E2DEDE;
color: #000000;
}
a:active {
font-weight: bold;
text-decoration: none;
background: #E2DEDE;
color: #000000;
}

If you feel comfortable working with CSS, the above style rules could be simplified to the example below:

a {
font-weight:bold;
text-decoration:none;
}
a:link, a:visited {
color: #640E0E;
background: transparent;
}
a:visited {
padding: 0px;
}
a:hover, a:active {
background: #E2DEDE;
color: #000000;
}

Both accomplish the same thing BUT the second example uses less space and consolidates those styles that are alike.

IMPORTANT NOTE: If you are using ANY of the free templates from this site or those designed for use with Expression Web AND you are publishing to any of the RootsWeb servers, you will need to change the external style sheet to account for the RootsWeb banners.

Again, my thanks to Barry Carlson who gives freely and generously of his time to provide assistance on the FreePages mailing list.

Pat Geary.

Written November 2010