We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Wayfinder &cssTpl bug

    • 17149
    • 19 Posts
    Lim0n Reply #1, 15 years, 3 months ago
    Hello!

    snippet call:
    [[Wayfinder?
    &startId=`0`
    &removeNewLines=`true`
    &outerTpl=`InlineEmptyOuter`
    &rowTpl=`InlineRow`
    &level=`1`
    &rowClass=`topnavrow`
    &lastClass=``
    &firstClass=``
    &cssTpl=`topnavcss`
    ]]

    topnavcss chunk content:
    .topnav a, .topnav span {display: inline-block; padding: 1ex; margin: 1ex;}


    Result in HEAD section:
    <link rel="stylesheet" href=".topnav a, .topnav span {display: inline-block; padding: 1ex; margin: 1ex;}
    " type="text/css" />


    MODX Revolution 2.1.0-pl (traditional)
    Wayfinder 2.3.1 pl
      • 3109 ☆ A M B ☆
      • 894 Posts
      benmarte Reply #2, 15 years, 3 months ago
      This is not a bug you are styling wayfinder incorrectly download this ebook, read it and you have a better understanding on how to properly style wayfinder calls.

      Are you wrapping the topnavcss chunk with style tags? your chunk should look like this.

      
<style type="text/css">

.topnav a, .topnav span {display: inline-block; padding: 1ex; margin: 1ex;}

</style>


      Good Luck.
        Benjamin Marte
        Interactive Media Developer
        Follow Me on Twitter | Visit my site | Learn MODX
        • 22427
        • 793 Posts
        ottogal Reply #3, 15 years, 3 months ago
        As benmarte said, the chunk you use for the [tt]&cssTpl[/tt] parameter may contain CSS rules wrapped by [tt]<style type="text/css>[/tt] and [tt]</style>[/tt].

        There is another possibility: that chunk could contain the URL of a CSS file containing your rules, f.i. [tt]assets/css/mymenu.css[/tt] .
        This will be output in the source code just before the closing </head> in this form:
        <link rel="stylesheet" href="assets/css/mymenu.css" type="text/css" />
        This wrapping by [tt]<link rel="stylesheet" href="[/tt] and [tt]" type="text/css" />[/tt] will always be done if the chunk for [tt]&cssTpl[/tt] does neither contain [tt]<style[/tt] nor [tt]<link[/tt] - that’s what happened to the chunk used by Lim0n.
        Otherwise the unmodified chunk will be inserted in the <head> section - that’s the case for benmarte’s chunk.
        (BTW: I’d always prefer the use of an external css file.)

        Edit:
        If there are more than one Wayfinder calls on a page, the [tt]&cssTpl[/tt] parameter in just one of it will effect the other menus too, because of its resulting in a CSS definition in the <head> section which rules the whole page.