I noted that my previous post is uncomplete. In the following the missing part: <!-- The javascript ============================================= (Placed at the end of the document so the pages load faster) --> <script src="{{=URL('static','metroui/js/web2py_metroui.js')}}"></script> <script src="{{=URL('static','metroui/js/dropdown.js')}}"></script>
2) static/metroui/web2py_metroui.css This file is needed to insert your customization or to override the rules in web2py.css and in original files of framework. 3)static/metroui/css/web2py_metroui_nojs.css As #2 but applied when javascript is disabled in the browser. It's empty for metroui. 4) static/metroui/js/web2py_metroui.js In this file we will write mainly the code to add, remove, replace the html tags attributes (classes, data-* and so on) generated automatically by web2py in order to comply with selected framework requirements For example, since metroui requires the data-role attributes for the li.dropdown and the menu is generated with the MENU helper we need to write the following code: jQuery(function(){ jQuery('.menu>li.dropdown').each(function(){ jQuery(this).attr({'data-role':'dropdown'}); }); }); 5) views/default/index.html {{=A(T("Administrative Interface"), _href=URL('admin','default','index'),_class ='btn', becomes {{=A(T("Administrative Interface"), _href=URL('admin','default','index'),_class ='button', 6) models/menu.py we need to remove the href from link, otherwise the click event to open the dropdown menu doesn't fire response.menu += [ #(SPAN('web2py', _class='highlighted'), False, 'http://web2py.com', [ (SPAN('web2py', _class='highlighted'), False, '#', [ Final notes: 1) Classes you removed (web2py-menu-expand web2py-menu-first web2py-menu-last web2py-menu-active) don't influence the metroui menu 2) metroui framework doesn't support nested submenu if I'm not missing something 3) dropdown.js (metroui file) has a small bug on line 91: $('.menul-pull') instead of $('.pull-menu') 4) attached w2p app is only demonstrative so my apologies in advance for eventual bugs you'll find Happy New Year!! Il giorno domenica 30 dicembre 2012 23:01:28 UTC+1, Paolo Caruccio ha scritto: > > I don't think that MENU helper is the guilty in your case. > I made a metroui version of welcome app (see the images). > Follows the list of involved files: > > 1) views/layout.html > This is the main file to change if someone want apply a different html/css > theme to web2py apps > Each css framework has its own layout scaffold so we have to adapt our > html structure. > For example bootstrap menu html structure is (but the same is valid for > other parts of the layout. For details please check the file in attached > app): > > <!-- Navbar ================================================== --> > <div class="navbar navbar-inverse navbar-fixed-top"> > <div class="flash">{{=response.flash or ''}}</div> > <div class="navbar-inner"> > <div class="container"> > <!-- the next tag is necessary for bootstrap menus, do not remove > --> > <button type="button" class="btn btn-navbar" data-toggle= > "collapse" data-target=".nav-collapse"> > <span class="icon-bar"></span> > <span class="icon-bar"></span> > <span class="icon-bar"></span> > </button> > {{=response.logo or ''}} > <ul id="navbar" class="nav pull-right">{{='auth' in globals() and > auth.navbar(mode="dropdown") or ''}}</ul> > <div class="nav-collapse"> > {{is_mobile=request.user_agent().is_mobile}} > {{if response.menu:}} > {{=MENU(response.menu, _class='mobile-menu nav' if is_mobile > else 'nav',mobile=is_mobile,li_class='dropdown',ul_class='dropdown-menu')}} > {{pass}} > </div><!--/.nav-collapse --> > </div> > </div> > </div><!--/top navbar --> > > > with metroui the menu becomes: > > <div class="page"> > <!-- Navbar ================================================== --> > <div class="nav-bar"> > <div class="nav-bar-inner padding10"> > <span class="pull-menu"></span> > <!--{{=response.logo or ''}}--> > <a href="http://www.web2py.com/"><span class="element brand" > ><b>web<span>2</span>py</b>™ </span></a> > > > > > <div class="divider"></div> > > {{is_mobile=request.user_agent().is_mobile}} > {{if response.menu:}} > {{=MENU(response.menu, _class='menu', mobile=False, > li_class='dropdown', ul_class='dropdown-menu')}} > {{pass}} > > > > > </div> > </div> > </div> > > Another important change is related to files (css, javascript) that the > theme will use. So: > > <!-- include stylesheets --> > {{ > response.files.append(URL('static','css/web2py.css')) > response.files.append(URL('static','css/bootstrap.min.css')) > response.files.append(URL('static','css/bootstrap-responsive.min.css')) > response.files.append(URL('static','css/web2py_bootstrap.css')) > }} > ... > <noscript><link href="{{=URL('static', > 'css/web2py_bootstrap_nojs.css')}}" rel="stylesheet" type="text/css" > /></noscript> > ... > <!-- The javascript ============================================= > (Placed at the end of the document so the pages load faster) --> > <script src="{{=URL('static','js/bootstrap.min.js')}}"></script> > <script src="{{=URL('static','js/web2py_bootstrap.js')}}"></script> > > > becomes (please note that I put metroui files in a separated folder for > clarity): > > <!-- include stylesheets --> > {{ > response.files.append(URL('static','css/web2py.css')) > response.files.append(URL('static','metroui/css/modern.css')) > response.files.append(URL('static','metroui/css/modern-responsive.css')) > response.files.append(URL('static','metroui/css/web2py_metroui.css')) > }} > ... > <noscript><link href="{{=URL('static', > 'metroui/css/web2py_metroui_nojs.css')}}" rel="stylesheet" type="text/css" > /></noscript> > > > ... > <!-- The javascript ============================================= > &nbs... > Mostra > originale<https://groups.google.com/group/web2py/msg/48e575e82d9c6a0e?dmode=source&output=gplain&noredirect> > --