Breadcrumb CSS

15 Posts

mmaddux Reply #1, 17 years, 1 month ago

I am using the breadcrumb snippet and cannot figure out how to edit the CSS. I noticed reference to styles within the snippet so I created a stylesheet using those styles and attached it to my main template but it didn’t seem to change the look of the breadcrumb.

I’m just looking to change link properties like hover. Do I do this within the snippet? I tried wrapping a <div> tag around the snippet call but that didn’t seem to do anything. If I was more versed in CSS that might help. Any suggestions would be much appreciated. Thank you!

15 Posts

mmaddux Reply #2, 17 years, 1 month ago

I’ll just reply to my own topic here. Still can’t get the hover to work. In my CSS I have a default a:hover style but I thought if you wrapped a <div> tag around navagation and applied styles like:

.TopBreadcrumbs a:link {
color: #FFCCCC;
}

.TopBreadcrumbs a:hover {
color: #FFFFFF;
}

.TopBreadcrumbs a:active {
color: #FFCCCC;
}

.TopBreadcrumbs a:visited {
color: #FFCCCC;
}

Then it would override the default and be applied to the links within the <div> tag. Is there something within the [[Breadcrumbs]] snippet that is conflicting with this?

104 Posts

scraf Reply #3, 17 years, 1 month ago

No idea, never done it, maybe post the source code of the published breadcrumb ( pertinent source of the published .php page, or if using friendly url’s the .html page )

IE has hover issues I believe, if it’s only the hover that’s broken.

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 17 years, 1 month ago

IE only recognizes the :hover pseudoclass for <a> tags, so that should be OK. Post a copy of the source for the breadcrumb part of the HTML page, or provide a link.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

15 Posts

mmaddux Reply #5, 17 years, 1 month ago

Thank you for your replies! The hover feature for the Breadcrumbs snippet links do not work however the hover feature for the Shopping Basket and My Account links work.

Below is the html for the area in reference:

<div class="MainDividerWood">
<table width="904" height="36" border="0" align="center" cellpadding="0" cellspacing="0">
	<tr>
		<td width="600"><div class="TopBreadcrumbs">[!Breadcrumbs? &maxCrumbs=`2` &showCrumbsAtHome=`0`!]</div></td>
		<td width="304"><div class="TopShoppingBasket"><a href="http://www.lynchcreekdahlias.com/shop/cart.php?target=cart">Shopping 
        Basket</a> | <a href="http://www.lynchcreekdahlias.com/shop/cart.php?target=profile&mode=register">My 
        Account</a></div></td>
</tr>
</table>
</div>

Below is the class info for .MainDividerWood:

.MainDividerWood {
	background-image: url(images/main_bkg_wood_hz.jpg);
	height: 36px;
	width: 100%;
	color: FFCCCC;

}
.MainDividerWood a:link {
	color: #FFCCCC;
}
	
.MainDividerWood a:hover {
	color: #FFFFFF;
}

.MainDividerWood a:active {
	color: #FFCCCC;
}

.MainDividerWood a:visited {
	color: #FFCCCC;
}

Below is the class info for .TopBreadcrumbs:

TopBreadcrumbs {
	text-align: left;
	width: 600px;
	padding-left: 10px;
	margin: 0px;
	float: left;
	font-size: 11px;
	font-weight: bold;
	color: FFCCCC;
}

Below is the class info for .TopShoppingBasket

.TopShoppingBasket {
	float: left;
	text-align: right;
	width: 304px;
	padding-right: 10px;
	font-size: 11px;
	font-weight: bold;
	color: FFCCCC;
}

Any tips or suggestions would be much appreciated. Could this be something within the snippet causing the problem?

☆ A M B ☆
24,524 Posts

sottwell Reply #6, 17 years, 1 month ago

I would need to see the actual output of the breadcrumb snippet, from a "view source" of the final HTML page in question. Or else a link, so I can see it for myself.

I rather imagine you have some other css selector overriding the one for the breadcrumb’s hovered <a> elements.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org