Naked Contao

Auf den nachfolgenden Seiten wird der Aufbau einer Contao-Website im Detail beschreiben.
Es handelt sich hier um eine schnelle Mitschrift, es kann deshalb vorkommen, dass einige Schritte fehlen.

Verwendet wird: Contao, Bootstrap und jQuery.

 

Los geht's

  1. Contao am Server laden und installieren.
  2. Einstellungen vornehmen:
    • Datumsformat ändern: d.m.Y
    • Internen Cache umgehen;
    • Cache deaktivieren;
    • Fehlermeldungen anzeigen;
    • Inkompatible Erweiterungen anzeigen;
    • Maximale Upload-Dateigröße anpassen;
    • Maximale Bildbreite und Bildhöhe anpassen.
  3. Theme anlegen;
  4. Neues Layout:
    • Als erstes wird ein einspaltiges Layout erstellt, dass per Default auf allen Seiten eingebunden wird.
    • Spezifische Layouts wie zb. das für die Startseite werden später erstellt.
    • Kopf und Fußzeile hinzufügen (keine Maße eintragen, diese werden im CSS definiert);
    • Viewport: width=device-width, initial-scale=1
    • Module, CSS und JS werden später eingebunden.
  5. Modul subcolumns installieren und anpassen.
    • https://contao.org/de/erweiterungsliste/view/subcolumns.de.html
    • Damit Subcolumns mit Bootstrap verwendet werden kann wird zusätzlich folgendes Modul benötigt.[[ MODUL extend_subcolumns DOWNLOAD]]. Dieses Modul fügt die Spalten und das Backend CSS für Bootstrap hinzu. Das neue Spaltenset muss bei den Einstellungen aktiviert werden.
    • Nach der Installation gibt es 3 neue Contentelemente "Spaltenset Start", "Spaltenset Trennelement" und "Spaltenset Endelement"
  6. Seitenstruktur: Startpunkt einer Website und einige Seiten anlegen.
    • Beim Startpunkt wird das oben erstellte Layout hinzugewiesen.
  7. Erste Backend Module erstellen
    • Navigation
    • Header-Container vom Type "Eigener HTML Code"
      In dieses Module wird der komplette HTML - Code für den Header sowie alle weiteren Module via insert_tags eingefügt.
    • Footer-Container vom Type "Eigener HTML Code"
      In dieses Module wird der komplette HTML - Code für den Footer sowie alle weiteren Module via insert_tags eingefügt
    • ...
  8. Suchformular mit den Formulargenerator anlegen. Die ID des Modules wird später im Template mod_navigation benötigt.
  9. Bootstrap am Server hochladen:
    http://getbootstrap.com/customize/
  10. Layout: Nun werden die installierten, Module, CSS und JS Files hinzugefügt.
    • CSS-Framework: keine Auswahl!
    • Externe Styleshees: bootstrap.min.css
    • Module:
      • Header-Container in der Spalte Kopfzeile
      • Artikel in der Hauptspalte
      • Footer-Container in der Spalte Fußzeile
    • jQuery laden und die Lokale Datei einbinden sowie alle Templates auswählen, die verwendet werden. 
    • In das Feld "Zusätzliche <head>-Tags" füge ich für später ein JS File ein:
      <script src="files/lib/bootstrap/js/bootstrap.min.js"></script>
      <script src="files/lib/script.js"></script>
    • ...
  11. Bootstrap-Navigation: Das Template für die Contao-Navigation muss nun für Bootstrap angepasst werden.
    Dafür wird unter "Templates" eine Kopie von "nav_default" und "mod_navigation" erstellt und beim Navigations-Modul eingebunden.
    [CODE einfügen]
  12. Auch fe_page muss für Bootstrap angepasst werden
    [CODE EINFÜGEN ]
  13. mod_article: Die Bootstrap-Klasse "Container" erzeigt eine fixte zentrierte Breite. Dies wird im mod_article hinzugefügt. So kann man bei Bedarf auch container-fluid in einem weiteren mod_article hinzufügen und bleibt flexibel.
  14. Suche: Im Header der Seite wird eine Suche eingebunden. In diesem Theme werden nur minimale Änderungen an den form-Temlates vorgenommen, deshalb wird das Bootstrap - Such-Script im mod_navigation eingebunden. Als Formular-Action muss hier die Zielseite der Suche angegeben werden (siehe Template).
  15. Layout mehrspaltig: Nun wird eine Kopie des einspaltigen Layouts erstellt, in der man die rechte oder linke Spalte hinzugefügt. Eine Breite wird nicht vergeben, dies übernimmt Bootstrap und das angepasste fe_page. Ein drei-spaltiges Layout ist derzeit nicht möglich.

  16. g
  17. g

 

Angepasste Templates:

Naked Contao CSS

Auf den nachfolgenden Seiten wird nun nach und nach das CSS für das Naked Contao Theme erstellt.

Jedes Contao-Komponente wird in einem eigenen CSS-File gestylte und kann einzeln verwendet werden.

 

 

 

Bildgrößen:

Full Width Slider 1920:

1920 x 1080
1200 x 675
992 x 558
768 x 432
576 x 337