#sidemenu css to make link bold when on that page

4 Posts

candlelightweb.com Reply #1, 14 years, 5 months ago

I am certain it is possible to have the sidemenu links bold when on that page but I am not having much luck making it happen.

I have the MODx Revolution version 2.2.0-pl2 running at hemaprompt.com/draft and under the Products section he wants the links in the sidemenu bold when on that page.

I have tried several versions of

.ui-corner-all.here { font-weight: bold; }

and have not gotten anywhere

The source code shows as:

<div id="main" role="main">  <BR>
        <div id="leftColumn">
            
            <h2 class="first active">Products</h2>
            <ul id="sectionMenu">
                
                <li>
                    <a class="ui-corner-all" href="products/instructions.html" title="Instructions" >Instructions</a>
                    
                </li>

so I assumed ui-corner-all is what needs to be told to .here should be bold

Where should it be and what should it be?
Thank you in advance. [ed. note: candlelightweb.com last edited this post 14 years, 5 months ago.]

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 14 years, 5 months ago

Your active <li> should have the classname of "active", and that's what you would style with "ul.active a" in your CSS file. Check your Wayfinder rowTpl to make sure the [ [+wf.classes] ] placeholder is in the <li> tag. It looks like it's in the startItem tpl's <h2> tag, which you don't really want. Those classnames of "first active" should be in the first and active row <li> tags.

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

4 Posts

candlelightweb.com Reply #3, 14 years, 5 months ago

The side-menu-wrapper Tpl is

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

the side-menu-row is

<li>
                    <a class="ui-corner-all" href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>
                    [[+wf.wrapper]]
                </li>

and Wayfinder has

$wf->_css = array(
    'first' => isset($firstClass) ? $firstClass : '',
    'last' => isset($lastClass) ? $lastClass : 'last',
    'here' => isset($hereClass) ? $hereClass : 'active',
    'parent' => isset($parentClass) ? $parentClass : '',
    'row' => isset($rowClass) ? $rowClass : '',
    'outer' => isset($outerClass) ? $outerClass : '',
    'inner' => isset($innerClass) ? $innerClass : '',
    'level' => isset($levelClass) ? $levelClass: '',
    'self' => isset($selfClass) ? $selfClass : '',
    'weblink' => isset($webLinkClass) ? $webLinkClass : ''
);

of that - what do you mean? What dont I want? or more to the point - what needs to change?

With a list of <li> how would you tell it to change the correct <li> to active for each page without having to build a whole mess of templates for each page which defeats the purpose of a CMS of this quality.

Sorry, slightly confused by the answer

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 14 years, 5 months ago

Looking at the output, you can see that the <h2> has the "first" and "active" classnames. It should not. The <li> in the side-menu-row should have them. I don't use Revo, so I can't say exactly how that is done in Revo's version of Wayfinder.

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

1,098 Posts

microcipcip Reply #5, 14 years, 5 months ago

Try this:

side-menu-row

<li[[+wf.classes]]>
   <a class="ui-corner-all" href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>
   [[+wf.wrapper]]
</li>

CSS

#sectionMenu ul li.active a {font-weight: bold;}

Jertix.org -> Web Design & Development, Motion Graphics | Follow me on Twitter | MODx Tutorials (in Italiano) | MODx Snippets (English)

4 Posts

candlelightweb.com Reply #6, 14 years, 5 months ago

Well, I changed the side-menu-row as micro suggested and added the css code in both ways

#sectionMenu ul li.active a {
    font-weight: bold;
}

and then

#sectionMenu ul li.active {
    font-weight: bold;
}

when the first didnt work.
The links are not bold but the source code says it should be as it shows:

 <ul id="sectionMenu">
                
                <li class="first">
                    <a class="ui-corner-all" href="products/instructions.html" title="Instructions" >Instructions</a>
                    
                </li>

                <li class="active">
                    <a class="ui-corner-all" href="products/training-materials.html" title="Training Materials" >Training Materials</a>

when on the training materials page.

Something so simple - how easy it is to make a person feel so stupid... I'm not an expert but not a novice - this minor task has me jerking my hair out... slightly balding now.

What am I missing - what should I be looking for

Thank you

4 Posts

candlelightweb.com Reply #7, 14 years, 5 months ago

Ok - got it.
Slight variation of what Micro posted...

#sectionMenu li.active a{ font-weight: bold; }

wouldnt work with the ul in it... took that out and now bold for the page you are on works... thanks to you both.

Now, how do I put my hair back in? LOL
Thanks again.

1,098 Posts

microcipcip Reply #8, 14 years, 5 months ago

Sorry, my mistake, the #sectionMenu was applied to the ul itself!

Jertix.org -> Web Design & Development, Motion Graphics | Follow me on Twitter | MODx Tutorials (in Italiano) | MODx Snippets (English)