Einleitung

Das SOLO Theme basiert auf dem Nutshell Framework und lässt sich durch eine Vielzahl von CSS-Variablen (aka Custom Properties) sowie Sass-Variablen sehr gut individualisieren. Wir haben versucht, so wenig Contao Templates wie möglich anzupassen, um den Einstieg in das Theme und Anpassungen bei Contao-Updates so gering wie möglich zu halten. Eine Übersicht über die Template-Anpassungen findest du bei Layout/Templates.

Aufbau des Themes

Das Theme besteht aus 2 Teilen:

  1. Demo-Ansicht
  2. Dokumentation (dieser Bereich)

Während dir die Demo ein Gefühl dafür geben soll, wie das Theme im Einsatz aussehen kann, beinhaltet die Dokumentation eine Darstellung aller verwendeten Elemente und Module sowie Erklärungen, während das Design eher eine untergeordnete Rolle spielt. Auf solo-3.contao-theme.de kannst du dir ebenfalls die Demo noch einmal ansehen.

Tipp:

Behalte den Startseitenpunkt Dokumentation, um ihn als Style Guide für das Theme und das Projekt zu nutzen.

Aufbau der Ordner- und Dateistruktur

Nach der vollständigen Installation sollte bei dir im Ordner files folgende Ordnerstruktur zu finden sein:

  • /demo - hier sind alle im Theme verwendeten Ressourcen (Bilder, Videos, Audio) enthalten
  • /theme - hier findest du alle SCSS-, Bild- und JS-Dateien des Themes
  • /tinymce - Stylesheet zur Verwendung im TinyMCE Texteditor

Der Ordner theme ist also dein Arbeitsverzeichnis (den du bei Bedarf auch umbenennen kannst). Für deine finalen Bilder, Videos etc. empfehle ich dir, einen neuen Ordner content o.ä. anzulegen. Dann kannst du den Ordner demo vor dem Launch auch löschen.

Hier eine Übersicht der Dateien und Ordner:

files
|-- theme (bzw. dein Projektname)
  |-- fonts
    |-- lato (Schriftart in unterschiedlichen Schnitten) 
  |-- img
  |-- js
  |-- scss
    |-- base
      |-- _article.scss
      |-- _fonts.scss
      |-- _grid.scss
      |-- _layout.scss
      |-- _page.scss
      |-- _shared.scss
      |-- _type.scss
    |-- components (eigene Komponenten wie z.B. _modal.scss kommen hier ebenfalls rein)
      |-- _accordion.scss
      |-- _comments.scss
      |-- _downloads.scss
      |-- _events.scss
      |-- _faq.scss
      |-- _forms.scss
      |-- _hero.scss
      |-- _links.scss
      |-- _logo.scss
      |-- _media.scss
      |-- _navs.scss
      |-- _news.scss
      |-- _newsletter.scss
      |-- _notes.scss
      |-- _search.scss
      |-- _slider.scss
      |-- _tables.scss
      |-- _text.scss
    |-- mixins
      |-- _general.scss
      |-- _responsive.scss
    |-- trumps (Ordner für zusätzliche SCSS-Anweisungen, die nicht überschrieben werden sollen)
      |-- _documentation.scss
      |-- _helper.scss
      |-- _print.scss
    |-- _config.scss
    |-- _variables.scss
    |-- default.scss
    |-- tinymce.scss