Customization with HTML Templates of SharePoint Navigation Tools

Customization with HTML Templates

HTML templates can be used in combination with views of lists and document libraries. Read more about Customization with Views. The templating feature is activated if your view contains a field with the name Template. This field can be of type multiple lines of text or lookup. A field of type text contains the content of the template. A field of type lookup references a list item in another list with a field Template with the content.

Default HTML Template

This is the default HTML template of a node. I.e. this template will render the same HTML code without a template in use if your view contains fields with the names Title and Description.

<ins class="mxnav-icon">&nbsp;</ins>
<div class="ms-navitem">
	<a class="ms-navitem" href="-LinkFilename-" title="-Description-">
		<ins class="mxnav-icon -IconClass-" style="background-image: url(-IconURL-);">&nbsp;</ins><span>-Title-</span>
	</a>
</div>

Tokens in Templates

Templates can contain tokens of the fields of the view in the form -<Field Name>- and special tokens:

-ItemURL- The URL of the item
-IconURL- The URL of the icon image
-IconClass- The CSS class name of the icon

Sample Template

This sample template creates rich HTML content driven from a list for nodes in a drop down menu web part. The list contains the fields Title (text), Testfeld (rich text) and Description (text). It show two items with different templates.

Template code of item one of this sample (above the image):

<div style="clear: both; display: block; margin-bottom: 15px;">
	<a href="-ItemURL-" style="height: auto !important; font-size: 36px; font-family: Arial;">
		<div style="white-space: normal; width: 600px; display: block;">-Title-</div>
	</a>
	<div style="clear: both; padding-top: 5px; display: block;">
		<a href="#" style="display: block; white-space: normal; height: auto !important;">-Description-</a>
	</div>
</div>

Template code of item two of this sample (the image and below):

<div style="clear: both; display: block;">
	<a href="-ItemURL-" style="height: auto !important;">
		<div style="white-space: normal; width: 600px; display: block;">-Testfeld-</div>
	</a>
	<div style="clear: both; padding-top: 15px; display: block;">
		<a href="#" style="display: block; white-space: normal; height: auto !important;">-Description-</a>
	</div>
</div>

Custom CSS in the configuration of the web part of this sample:

.modulerixNodes { white-space: normal; }

.modulerixNavM { position: static; float: left; }
.modulerixNavM .modulerixNodes { z-index: 70; margin-right: 12px; }

.modulerixNavM, .modulerixNavM a { color: #ffffff !important; }
.modulerixNavM a { padding-left: 5px; padding-right: 5px; font-size: 12px; font-family: "Segoe UI", Arial; }

.modulerixNavM .modulerixNodes { border: 0 !important; margin-left: 0; }
.modulerixNavM .modulerixNodes > li > div { background-image: none; }

.modulerixNavM li > ins { border-left: solid 0px #80a0d0 !important; }
.modulerixNavM > ul > li { border-right: solid 1px #304050; }
.modulerixNavM ins { background-image:url("/_layouts/modulerix/MenuIcons2.png"); background-repeat:no-repeat; background-color:transparent; }
.modulerixNavM .jstree-hovered > div { background-position: -300px -50px; }

.modulerixNavM li .modulerixNodes { padding: 25px; background-color: #495f84; border-radius: 15px; }
.modulerixNavM > .modulerixNodes > li > ul { border-top-left-radius: 0px; }
.modulerixNavM li > .modulerixNodes > li > ul {top: -15px !important; }
.modulerixNavM li > .modulerixNodes > li > ins {width: 36px !important; }

.modulerixNavM > ul > li > div { background-image: none; border: 0 !important; }
.modulerixNavM > ul > li > ins { border: 0 !important; }
.modulerixNavM > ul > li > div { background-image: none !important; }
.modulerixNavM > ul > li.jstree-childvisible > div { background-image: url(/_layouts/modulerix/Menu1_03.gif) !important; background-position: 0 0; }
.modulerixNavM  a { color: #e0e8ff !important; }
.modulerixNavM > ul > li > div > a { margin-left: 10px !important; margin-right: 8px !important; padding-top: 1px !important; padding-bottom: 3px !important; height: 39px; font-size: 20px !important; letter-spacing: 1px; font-family: "Yanone Kaffeesatz", Arial; color: #d0d8f0 !important; }
.modulerixNavM > ul > li > div > a > .jstree-icon { margin-top: 8px !important; }
.modulerixNavM a:hover { color: #ffffff !important; }
.modulerixNavM li.jstree-childvisible > div > a  { color: #ffffff !important; }
.modulerixNavM > ul > li > div > a > .jstree-checkbox { margin-top: 7px; }

.modulerixNavM  .modulerixNodes > li > div > a > span { padding-right: 20px; }
.modulerixNavM  > ul > li > div > a > span { padding-right: 16px; }
.modulerixNavM > ul > li.jstree-open > ins { background-position:-117px 4px; }
.modulerixNavM > ul > li.jstree-closed > ins { background-position:-41px 4px; }
.modulerixNavM > ul > li > .jstree-loading { background-position: -2px 10px !important; }
.modulerixNavM > ul > li > ul { border-top: 0; margin-top: 0px; }

Write a Comment

Navigation Tools

Products

Support