Forum:How do I color links in different areas different colors?

Forums: Index → Community Central Forum → How do I color links in different areas different colors?

Fandom's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.

Note: This topic has been unedited for 2880 days. It is considered archived - the discussion is over. Information in this thread may be out of date. Do not add to unless it really needs a response.

So, I've started editing my custom skin in the monaco.css file. Still tinkering with the colors so it still looks a bit goofy. Anyway, I have the color1 (top bar) dark green, and I want its links (edit this page, history, delete, etc.) to be light green so you can easily see them. For some reason I have to change color2 a to do that, which doesn't make sense because shouldn't color1 a go with color1? Anyway, I got that to work, but that changed all the links for the whole site. My color2 is light blue, so of course you can't see the light green links very well (not to mention my article background is a pale green too). How do I correctly change each of these link groups to different colors? meaning:

• Top bar (background is color1)
• Navigation area (recent changes, special pages, those things)
• Article Page
• Latest Activity feed beneath Navigation

This is just frustrating me.

My wiki: http://girlchan.wikia.com

My monaco code:

/***** After setting your wiki to 'custom' theme in preferences, you can edit this file to create a custom Monaco theme. See Help:Customizing_Monaco for details. Please ensure you do not violate Wikia's Terms of Use by obscuring or removing the advertising. *****/
.color1 {
   background-color: darkgreen;
   color:            white;
}
 
.color1 a {
   color:            darkblue;
}
 
.color2 {
   background-color: 	dodgerblue;
}

.color2 a {
   color:            lightgreen;
}
.accent {
       background-color: forestgreen; 
       border-color: limegreen; 
       color: white; 
}
.neutral {
       background-color: forestgreen; 
       border-color: limegreen; 
       color: White; 
}
#wikia_page {
   background-color: lightcyan;
}

As you can see, I have color1 a to be dark blue, but NONE of my links are dark blue; they are all light green. Also, changing #wikia_page a to blue overrode color2 a and changed all links to blue. I'm so confused.

Thanks for any help,

Tbuckne2 05:43, June 26, 2010 (UTC)

I would recommend that you install firebug (or something simillar for other broswers) and tinker around a bit with it. With it you can right click any part of the page, click "inspect element" and see what lines are styling it, which also tells you what you need to change. Ose ^{Talk • Contribs} 10:03, June 26, 2010 (UTC)

Usually you need to change the following kind of CSS to change link colors:

a:active { color: somecolor; } /* selected link */

a:hover { color: somecolor; } /* mouseover link */

a:link { color: somecolor; } /* unvisited link */

a:visited { color: somecolor; } /* visited link */

Usually .class { color: somecolor; } or #id { color: somecolor; } only works for non-link text. -- Fandyllic (talk · contr) 8:57 PM PST 26 Jun 2010