vBulletin CMS Widgets - Alternate Section Navigation Widget Template

This template will make your section navigation widget look like the other widgets on your CMS page. It always bothered me that the navigation widget looked so radically different than the other widgets.

What I did was created a custom template, and assigned that to the section widget. You should create one with the following code:

<script type="text/javascript">
<!--
	var IMGDIR_MISC = "{vb:stylevar imgdir_misc}";
	var vb_disable_ajax = parseInt("0", 10);

        /* Start Sections Widget Configuration */
        vbGlobal_SHOW_ALL_TREE_ELEMENTS_THRESHOLD = parseInt("{vb:raw show_all_tree_elements_threshold}");
        /* End Seections Widget Configuration */
// -->
</script>
<script type="text/javascript" src="{vb:stylevar yuipath}/treeview/treeview-min.js"></script>
<!-- start treeview css -->
<script type="text/javascript">
	if (window.loadVbCss) {
		loadVbCss("{vb:stylevar yuipath}/treeview/assets/skins/sam/treeview.css",true);
	}
</script>
<!-- end treeview css -->

<!-- custom treeview styles defined at template: headinclude -->

<!-- END VB Tree-Menu Implementation of YUI TreeView -->

<div class="cms_widget">
	<div class="block">
          <div class="cms_widget_header">

          <h3>Articles</h3><!-- You can change this to whatever you'd like to call the menu -->

	  </div>

	<div class="cms_widget_content">
		<div class="vb-tree-menu">
			{vb:raw nodelist}
		 </div>
	</div>
  </div>
</div>
<script type="text/javascript">
<!--
	// Main vBulletin Javascript Initialization
	//vBulletin_init();
//-->
	initVbTreeMenus({vb:raw menu_static});
</script>

Additionally, you'll want to edit the stylevars that control how the menu are displayed. They're vbcms_navwidget_menuitem_*. I also got rid of the images that display the plus and minus icons for the sub-sections on my site.

You can see this in action at http://www.njpinebarrens.com

[JAFRI]

Thanks, nice........

[Front Range 4x4]

Just what I was looking for. I just wish the directions were clear and concise enough for me (and others) to figure out how to do it.

[as7apcool]

very nice

[anthony parsons]

Originally Posted by Front Range 4x4

I just wish the directions were clear and concise enough for me (and others) to figure out how to do it.

Just for others....

Create a new template, call it vbcms_widget_navigation and paste the above code within it.

Create a new static HTML widget, which will be your new navigation.

Configure the widget and change the template name to the one you created, in this example: vbcms_widget_navigation

That is it. You will now load a default widget style with the JS section menu inside of it. It will obviously inherit your default style for your widgets.

[Front Range 4x4]

I appreciate you adding the detail but I guess this just isn't meant to be used by me.

[ZippySLC]

So, actually what I did was create a new template:

AdminCP > Styles & Templates > Style Manager, and in the dropdown for your style, select "Add New Template."

Name your template whatever you'd like, and paste the code in my first post into the text box. Hit save.

Now, you want to edit the template that the widget that draws that menu uses to use your new custom template.

AdminCP > VBulletinCMS > Widgets and configure the widget for the menu (it will say Section Navigation - JS Advanced). In the popup box you'll change the name of the template to the name that you gave your new custom template.

[ZippySLC]

To get rid of the plus and minus images that show up in the menu, the easiest way I found is to replace the images in images/misc/trees with 0 byte files. You'll want to change all of the minus-on, minus-off, plus-on, and plus-off images.

[Front Range 4x4]

Thanks for the extra directions ZippySLC but I can't get it to work. I've redone it so many times I don't need to read your steps any more.

[ZippySLC]

Sorry!