wayfinder layout

40 Posts

tworak Reply #1, 17 years, 4 months ago

hi guys/gals hoping someone can help.

During my attempts to get wayfinder outputting like i want i found the simplest colution was to changes my sites css to this.

li {

	list-style-type: none;
	margin: 5px;

}

ul {

	list-style-type: none;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	list-style-position: outside;
	padding: 0px;

}

.level1 {
	font-weight: bold;
}

.level2 {
	font-weight: normal;

Now its impacting me elsewhere wherever else i use ul etc.

Ive tried the wiki with placeholders so i can apply a call to the UL and LI but i cant seem to get a working setup

Basically i just want a menu setup like

Parent
Child
chils child
Child

can anyone help plz!

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 17 years, 4 months ago

That’s a basic CSS issue. Your menu should have something like

<div id="mainmenu">
[[Wayfinder? ...]]
</div>

Or you can use a chunk template for the outerTpl:

<ul id="mainmenu" [+wf.classes+]>
[+wf.wrapper+]
</ul>

Then just use the #mainmenu identifier in your CSS to specify which <ul> or <li> to apply the style to.

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

40 Posts

tworak Reply #3, 17 years, 4 months ago

thanks for the reply.

fixed with

#menu ul {
	list-style-type: none;

	margin-top: 0px;

	margin-bottom: 0px;

	margin-left: 0px;

	list-style-position: outside;

	padding: 0px;
}
#menu li {
	list-style-type: none;

	margin: 5px;
}

and

<div id="menu">[[Wayfinder? &startId=`0` &levelClass=`level` ]]</div>