Alternate Section Navigation Widget Template

[ZippySLC]

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. :confused:

[as7apcool]

very nice

[anthony parsons]

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

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!

[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!