Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / How to change the Breadcrumb navigation link color?

How to change the Breadcrumb navigation link color?

Locked

Views: 4,718

Results 1 to 8 of 8
This thread is locked. New replies are disabled.
23 Feb 2010, 2:23 AM
#1
wotnow avatar

wotnow

Zen Follower

Join Date:
Jan 2010
Location:
Broome
Posts:
331
Plugin Contributions:
0

How to change the Breadcrumb navigation link color?

Hi have been trying to change the css properties for the link color in the breadcrumb navigation.

The view style information in the web developers toolbar says that is the following code:

#navCatTabs li .category-top .category-subs-selected{}

I have tried putting in a: styles .. like so
#navCatTabs li .category-top .category-subs-selected a:link{ color: #000;}
#navCatTabs li .category-top .category-subs-selected a:visited{ color: #ed626c;}
#navCatTabs li .category-top .category-subs-selected a:hover{ color: #575757;}
#navCatTabs li .category-top .category-subs-selected a:active{ color: #575757;}

but it changes nothing .. The css line above this

#navCatTabs li .category-top:hover{ color: #575757; } does alter the hover state but I have tried copying this line too and adding in the link style but no luck there either.

Appreciate any help.

23 Feb 2010, 5:05 AM
#2
afo avatar

afo

Totally Zenned

Join Date:
Aug 2004
Location:
New York City
Posts:
6,800
Plugin Contributions:
0

Re: How to change the Breadcrumb navigation link color?

If you're trying to change the color in the breadcrumbs, you're barking up the wrong tree with #navCatTabs.

Try adding this to your stylesheet instead.

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

#navBreadCrumb a:visited {
	color: #ed626c;
	text-decoration: none;
	}

#navBreadCrumb a:hover {
	color: #575757;
	text-decoration: none;
	}
23 Feb 2010, 12:08 PM
#3
wotnow avatar

wotnow

Zen Follower

Join Date:
Jan 2010
Location:
Broome
Posts:
331
Plugin Contributions:
0

Re: How to change the Breadcrumb navigation link color?

Hi sorry didnt make myself clear .. i am trying to change the navCatTabs .. where it says Czech Glass Seed Beads in grey .. this is a navigation of your categories yes? I am trying to change the color from grey to black. Thanks

23 Feb 2010, 1:46 PM
#4
afo avatar

afo

Totally Zenned

Join Date:
Aug 2004
Location:
New York City
Posts:
6,800
Plugin Contributions:
0

Re: How to change the Breadcrumb navigation link color?

A link to your website would be helpful.

23 Feb 2010, 3:06 PM
#5
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: How to change the Breadcrumb navigation link color?

#navCatTabs li a:link{ color: #000;

24 Feb 2010, 1:49 PM
#6
wotnow avatar

wotnow

Zen Follower

Join Date:
Jan 2010
Location:
Broome
Posts:
331
Plugin Contributions:
0

Re: How to change the Breadcrumb navigation link color?

Hi thanks for your suggestions but I already have that and it is not working .. so strange

#navCatTabs li a:link{ color: #000; }
#navCatTabs li a:visited{ color: #ccc; }
#navCatTabs li a:hover{ color: #02b4ce; }
#navCatTabs li a:active{ color: #02b4ce; }
#navCatTabs li{ display: inline; }

something wrong with my code? Thanks

site is http://www.broomebeads.com.au/

24 Feb 2010, 2:11 PM
#7
afo avatar

afo

Totally Zenned

Join Date:
Aug 2004
Location:
New York City
Posts:
6,800
Plugin Contributions:
0

Re: How to change the Breadcrumb navigation link color?

I looked at your site using Firefox with the web developer addon.

Currently, your stylesheet says

#navCatTabs li a:link{ color: #fff; }
#navCatTabs li a:visited{ color: #ccc; }
#navCatTabs li a:hover{ color: #02b4ce; }
#navCatTabs li a:active{ color: #02b4ce; }
#navCatTabs li{ display: inline; }

which is displaying "Czech Glass Seed Beads" in white. If I put my cursor on it, the text turns grey which is exactly what I'd expect given the colors listed.

If you want the text in black, you have to change the #fff to #000. I tried it and it works. How are you changing the stylesheet? Is it possible the permissions are preventing the file from being overwritten?

25 Feb 2010, 12:38 AM
#8
wotnow avatar

wotnow

Zen Follower

Join Date:
Jan 2010
Location:
Broome
Posts:
331
Plugin Contributions:
0

Re: How to change the Breadcrumb navigation link color?

Hi thanks so much for your trouble, i think it may have been the permissions ... i would never have checked that .. so thanks again .. you have saved me hours :clap: