<![CDATA[Informationen für CMS/made simple / [GELÖST] Bootstrap und Menu-Manager]]> http://www.cmsmadesimple.de/forum/viewtopic.php?id=3937 Wed, 28 May 2014 10:18:37 +0000 FluxBB <![CDATA[Re: [GELÖST] Bootstrap und Menu-Manager]]> http://www.cmsmadesimple.de/forum/viewtopic.php?pid=31163#p31163 OK. Danke.
Funktioniert grundsätzlich.
Muss ich mir noch ein bisschen zurecht fummeln.

Mit dem Seitenattribut war mir neu. Cool.

]]> Wed, 28 May 2014 10:18:37 +0000 http://www.cmsmadesimple.de/forum/viewtopic.php?pid=31163#p31163 <![CDATA[Re: [GELÖST] Bootstrap und Menu-Manager]]> http://www.cmsmadesimple.de/forum/viewtopic.php?pid=31146#p31146 Ich poste dir mal mein Menüscript für die Sidebar ähnlich http://wrapbootstrap.com/preview/WB0TFD2S0 


[== Smarty ==]
{if $count > 0}
    <ul class="sidebar">
    {foreach from=$nodelist item=node}
        {if $node->depth > $node->prevdepth}
            {repeat string='<ul class="dropdown-menu animated fadeInLeft">' 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}
    
        {$classes=''}
        {if $node->parent == true or $node->current == true}
            {$classes='active'}
            {if $node->parent== true}
                {$classes=$classes|cat:' parent'}
            {/if}
        {/if}
    
        {if $node->type == 'sectionheader'}
            {if $node->haschildren == true}
                <li class="dropdown {$classes}"><a class="dropdown-toggle {$classes}" data-toggle="dropdown">{$node->extra1}<span class="sidebar-text">{$node->menutext}</span></a>
            {else}
                <li>{$node->extra1} <span class="sidebar-text">{$node->menutext}</span></li>
            {/if}
        {elseif $node->type == 'separator'}
            <li class="divider">
        {elseif $node->haschildren == true}
            <li class="dropdown {$classes}"><a class="dropdown-toggle {$classes}" data-toggle="dropdown" {if $node->target}target="{$node->target}" {/if} href="{$node->url}">{$node->extra1}<span class="sidebar-text">{$node->menutext}</span></a>
        {elseif $node->parent == true || $node->current == true}
            <li><a href="{$node->url}" class="{$classes}">{$node->extra1} {$node->menutext}</a> 
        {else}
            <li class="{$classes}"><a class="{$classes}" {if $node->target}target="{$node->target}" {/if} href="{$node->url}">{$node->extra1}<span  class="sidebar-text">{$node->menutext}</span></a>
        {/if}
    {/foreach}
    {repeat string='</li></ul>' times=$node->depth-1}
    </li>
    </ul>
{/if}

Zusätzliches Seitenattribut 1 der jeweiligen Inhaltsseite kannst du dann den Code für die Symbole angeben... z.B. für die Font-Awesome: <i class="sidebar-icon fa fa-money"></i>. Das CSS kannst du dir ja aus dem Quelltext des Templates kopieren und nach bedarf anpassen.

]]> Tue, 27 May 2014 19:03:15 +0000 http://www.cmsmadesimple.de/forum/viewtopic.php?pid=31146#p31146 <![CDATA[[GELÖST] Bootstrap und Menu-Manager]]> http://www.cmsmadesimple.de/forum/viewtopic.php?pid=31122#p31122 Moin zusammen,

ich bin lange um das Thema responsives Webdesign herumgeschlichen und kürzlich endlich das erste Projekt damit angegangen. Man kann das ganze ja per Hand coden oder eben auf die sogenannten Frameworks setzen. Ich habe mich für letztere Variante und für Bootstrap entschieden.

Mein Vorgehen: Ich klicke mir auf der Seite Layoutit meine Grundstruktur zusammen wie ich sie mir vorher überlegt habe, lade den Code herunter: index.html, fonts, js, less und css (bootstrap-theme.css, bootstrap.css, und eine leere styles.css in in die meine eigenen Formatierungen kommen). Ersetze in bootstrap.css:

[== CSS ==]
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

durch

[== CSS ==]
@font-face {   font-family: 'Glyphicons Halflings';   src: url([[root_url]]/fonts/glyphicons-halflings-regular.eot);   src: url([[root_url]]/fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'), url([[root_url]]/fonts/glyphicons-halflings-regular.woff) format('woff'), url([[root_url]]/fonts/glyphicons-halflings-regular.ttf) format('truetype'), url([[root_url]]/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg'); }

dann klappt`s auch mit den Glyphicons.

Ansonsten nur die index.html anpassen {menu}, {content} etc. und schon läuft es.
Geht relativ schnell und die seite ist responsiv. Klappt wunderbar.

Ich habe leider noch folgendes Problem: Mit dem Menue:
Es gibt auf der Seite Bootsnippets schicke, responsive Menues die ich gerne einfügen und benutzen würde. Nur weiß ich nicht wie ich´s dem Menuemanager beibringen soll. Jemand einen Tipp für einen Programmier/Smarty-Laien?
das HTML sieht so aus:

[== HTML ==]
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">NavBar</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="https://github.com/fontenele/bootstrap-navbar-dropdowns" target="_blank">GitHub Project</a></li>
            </ul>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
                    <ul class="dropdown-menu multi-level">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                        <li class="dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li class="dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                                    <ul class="dropdown-menu">
                                        <li class="dropdown-submenu">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">One more separated link</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 2 <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                        <li class="dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li class="divider"></li>
                                <li class="dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                                    <ul class="dropdown-menu">
                                        <li class="dropdown-submenu">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">One more separated link</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>
]]> Tue, 27 May 2014 10:03:45 +0000 http://www.cmsmadesimple.de/forum/viewtopic.php?pid=31122#p31122