Orchard CMS - injecting css classes into navigation / editing navigation HTML

0
votes

I have a site laid out in HTML/CSS - based on Twitter Bootstrap.

I have created a new template in a new orchard instance.

I have a navigation that requires some classes from bootstrap applied to the .

The Orchard Layout uses this for navigation: @Display(Model.Navigation)

How can I edit the HTML it outputs - and / or add some classes to the ul that's rendered in the navigation by Orchard?

Thanks.

2
orchardcmsorchardcms-1.6

2 Answers

1
votes

That line in Layout.cshtml is showing the navigation zone, which is one of the widget zones.

In a standard Orchard setup a Menu Widget gets placed in that zone. You can check on the Widgets page in the admin. This doesn't directly show the menu widget though. This is done by another template.

In most cases the easiest way to find out which templates are being used is to use the Shape Tracing tool, which is part of the Orchard Designer Tools. There's an intro to Shape Tracing in the Orchard Documentation.

There are several layers of menu templates and it is a bit tricky to find these in the shape tracing tool.

The templates relevant to menus that you may need to include in your theme are:

  • MenuItemLink.cshtml
  • MenuItemLink-ContentMenuItem.cshtml
  • MenuItem.cshtml

If you can't find them in the shape tracing tool, then do a file search in your solution and copy these files to your theme.

1
votes

One option could be to use Vandelay.Classy module and add classes to your content item http://orchardproject.net/gallery/List/Modules/Orchard.Module.Vandelay.Industries

Other could be to create a alternate template for Navigation Shape. you can designer tools to create alternate.

http://orchardproject.net/gallery/List/Modules/Orchard.Module.Vandelay.Industries