Persistant Wayfinder Issues: Outer Template, &selfClass, alignment

863 Posts

Lucas Reply #11, 15 years, 2 months ago

You really don’t need custom templates at all unless you need to customise the output markup or rearrange the placeholders. Wayfinder by default outputs a very practical menu structure, so feel free to just you that and style it up!

147 Posts

djembe Reply #12, 15 years, 2 months ago

Thanks for the clarification Lucas. Yes, my current Wayfinder code is far less template laden than the code I was using initially. A couple of styling issues still remain:

1. For some reason I still can’t seem to gain proper control over the hover color for the menu links. This is strange, because I’m now able to set the other hover attributes (size, margin, etc.).

2. The &selfClass parameter is still behaving oddly. When the active link does not have children, everything works properly and the active link takes on the assigned formatting. Whenever the active link is a parent however, ALL of the menu items in the chain will take on the formatting of the active link. As I mentioned before, the &selfClass parameter is behaving as though it is the &hereClass parameter.

The code associated with my current menu is below. Perhaps someone will be able to identify why I am still having the issues mentioned above. Thanks so much.

The Wayfinder Call

[[!Wayfinder? &startId=`0` &outerTpl=`outer` &levelClass=`level` &selfClass=`self` &cssTpl=`menucss`]

The Outer Template

<ul class="topnav">[[+wf.wrapper]]</ul>

The Menu CSS Chunk

<link rel="stylesheet" media="all" type="text/css" href="assets/menu.css" />

The CSS

.topnav {
display: block;
width: 100%;
border: 0px solid green;
margin: 0px 0px 0px 0px;
padding: 0px;
text-indent: 0%;
list-style-type:none;
}


li.level1 a:link {font-size: 14px; line-height: 26px; color: #000000; text-decoration: none; margin-left: 10px;}
li.level1 a:hover {font-size: 14px; line-height: 26px; color: #ffffff; text-decoration: none; margin-left: 15px;}
li.level1 a:visited {font-size: 14px; line-height: 26px; color: #000000; text-decoration: none; margin-left: 10px;}


li.level2 a:link {font-size: 12px; line-height: 20px; color: #000000; text-decoration: none; margin-left: 20px;}
li.level2 a:hover  {font-size: 12px; line-height: 20px; color: #ffffff; text-decoration: none; margin-left: 25px;}
li.level2 a:visited {font-size: 16px; line-height: 20px; color: #000000; text-decoration: none; margin-left: 20px;}

li.level3 a:link  {font-size: 10px; line-height: 16px; color: #000000; text-decoration: none; margin-left: 30px;}
li.level3 a:hover {font-size: 10px; line-height: 16px; color: #ffffff; text-decoration: none; margin-left: 35px;}
li.level3 a:visited {font-size: 10px; line-height: 16px; color: #000000;  text-decoration: none; margin-left: 30px;}


li.self a:link {color: #ff1a00;}
li.self a:hover {color: #ff1a00;}
li.self a:visited {color: #ff1a00;}

The Output

<div id="menu">
<ul class="topnav"><li class="first level1"><a href="http://mysite.com/" title="Home" >Home</a></li>
<li class="level1 active"><a href="index.php?id=2" title="Practice Areas" >Practice Areas</a><ul class="topnav"><li class="first level2 active self"><a href="index.php?id=3" title="Monitoring Unobservable Behavior" >Monitoring Unobservable Behavior</a><ul class="topnav"><li class="first level3"><a href="index.php?id=4" title="Hidden Populations" >Hidden Populations</a></li>

<li class="level3"><a href="index.php?id=7" title="Prescription Drug Abuse" >Prescription Drug Abuse</a></li>
<li class="level3"><a href="index.php?id=8" title="Intelligence Gathering" >Intelligence Gathering</a></li>
<li class="last level3"><a href="index.php?id=9" title="Custom Applications" >Custom Applications</a></li>
</ul></li>
<li class="last level2"><a href="index.php?id=5" title="Managing Organizational Change" >Managing Organizational Change</a><ul class="topnav"><li class="first level3"><a href="index.php?id=10" title="Strategic Planning" >Strategic Planning</a></li>
<li class="level3"><a href="index.php?id=11" title="Performance Management" >Performance Management</a></li>
<li class="last level3"><a href="index.php?id=12" title="Custom Applications" >Custom Applications</a></li>
</ul></li>
</ul></li>
<li class="level1"><a href="index.php?id=6" title="Principles" >Principles</a></li>

<li class="last level1"><a href="index.php?id=13" title="Contact" >Contact</a></li>
</ul>
</div>

863 Posts

Lucas Reply #13, 15 years, 2 months ago

Not had a chance to look through it much, but it seems your selfClass is working correctly. ’self’ only appears once in your output markup, and on the second level

793 Posts

ottogal Reply #14, 15 years, 2 months ago

@ marconi:

Your CSS is written in a rather redundant way. I would recommend to define the more general rules first and then specify the details in additional rules.
So we could have these rules to achieve the same formatting like yours:

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

li a:hover { color: #ffffff; }

li.level1 a { font-size: 14px; line-height: 26px; margin-left: 10px; }

li.level1 a:hover { margin-left: 15px; }

li.level2 a { font-size: 12px; line-height: 20px; margin-left: 20px; }

li.level2 a:hover { margin-left: 25px; }

li.level3 a { font-size: 10px; line-height: 16px; margin-left: 30px; }

li.level3 a:hover { margin-left: 35px; }

li.self a { color: #ff1a00; }

You can see that the color assigned by the [tt]self[/tt] class will be inherited to all the [tt]a[/tt] elements following in the cascade hierarchy.

But there is a way to prevent this, using a so called child selector:

li.self > a { color: #ff1a00; }

Here the " [tt]>[/tt] " means that the rule will only be applied to the immediate child element [tt]a[/tt] of the [tt]li[/tt] classified as [tt]self[/tt] .

If you add the parameter [tt]&hereClass=`here`[/tt] to the Wayfinder call and define the class [tt]here[/tt] f.e. by

li.here a { text-decoration: underline; }

you can easily see that the [tt]hereClass[/tt] and the [tt]selfClass[/tt] are behaving differently.

Have a look what will change if you also in this case use a child selector!

li.here > a { text-decoration: underline; }

147 Posts

djembe Reply #15, 15 years, 2 months ago

Ottogal - Thank you so much for that incredibly helpful posting. Indeed, the two issues that I mentioned in my previous posting have been resolved. Furthermore, my facility with CSS is now that much more developed.

The one last issue that I have now found is that Level II and level III items are spaced one way in IE and Opera, and another way in Firefox and Chrome (I have not had an opportunity to check Safari as of yet.)

This is interesting because, in general, the site is otherwise pretty consistent from one browser to another. It’s really only the menu that is now presenting disparities in the way that styles are rendered.

Do you know why this is happening? Furthermore, do you think I can resolve the issue with some simple modifications to the CSS in your previous posting, or do you think that I will have to create a totally separate menu CSS to handle IE and Opera?

Thanks again very much. I really appreciate the input I have recieved on this matter.

793 Posts

ottogal Reply #16, 15 years, 2 months ago

Glad you sorted it out.

It’s a pleasure to help.

The different line spacing in different browsers might be due to some predefined paddings or margins of the [tt]li[/tt] elements. So you could try to give them explicite values.

Generally I would say: Don’t worry to much about small disparities between browsers. A website is not a printed medium, and it is not adequate to expect that it looks equal in any browser out there. Make sure that it is functionable with different view port sizes, so f.e. avoid fixed widths, and so on.

But (I didn’t mention it before, to not overload my last reply):

Since all of the modern browsers are able to scale the whole page ( f.e. Firefox and Explorer under Windows by [tt]Ctrl +[/tt] or [tt]Ctrl -[/tt] ), it is not a good idea to use an absolute measure unit like [tt]px[/tt] for [tt]font-size[/tt] , [tt]line-height[/tt] , [tt]margin [/tt], [tt]padding [/tt], and others.
Use a relative unit instead, preferably [tt]em[/tt] like this:

font-size: 1.2em; line-height: 2.2em; margin-left: 0.9em;

All the best for your project!

147 Posts

djembe Reply #17, 15 years, 2 months ago

Thanks so much to Ottogal for the great advice and insights. I actually managed to take care of the line spacing discrepancies by setting an explicit line height to the main UL class. I also acted on the remarks that were made about browser scaling, and ended up changing many (although not all) of my CSS declarations so that they use relative units as opposed to absolute ones.

At this point, the menu is more or less done except for one last thing: I would like one of the parent menu items to function as nothing more than a placeholder for its children. In other words, I do not want this particular menu item to function as a link. I would also like to assign some unique styling to this item.

Any advice on the most efficient way to achieve this in the context of a Wayfinder menu?

Thanks again.

793 Posts

ottogal Reply #18, 15 years, 2 months ago

To be able to style the menu items individually, you can make use of the WF parameter [tt]&rowIdPrefix[/tt] .
If you f.e. add [tt]&rowIdPrefix=`item`[/tt] to your WF call, the WF output might be like this:

<ul>
<li id="item4" class="first"><a href="index.php?id=4" title="Page A" >Page A</a></li>
<li id="item5"><a href="index.php?id=5" title="Page B" >Page B</a></li>
<li id="item8"><a href="index.php?id=8" title="Page C" >Page C</a></li>
<li id="item11" class="last"><a href="index.php?id=11" title="Page D" >Page D</a></li>
</ul>

That is, each row of the menu will get an own [tt]id[/tt] which is composed by that [tt]rowIdPrefix[/tt] and the [tt]ID[/tt] of the document referred in this row (as you can see from the links).

Now it’s easy to define a special styling for any of the rows, f.e.

li#item5 {
    background-color: #f9f;
}

or for the link in it:

li#item5 a {
    color: #a06;
}

To not make a link out of an individual menu item needs some special trick (I’ll come to it in my next reply), but may be you could live with the option that a click to a certain menu item just links to the first child of that page. That is easily done by putting as content of this page the mere call of the [tt]First-Child-Redirect[/tt]-snippet:

[[!FirstChildRedirect]]

(This snippet has to be installed before, of course.)

147 Posts

djembe Reply #19, 15 years, 2 months ago

I included the ’&rowIdPrefix’ parameter in my WF call and then managed to target the specific menu item in question with CSS. A bit to my surprise, I ultimately had to use the child selector ’ > ’ in order to keep the new styles from also affecting the menu items sitting below the parent item. You would think that the new CSS formatting would only apply to the one menu item since it specifically targeted the ID for just that item; I guess that attribute inheritance can be both strange and persistent. Somehow, I was also unable to assign a ’text-align’ attribute to the style and have it actually respond. This bit of cryptic CSS impertinence baffled me as well.

The [[!FirstChildRedirect]] snippet was implemented without a hitch. My client may be satisfied with this workaround, but to be on the safe side (and for future reference) I will still need to hunt around for an effective way to have a menu item display but not function as a link.

Thanks again very much Ottogal -- you are a true mensch.

793 Posts

ottogal Reply #20, 15 years, 2 months ago

I guess that attribute inheritance can be both strange and persistent.

Indeed, it can be irritating. Most likely it’s a question of "specificity", see f.e. here:
http://www.w3.org/TR/CSS2/cascade.html
Edit: Found another link:
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

I was also unable to assign a ’text-align’ attribute to the style and have it actually respond.

If you show me your CSS definitions for that, may be I can see what’s going wrong.

One more hint: For Wayfinder there exists a very good tutorial written by kongondo - see
http://modxcms.com/forums/index.php?PHPSESSID=ecbd361db2cc102bc632e71b12558446&topic=34176.0
Using a sample website he explains every detail - just be sure to change the tag syntax to Revo style, because it is written for Evo -
so [tt][[+....]][/tt] instead of [tt][+....+][/tt] .

I will still need to hunt around for an effective way to have a menu item display but not function as a link.

For that I wanted to use the Wayfinder parameter [tt]&categoryFoldersTpl[/tt] which kongondo describes in his tutorial from page 47 on.
But trying it out (using the link attribute [tt]rel="category"[/tt] ), I run into a strange behaviour, it doesn’t work like expected.
I will try to find out if this is a bug or - more likely - just some sort of stupidity by myself...