CMS Made Simple Forums

Posted: **Wed Jul 15, 2015 4:43 am**

I am in the process of converting a very useful Bootstrap 3 theme for use with CMSMS. http://graygrids.com/demos/themes/margo/

My goal is to convert it and then make it available to CMSMS users. I have already nearly completed converting the 17 page Bootstrap 3 http://startbootstrap.com/template-over ... -business/ for CMSMS 1.12 http://www.tellercounty.biz/cms112/

I can't get the Margo menu to work. Here is the menu template used in site above. Thanks to Calguy:

Code: Select all

{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *} 

{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
  {assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}

{if $count > 0}
<ul class="nav navbar-nav navbar-right">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul class='dropdown-menu'>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->parent == true }

<li class="dropdown"><a class="dropdown-toggle" href="{$node->url}" data-toggle="dropdown">{$node->menutext} <b class="caret"></b></a>
  
{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="dropdown"><a class="dropdown-toggle" href="{$node->url}" data-toggle="dropdown">{$node->menutext} <b class="caret"></b></a>

{elseif $node->current == true}
<li class="active"><a href="{$node->url}">{$node->menutext}</a>

{elseif $node->type == 'sectionheader'}
<li class="dropdown"><a class="dropdown-toggle" href="{$node->url}" data-toggle="dropdown">{$node->menutext} <b class="caret"></b></a>
  
{elseif $node->type == 'separator'}
<li class="divider-vertical">

{else}
<li><a href="{$node->url}">{$node->menutext}</a>

{/if}

{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

I can't modify this correctly for the menu code below. Any help will be appreciated. Getting both of these themes working properly should be very helpful to CMSMS users.

Code: Select all

<!-- Start Navigation List -->
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a class="active" href="index.html">Home</a>
                                <ul class="dropdown">
                                    <li><a class="active" href="index.html">Home Main Version</a>
                                    </li>
                                    <li><a href="index-01.html">Home Version 1</a>
                                    </li>
                                    <li><a href="index-02.html">Home Version 2</a>
                                    </li>
                                    <li><a href="index-03.html">Home Version 3</a>
                                    </li>
                                    <li><a href="index-04.html">Home Version 4</a>
                                    </li>
                                    <li><a href="index-05.html">Home Version 5</a>
                                    </li>
                                    <li><a href="index-06.html">Home Version 6</a>
                                    </li>
                                    <li><a href="index-07.html">Home Version 7</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="about.html">Pages</a>
                                <ul class="dropdown">
                                    <li><a href="about.html">About</a>
                                    </li>
                                    <li><a href="services.html">Services</a>
                                    </li>
                                    <li><a href="right-sidebar.html">Right Sidebar</a>
                                    </li>
                                    <li><a href="left-sidebar.html">Left Sidebar</a>
                                    </li>
                                    <li><a href="404.html">404 Page</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">Shortcodes</a>
                                <ul class="dropdown">
                                    <li><a href="tabs.html">Tabs</a>
                                    </li>
                                    <li><a href="buttons.html">Buttons</a>
                                    </li>
                                    <li><a href="action-box.html">Action Box</a>
                                    </li>
                                    <li><a href="testimonials.html">Testimonials</a>
                                    </li>
                                    <li><a href="latest-posts.html">Latest Posts</a>
                                    </li>
                                    <li><a href="latest-projects.html">Latest Projects</a>
                                    </li>
                                    <li><a href="pricing.html">Pricing Tables</a>
                                    </li>
                                    <li><a href="animated-graphs.html">Animated Graphs</a>
                                    </li>
                                    <li><a href="accordion-toggles.html">Accordion & Toggles</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="portfolio-3.html">Portfolio</a>
                                <ul class="dropdown">
                                    <li><a href="portfolio-2.html">2 Columns</a>
                                    </li>
                                    <li><a href="portfolio-3.html">3 Columns</a>
                                    </li>
                                    <li><a href="portfolio-4.html">4 Columns</a>
                                    </li>
                                    <li><a href="single-project.html">Single Project</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="blog.html">Blog</a>
                                <ul class="dropdown">
                                    <li><a href="blog.html">Blog - right Sidebar</a>
                                    </li>
                                    <li><a href="blog-left-sidebar.html">Blog - Left Sidebar</a>
                                    </li>
                                    <li><a href="single-post.html">Blog Single Post</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="contact.html">Contact</a>
                            </li>
                        </ul>
                        <!-- End Navigation List -->

Posted: **Wed Jul 15, 2015 8:03 am**

Maybe something like this?

Code: Select all

{strip}
{if $count > 0}
<ul class="nav navbar-nav navbar-right">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul class="dropdown">" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->current == true}
<li><a href="{$node->url}" class="active" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->type == 'sectionheader'}
<li>{$node->menutext}

{elseif $node->type == 'separator'}
<li> <hr class="separator" />

{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li></ul>
{/if}
{/strip}

Posted: **Wed Jul 15, 2015 1:12 pm**

Thanks Nikkio

for the quick response. Trying this code resulted in this error message:

Code: Select all

Syntax error in template "module_db_tpl:MenuManager;Span_menu"  on line 6 "{repeat string=" " times=$node->depth-$node->prevdepth}"  - Unexpected "dropdown", expected one of: "}"

Just had to remove the double quotes. Tried this menu template and it worked!

Code: Select all

{strip}
{if $count > 0}
<ul class="nav navbar-nav navbar-right">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul class='dropdown'>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->current == true}
<li><a href="{$node->url}" class="active" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->type == 'sectionheader'}
<li>{$node->menutext}

{elseif $node->type == 'separator'}
<li> <hr class="separator" />

{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li></ul>
{/if}
{/strip}

Posted: **Wed Jul 15, 2015 3:26 pm**

Though above code is not wrong it would give a more consistent html output when using (exchange single/double quotes):

Code: Select all

...
{repeat string='<ul class="dropdown">' times=$node->depth-$node->prevdepth}
...

So every html tag attribute has a double quoted value.

(Note that single quoted strings in PHP/Smarty are different from double quoted strings. But in this case that doesn't really matter.)

Posted: **Thu Jul 16, 2015 3:27 am**

Thanks Velden. I'll try it with your suggestions too.

CMS Made Simple Forums

<SOLVED> Bootstrap 3 Menu Conversion problem

<SOLVED> Bootstrap 3 Menu Conversion problem

Re: Bootstrap 3 Menu Conversion problem

Re: Bootstrap 3 Menu Conversion problem

Re: <SOLVED> Bootstrap 3 Menu Conversion problem

Re: <SOLVED> Bootstrap 3 Menu Conversion problem