Quick Question

Hi all and thanks in advance,

I am new to modx and i am making a new template the only real problem im having is with way finder
i have 2 menus on the one page one vertical and one horizontal, i know how to make them the only thing is i cant seem to apply 2 different
css styles to them no matter what ive tried they both take the css style of the one closest to the top of the code please help

thanks

Hello,

You need to target your css to each menu by putting them in a div or using classes.

If you post your html and css I will be happy to review and better suggest a solution.

AMDbuilder

Thanks AMD -
Your advice has helped me allot but here is another quick question

I want the Left menu to be in bold with submenus in non-bold i.e:

my directory structure is as follows:

-Appliances
-Fridges
-Washers
-Dryers
-Kettles

-Entertainment
-Televisions
-Game Consoles
-Speakers

I want my menu to look like this:

Appliances
-Fridges
-Washers
-Dryers
-Kettles

Entertainment
-Televisions
-Game Consoles
-Speakers

Entertainment
-Televisions
-Game Consoles
-Speakers

Other Example
-Televisions
-Game Consoles
-Speakers


I understand the basics but if you could explain in reasonable detail how to make the second level of the menu have a different css style then the parrent level that
would make you a SUPER HERO!

Thanks from Down Under

@enderSFTD

I think you can do this in at least 2 ways:

First way:

Your main menu (what you call Left menu and is in bold) is the top most level of your menu and so create an &outerTpl template chunk for it. In your WF call, also add an &outerClass. This is the class for the &outerTpl

e.g.



In your CSS, make sure you have a class called mainmenu which you will style with the bold, etc. This will style the main menu (what you call Left menu). This mainmenu class will be applied to the <ul> tags of this outer part of the menu, like so:



With this, in your CSS you can target the <li> that appear within that outer <ul>, i.e. the appliances, entertainment, etc like so....



For your sub-menu you need to create the WF template &innerTpl. This is for sub-menus. The corresponding class is &innerClass. If you want you can also use &rowClass but this may be unnecessary since this will apply classes to all the rows in your menu. OK, back to the sub-menus...

Add the &innerTpl and &innerClass to your wayfinder call (the same call, not a different one)...e.g.



Again in your CSS, make sure you have a class called submenu which you will style as you wish. This will style the sub-menu. The submenu class will be applied to the <ul> tags of your sub-menus like so:



With this, in your CSS you can target the <li> that appear within those sub-menu/inner <ul>



Second way - styling nested ul li tags:

If you only use the &outerTpl and the &outerClass you will still be able to target the sub-menus for different styling using CSS like so



The above first line of CSS code will target the <li> that are in the <ul> that are in the <li> that are in the <ul> that has the class mainmenu

The second one goes further and targets the a (links) that are in the.....etc etc...like above

I hope this is clear....and there’s probably a better/alternative answer and CSS code

Cheers/k

Kongondo that was a brilliant explanation but....... to just simplify a bit: you don´t actually need to add any extra wayfinder parameters to achieve this.

The same thing can be done by the following HTML


with the following CSS

Quote from: dangw at Dec 23, 2008, 04:36 AM

Kongondo that was a brilliant explanation but....... to just simplify a bit:  you don´t actually need to add any extra wayfinder parameters to achieve this.

The same thing can be done by the following HTML

<div class="mainmenu">
[!Wayfinder? &startId=`0`!]
</div>

with the following CSS

.mainmenu ul li  a {
font-weight:bold;
}

.mainmenu ul li ul li  a {
font-weight:normal;
}

@dangw

Thanks. That’s even easier. As pointed out above by AMDbuilder, a better and more specific answer like yours can be given if the question asked is accompanied by the code being used. Thanks again, happy holidays!

cheers/k

If you want some more examples of how to build different menus take a look at some of the templates on my site and the code involved. demo.amdbuilder.net

AMDbuilder

Incredible Help!!!
Thankyou so much