CSS for WayFinder

80 Posts

tat2d Reply #1, 17 years, 2 months ago

I’m having a problem adding my own CSS to WayFinder. The link to the demo file is http://kittyinrose.com/modx/index.php?id=51

If you look at the CSS here: http://www.dynamicdrive.com/style/csslibrary/item/sliding-doors-tabs-menu/
you can see that my navigation menu is messed up. The buttons don’t look the same at all. When I tested the CSS on a generic html file, it displayed correctly. I’m only having the problem in MODx. I’m not sure where to begin troubleshooting.

Please help!

Teaching myself MODx

☆ A M B ☆
2,213 Posts

AMDbuilder Reply #2, 17 years, 2 months ago

It looks like your missing the span tags and the final break clear tag... See the comparison below:

<div id="slidetabsmenu">
  <ul>
<li><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li>
<li id="current"><a href="http://www.dynamicdrive.com/style/" title="CSS Library"><span>CSS</span></a></li>
  </ul>
</div>

<br style="clear: left;" />

vs.

<div id="slidetabsmenu"> 
<ul>
<li><a href="/modx/index.php?id=47" title="Digital Art" Digital Art>Digital Art</a></li> 
<li class="last"><a href="/modx/index.php?id=52" title="Contact" Contact>Contact</a></li> 
</ul> 
</div>

That should help resolve the problem.

AMDbuilder

Patrick | Server Wrangler
About Me: Website | Tweets | MODX Hosting

80 Posts

tat2d Reply #3, 17 years, 2 months ago

That makes sense, although how do I add a span tag around the WayFinder code for each link?

<div id="slidetabsmenu">
[!Wayfinder?startId=`54` &level=`1` %rowClass=`slidetabsmenu`!]
</div>

Teaching myself MODx

1,390 Posts

kongondo Reply #4, 17 years, 2 months ago

Quote from: tat2d at Aug 11, 2009, 02:41 PM

That makes sense, although how do I add a span tag around the WayFinder code for each link?
<div id="slidetabsmenu">
[!Wayfinder?startId=`54` &level=`1` %rowClass=`slidetabsmenu`!]
</div>

Hi,

You probably want to read up on Wayfinder tpl chunks and other parameters. Don’t use & etc. use &. And i think % is a typo? It should be &

As for the span, it depends on what row level Wayfinder template you are using (rowTpl, etc). Put the span tags around the wf.linktext placeholder, i.e.

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

cheers/k

ps: you don’t have to use all the above placeholders... wink

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

80 Posts

tat2d Reply #5, 17 years, 2 months ago

I’m sorry, that doesn’t really make sense to me. I’m not adding li tags, it does it automatically. All I added to the menu page was

<div id="slidetabsmenu">
[!Wayfinder?startId=`0` &level=`1` %rowClass=`slidetabsmenu`!] 
</div>

Teaching myself MODx

1,390 Posts

kongondo Reply #6, 17 years, 2 months ago

Quote from: tat2d at Aug 11, 2009, 04:07 PM

I’m sorry, that doesn’t really make sense to me. I’m not adding li tags, it does it automatically. All I added to the menu page was
<div id="slidetabsmenu">
[!Wayfinder?startId=`0` &level=`1` %rowClass=`slidetabsmenu`!] 
</div>

In order to output a menu correctly, Wayfinder has a 3 default templates which it will default to using if you don’t specify your own. These are the outerTpl (which is used to construct the ul - outer container - of the menu), the rowTpl (which is used to construct the rows of the menu - i.e. the li bit) and the startItemTpl (which will be used if you set the parameter &displayStart to true).

So, in your case, since you haven’t specified any rowTpl, WF is using its default one. In order to have those spans, you need to create a rowTpl with the necessary code (for instance the code I posted above) and specify it in your WF call e.g.

[!Wayfinder? &startId=`0` &rowTpl=`menuRows` &level=`1` &rowClass=`slidetabsmenu`!]

where menuRows is the name of a chunk containing the above or similar code (i.e. the code with the spans). You can give the chunk a more meaningful name, other than menuRows.

Have a look at this site:
http://www.muddydogpaws.com/development/wayfinder/parameters.html

and it will do you good to grab a copy of the WF e-book in my sig

cheers/k

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

80 Posts

tat2d Reply #7, 17 years, 2 months ago

Thanks for the book!
I updated the code and added the chunk, and it’s kind of working, but the links aren’t horizontal, and the bg images are off.
http://kittyinrose.com/modx/index.php?id=51

Do you know what I need to adjust? I used the code exactly as you had it, because I’m still not familiar enough to pick it apart.

Thanks for the help

Teaching myself MODx

☆ A M B ☆
2,213 Posts

AMDbuilder Reply #8, 17 years, 2 months ago

You should remove the pre tags from around the menu and add the <br style="clear: left;" /> after the final </div> to close the menu.

So something like this:

<div id="slidetabsmenu">
[!Wayfinder?startId=`0` &level=`1` %rowClass=`slidetabsmenu`!] 
</div>

<br style="clear: left;" />

AMDbuilder

Patrick | Server Wrangler
About Me: Website | Tweets | MODX Hosting

80 Posts

tat2d Reply #9, 17 years, 2 months ago

Adding that code killed the style all together.

Teaching myself MODx

80 Posts

tat2d Reply #10, 17 years, 2 months ago

I don’t know what I did, but it’s working now. Here’s what I put in the HTML editor for the page:

<div id="slidetabsmenu">
[!Wayfinder? &startId=`0` &rowTpl=`menuRows` &level=`1` &rowClass=`slidetabsmenu`!] 
</div>

instead of the wysiwyg editor

Teaching myself MODx