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

[cy1138]

I see the widget on my page but there is nothing in it.
Do i have to add some code in the widget when i made it?

[AURFSCAN]

1. Create a New template and add the code above to it.
2. Call it vbcms_widget_navigation
3. Go to widgets
4. Click 'Configure' for Navigation
5. Change the template name from vbcms_widget_sectionnavext_page to vbcms_widget_navigation

edit: If the widget margins are 'off' change the vbcms_widget_margin settings in StyleVars

[cy1138]

Thanx AURFSCAN for taking the time to give me this explanation!

That worked like a dream for me!!
This looks so much better then the original setion nav!

Thanx!

[M@tt]

Anyone have any thoughts/instructions on how to do the same for the Categories box please?

[giorgino]

reserved

[HondaATC]

Did it, I like it, Thanks!

My only question is though, I see on your site, njpinebarrens.com that you have the section list expanded as a default when I view it. How in the heck can I do that on mine! I changed the option on the widget configuration, but it didn't seem to do anything. What is yours set at?

[Jabong82]

Nice Installed. How do you change the background color though of the widget? I don't know where to find the code to edit. Thank you.

[smnet]

to stop the expand and collapse when you click a label just remove this from clientscript/yui/treeview/treeview-min.js

B.on(H,"click",this._onClickEvent,this,true);

I am sure this is not the correct way to achieve this but hey, it works!