NEU: Crashkurs Sass – Sass lernen und in Contao einsetzen. mehr erfahren

Wie du das SOLO Theme installierst

So unterschiedlich unsere Contao Themes aussehen mögen, installiert und konfiguriert werden sie stets auf die gleiche Weise.

1. Prüfe, ob alle Dateien und Ordner vorhanden sind

Bevor du startest, solltest du dich vergewissern, dass das Theme-Paket vollständig ist. Dafür liegt jedem Theme eine README.md mit der Aufstellung aller Dateien und Ordner bei. Hier ein Beispiel, wie die Datei- und Ordnerstruktur des SOLO-Themes aussieht:

|-- CONTAO
  |-- .editorconfig (Einstellungen für Code-Editor, wenn unterstützt)
  |-- files
  |-- demo (enthält Demo-Bilder, -PDF etc)
    |-- solo (enthält die SCSS-Dateien)
    |-- tiny_templates (Vorlagen für HTML im TinyMCE)
    |-- tinymce.css (Vorlagen zur Verwendung im Editor)
  |-- gulpfiles.js
  |-- lizenz.txt
  |-- package.json
  |-- templates
    |-- solo-3-5.sql
    |-- solo-4-4.sql
    |-- solo (angepasste Templates)
README.md
solo-3-5.cto
solo-4-4.cto

2. Einrichtung der lokalen Entwicklungsumgebung (einmalig)

Wenn du das erste Mal mit gulp oder anderen Taskrunnern arbeitest, musst du noch node.js, den Node Package Manager - npm und gulp global installieren. Global bedeutet, dass es Projektübergreifend zur Verfügung steht.

  1. Auf der nodejs-Website kannst du node.js herunterladen und installieren (der Node Package Manager ist bereits enthalten). Weitere Informationen und ein kurzes Video bekommst du hier.
  2. Öffne das Terminal / die Kommandozeile. Führe den Befehl npm install gulp-cli -g aus. Solltest du mehrere Fehlermeldungen bekommen, verwende sudo npm install gulp-cli -g. Die Option -g sorgt dafür, dass gulp.js global installiert wird.

3. Contao-Einrichtung

  1. Installiere Contao in einer lokalen Entwicklungsumgebung. Denk daran, bei der Contao Einrichtung auch die Paketverwaltung (Composer) [Contao 3.5] oder den Contao Manager [Contao 4.4] zu installieren. Wenn du Probleme mit der Installation von Composer haben solltest, dann kannst du über den Contao Check [Contao 3.5] weitere Informationen bekommen.
  2. Installiere die Erweiterungen euf_grid und euf_nutshell über die Paketverwaltung bzw. den Contao Manager.
  3. Aktiviere in den Contao Einstellungen unter Frontend-Einstellungen den Punkt „Ordner-URLS verwenden“. Den Punkt „URLs umschreiben“ kannst du ebenfalls aktivieren.

3A) Theme mit Demo (empfohlen)

Wenn du das Theme inkl. Demo und Dokumentation installieren möchtest:

  1. Kopiere alle Dateien und Ordner entsprechend ihrer Hierarchie in deine Contao-Installation (files, templates).
  2. Rufe erneut das Contao Installtool auf. Wähle bei Templates die solo–3–5.sql bzw. solo–4–4.sql aus und importiere die Datei. Im Anschluss musst du einen neuen Administrator-Account anlegen.

3B) Theme ohne Demo

Wenn du lediglich das Theme importieren möchtest:

  1. Kopiere die Dateien .editorconfig, gulpfile.js und package.json in dein Contao Hauptverzeichnis
  2. Wähle im Contao Backend Layout / Themes / Theme-Import und importiere die solo-3-5.cto bzw solo-4-4.cto aus dem Theme-Ordner.
  1. Öffne das Terminal / die Kommandozeile. Gehe in dein Contao Hauptverzeichnis und führe den Befehl npm install aus. Dadurch wird gulp.js und die dazugehörigen Plugins installiert.
  2. Öffne die gulpfile.js und stelle unter var bsProxy die URL zu deiner lokalen Installation ein, z.B. “localhost” oder “solo.localhost”
  3. Öffne das Terminal / die Kommandozeile erneut. Gehe in dein Contao Hauptverzeichnis und starte gulp mit dem Befehl gulp. Gulp sollte nun die Produktionsdateien (CSS, JS) erstellen. Über localhost:3000 kannst du nun das Frontend aufrufen.