Changing link color

I have tried searching this on Google, but to no avail. I am trying to change the color of links when displayed on a page.

I looked in my stylesheet.css, but changing any of the "a" link CSS did not work. Could anyone please help me?

Thank you!

Depends on the links. Changing the color of a:link in the stylesheet does indeed change the color of all links in my stock test site except those in the Categories sidebox, which are styled separately.

A link to your site might let us see what's going on.

My website is https://www.queencharlottesoaps.com, but I am specifically talking about this page. How could I change the color of all those links?

#ezPageDefault a {color:#ff0000;}

I'd make them bigger, too.

What about the links on this page? I want to change the color of that e-mail address.

There must be a way I can do this without wasting your time. How can I find this stuff out by myself?

Or what about on the main page?

Doing it your self is easy

It depends on what brower you are using though, i

If you are using firefox install firebug

for Internet Explorer* Opera Safari and Chrome they have it built in

Basically right click next to the link and select "Inspect Element" (you can't right click on a link and select inspect elements, but you can on anything else)

and in the left hand side of the developer pane that comes up select the anchor tag, or mailto tag for that link and the CSS acting on it should appear in the right hand pane

*With IE you need to turn the developer tools on and then navigate through the left hand pane till you get to the element you want the css for

Firebug is good, or:

Install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

In IE7 and 8, F12 will bring up the Developer tool. It's handy for IE-only problems.

Also, placing your email address in clear text is an invitation to spammers, and defeats the whole purpose of the Contact Us page, which is to provide your customers with a way of contacting you without, um, exposing your email address to the world.

I am still having trouble with this. Stevesh, where did you get "#ezPageDefault" from?

When I opened the page in Firefox and used Ctrl-Shift-Y to fire up the Web Developer and hovered over that text, it showed me :

#ezPageDefault .centerColumn >div >a

So, I added to the stylesheet:

#ezPageDefault a{font-size:1.5em; color:#ff0000;}

I can't see what you want to change on the Contact Us page.

stevesh:

When I opened the page in Firefox and used Ctrl-Shift-Y to fire up the Web Developer and hovered over that text, it showed me :

#ezPageDefault .centerColumn >div >a

So, I added to the stylesheet:

#ezPageDefault a{font-size:1.5em; color:#ff0000;}

I can't see what you want to change on the Contact Us page.

I understand that, but that CSS is not changing the link color, it is changing the font color. I want to change the link color so it is blue, but red when my mouse hovers over it.

I tried changing the "a" link color, which works, but that also changes the link color for my breadcrumb and information sidebox (because that is really a renamed EZpages sidebox).

Sorry for all the trouble. Thank you for the help.

ok i know this post is some what old but i may have found the solutions for others

when stevesh says to put it in the css like this

#ezPageDefault a{font-size:1.5em; color:#ff0000;}

i would do something more like this below

#ezPageDefault a { 
	color: #000000;  /* This is the Color of link before hover*/
	}
#ezPageDefault a:hover {
	color: #FFFFFF; /*This is the color of link with hover */
	background: none; /* add color to background of text link*/
	}

if you know the name the area, be it a sidebox or other areas, css should make the change . you may have to even narrow it down to a page or link text, im not sure how you would do that tho.

i used this type of code to have all my side boxes categories and information box , so they would have a hover, if you change the css that controls the sidebox without saying which part of the side box it will change all of the column example below

#navColumnTwo {
	background:#999966; /*background color of right sidebox*/
	border-left: 5px solid #999966; /* right sideboxes border */
        color: #FFFFFF; /*This is the color of links all the right column no hover change  */
	}
now if you only change the code above it will change all the column


Add this to the css and it breaks it down to the links the a and ahover do the work. like below

	 #navColumnTwo a { 
	color: #000000;  /*color of link text */
	}
	#navColumnTwo a:hover {
	color: #FFFFFF; /* color of hover link text8?
	background:#660000; /* color of hover background on text link*/
	} 

good luck and hope this made sense 2 pots of coffee and 2 days of code on the brain. :frusty: