Wayfinder and submenu style (color)

2 Posts

kilico Reply #1, 14 years ago

Hi together
I have a simple two level wayfinder menu. The active menu entry should be displayed in a other color that the other entries. Setting the color for the active entry is done with the &selfClass. The problem is now, that the color is inherited to the child elements of a first level menu entry. I'm using no user defined chunks.
Hope that someone can give me a hint what I doing wrong.
Many thanks
kilian

Wayfinder link:

[[!Wayfinder? &startId=`0` &level=`2` &outerClass=`sidemenu` &innerClass=`subsidemenu`  &selfClass=`self` &hideSubMenus='0'!]]

CSS:

#sidebar ul.sidemenu {
	list-style: none;
	text-align: left;
	margin: 0 0 0 0;	
	padding-right: 0;		
	text-decoration: none;
}
#sidebar ul.sidemenu li {
	padding: 2px 2px 2px 0px;
	list-style: none;	
}


#sidebar ul.sidemenu a {
	font-weight: bold;
	background-image: none;
	text-decoration: none;	
}

#sidebar ul.subsidemenu {
	list-style: none;
	text-align: left;
	margin: 0 0 0 0;	
	padding-right: 0;		
	text-decoration: none;
}

#sidebar ul li.self a{
	color: #333;	
}

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 14 years ago

Each selector adds a value to the total value of the rule. So you need to add more specific selectors to the secondary elements.

#sidebar ul li.self ul li a { color: #...; }

http://css-tricks.com/specifics-on-css-specificity/

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

2 Posts

kilico Reply #3, 14 years ago

Hi Susan
Many thanks for your answer. Your tip solved my problem.
Does this mean that I don’t have to specify an extra rule for the inner ul, as I did with the ul.subsidemenu? The ul.subsidemenu definition is exactly the same as the ul.sidemenu.

Many thanks for the clarification
Kilian

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 14 years ago

the inner stuff will inherit the settings for the outer stuff. So you only need to set specific settings when you want the inner stuff to be different than the outer stuff.

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