Change style on menu

10 Posts

marj Reply #1, 18 years, 9 months ago

Hi all,

Now I’ve spent several hours and I still haven’t found a solution.

I have just installed my first modx system, and want to modify the wayfinder menu style. What I want is to seperate the level2 menu from the level1 menu, and at the same time change the bullet it put in front to a graphic file.

In the end the menu should look something like this, however I would like to be able to move the level2 menu, so it’s not placed nearby the level1 menu.

(Level 1)
<img1>Page 1
<img1>Page 2
<img1>Page 3
<img1> Page n

(Level 2)
<img2>Subpage 1
<img2>Subpage 2
<img2>Subpage n

Please notice that I use different pictures for the level1 and the level2 menu.

I have You can help me with this.

Thanks

956 Posts

ganeshXL Reply #2, 18 years, 9 months ago

You’d have to make two Wayfinder calls: one for each level.

For each separate level (style), you’d reference either another template chunk (one of the tpl parameters), or assign another class name.

See the list of WF parameters here: http://www.muddydogpaws.com/development/wayfinder/parameters.html

Custom list-images can be defined via CSS:
http://www.alistapart.com/stories/taminglists/
http://www.macworld.com/article/48296/2005/12/januarycreate.html

http://www.fantastique.ch/
http://www.dnik.ch/
http://www.flickr.com/photos/dnik/

10 Posts

marj Reply #3, 18 years, 9 months ago

How do I change that? Like I said I quite new at this so excuse me if I asks some stupid questions.

I have tried to use this wayfinder call for level 1 [!Wayfinder?&startId=`0`&level=1!] and this for level 2 [!Wayfinder?&startId=`0`&level=2!]. However when I try to call for level 2 menu it includes level 1 items.

2,310 Posts

bunk58 Reply #4, 18 years, 9 months ago

If you want only the sub pages of the parent to show in the second menu then try this as your second call

[!Wayfinder?&startId=`[[UltimateParent]]`&level=2!]

That should work.

David

10 Posts

marj Reply #5, 18 years, 9 months ago

Thanks... Where do I find the source for the bullets it uses as standard in the menu, so that I can change that?

☆ A M B ☆
24,524 Posts

sottwell Reply #6, 18 years, 9 months ago

That’s in the CSS.

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

10 Posts

marj Reply #7, 18 years, 9 months ago

okay, so if my css file looks something like this

body {
	font-size:12px;
	font-family:'arial','tahoma','times New Roman',serif;
	background-image:url( images/bg2.gif);
	background-position:top;
	background-attachment:fixed;
	margin-top:0px;
	margin-bottom:0px;
}
#wrapper	{
	background-image:url(images/contentbg2.gif);
	background-position:top;
	background-repeat:repeat-y;
	width:900px;
	left:50%;
	margin-left:-450px;
	top:0px;
	position:absolute;
	height:600px;
       padding-bottom:30px;
}
html>body #wrapper	{
	min-height:600px;
}
#top	{
	background-image:url( images/topbg.gif);
	background-position:top;
	background-repeat:no-repeat;
	width:900px;
	height:20px;
}
#complogo	{
	text-align:right;
	left:70px;
	top:45px;
	position:absolute;

}
#mainmenu	{
	text-align:left;
	left:73px;
	top:100px;
	font-size:11px;
	width:130px;
	position:absolute;
	line-height:23px;
}
#submenu	{
	text-align:left;
	left:73px;
	top:230px;
	font-size:11px;
	width:130px;
	position:absolute;
	line-height:23px;
}
#content	{
	overflow:hidden;
	left:290px;
	top:130px;
	width:520px;
	line-height:18px;
	position:absolute;
}
#headline	 {
	font-size:16px;
	font-weight:bold;
	overflow:hidden;
	left:290px;
	top:100px;
	width:520px;
	position:absolute;
}
#contactbox	{
	left:73px;
	top:470px;
	font-size:11px;
	width:130px;
	position:absolute;

}

Then I should define the bullet-format in the section for main- and submenu if these 2 sections contains my menu - am I right?

☆ A M B ☆
24,524 Posts

sottwell Reply #8, 18 years, 9 months ago

I don’t recall that css exactly, but there should be css rules for ul and li items that specify the background for li items in the sidebar, something like

#sidebar ul li ul li { background: url(images/tictac_green.gif) no-repeat 0 6px; }

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

10 Posts

marj Reply #9, 18 years, 9 months ago

Okay, I’m lost now sad

You can see my page http://www.marj.dk/priku/index.php?id=4. The red dot shows where the level 1 menu should be placed, and the grey dots where the level 2 menu should be.

Where do I find that stylesheet you talk about, and since I want to have the submenu in a seperate place shouldn’t I then use 2 #sidebar instead of one?

I think I’m quite lost at the moment.

☆ A M B ☆
24,524 Posts

sottwell Reply #10, 18 years, 9 months ago

Ok, sorry, thought you were using a different template.

What you need to do is to have classes for your li elements, or an id for your outer ul container, and in your css give them the image as the background.

I presume you want the red dot in front of each main menu item, and the grey dot in front of each submenu item.

<ul id="mainmenu">
 <li>item 1</li>
 <li">item 2</li>
</ul>
<ul id="submenu">
 <li>item 1</li>
 <li>item 2</li>
</ul>

Then your CSS would have

#mainmenu li { background:url(images/menudot.gif) no repeat top left; }
#submenu li { background:url(images/submenudot.gif) no repeat top left; }

adjusting the top and left position of the image to get it just right, as well as adding any padding necessary to move the text over to the right so the image shows properly.

There is another option, simply set the list-style-image property of your ul elements. This article is a good source for how to manage list menus... http://www.alistapart.com/stories/taminglists/

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