Contao Bootstrap Theme Tutorial

[tinoo]

Wulf, kann schon sein... Aber wo? Vielleicht liegt es auch daran, dass ich mehrere Seitenebenen habe, sprich die
Seitenstruktur tiefer verschachtelt ist als im Beispiel... Das funktioniert in der Navigation auch noch nicht sauber.

[wulf]

stimmt, für untermenus ist die navigation nicht geeignet. ich habe das folgendermaßen gelöst:
das navigationstemplate sieht bei mir so aus

<ul class="<?php echo $this->level; if($this->level == level_1) echo ' nav navbar-nav'; else if($this->level == level_2) echo ' dropdown-menu'; ?>">  
<?php foreach ($this->items as $item): ?>  
<?php if ($item['isActive']): ?>  
  <li class="<?php echo $item['class']; if(strpos($item['class'], 'submenu') !== false) echo ' dropdown'; ?>">  
    <?php if(strpos($item['class'], 'submenu') !== false): ?>  
        <a class="dropdown-toggle <?php echo $item['class']; ?>" data-toggle="dropdown">  
          <?php echo $item['link']; ?>  
          <b class="caret"></b>  
    <?php else: ?>  
        <a class="<?php echo $item['class']; ?>">  
          <?php echo $item['link']; ?>  
        </a>  
    <?php endif; ?>  
            
    </a>  
    <?php echo $item['subitems']; ?>  
  </li>  
<?php else: ?>  
<li<?php if ($item['class']): ?>   
  class="<?php echo $item['class'];   
    if(strpos($item['class'], 'submenu') !== false) echo ' dropdown'; ?>"  
  <?php endif; ?>>  
    
  <a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> 
    class="<?php echo $item['class']; if(strpos($item['class'], 'submenu') !== false) echo ' dropdown-toggle'; ?>"   
    <?php if(strpos($item['class'], 'submenu') !== false) echo 'data-toggle="dropdown"'; ?>  
    <?php endif; ?><?php if ($item['accesskey'] != ''): ?>  
    accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?>  
    <?php if(strpos($item['class'], 'submenu') !== false): ?>  
  <b class="caret"></b>  
    <?php endif; ?>  
  </a><?php echo $item['subitems']; ?>  
  </li>  
<?php endif; ?>  
<?php endforeach; ?>  
</ul>

anschliessend habe ich ein eigenes html-modul erstellt und folgendes eingetragen:

<div class="navbar navbar-inverse">
  <div class="container">

    <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <!-- Be sure to leave the brand out there if you want it shown -->
    <a class="navbar-brand" href="#">Title</a>

    <!-- Place everything within .navbar-collapse to hide it until above 768px -->
    <div class="nav-collapse collapse navbar-responsive-collapse ">
      {{insert_module::8}} // hier wird das navigationstemplate per insert eingefügt
    </div><!-- /.nav-collapse -->
  </div><!-- /.container -->
</div><!-- /.navbar -->

zu guter letzt wird das html-modul im seitenlayout eingebunden und schon hat bei mir das dropdown menu funktioniert. geht bestimmt auch eleganter, aber meine versuche, den code vom eigenen modul mit im navigationstemplate unterzubringen, sind immer gescheiter.
Screenshot_2.png
Screenshot_3.png

[Slind]

Gibt es einen Vorteil dafür das man Bootstrap.min.css oder Bootstrap.css von der externen Adresse (CDN) einbindet ? Sollte man hierzu nicht einen Fallback hinzufügen ??

[tinoo]

Wulf, Danke für den Code. Ist im Prinzip das, was ich suche. Wundere mich aber auch, warum es nicht funktioniert wenn man alles ins Template packt... ABER auch hier: keine Reaktion bei den Dropdowns oder wenn das Menü colapsed wird... Die Javascript-Datei wird gemäss Seitenquelltext korrekt eingebunden... Muss man noch irgendwas Mootools oder jQuery aktivieren?

[wulf]

ah, alles klar, jquery muß geladen sein, die ganzen komponenten von bootstrap (dropdown, collapsed usw) basieren darauf.

[tinoo]

So ist es! JQuery im Seitenlayout aktiviert - Dropdown funktioniert.

@Kayyy, solltest du vielleicht in der Anleitung noch ergänzen...

[tinoo]

Wulf, darf ich kurz fragen: Ist es möglich, dass Bootstrap die Navigations-Stylings auf maximal 2 Level beschränkt? Jedenfalls
sehe ich auf der getbootstrap-Seite keine tiefer verschachtelten Navigationen... Das müsste dann Template auch irgendwie
abgefangen werden, weil sonst eine "unsinnige" Navi-Darstellung resultiert...

[wulf]

multi-level navigation wäre in bootstrap auch möglich, siehe http://jsfiddle.net/2Smgv/934/, aber dafür müsste das template wieder verändert werden. evtl. findet sich ja einer, der das schon gemacht hat, vielleicht hat kayyy ja auch schon eine lösung, er wollte das tutorial ja noch weiter ausbauen.

[tinoo]

... vermutlich ist es bald einfacher, wenn ich die Seitenstruktur direkt in einem
HTML-Modul abbilde, statt dies über Templates zu lösen... Was vermutlich ganz
einfach geht: Sitemap-Modul erstellen, anzeigen lassen und Quellcode kopieren,
dann noch die Bootstrap-spezifischen Klassen eintragen...

Nachtrag: Mit dem Schönheitsfehler dann, dass ich keine .active-Klasse habe..

[wulf]

ich habe nochmal etwas mit dem navigations-template experimentiert und eine multi-level navigation zusammengeschustert (anders kann man es wirklich nicht bezeichnen).
allerdings müsste dafür auch nochmal das fe_template angepasst werden, da meine version nicht mit bootstrap 3RC1 läuft (in dieser version fehlt anscheinend noch .dropdown-submenu).

im fe_page template

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
.
.
.
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>

durch

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
.
.
.
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

ersetzen und folgendes nav_template (auf eigene Gefahr) nutzen

<ul class="<?php echo $this->level; if($this->level == level_1) echo ' nav navbar-nav'; else echo ' dropdown-menu'; ?>"> 

<?php foreach ($this->items as $item): ?> 
<?php if ($item['isActive']): ?> 
  <li class="<?php echo $item['class']; if(strpos($item['class'], 'submenu') !== false) echo ' dropdown'; 
             if((strpos($item['class'], 'submenu') !== false) && ($this->level !== level_1)) echo ' dropdown-submenu';?>
            "> 
        <?php if(strpos($item['class'], 'submenu') !== false): ?> 
          <a class="dropdown-toggle <?php echo $item['class']; ?>" data-toggle="dropdown"> 
            <?php echo $item['link']; ?> 
            <b class="caret"></b> 
        <?php else: ?> 
          
            <a class="<?php echo $item['class']; ?>"> 
               <?php echo $item['link']; ?> 
            </a> 
          
        <?php endif; ?> 
           
        </a> 
    <?php echo $item['subitems']; ?> 
  </li> 
  
<?php else: ?> 
   <li<?php if ($item['class']): ?>  
       class="<?php echo $item['class'];  
       if(strpos($item['class'], 'submenu') !== false) echo ' dropdown'; 
       if((strpos($item['class'], 'submenu') !== false) && ($this->level !== level_1)) echo ' dropdown-submenu';?>" 
  <?php endif; ?> > 
   
  <a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> 
         class="<?php echo $item['class']; if(strpos($item['class'], 'submenu') !== false) echo ' dropdown-toggle'; ?>"  
    <?php if(strpos($item['class'], 'submenu') !== false) echo 'data-toggle="dropdown"'; ?> 
    <?php endif; ?><?php if ($item['accesskey'] != ''): ?> 
    accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?> 
    <?php if((strpos($item['class'], 'submenu') !== false)&&($this->level == level_1)): ?> 
     <b class="caret"></b>
    <?php endif; ?> 
       
       </a><?php echo $item['subitems']; ?> 
       
  </li> 
<?php endif; ?> 
<?php endforeach; ?> 
</ul>

[tinoo]

Danke Wulf! Ich glaub die schrauben eh noch mächtig am Code... Seit kurzem funktioniert das
Dropdown-Menü nicht mehr, hab ich hier bei meiner lokalen Installation festgestellt. Heute vor
dem Mittag tat's noch wunderbar... ???

[kayyy]

Ich war bis heute im Urlaub, daher auch keine Antwort von mir.

Bzgl. Des mobilen Menüs, hier muss jquery zwingend eingebunde werden.

Das Menü ist noch nicht für mehrere Ebenen / Dropdown geeignet. Das Tutorial schreibe ich dafür so schnell es geht noch einmal um.

Gesendet von meinem GT-I9300 mit Tapatalk 2

[tinoo]

Hi kayyy

Hoffe du hattest erholsame Ferien

...Das Menü ist noch nicht für mehrere Ebenen / Dropdown geeignet. Das Tutorial schreibe ich dafür so schnell es geht noch einmal um.

Die Templates / Anleitung von wulf etwas weiter oben funktioniert soweit ganz gut, auch wenn es etwas umständlich ist zwei Module und ein Template dafür zu erstellen... Ich würde da aber noch reinnehmen, dass man im Modul den Startlevel auf 0, den Stoplevel auf 2 setzt und Hardlimit aktiviert. Dann funktioniert die Dropdown-Navi zumindest für zwei Ebenen tiptop mit der neusten Version von Bootstrap 3 RC1.

Ideal wärs natürlich, wenn mit der "finalen" Version dann mal 3 Level abgebildet werden können. Mehr, denke ich, würde unübersichtlich.

[djo]

Hallo zusammen,


mit dem aktuellen RC2 verhält es sich so, das nur noch Wulfs Template-Version mit dem Submenü funktioniert, aber die ursprüngliche nicht mehr. :-)
Ist das bei euch auch der Fall?

Liebe Grüße,
Daniel

[tinoo]

Jep, das Menü mit den Dropdowns funktioniert noch... Allerdings frage ich mich, warum das Menü jetzt plötzlich eine Höhe von 100px einnimmt. Mit RC1 waren es noch 50px...

Nachtrag: Komischkomisch... Die Navigation selbst ist 50px hoch, aber die navbar nimmt bei mir eine Höhe von 100px ein, obwohl das nirgends so definiert ist... Sobald ich von "Grossbild" auf kleinen Bildschirm wechsle (also z.B. das Browserfenster verkleiner) und das Toggle-Menü aktiv wird, habe ich wieder eine 50px hohe Navbar... Nur ist dann dumm, dass der Rest vom Content bei einem Margin von 100px von oben einen Spalt von 50px bildet... :-(

Nachtrag2: Nach einer Cache-Leerung ist die Navbar zwar wieder 50px hoch, aber die Menüs werden nicht mehr angezeigt. Allgemein haben die Boxen (Panel, Wells usw) keine Innenabstände mehr... Eine echte Verschlimmbesserung...

[kayyy]

Ich werde es mir morgen einmal anschauen

Gesendet von meinem GT-I9300 mit Tapatalk 2

[wulf]

hab auch mal rc2 eingebunden und getestet. damit eine multi-level navigation funktioniert, muss man folgende css anweisungen aus der 2.3 einbinden. ich hab die anweisungen einfach in die theme.css von dem tutorial kopiert, danach funktionierten auch wieder das multi-level menu.

body { padding-top:80px; }
.center { text-align:center; }

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
  color: #ffffff;
  text-decoration: none;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
     -moz-border-radius: 0 6px 6px 6px;
          border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

.dropup .dropdown-submenu > .dropdown-menu {
  top: auto;
  bottom: 0;
  margin-top: 0;
  margin-bottom: -2px;
  -webkit-border-radius: 5px 5px 5px 0;
     -moz-border-radius: 5px 5px 5px 0;
          border-radius: 5px 5px 5px 0;
}

.dropdown-submenu > a:after {
  display: block;
  float: right;
  width: 0;
  height: 0;
  margin-top: 5px;
  margin-right: -10px;
  border-color: transparent;
  border-left-color: #cccccc;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  content: " ";
}

.dropdown-submenu:hover > a:after {
  border-left-color: #ffffff;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
     -moz-border-radius: 6px 0 6px 6px;
          border-radius: 6px 0 6px 6px;
}

edith: script kurz angepasst, einige einträge waren überflüssig

[djo]

Sorry,

ich habe mich verlesen.
Irgendwas stimmte mit den Klassen nicht ganz.

Liebe Grüße

[tinoo]

Ein Mann der Taten

Hab grad vorhin das da gefunden:
http://getbootstrap.com/getting-star...ration-dropped

Gemäss dieser Liste gibt es in Bootstrap3.0 gar keine dropdown-submenu's mehr... Dh. es
können nur noch max. zwei Seiten-Ebenen in der Navi abgebildet werden...

[djo]

Ein Mann der Taten

Wie darf ich das interpretieren?

[tinoo]

Wie darf ich das interpretieren?

Positiv, natürlich!

[djo]

Sind mehr als zwei Ebenen denn notwendig? Die responsiven Seiten sollen ja ein Minimum an verschachtelter Navigation unterstützen.
Wahrscheinlich ist es deshalb rausgeflogen.

Ich habe noch mal den Code von Kayyy etwas verändert (nur 1 Ebene), so wie es mit RC2 bei mir ganz gut funktioniert.

nav_navbar-fixed-top.html5

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
  <div class="navbar-header">
 
    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-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="./">Deine Seite</a>
  </div>
    <nav class="collapse navbar-collapse navbar-ex1-collapse">
 
      <ul class="nav navbar-nav <?php echo $this->level; ?>">
      <?php foreach ($this->items as $item): ?>
        <?php if ($item['isActive']): ?>
          <li class="<?php echo $item['class']; ?>"><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a>
            <?php echo $item['subitems']; ?></li>
        <?php else: ?>
          <li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
        <?php endif; ?>
        <?php endforeach; ?>
      </ul>
    </nav>
</div>
</header>

[tinoo]

Hi Kayyy

Ich wusste nicht, dass die Extension so schnell freigeschaltet wird
Ich habe das Tutorial nun schonmal um das Spaltenset erweitert.

An anderer Stelle im Forum bin ich auf diese Erweiterung gestossen:
https://contao.org/de/extension-list...customize.html

Vielleicht lässt sich deine subcolumns-Erweiterung mit der anderen kombinieren oder
ergänzen? Einfach so als Idee, damit die "Kräfte" gebündelt werden können...

[webstar]

Ich setze gerade Bootstrap bei mehreren Projekten intensiv ein und habe daher angefangen Anpassungen in einer Erweiterung zusammenzufassen. Daraus ist auch die hier bereits genannte Erweiterung subcolumns_bootstrap_customize entstanden.

Momentan habe ich folgendes auf Bootstrap 3 Basis umgesetzt:

Navigation

• Modul für Navbar
• angepasste Navigationstemplates
• Dropdown-Navigation

Formulare

• angepasste Formulartemplates
• tableless: Basic Form
• table: Horizontal Form
• Iconauswahl für Schaltflächen + Textfelder (Input Groups)

Inhaltselemente

• Schaltfläche für Bootstrap Buttons inkl. Icon

Wenn jemand in die gleiche Richtung arbeitet, kann man daraus gern eine allgemeine Erweiterung machen. Zur Zeit füge ich bei Bedarf neue Komponenten hinzu, die Bootstrap bietet.

[tinoo]

Hi Webstar
Hast du schon Projekte online, die man sich anschauen kann? Und nachher natürlich doof fragen darf?

[webstar]

Hi Webstar
Hast du schon Projekte online, die man sich anschauen kann? Und nachher natürlich doof fragen darf?

Das eine Projekt geht Anfang September online, die anderen beiden brauchen noch etwas. Poste dann aber gern hier die Links.

[tinoo]

Ok, danke für die Info.

Mich interessiert unter anderem:
- Arbeitest du mit den Template-Vorlagen von Kayyy's Tutorial oder hast du für die fe_page etwas eigenes auf die Beine gestellt?
- wie hast du das "Problem" mit dem Navigationsmodul gelöst (eigener Lösungsansatz oder auch wieder das/die Templates aus dem Tutorial hier)?

Falls du mit eigenen Templates arbeitest wäre es natürlich interessant, wenn du uns deine Lösungen zeigen könntest...

[kayyy]

Am Wochenende werde ich endlich Zeit finden. Dann kommt auch der Navigations Fix, sowie ein weiterer Artikel, wie die neue Bootstrap Version funktioniert mit den neuen Columns Klassen usw.

Gesendet von meinem GT-I9300 mit Tapatalk 2

[webstar]

Ok, danke für die Info.

Mich interessiert unter anderem:
- Arbeitest du mit den Template-Vorlagen von Kayyy's Tutorial oder hast du für die fe_page etwas eigenes auf die Beine gestellt?
- wie hast du das "Problem" mit dem Navigationsmodul gelöst (eigener Lösungsansatz oder auch wieder das/die Templates aus dem Tutorial hier)?

Falls du mit eigenen Templates arbeitest wäre es natürlich interessant, wenn du uns deine Lösungen zeigen könntest...

Ich hatte meine bereits vor dem Tutorial mit Bootstrap gearbeitet, daher habe ich mich nicht an den hier präsentierten Lösungsansätzen orientiert. Meine Anpassungen der fe_page beschränken sich oft darin, dass ich die Container Klasse einem oder mehrere Elemente zuweise. Meistens dem #wrapper div. Sonst behalte ich die Contao Struktur.

Für die Navigation habe ich zwei verschiedene Ansätze entwickelt, die der hier präsentierten Lösung ähnlich sind. Bei beidem werden Elemente ab dem 2. Level als Dropdown-Menü eingeblendet. Bei der einen Template Anpassung wird der ursprüngliche Menü Punkt als Toggler. Hat aber den Nachteil, dass die Eltern-Seite nicht anklickbar ist. Bei dem Projekt egal, da ich dort die Erweiterung m17PageFolders einsetze, falls es eine Unterebene gibt.

Bei der anderen Lösung erzeuge ich einen 2. Link für den Toggler.

Für die ganze Navbar habe ich ein Modul entwickelt, indem ich beliebig viele andere Module oder Templates einbinden kann. Daher muss ich die mod_navigation nicht anpassen. Die Klassen, damit es responsive ist, können im Modul definiert werden. Außerdem bin ich dann völlig flexibel, wie ich den Brand-Teil gestaltet. Standardmäßig steht ein Template mit verlinkten Websitetitel zur Verfügung. Ich kann aber einfach auch ein eigenes HTML-Modul erstellen. Ich hänge mal ein Screenshot an. Das basiert gerade noch auf der Bootstrap 3 RC1, wo es .navbar-header noch nicht gab, wird daher vermutlich noch umgebaut.

Achso, eine Seite mit Bootstrap von mir ist online. Ist allerdings eine private, wo der Umfang der Anpassungen nicht so groß war: www.seinschein.de

[tinoo]

Für die ganze Navbar habe ich ein Modul entwickelt, indem ich beliebig viele andere Module oder Templates einbinden kann. Daher muss ich die mod_navigation nicht anpassen. Die Klassen, damit es responsive ist, können im Modul definiert werden. Außerdem bin ich dann völlig flexibel, wie ich den Brand-Teil gestaltet. Standardmäßig steht ein Template mit verlinkten Websitetitel zur Verfügung. Ich kann aber einfach auch ein eigenes HTML-Modul erstellen. Ich hänge mal ein Screenshot an. Das basiert gerade noch auf der Bootstrap 3 RC1, wo es .navbar-header noch nicht gab, wird daher vermutlich noch umgebaut.

Achso, eine Seite mit Bootstrap von mir ist online. Ist allerdings eine private, wo der Umfang der Anpassungen nicht so groß war: www.seinschein.de

Schaut gut aus! Allerdings funktioniert auf meinem iPad / iPhone das Togglermenü nicht. Wird hier allenfalls jQuery nicht (richtig) geladen?

Das Modul für die Navbar tönt sehr interessant. Planst du, das Modul als Erweiterung freizugeben oder behälst du es in deiner Schatzkiste?

[Doro]

Ich schreibe gerade ein Tutorial über Themes mit Bootstrap in Contao. Frage an euch: Ist es für euch bis hierhin so verständlich ?

http://www.pixelianer.com/tutorials-...bootstrap.html

hallo Kavy, aus irgendeinem Grund geht dein link zum Tutorial nicht mehr

[kayyy]

hallo Kavy, aus irgendeinem Grund geht dein link zum Tutorial nicht mehr

Also bei mir geht der Link noch.
Da ich aber im Moment auf einen neuen Server umziehe, muss ich auch noch das Tutorial mit übernehmen, da es eine neue Site ist.

Allerdings funktioniert der Link derzeit bei mir noch.

Alternativ derweil http://rs206847.rs.hosteurope.de/tut...bootstrap.html nutzen

[Doro]

ulkig ich sehe ein "Page not found"
aber vielen herzlichen Dank dein alternativer Link funzt einwandfrei
dann kann ich mich mal damit beschäftigen.
Danke Dir
Doro

[webstar]

Schaut gut aus! Allerdings funktioniert auf meinem iPad / iPhone das Togglermenü nicht. Wird hier allenfalls jQuery nicht (richtig) geladen?

Danke für den Hinweis. Tatsächlich wurde eine Javascript-Datei nicht geladen.

Das Modul für die Navbar tönt sehr interessant. Planst du, das Modul als Erweiterung freizugeben oder behälst du es in deiner Schatzkiste?

Ich habe inzwischen eine Sammlung an Modulen, Inhaltselementen, Templates und Anpassungen für Bootstrap. Diese plane ich der Community zur Verfügung zur Verfügung zu stellen, sobald es fertig ist. Denk ich ca. 2 Wochen kann man damit rechnen.

[tinoo]

So wie es scheint, ist Bootstrap in der finalen Version 3.0.0 erschienen... Jedenfalls wenn man den neusten Links glaubt:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

[tpk]

Hi,

folgendes Dingens, wenn ich mit einem Dropdown (Bootstrap 3) in Cotao 2.11 hantiere.

Anfang:

<li class="submenu first dropdown">

Nach Öffnen des Dropdowns:

<li class="submenu first dropdown open">

Bootstrap schreibt per jquery das "open" rein, und nu kommts: Wenn man z.B. auf einen anderen Menüpunkt klickt, schließt nicht nur die Ebene 2, sonder auch der Link in Ebene 1 macht sich von hinnen:

<li class="submenu first dropdown" style="display: none;">

Das "display: none" hat allerdings nix mit bootstrap zu tun, vielmehr steuert das Mootols von Contao bei.

Wenn man im Backend alle MooTools-Templates weglickt, hilft das allerdings nicht, erst wenn man <?php echo $this->mooScripts; ?> in fe_page auskommentiert, herrscht Ruhe.

Geht das irgendwie weniger brutal?

[tpk]

PS: Das Bootstrap-Tutorial ist nicht zu erreichen

[xkoy]

Leider down

[kayyy]

Leider habe ich meinen Hoster gewechselt und wahrscheinlich kein Backup der Seite gemacht, da ich das komplette Layout geändert hab. Aber ich schaue gleich nochmal nach.

Gesendet von meinem GT-I9300 mit Tapatalk 2

[tinoo]

Mal noch eine "generelle" Frage: Gibt es einen Konsens wo das Togglermenü sich befinden soll? Oben ist klar, aber z.B. links- oder rechtsbündig? Auf meinem iPhone sehe ich in den meisten Apps die drei Balkon links oben, auf mobilen Websiten hingegen meist rechts... Spielt das überhaupt eine Rolle resp. haben sich die User daran gewöhnt das Togglermenü entweder oder zu sochen?