For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
I've been banging my head against a wall, trying to create a smarty menu template to output stock twitter boostrap menu. The intention is to port twitter bootsrap to cms made simple, with a range of stock layouts (for blog etc) and make it available
However, I've never ever written a menu in CMSMS... I either use stock {menu} and just style it up... or hardwire the links in....
Can anyone help? or at least point me in the right direction. Here is a dummy menu I'm building for a gym website.
All you need is a pretty simple modification of one of the standard menu templates in the Menu Manager.
The cssmenu template is a good place to start from, it is almost everything you want straight out of the box I think. Just modify it with your the class names Bootstrap uses.
(Good idea to port Bootstrap to CMSMS by the way. Hope you'll be able to share your efforts!)
Hi Zoorlat, Thanks - through a process of trial and error, I figured it out... although I had to bodge the active parent with a bit of javascript (I sorta get javascript - can never get my head around smarty though).
Boostrap (at least in my opinion) is one of the better css frameworks / ui kits. Gives you a bunch of stuff to quickly put something together. Also inherently responsive out of the box.
{* 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 pull-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}
Once this is done, the plan is to package stuff up and release it as a cms template, with a ready made layouts etc. Just got to make time to get it done
Did you manage to sort this out as a CMS theme yet as I have just been researching Bootstrap which looks interesting.
I am still not 100% convinced yet about responsive design as I have yet to come across one for a large site which deals with having a substantial number of second and third level links. If anyone know of any then I would be interested to see how they deal with the navigation.
@applejack did you look at Simplex theme which comes with 1.11, navigation is handled there with JS.
But responsible layouts itself depend on Project it is a solution for smaller sites and single level navigation but i would go with a hybrid of mobile detection and responsive design when it comes to larger sites.
Thanks. I have been doing a lot of research recently on such things as grid systems, HTML5 and CSS3 frameworks.
As it such a jungle out there with so many options I would be interested to know if you or anyone else have any preferences in regard to these?
Re: but i would go with a hybrid of mobile detection and responsive design when it comes to larger sites.
Quite which is one reason why I am late to the responsive party as most of the sites I do are corporate and quite a bit larger than a "standard" responsive site as well as requiring old browser compatibility.
That essexboyracers first code is almost perfect, it shows also the subpages and they work on computer both full and hidden navigation, but dont seem to work on smart phone and tablet, when navigation is hidden. (Sub pages show up but they don't do anything when clicked)
rpw seems to got it working with phone and tablet though, any idea how he did it?
For bootstrap Navigation and CMSMS check out TBS Theme http://themes.cmsmadesimple.org/uploads ... S.zip.html
but do yourself a favor and replace TBS DB Stylesheets with static Bootstrap Stylesheets as it is much easier to update with new Bootstrap releases, i delivered Stylesheets with CMSMS DB just for convenience and learning purposes.
THANKS!!! This is a fantastic starter theme using Bootstrap. Makes it very easy to extend use of CMSMS.
Have you had a reason or opportunity to use jquery.mobilemenu.js or another jquery menu option for use with CMSMS when Bootstrap isn't used? I have a few clients who prefer the "Select" option type of menu because they see this predominately on website themes and templates they find online.
Is there a tutorial that I may have missed that could help me understand how to convert one of these other jquery mobile scripts for use with CMSMS?
Goran, thanks again for this new theme. It's very helpful to those of us (me ) who are less skilled to better understand and move forward.
I still have some small issue with the slider though. It looks like it has short delay when starting, maybe the slide change interval? Did I miss something? (you can check the demo link above)
Also those smarty magic's on page templates are new feature for me, they look very usable. Any advice where to find more information how to use those?
You may want to check into the extra closing div tag at the end of the carousel </div><!-- /.carousel --> I think you have one extra of those before the nav buttons...
) who are less skilled to better understand and move forward.