Developer forum

Forum » Templates » Add custom classes to dwnavigation

Add custom classes to dwnavigation

E-mail notifications
Martin Kure
Reply
Posted on 02/09/2014 11:04:22

Hi, 

I'm creating a navigation using dwnavigation. I've added bootstrap to the site, so I wanna add some bootstrap classes to the <ul> within the navigation. However no classes are being added to the site:

I have this code in my master.html:

<ul class="dwnavigation nav navbar-nav navbar-right" id="navbar" settings="startlevel:1;endlevel:7;template:LIClean.xslt;parentid:5695;expandmode:all">

It should add the following classes: nav navbar-nav navbar-right - but none are being added. It just adds a simple <ul> without any classes.

Can you please help me out :-).

Regards

Martin

 


Replies

 
Thomas Schroll
Posted on 02/09/2014 11:21:12
Reply
This post has been marked as an answer

Hi Martin

Place the classes in your LIClean.xslt file in the Navigation folder.

Regards Thomas

Votes for this answer: 1
 
Martin Kure
Posted on 02/09/2014 11:29:07
Reply

Hi there, 

the funny part is, that I have seen other people add additional classes after the dwnavigation class in their ul. Add the classes to the xslt might do the trick, but I have to use a lot of different xslt's depending on the specific classes, I wanna add to the various menus. It would be a lot easier if I could just add the classes directly after the dwnavigation class.

Regards

Martin

 
Thomas Schroll
Posted on 02/09/2014 11:53:43
Reply

Hi Martin

Perhaps you can overide the parsing by adding the Dw navigation tag to the layout:

<ul class="dwnavigation"><!--DwNavigation(leftnavigation)--></ul>

Consider using only one xslt with logic to add the right classes to the ul.

Regards Thomas

 
Mikkel Ricky
Posted on 02/09/2014 11:56:02
Reply

All attributes added to the navigation element are available in the navigation xml. 

Using

<ul data-role="navbar" class="dwnavigation nav navbar-nav navbar-right" id="navbar" settings="startlevel:1;endlevel:7;template:LIClean.xslt;parentid:5695;expandmode:all"></ul>

in your template will result in this in the navigation xml:

 

<?xml version="1.0" encoding="utf-8"?>
<NavigationTree>
 <Settings>
  …
  <LayoutNavigationAttributes data-role="navbar" class="nav navbar-nav navbar-right" id="navbar" />
  …
 </Settings>
</NavigationTree>

and then you can then use the attributes when generating your markup:

<xsl:template match="NavigationTree">
 <xsl:if test="Page">
  <ul>
   <xsl:copy-of select="Settings/LayoutNavigationAttributes/@*"/>
   …
  </ul>
 </xsl:if>
</xsl:template>

Best regards,
Mikkel

 

 

 
Nicolai Høeg Pedersen
Posted on 02/09/2014 22:21:08
Reply

Hi Martin

As Mikkel writes, the classes etc. is in the XML

Attached a LIClean.xslt that adds classes and ID's from the UL node.

 
Martin Kure
Posted on 03/09/2014 11:17:37
Reply

Hi all, 

thanks a lot, that really helped out. 

Much appreciated.

Regards

Martin

 

 

You must be logged in to post in the forum