How to change colour of hyperlinks
-
- Forum Members
- Posts: 167
- Joined: Thu Apr 17, 2008 9:02 pm
How to change colour of hyperlinks
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?
Re: How to change colour of hyperlinks
You contorl it in your Stylesheet and need to know CSS.
Maybe this can help you:
http://wiki.cmsmadesimple.org/index.php ... _Tutorials
http://wiki.cmsmadesimple.org/index.php ... nel/Layout
http://www.w3schools.com/css/css_link.asp
Maybe this can help you:
http://wiki.cmsmadesimple.org/index.php ... _Tutorials
http://wiki.cmsmadesimple.org/index.php ... nel/Layout
http://www.w3schools.com/css/css_link.asp
-
- Forum Members
- Posts: 167
- Joined: Thu Apr 17, 2008 9:02 pm
Re: How to change colour of hyperlinks
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.c ... 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.c ... 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.c ... 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.c ... 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;
}
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.c ... 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.c ... 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.c ... 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.c ... 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;
}
Re: How to change colour of hyperlinks
You should style links like this:
Code: Select all
/* 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;}
-
- Forum Members
- Posts: 167
- Joined: Thu Apr 17, 2008 9:02 pm
Re: How to change colour of hyperlinks
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.

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