Wie du das SIRIUS Theme – Standard Edition installierst

So unterschiedlich unsere Contao Themes aussehen mögen, installiert und konfiguriert werden sie stets auf die gleiche Weise. Nachfolgend haben wir dir eine Anleitung zusammengestellt, wie du das SIRIUS Theme in der Standard Edition installierst.

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 aussehen könnte:

|-- CONTAO
  |-- .editorconfig (Einstellungen für Code-Editor, wenn unterstützt)
  |-- files
    |-- demo (enthält Demo-Bilder, -PDF etc)
    |-- theme (enthält die SCSS-Dateien)
  |-- gulpfiles.js
  |-- lizenz.txt
  |-- package.json
  |-- templates
    |-- sirius-4-4.sql
|-- sirius-4-X.sql |-- theme (angepasste Templates) README.md sirius-4-4.cto sirius-4-7.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 den Contao Manager zu installieren.
  2. Installiere folgdene Erweiterungen über den Contao Manager:
    • euf_grid
    • euf_nutshell
    • euf_hero
    • euf_contact
    • onepage-navigation
  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 entsprechende SQL-Datei aus und importiere sie. 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 entsprechende CTO-Datei (z.B. sirius-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 “sirius.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.