Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Cannot Change Link Colors in CSS

Cannot Change Link Colors in CSS

Views: 1,235

Results 1 to 16 of 16
5 Feb 2014, 3:39 AM
#1
amandavz avatar

amandavz

Zen Follower

Join Date:
Mar 2009
Location:
Crockett, Texas
Posts:
139
Plugin Contributions:
0

Cannot Change Link Colors in CSS

Hi Everyone...

I seem to be having a problem with getting the links on a site I am working on to change. I had a different template and managed to get the links to change from blue to purple (don't remember how) but now we have just changed the template again and I REALLY need to figure out why I cannot seem to override the css file to show the proper colors.

Any help about what I might be overlooking would be most appreciated. The proper colors are already listed in the css file, it just keeps showing with purple links.

Thanks. :)

5 Feb 2014, 4:14 AM
#2
twitchtoo avatar

twitchtoo

Totally Zenned

Join Date:
Apr 2007
Location:
Ontario, Canada
Posts:
1,733
Plugin Contributions:
14

Re: Cannot Change Link Colors in CSS

Need to see the site to fix the CSS... can you post/PM a link?

5 Feb 2014, 5:04 AM
#3
amandavz avatar

amandavz

Zen Follower

Join Date:
Mar 2009
Location:
Crockett, Texas
Posts:
139
Plugin Contributions:
0

Re: Cannot Change Link Colors in CSS

Oh...I'm sorry...
http://metimemelts.com/

5 Feb 2014, 5:19 AM
#4
twitchtoo avatar

twitchtoo

Totally Zenned

Join Date:
Apr 2007
Location:
Ontario, Canada
Posts:
1,733
Plugin Contributions:
14

Re: Cannot Change Link Colors in CSS

When I hide this colour, your left nav links turn blue...

a:link, #navEZPagesTOC ul li a {
** /* color: rgb(255, 255, 255); /*
}

Your a:hover is pink.

5 Feb 2014, 5:25 AM
#5
amandavz avatar

amandavz

Zen Follower

Join Date:
Mar 2009
Location:
Crockett, Texas
Posts:
139
Plugin Contributions:
0

Re: Cannot Change Link Colors in CSS

I'm not sure what that means. What am I suppose to do then?

5 Feb 2014, 5:34 AM
#6
twitchtoo avatar

twitchtoo

Totally Zenned

Join Date:
Apr 2007
Location:
Ontario, Canada
Posts:
1,733
Plugin Contributions:
14

Re: Cannot Change Link Colors in CSS

It looks like you are using the classic template css:
includes/templates/classic/css/stylesheet.css

around line 21
change this:
a:link, #navEZPagesTOC ul li a {
color: #ffffff;
}

to this:
a:link, #navEZPagesTOC ul li a {
color: #000;
}

5 Feb 2014, 5:46 AM
#7
amandavz avatar

amandavz

Zen Follower

Join Date:
Mar 2009
Location:
Crockett, Texas
Posts:
139
Plugin Contributions:
0

Re: Cannot Change Link Colors in CSS

Okay...I tried that and it does not appear to be the problem. I tried it with and without the text decoration and have refreshed and cleared my cache. The hover should in face be pink, the links in the brown areas should be white and the links in the white areas should be brown.

Do you think I would be better to start with a fresh css file?

5 Feb 2014, 5:59 AM
#8
twitchtoo avatar

twitchtoo

Totally Zenned

Join Date:
Apr 2007
Location:
Ontario, Canada
Posts:
1,733
Plugin Contributions:
14

Re: Cannot Change Link Colors in CSS

Split the site wide a links from the navigation ez pages in your CSS...

a:link {
color: #663300;
}

#navEZPagesTOC ul li a {
color: #FFFFFF;
}

5 Feb 2014, 6:02 AM
#9
amandavz avatar

amandavz

Zen Follower

Join Date:
Mar 2009
Location:
Crockett, Texas
Posts:
139
Plugin Contributions:
0

Re: Cannot Change Link Colors in CSS

I did that and I appreciate you showing me the split but I am still seeing purple links. Are you?

5 Feb 2014, 6:12 AM
#10
twitchtoo avatar

twitchtoo

Totally Zenned

Join Date:
Apr 2007
Location:
Ontario, Canada
Posts:
1,733
Plugin Contributions:
14

Re: Cannot Change Link Colors in CSS

It's 1am... I'm seeing snow falling... ;)

Your a:visited links are remmed out:

**change this... **
a:visited {
/color: #724328;/
text-decoration: none;
}

to this...
a:visited {
color: #724328;
text-decoration: none;
}

Then add a:visited to the ez pages with the colour of your choice.

5 Feb 2014, 6:49 AM
#11
amandavz avatar

amandavz

Zen Follower

Join Date:
Mar 2009
Location:
Crockett, Texas
Posts:
139
Plugin Contributions:
0

Re: Cannot Change Link Colors in CSS

AWESOME!!!! The links are all the proper color. EXCEPT for the EzPages. i am a\having a little trouble understaing the code I need to use to get these the right color. You said to use an a:visited, I am not sure the proper formula here.

5 Feb 2014, 7:40 AM
#12
amandavz avatar

amandavz

Zen Follower

Join Date:
Mar 2009
Location:
Crockett, Texas
Posts:
139
Plugin Contributions:
0

Re: Cannot Change Link Colors in CSS

Never mind....I got it....

I added this to my css:

#navEZPagesTop a:visited {
color: #ffffff;
}

I also added one for the hover:

#navEZPagesTop a:hover {
color: #f6b9c5;
}

And everything seems to be in good working order!!! Thanks again for all your help. :)

5 Feb 2014, 7:45 AM
#13
twitchtoo avatar

twitchtoo

Totally Zenned

Join Date:
Apr 2007
Location:
Ontario, Canada
Posts:
1,733
Plugin Contributions:
14

Re: Cannot Change Link Colors in CSS

Excellent!

be sure to hide those underlined links with:

a:link {
color: #663300;
text-decoration:none;
}

I'm headed for some sleep.

5 Feb 2014, 7:48 AM
#14
amandavz avatar

amandavz

Zen Follower

Join Date:
Mar 2009
Location:
Crockett, Texas
Posts:
139
Plugin Contributions:
0

Re: Cannot Change Link Colors in CSS

Will do...thanks so much. :) Good luck with your snow.

5 Feb 2014, 2:43 PM
#15
twitchtoo avatar

twitchtoo

Totally Zenned

Join Date:
Apr 2007
Location:
Ontario, Canada
Posts:
1,733
Plugin Contributions:
14

Re: Cannot Change Link Colors in CSS

You're welcome, I like the snow... and centered left navs...

add this yes?

.sideBoxContent {
/background-color: #ffffff;
padding: 0.4em;
/
** text-align: center;**
}

5 Feb 2014, 5:46 PM
#16
amandavz avatar

amandavz

Zen Follower

Join Date:
Mar 2009
Location:
Crockett, Texas
Posts:
139
Plugin Contributions:
0

Re: Cannot Change Link Colors in CSS

Thanks so much. :)