active class name in external html tag

19 Posts

airone12 Reply #1, 10 years, 11 months ago

hi everybody,
i'm new to php, css, modx and wayfinder... but i need to port in modx an existing website.
i was able to do the most, but there is one thing that my brain refuses to understand, so i'm here for some help.

the original webpage is something like this

<body id="mybody" class="category3">

    some stuff
    
    <div id="mymenu">
        <ul>
            <li id="category1"><a href="link1" title="Title1" >Title1</a></li>  
            <li id="category2"><a href="link2" title="Title2" >Title2</a></li>
            <li id="category3"  class="active"><a href="link3" title="Title3" >Title3</a></li>
            <li id="category4"><a href="link4" title="Title4" >Title4</a></li>            
        </ul>
    </div>
    
    some other stuff 
    
</body>

what i can't understand is how to put the active class name in the <body> tag...
i managed to replace the rest with this template

<body id="mybody">

    some stuff
    
    <div id="mymenu">
        [[Wayfinder? &config=`ultimate_drop.css` &startId=`0`]]
    </div>
    
    some other stuff 
    
</body>

and this chunk

<li [[+wf.id]][[+wf.classes]]><a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>[[+wf.wrapper]]</li>

thanx in advance for any help
airone [ed. note: airone12 last edited this post 10 years, 11 months ago.]

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 10 years, 11 months ago

Wayfinder does that automatically. However, it is for the current page and all of its parents, in the case of a multi-level menu. Take a look at some of the classname properties you can use in Wayfinder: http://rtfm.modx.com/display/ADDON/Wayfinder#Wayfinder-CSSClassNameParameters

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

19 Posts

airone12 Reply #3, 10 years, 11 months ago

thank you or your answer, but i've already read the page you are suggesting but still i can't understand how to produce this

<body id="mybody" class="category3">

instead of this

<body id="mybody">

how do i ask wayfinder to put the class and only the class in the body tag?
i'm sorry if my question sounds stupid, but probably i'm missing something very basic.
thanks again for your help
airone

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 10 years, 11 months ago

In the body tag? I'm sorry, I misunderstood. Wayfinder only generates the actual menu structure. It has nothing to do with the rest of the page. You would need a snippet or a TV to set a classname in the body tag.

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

19 Posts

airone12 Reply #5, 10 years, 11 months ago

ok.... so how can i get the active menu element from a TV or a snippet?

81 Posts

Dunnock Reply #6, 10 years, 11 months ago

How you build the category1, category2 etc... to wayfinder?

There is one easy way to add class to body, but it is needs some anchor to be build on. Eg. next snippet would add template name in form "my-template" to body when the template name is "My Template" for example.

//template to body snippet, getTemplate
$tplid = $modx->getOption('template', $scriptProperties, 0);
$tpl = $modx->getObject('modTemplate', $tplid);

return strtolower(str_replace($tpl->get('templatename'), " "));

Then use it where you have the <body> tag like next:

<body class="[[getTemplate?template=`[[*template]]`]]" id="sumting">

if you use some pagetitle or similar already set value, you can use similar snippet that just lower cases and strips spaces from the string.

19 Posts

airone12 Reply #7, 10 years, 11 months ago

it was much easier than i was thinking

<body id="mybody" class="category[[*id]]">
 
    some stuff
     
    <div id="mymenu">
        [[Wayfinder? &config=`ultimate_drop.css` &startId=`0`]]
    </div>
     
    some other stuff 
     
</body>

i actually am in the active class resource, so i just need to reference the current id, no wayfinder at all.
thanks for your answers
airone