[Solved] Wayfinder not picking up CSS

6 Posts

njw Reply #1, 17 years, 2 months ago

I have probably done something stupid, but cannot see it at all. I am using ModX 0.9.6.3, and the version of Wayfinder included.

The CSS for my templates have formats for the <ul><li> prior to using Wayfinder.
I have set up Wayfinder to use the cssplay ultimate drop menus.
The Wayfinder is working fine, it finds all the menu items at the correct levels, but is using the template css code for formatting. If I remove the css markup from the template .css file, then I get a plain list, no formatting.
I have double checked the code in the Wayfinder chunks and the template and they look exactly as shown. I have checked that the ultimate_drop.css is where the chunk points to.

Any thoughts on why the Wayfinder call is not picking up the correct .css file?

Neil

1,390 Posts

kongondo Reply #2, 17 years, 2 months ago

Neil,

Best if you post your WF call and tpl chunks here plus a link to your site if possible. Having said that, WF "doesn’t" really pick CSS. You tell it what CSS classes to output and your CSS picks those selectors.

cheers/k

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

6 Posts

njw Reply #3, 17 years, 2 months ago

Thanks:

WF call:

 <div class="navigation">
       [[Wayfinder? &startId=`0` &level=`3` &parentRowTpl=`cssplay_revParentRow` &cssTpl=`cssplay_ultdrop`]]
       </div>

revParent Row chunk:

<li><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>

[+wf.wrapper+]

</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->

</li>

ultdrop chunk:

<link rel="stylesheet" media="all" type="text/css" href="assets/templates/wayfinder/ultimate_drop.css" />

I’d rather not post the site address - message me if it would be useful.

Many thanks

Neil

1,390 Posts

kongondo Reply #4, 17 years, 2 months ago

OK,

1. Have you confirmed that the names of the chunks are correct?

2. Have you checked the <head> section of your output HTML code to see if WF is writing the link to your ultimate_drop.css?

3. If it is, could there be conflict between this and the template css? Which comes first?

4. Can you confirm that the relative link (of the href) is actually accessible?

Confirm this and we could take it from there..

Btw, you don’t have to use the css this way if you don’t wish too. You can take the CSS from the ultimate_drop.css and use that in your template css.

cheers/k

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

6 Posts

njw Reply #5, 17 years, 2 months ago

OK - apologies for the delay. Cooking supper as well as doing this!

1. Yes

2. & 3. From view source:

<link href="assets/templates/i2e/common.css" type="text/css" rel="stylesheet" />
<link href="assets/templates/i2e/base.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" media="all" type="text/css" href="assets/templates/wayfinder/ultimate_drop.css" />

4. Moved the css file to the i2e folder (same folder as the other css files, same permissions as the others). No change.

I’ll try adding the css code as you suggest, although I have tried most options. The relevant template structure is:

<div id="container">
<div class="navigationContainer">
<div class="navigation">
This is where the <ul> is
</div>
</div>

so my question is whether defining just .menu is sufficient?

Many thanks for your time

Neil

1,390 Posts

kongondo Reply #6, 17 years, 2 months ago

Neil,

I think the problem is in the css; I have a feeling the selectors (classes and ids) are not being correctly referenced. Is .menu a class? Where is that class? Post the css here so that we can have a look.

cheers/k

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

6 Posts

njw Reply #7, 17 years, 2 months ago

The css is unchanged from the cssplay original (attached). A sample is below:

.menu {
font-family: verdana, sans-serif; 
width:750px; 
position:relative; 
font-size:0.85em;
z-index:100;
}
.menu ul {
padding:0; 
margin:0;
list-style-type: none;
}

My tpl structure is:

<div id="container">
    ...
    <div class="navigationContainer">
        ...
        <div class="navigation">
            [[Wayfinder? &startId=`0` &level=`3` &parentRowTpl=`cssplay_revParentRow` &cssTpl=`cssplay_ultdrop`]]
        </div>
    </div>
</div>

Thanks a lot for your help

Neil

6 Posts

njw Reply #8, 17 years, 2 months ago

Changed the <div class="navigation"> to <div class="menu"> and all is well. I knew it would be something stupid!

I owe you a beer when you’re next in the UK.

Neil

1,390 Posts

kongondo Reply #9, 17 years, 2 months ago

Glad u got it sorted...

cheers/k

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