How to change colour of hyperlinks

[buntrosgali]

I have text links and i want to change the colour of them when they are hovered over and when they are active. How could I do this and where could I do this in CMS?

[uniqu3]

You contorl it in your Stylesheet and need to know CSS.

Maybe this can help you:

http://wiki.cmsmadesimple.org/index.php/Visual_Tutorials
http://wiki.cmsmadesimple.org/index.php/User_Handbook/Admin_Panel/Layout
http://www.w3schools.com/css/css_link.asp

[buntrosgali]

Thanks for them links, they wer useful but my links wont change colour. I was searching through my stylesheet to see if I could find the colour that the links wer appearing in. its a purple colour - #800080

i have my links in a global content block, would that be a reason why i cant change them?

here is my style sheet...


* {
margin:0;
padding:0;



}
body



{

background-image: url(uploads/images/bg.png);background-repeat:repeat-x;
   color: #333;
   margin:0px;    /* gives some air for the pagewrapper */
background-color: #fff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;



}


#master {

margin-left:auto;
margin-right: auto;
margin-bottom:10px;




width:900px;
background-color:#fff;
height:auto;

overflow: hidden;
overflow:auto;
}


#header {
 
   margin-right: auto;
   margin-left: auto;

   width: 900px;
   height: 155px;


 
   background-image: url(http://server7336.dedicated.webfusion.co.uk:81/nacelle/uploads/images/header.png);no-repeat;

}


#nav {
   float:left;
   margin-top:117px;
   margin-right: auto;
   margin-left: 10px;
   width: 400px;
   height: 10px;


}

#logo {
   float:right;
margin-right:90px;
   width: 159px;
   height: 201px;
margin-top:15px;
 



}
#topsection {

   width: 900px;
   height:220px;
   background:#fff;

margin-bottom:10px;


}


#content{

   float:left;
   margin-top:10px;
   margin-right: auto;
   margin-left: 10px;
   width: 540px;
   height:auto;
background-color:#fff;
border-right: 1px solid grey;


}


#rotator{

   float:left;
   margin-top:10px;
   margin-right: auto;
   margin-left: 10px;
   width: 500px;
   height:200px;
background-color:#000;





}

#contactdetails{
   float:right;
  margin-top:10px;
margin-right:10px;
   width: 300px;
   height: auto;
 
  background-color:#fff;

}

#midsection{


   width: 900px;
   height:220px;
   background:#fff;
margin-top:10px;

border-top: 1px solid grey;


}
#news1{

    float:left;
   margin-top:20px;
   margin-right: auto;
   margin-left: 10px;
   width: 283px;
   height:200px;
   background-image: url(http://server7336.dedicated.webfusion.co.uk:81/nacelle/uploads/images/news1a.jpg);no-repeat;

-moz-border-radius:3px 3px; border-style: solid; border-color: #ccc;


}

#news2{

    float:left;
   margin-top:20px;
   margin-right: auto;
   margin-left: 10px;
   width: 283px;
   height:200px;
   background-image: url(http://server7336.dedicated.webfusion.co.uk:81/nacelle/uploads/images/news1a.jpg);no-repeat;

-moz-border-radius:3px 3px; border-style: solid; border-color: #ccc;

}

#news3{

    float:left;
   margin-top:20px;
   margin-right: auto;
   margin-left: 10px;
   width: 283px;
   height:200px;

   background-image: url(http://server7336.dedicated.webfusion.co.uk:81/nacelle/uploads/images/news1a.jpg);no-repeat;

-moz-border-radius:3px 3px; border-style: solid; border-color: #ccc;


}


#footer {

width:900px;
margin-left:auto;
margin-right: auto; 
margin-top:10px;
height:210px;


}

#footerholder {

width:100%;
margin-top:10px;
height:320px;
background:#1c232d;

}

#link1{

    float:left;
   margin-top:10px;
   margin-right: auto;
   margin-left: 10px;
   width: 283px;
   height:190px;

padding-left:10px;
padding-top:10px;

}

#link2{

    float:left;
   margin-top:10px;
   margin-right: auto;
   margin-left: 15px;
   width: 283px;
   height:190px;

padding-top:10px;

}

#link3{

    float:left;
   margin-top:10px;
   margin-right: auto;
   margin-left: 15px;
   width: 283px;
   height:190px;




}

[uniqu3]

You should style links like this:

Code:

/* would style all links to black */
a:link, a:visited {
 color: #000;}

/* would style all links on mouse over and click to grey*/
a:hover, a:active {
 color: #ccc;}

[buntrosgali]

Cheers 'uniqu3' your a life saver, it worked perfectly 

i'll look out for any of your posts and help you if i can in the future.