Contao Bootstrap Theme Tutorial

[kayyy]

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

https://community.contao.org/de/show...ontao&p=286796

[xchs]

Der Template-Ordner des Themes liegt nicht im Files-Verzeichnis, sondern unterhalb des Contao Templates-Ordner:

[TL_ROOT]/templates/bootstrap

Für die Themes-Struktur im Files-Verzeichnis soll gemäß Anleitung ein Ordner "Bootstrap" erstellt werden; auf den Screenshots sieht man aber einen Themes-Ordner "bootstrap". Hier würde ich also darauf achten, dass Groß- und Kleinschreibung der Ordnernamen übereinstimmen.

[kayyy]

Stimmt danke für die zwei Fehler. Ansonsten ist es alles nachvollziehbar ?

[xchs]

Also für mich ist es soweit nachvollziehbar. Für die anderen "1.596.843 Personen", denen das gefällt wahrscheinlich auch.

[kayyy]

Super, dann kann ich ja bedenkenlos weiter schreiben

[gorti]

Jupp, soweit verständlich!
Btw hier gibt's noch ein anderes Team dass sich mit diesem Thema beschäftigt.

[Lego2013]

Frage an euch: Ist es für euch bis hierhin so verständlich ?

Super, ich hab's mir durchgelesen und bin begeistert. Dranbleiben bitte...

[wiese]

Die Seite lädt aktuell bei mir gar nicht... Was ist da los?

//edit: Gruß aus Düsseldorf

[kayyy]

Die Seite sollte eigentlich ohne Probleme laden.

Die Webseite an sich ist allerdings selber noch im Aufbau.
Zu den Artikeln und Tutorials werden darüber hinaus auch noch Tutorial Videos kommen

[lucina]

Auch wenn ich nachvollziehen kann dass es 'Dein' Tutorial auf Deiner Seite liegen soll: Denkst Du auch darüber nach, dießeAnleitung ins Wiki zu stellen?

[kayyy]

Auch wenn ich nachvollziehen kann dass es 'Dein' Tutorial auf Deiner Seite liegen soll: Denkst Du auch darüber nach, dießeAnleitung ins Wiki zu stellen?

Darüber nachgedacht habe ich bisher noch nicht, aber man kann es natürlich durchaus in Erwägung ziehen

[tinoo]

Hallo kayyy

Ist die Anleitung schon fertig? Ich hab mal alles durchgespielt: Einziger Punk, der mir nicht ganz klar ist:

Template Struktur
Damit Contao unsere neu erstellten Templates erkennt, benötigen wir auch hierfür eine Ordner Struktur. Dazu legen wir einfach einen Ordner mit dem Namen "bootstrap" in /templates/ an. Die Struktur sieht nun folgendermaßen aus.

files
templates
bootstrap

Das war es auch schon. Nun haben wir auch unsere Template Struktur.

In meiner Contao3.1.1-Installation gibt es einen templates-Ordner im Root-Verzeichnis. Ich habe darin den Unterordner bootstrap erstellt und fe_page.html5 darin gespeichert.

Wenn man der Auflistung oben folgt, könnte man aber meinen dass man im Ornder files einen Unterordner templates und darin nochmals einen Unterordner bootstrap erstellen soll.

Was stimmt nun?

[KlausGrenoble]

https://community.contao.org/de/show...l=1#post277344

[kayyy]

Hallo kayyy

Ist die Anleitung schon fertig? Ich hab mal alles durchgespielt: Einziger Punk, der mir nicht ganz klar ist:



In meiner Contao3.1.1-Installation gibt es einen templates-Ordner im Root-Verzeichnis. Ich habe darin den Unterordner bootstrap erstellt und fe_page.html5 darin gespeichert.

Wenn man der Auflistung oben folgt, könnte man aber meinen dass man im Ornder files einen Unterordner templates und darin nochmals einen Unterordner bootstrap erstellen soll.

Was stimmt nun?

Das Tutorial ist noch nicht komplett fertig

Zu deiner Frage:
Der Ordner "bootstrap" innerhalb des /files/ Verzeichnisses ist zuständig für die CSS und Image Dateien.
Der Ordner "bootstrap" im /templates/ Verzeichnis ist für alle Templates ( wie bspw. fe_page ) vorgesehen.

Die Ordner Struktur wäre dann:

files/bootstrap
files/bootstrap/css
files/bootstrap/img
templates/bootstrap

PS: Habe den Artikel nochmal aktualisiert, er ist aber wie gesagt auch noch nicht fertig

[tinoo]

Aha, ich bin davon ausgegangen, dass die Änderung schon vorgenommen wurde... Merci!

Cool wäre natürlich, wenn die Anleitung noch einen Schritt weitergeht und kurz aufzeigt, wie man
Bootstrap nutzt, z.B. zur Gestaltung der Navigation, oder von Inhalten...

[kayyy]

Aha, ich bin davon ausgegangen, dass die Änderung schon vorgenommen wurde... Merci!

Cool wäre natürlich, wenn die Anleitung noch einen Schritt weitergeht und kurz aufzeigt, wie man
Bootstrap nutzt, z.B. zur Gestaltung der Navigation, oder von Inhalten...

Hatte ich vergessen

Wie gesagt, dass Tutorial ist noch nicht fertig. Da geht es noch viel weiter, eben genau wie du sagst mit der Navigation,
aufbereitung von Inhalten mittels der Spaltenset Extension etc.

[wulf]

bleibt das tutorial bei bootstrap 2.3 oder wird es (noch) auf bootstrap 3 umgeschrieben ?

[tinoo]

Wulf, ich habe einfach

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

ins template fe_page.html5 eingesetzt...

[tinoo]

Hallo kayyy

Vielleicht greife ich etwas vorweg, das später in deiner Anleitung erklärt wird... Aber müsste in Zeile 33
vom kompletten fe_page Template der Ausdruck "<?php echo $this->head; ?>" korrekterweise so
lauten: "<?php echo $this->header; ?>" ?

[wulf]

Wulf, ich habe einfach

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

ins template fe_page.html5 eingesetzt...

hab ich natürlich auch gemacht, aber dann kam immer die fehlermeldung "jquery not defined", obwohl es eingebunden war. Erst nachdem ich jquery im template eingebunden habe, hat es funktioniert. irgendwie schon etwas komisch.

[tinoo]

Hoi

Erst nachdem ich jquery im template eingebunden habe, hat es funktioniert.

Hast du das fe_page-Template gemäss Anleitung von kayyy erstellt? Weil ich hab keine Fehlermeldung
bekommen und musste nichts extra einbinden...

[wulf]

fehler gefunden, hatte für bootstrap 3 folgenden code genommen:

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

richtig war natürlich dein code.

[kayyy]

bleibt das tutorial bei bootstrap 2.3 oder wird es (noch) auf bootstrap 3 umgeschrieben ?

Ich werde dieses Tutorial auf 3 umschreiben, da es aktuell noch nicht sonderlich tief in den Code geht.
Da die 3er Version schon stark von der 2er abweicht, wäre das denke ich ganz sinvoll

@tinoo: Ja das hast du recht, mein Fehler

PS: Ich habe die einzigen paar Zeilen Code schonmal auf Bootstrap 3 umgeschrieben.

[wiese]

Was mir aufgefallen ist, eigentlich müsstest du jedes Template soweit an bootstrap anpassen (u.a. nav …) oder das CSS von Bootstrap an Contao anpassen

[kayyy]

Was mir aufgefallen ist, eigentlich müsstest du jedes Template soweit an bootstrap anpassen (u.a. nav …) oder das CSS von Bootstrap an Contao anpassen

Was die nav angeht, ja das Template muss man an Contao anpassen. Ist ja aber schnell gemacht
Sehr viel mehr muss man allerdings nicht anpassen.

Für die Community hat es den Vorteil, dass am Schluss ein fertiges Bootstrap Theme ensteht

[kayyy]

Was mir aufgefallen ist, eigentlich müsstest du jedes Template soweit an bootstrap anpassen (u.a. nav …) oder das CSS von Bootstrap an Contao anpassen

Habe das Tutorial nun schonmal um die Navigation erweitert

[tinoo]

Hi Kayyy

Ich verfolge gespannt die ergänzte Anleitung und hätte da einen kleinen Einwand: Das neue Navigationstemplate funktioniert super, solang die Seitenstruktur flach ist, wie in deinem Beispiel. Sobald die Struktur aber Level_2 enthält, funzt das Template nicht mehr richtig und man muss mittels Start- und Stoplevel die Anzeigen begrenzen. Universeller einsetzbar wäre das Template jedoch, wen dort wo Level_2 Strukturen vorhanden sind, gleich Dropdowns eingesetzt würden. Ich weiss dass das die Sache verkompliziert - aber ich denke eine solche Navigation würde eher der Realität entsprechen... Ansonsten: Go on! Die Anleitung ist bislang ausgezeichnet!

[kayyy]

Hi Kayyy

Ich verfolge gespannt die ergänzte Anleitung und hätte da einen kleinen Einwand: Das neue Navigationstemplate funktioniert super, solang die Seitenstruktur flach ist, wie in deinem Beispiel. Sobald die Struktur aber Level_2 enthält, funzt das Template nicht mehr richtig und man muss mittels Start- und Stoplevel die Anzeigen begrenzen. Universeller einsetzbar wäre das Template jedoch, wen dort wo Level_2 Strukturen vorhanden sind, gleich Dropdowns eingesetzt würden. Ich weiss dass das die Sache verkompliziert - aber ich denke eine solche Navigation würde eher der Realität entsprechen... Ansonsten: Go on! Die Anleitung ist bislang ausgezeichnet!

Stimmt da hast du recht. Werde das Navigations Template dann noch dem Dropdown Menü anpasse, dass Dropdown Menü habe ich ganz vergessen
Dann muss ich das ganze nochmal anpassen

[tinoo]

...Werde das Navigations Template dann noch dem Dropdown Menü anpasse, dass Dropdown Menü habe ich ganz vergessen

Zwischenzeitlich kann man im Modul "Navigation - Haupt" unter Starlevel = 0 und Stoplevel = 1 eintragen... Dann funktioniert die Navi schon mal "einlevelig"...

[Spooky]

Wie siehst du eigentlich dann vor das Grid System zu handhaben? Also soll es dann möglich sein Artikeln einfach die Klasse "span6" (etc.) zuweisen zu können, für die Positionierung der Inhalte?

Weil das würde ja auch bedeuten, dass du auch irgendwo ein Wrapper Element mit class="row" oder "row-fluid" benötigst etc.

[tinoo]

Spooky, du kannst schon jetzt ein Content-Element "HTML" über dem ersten Text einfügen, welches ein einfaches
<div class="row"> enthält. Danach kannst du z.B. zwei Text-Elemente erstellen und denen unter Experten-Einstellungen
die Klasse "col-12 col-sm-8 col-lg-8" respektive "col-6 col-sm-4 col-lg-4" mitgeben. Zum Schluss des Artikels machst
dann nochmals ein HTML-Element mit dem abschliessenden </div>

So hast du bereits zwei Textelemente zweispaltig dargestellt. Wenn ich kayyy aber richtig verstanden habe, nutzt
er die Erweiterung Spaltenset und "biegt" sie entsprechend um. Das wäre natürlich wesentlich einfacher für den
Endnutzer, als sich da die kryptischen Klassen zu merken...

[Spooky]

Spooky, du kannst schon jetzt ein Content-Element "HTML" über dem ersten Text einfügen, welches ein einfaches
<div class="row"> enthält. Danach kannst du z.B. zwei Text-Elemente erstellen und denen unter Experten-Einstellungen
die Klasse "col-12 col-sm-8 col-lg-8" respektive "col-6 col-sm-4 col-lg-4" mitgeben. Zum Schluss des Artikels machst
dann nochmals ein HTML-Element mit dem abschliessenden </div>

So hast du bereits zwei Textelemente zweispaltig dargestellt. Wenn ich kayyy aber richtig verstanden habe, nutzt
er die Erweiterung Spaltenset und "biegt" sie entsprechend um. Das wäre natürlich wesentlich einfacher für den
Endnutzer, als sich da die kryptischen Klassen zu merken...

Ja eben, ich mach das Spaltenlayout mit einem eigenen Grid oder einem anderen Grid Framework auch immer nur innerhalb eines Artikels und entspchrechenden Wrapper (oder eben Custom HTML). Aber das ist halt nicht... "Endbenutzerfreundlich" .

[kayyy]

Spalten innerhalb eines Artikels wird mit der subclumn Extension gelöst.

Hierfür schreibe ich noch das entsprechende Addon für die Extension.

Spätere Spalten für left/right wird mit den Klassen gelöst, die man der jeweiligen Spalte zuweisen kann.

Gesendet von meinem GT-I9300 mit Tapatalk 2

[kayyy]

Ich habe die Erweiterung subcolumns_bootstrap schon einmal auf die Bootstrap3 Version geupdated: https://github.com/pixelianer/subcolumns_bootstrap3

Die Erweiterung subcolumns funktioniert auch ohne Probleme unter Contao 3.1.1, müsste im ER nurnoch aktualisiert werden.
Daher kann man diese derzeit nur direkt über die Erweiterungsverwaltung installieren.

[andreasisaak]

Ja eben, ich mach das Spaltenlayout mit einem eigenen Grid oder einem anderen Grid Framework auch immer nur innerhalb eines Artikels und entspchrechenden Wrapper (oder eben Custom HTML). Aber das ist halt nicht... "Endbenutzerfreundlich" .

Oder halt mit senantic_html5

[Spooky]

Ja, das meinte ich eigentlich (Also 'Wrapper Extension oder einfach Custom HTML')

[tinoo]

Ich habe die Erweiterung subcolumns_bootstrap schon einmal auf die Bootstrap3 Version geupdated: https://github.com/pixelianer/subcolumns_bootstrap3

Für DAU's wie mich sollte vielleicht noch erwähnt werden:
- subcolumns_bootstrap3 kann man direkt über den Erweiterungskatalog im Backend installieren, dann werden auch gleich alle Abhängigkeiten mitinstalliert
- nach der Installation muss unter Einstellungen / Spaltenset-Einstellungen / Spaltenset noch "Bootstrap" anstelle YAML ausgewählt werden...
Dann kann man die Erweiterung wie gewohnt nutzen.

[kayyy]

Für DAU's wie mich sollte vielleicht noch erwähnt werden:
- subcolumns_bootstrap3 kann man direkt über den Erweiterungskatalog im Backend installieren, dann werden auch gleich alle Abhängigkeiten mitinstalliert
- nach der Installation muss unter Einstellungen / Spaltenset-Einstellungen / Spaltenset noch "Bootstrap" anstelle YAML ausgewählt werden...
Dann kann man die Erweiterung wie gewohnt nutzen.

Ich wusste nicht, dass die Extension so schnell freigeschaltet wird

Ich habe das Tutorial nun schonmal um das Spaltenset erweitert.

Danke

[tinoo]

kayyy, eine Frage: Wenn ich das Browserfenster verkleinere, wird die Navigation durch den
Menübutton ersetzt. Wenn ich aber darauf klicke, passiert nichts... Da müssten doch aber
die ganzen Menüpunkte untereinander erscheinen, oder?

[wulf]

komisch, bei mir geht es ohne probleme, vielleicht hat sich bei dir irgendwo ein fehler eingeschlichen.