Global Link Colors TUTORIAL anchor.css

.

Although asked and answered at least partially before, here's a copy of OUR entire anchor.css file, located in templates/tmpl_uni, with an explanation as to what all of the relevant visible link colors do. Anything that hasn't been changed or commented is more than likely pretty much irrelevant. An example of the below changes can be seen here (strictly pertaining to links and their colors). Ignore the dots between the lines - they don't exist in the actual file. The file begins with the first @ symbol.

.

.

@charset "iso-8859-1";
@import url(../../base/css/anchor.css);
/** General links throughout - global - original color was 0000CC, now very bright yet darkish orange **/
/** Removed underline because especially big, bold text headers are more attractive without **/

a,
a:link
{
color:#DC2400;
text-decoration:none;
}
.
.
/** Visited links throughout - global - original color was 000066, now dark brown **/
/** Removed underline because especially big, bold text headers are more attractive without **/

a:visited
{
color:#742910;
text-decoration:none;
}
.
.
/** General links throughout - global - old color was 0000FF, now very bright yet darkish orange **/
/** INCLUDED UNDERLINE HERE - That way inexperienced visitors get to see a link line when hovering **/

a:hover,
a:active
{
color:#DC2400;
text-decoration:underline;
}
.
.
a.menu_item_link,
a.menu_item_link:link,
a.menu_item_link:visited {
text-decoration:underline;
}
.
.
a.menu_item_link:active,
a.menu_item_link:hover
{
text-decoration:underline;
}
.
.
/** Active link color, toppest at very top, old color was 336699, now bright darkish red **/
a.menu_item_link,
a.menu_item_link:link,
a.menu_item_link:visited
{
color:#A00003;
text-decoration:none;
}
.
.
/** Hovering color for toppest links - old color was 000000, now very bright yet darkish orange **/
a.menu_item_link:active,
a.menu_item_link:hover
{
color:#DC2400;
}
.
.
/** Big fat join now or login text links, old color was 336699, now dark reddish orange **/
.no_hello_actions a,
.no_hello_actions a:link,
.no_hello_actions a:visited,
.no_hello_actions a:hover,
.no_hello_actions a:active
{
color:#822A00;
text-decoration:none;
font-size: 14px;
}
.
.
/** Custom menus like html blocks, not sure WHERE - old color was 333399, now medium to dark red **/
a.customMenuItem,
a.customMenuItem:link,
a.customMenuItem:visited
{
color:#800000;
text-decoration:none;
}
.
.
/** Active visible tag color on homepage, original color was 800040, now medium to dark red **/
.one_tag a,
.one_tag a:link,
.one_tag a:active,
.one_tag a:visited
{
color:#800000;
}
.
.
/** Hovering tag color on homepage, original color was 0000FF, now bright yet darkish orange **/
.one_tag a:hover
{
color:#DC2400;
}
.
.
/** Active link color, very bottom links, old color was 336699, now bright darkish red **/
.bottomLinks a,
.bottomLinks a:link,
.bottomLinks a:visited {
color: #A00003;
text-decoration: none;
}
.
.
/** Hovering color for bottom links - old color was 000000, now very bright yet darkish orange **/
.bottomLinks a:hover,
.bottomLinks a:active {
color: #DC2400;
text-decoration: none;
}

.

.

That's it. Anytime that you make changes, you should also comment those adjustments so that you know what you did, in case you have to edit the file again at a later time. A good practice is to rename the orignal folders on your server to something like tmpl_uni_original and then placing another regular copy of the orignal folder on the server again. That way you'll always have an original file that's good as new, just in case you mess something up in your copy ... rendering it useless for whatever reason.

.

.

Greetings from Germany

Quote · 8 Mar 2009

MeineCommunity,

Thank you so much for this so helpful post! I've spent much time trying to find where to change the color of the links and could not understand why it was not in the general.css file.

Thank you for taking the time to post all those details here.

Vielen dank!!!

Valérie

Quote · 27 Mar 2009

This looks absolutely perfect but it does not seem to work for me.

Can anyone tell me why?

Quote · 19 Jul 2009

If you use a another theme then you must use the anchor.css from that theme.

Kids first
Quote · 19 Jul 2009

Hello Strick,

I would suggest that you use Firebug in Firefox. It's a great tool that will let you see right away where tochange the css to get the changes you want. Very helpful! It's a must for all web developers (acording to me). It even show errors in scripts.

Quote · 29 Jul 2009
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.