Page 1 of 1
How do I change the breadcrumb ">" color?
Posted: Wed Feb 23, 2011 4:05 pm
by macromark
I changed the breadcrumb text color in the style.css sheet but the ">" symbol between links stayed the same very faint color. How can I change the color of the symbol?
Thanks in advance...
Mark
Re: How do I change the breadcrumb ">" color?
Posted: Tue Mar 01, 2011 7:41 am
by s_ismail
You can change color of symbol in '.breadCrumbPanel ' css class like this
Code: Select all
.breadCrumbPanel {
background:#FFFFFF url(images/CategoryBreadCrumbsEdge.gif) no-repeat left top; padding: 8px 0;color:'YOUR_COLOR_HERE';
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:lighter; text-indent:16px;}
Re: How do I change the breadcrumb ">" color?
Posted: Tue Mar 08, 2011 11:17 am
by macromark
Thanks. However, I did change that and it changed the link color but not the ">"... that's the problem I'm having. See my attachement.
Re: How do I change the breadcrumb ">" color?
Posted: Tue Mar 15, 2011 9:49 am
by macromark
Anybody??
Re: How do I change the breadcrumb ">" color?
Posted: Tue Mar 15, 2011 10:17 am
by plugables
Well seems like code change is inevitable. You can't do this with CSS alone.
Open ConLib/BreadCrumbs.ascx and change the following line
Code: Select all
<PathSeparatorTemplate><asp:Localize ID="PathSeparator" runat="server" Text=" > "></asp:Localize></PathSeparatorTemplate>
to something like
Code: Select all
<PathSeparatorTemplate><span class="CrumbSeperator"> <asp:Localize ID="PathSeparator" runat="server" Text=" > "></asp:Localize></span></PathSeparatorTemplate>
Use the class CrumbSeperator in your css file to set your desired style.
Re: How do I change the breadcrumb ">" color?
Posted: Wed Mar 16, 2011 10:04 am
by clevername
You can do this with css alone.
Because the breadcumbs are made of links so all of those colors are changed with their ".CategoryBreadCrumbs a" css. So if you change the "color:#xxxxxx" on the ".CategoryBreadCrumbs" to a color you want it will make the text that is not a link that color. And in this case the ">" is the only thing left.
so change this
Code: Select all
.CategoryBreadCrumbs {
padding: 3px 0; background:#FFFFFF url(images/CategoryBreadCrumbsEdge.gif) no-repeat left top; color:#000;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:7px; text-indent:16px;}
...Your breadcrumb class may be different but the concept is the same
Re: How do I change the breadcrumb ">" color?
Posted: Wed Mar 16, 2011 12:19 pm
by macromark
Looks like "clevername's" CSS suggestion did the trick. VERY MUCH APPRECIATED! thank you both.
