Contao Theme Tao Dokumentation

Erst: Contao installieren

Folgen Sie unserer Contao-Installationsanleitung oder der offiziellen Contao-Anleitung und beachten Sie alle Anweisungen des Contao-Managers unter /contao-manager.phar.php.

Dann: Theme installieren

Das Theme kann direkt bei der Installation von Contao mitinstalliert werden wie in der Contao-Installationsanleitung beschrieben. Die folgenden Schritte werden nur für eine nachträgliche Installation des Themes in eine bestehende Contao-Installation benötigt.

1. Schritt: Erweiterungen installieren

Um Ihr Theme als Template installieren zu können müssen folgende Erweiterungen installiert werden:

rocksolid-custom-elements, rocksolid-columns, rocksolid-icon-picker, rocksolid-slider und rocksolid-mega-menu

Den Lizenzschlüssel für Premium Erweiterungen finden Sie in Ihrem Kundenbereich unter Downloads.

Öffnen Sie dafür den Contao-Manager unter /contao-manager.phar.php und klicken Sie rechts oben auf Pakete installieren. Geben Sie dort rocksolid-custom-elements in das Such-Feld ein, klicken neben der Erweiterung auf Prüfen & Installieren und danach am unteren Ende des Fensters auf Änderungen anwenden. Nach der Installation des Pakets klicken Sie auf Installtool um die Datenbank zu aktualisieren. Wiederholen Sie diesen Schritt bitte für: rocksolid-columns, rocksolid-icon-picker, rocksolid-slider und rocksolid-mega-menu.

Wenn Sie die auf die Themes abgestimmten Erweiterungen nicht installieren oder nicht die jeweils passende Theme-Version verwenden, dann erhalten Sie beim Template-Import die Fehlermelung "X fehlt in der Datenbank und wird daher nicht importiert."

Optionale Erweiterungen

Falls Sie den praktischen Theme Assistant (grundlegende Anpassungen ohne Code) und den Frontend Helper (Inhalte direkt bearbeiten) einsetzen möchten, können Sie optional auch diese Erweiterungen direkt installieren. Wiederholen Sie dazu bitte den ersten Schritt für rocksolid-theme-assistant und rocksolid-frontend-helper.

2. Schritt: Theme herunterladen und importieren

Unmittelbar im Anschluss an die Bezahlung können Sie in Ihrem Kundenbereich die zu Ihrer Contao-Version passende Theme-Datei herunterladen.

Entpacken Sie die ZIP-Datei und öffnen Sie den entstandenen Ordner, für die Installation benötigen Sie zunächst nur die Datei tao.cto, die sich im Unterordner contao befindet.

Melden Sie sich im Backend an und navigieren zu Layout › Themes, danach klicken Sie rechts oben auf Theme importieren. Wählen Sie nun die Datei tao.cto aus und klicken Sie auf den Button Theme importieren. Wenn keine Konflikte festgestellt wurden klicken Sie auf weiter um den Import des Themes abzuschließen.

Fast fertig: Website-Template importieren (Demo-Daten)

Die Template-Installation ist ideal für neue Projekte, da Sie alle in der Demo gezeigten Elemente direkt anpassen können und sehen wie die Inhalte umgesetzt sind. Darüber hinaus wurden alle für Contao typischen Verknüpfungen zwischen Modulen und Inhalten bereits für Sie vorgenommen.

Ist Ihre Contao-Website bereits mit Inhalten befüllt, die Sie nicht im Nachhinein übernehmen können, überspringen Sie diesen Schritt.

Hinweis: Beim importieren des Contao-Website-Templates werden alle bestehenden Datenbank-Inhalte mit den Demo-Daten ersetzt.

Wenn Sie Contao 4 verwenden: Um das Website-Template importieren zu können gehen Sie erneut zurück zum Contao-Installationstool /contao/install. Wählen Sie dort unter Ein Template importieren das Template tao/demo-website.sql aus und klicken auf den Button Ein Template importieren. Danach geben Sie die Daten für Ihr Administratorkonto an und klicken auf Ein Administratorkonto erstellen

Für Contao 5 navigieren Sie im Backend zu Layout › Themes, danach klicken Sie rechts oben auf Theme importieren. Wählen Sie nun die Datei tao.cto aus und klicken Sie auf den Button Theme importieren. Wählen Sie nun im Bereich Beispiel-Website importieren die Datei tao/demo-website.sql und als Art des Imports Vollständiger SQL-Import aus. Klicken Sie auf weiter um den Import der Demo-Daten abzuschließen.

Fehlermeldung? Probleme bei der Installation?

Weisse Seite, Fehlermeldung, Theme wird nicht angezeigt? Diese interaktive Liste hilft Ihnen Schritt-für-Schritt.

  • Installationsanleitung Schritt für Schritt befolgt
  • WICHTIG: Die benötigten Erweiterungen vor dem Template-Import installiert?
  • Die neuste/passende Theme-Version verwendet (Download)
  • Die zum Theme neuste/passende Contao-Version kommt zum Einsatz
  • Ein erneuter Installationsversuch führt zum selben Problem?

Support kontaktieren

Google Maps API-Key eintragen

Damit die Google Maps Ihres Themes angezeigt werden können, ist ein API-Key erforderlich. Auf https://developers.google.com erhalten Sie kostenlos einen Key. Im jeweiligen Maps-Element können Sie Ihren Key im Feld Google Maps API-Key eintragen.

Zentrierte Bereiche mit Hintergrundeinstellungen

Das Theme enthält das Umschlagelement Zentrierter Bereich, mit dem Sie Rahmen und Hintergründe für einzelne Bereiche einer Full-Width-Seite einstellen können. Erstellen Sie einfach die Inhaltselemente Zentrierter Bereich Anfang und Zentrierter Bereich Ende in einem Artikel und fügen dazwischen beliebige Inhaltselemente ein.

Im Umschlagelement lassen sich verschiedene Hintergrundbilder, -Positionen, -Farben und -Effekte einstellen, darunter auch ein Parallax-Effekt und ein Effekt der auf Mausbewegungen reagiert.

Hintergrundvideos

Wenn Sie ein HTML5-Video im Hintergrund eines Bereichs anzeigen möchten, sollte Sie Ihre Video-Dateien in den gängigsten Formaten speichern. Wir empfehlen die Videoformate mp4/H.264 und webm/VP8, die in Kombination von den meisten Browsern unterstützt werden. Wählen Sie dazu in den Einstellungen des Umschlagelements bei Hintergrundbild oder -Video die beiden Video-Dateien und ein Bild, das als Vorschaubild angezeigt werden soll aus.

CSS-Klassen

Für Zentrierte Bereiche im Footer vergeben Sie die CSS-Klasse footer-bar um die speziellen Schrift- und Formular-Styles für die Fußzeile zu aktivieren.

Vergeben Sie die CSS-Klasse tao-boxed einer Seite oder einem Seitenlayout um die Seite in einer Boxed-Variante anzuzeigen (Beispiel). Wenn Sie die Boxed-Variante für die komplette Website einsetzen möchten, können Sie diese auch über den Theme Assistant aktivieren.

Animationen lassen Sich mit der Klasse not-animated deaktivieren. Vergeben Sie die Klasse für einzelne Elemente, Seiten oder Layouts.

Mit der Klasse no-border lassen sich die Rahmen um Bilder bei Gallerie-, Bild- und Textelementen entfernen.

Um die responsive Bildgröße bzw. Skalierung für einzelne Inhaltselemente zu deaktivieren, können Sie die CSS-Klasse no-resize verwenden. Zusätzlich lässt sich die prozentuale Anpassung für die gesamte Website mit dem Theme Assistant abstellen.

CSS-Icon-Klassen

Icons des enthaltenen Icon-Fonts können mittels CSS-Code, data-icon-Attribut oder mit einer CSS-Klasse icon-... eingebunden werden. Eine Auflistung aller Icon-Klassen finden Sie in der Tao Live-Demo. Weitere Informationen zum Icon-Font finden Sie im Icon-Font-Tutorial.

Newsletter-Template

Falls Sie das Theme inklusive Newsletter-Template gekauft haben, laden Sie das Downloadpaket taonewsletter-contao.zip über Ihren Kundenbereich herunter, entpacken es und kopieren alle Dateien aus dem Ordner templates in das Verzeichnis templates auf Ihrem Webspace.

Nun legen Sie in der Seitenstruktur eine versteckte Seite „Newsletter Includes“ an (in den Demo-Daten bereits enthalten), in der Sie dann für jeden Newsletter einen Artikel anlegen können. Für den Newsletter sind eigene Inhaltselemente vorbereitet, die beim Anlegen eines Inhaltselements unter Elementtyp in der Kategorie Newsletter aufgeführt sind.

Nachdem Sie den Artikel fertiggestellt haben, legen Sie in der Newsletter-Verwaltung einen neuen Newsletter an und vergeben als HTML-Inhalt {{insert_article::newsletter-1}} wobei Sie newsletter-1 mit dem Alias Ihres Artikels ersetzen. Führen Sie danach eine Testsendung des Newsletter durch um zu überprüfen ob Ihre Inhalte als E-Mail korrekt dargestellt werden.

FAQ: Häufige Fragen zu diesem Artikel

Der Import konnte nicht abgeschlossen werden! Ist die Datenbankstruktur aktuell und die Template-Datei kompatibel mit Ihrer Contao-Version?

Häufigste Ursache: Sind Sie sicher alle benötigten Erweiterungen, wie in Schritt im 1. Schritt beschrieben, installiert zu haben? Die Betonung liegt dabei auf alle benötigten, häufig vergessen werden der RockSolid Slider und die Custom Elements. Der Theme Assistant und Frontend Helper sind optional.

Weitere häufige Ursache: Haben Sie die zur Ihrer Contao-Version passende Theme-Version verwendet? Die aktuellste Version (wird standardmäßig ausgeliefert) und die ggf. älteren verfügbaren Versionen finden Sie in Ihrem persönlichen Kundenbereich.

Auch möglich: Haben Sie Ihre Contao-Installation bereits verändert z. B. eine 3rd-Party-Erweiterung installiert, bevor Sie den Import gestartet haben?

Hintergrund: Für den Template-Import ist es nötig, dass Ihre Installation mit dem Datenbank-Template übereinstimmt. Im Anschluss können Sie die Erweiterungen problemlos deinstallieren, falls Sie andere/eigene Lösungen einsetzen möchten.

Kann ich problemlos meine eigenen Erweiterungen einsetzen?

Ja. Einer der großen Vorteile von RockSolid Themes ist, dass Sie entscheiden können, welche die richtigen Werkzeuge für Ihr Projekt sind. Angefangen vom RockSolid Responsive Slider, über die Custom Content Elements lassen sich alle Erweiterungen bei Bedarf nahtlos deinstallieren und machen Platz für Ihre individuelle Lösung!

Wo finde ich Element X um es anpassen zu können?

Der RockSolid Frontend Helper hilft Ihnen Contao-Inhaltselemente und Module mit einem Klick zu finden und zu editieren.

Zum Thema »Wo finde ich Element X und wie passe ich es an?« haben wir einen ausführlichen Workshop für Sie zusammengestellt, der Ihnen die Anpassung vieler Elemente und Inhalte ausführlich erläutert.

Gab es Unklarheiten oder haben Sie einen Fehler in diesem Artikel entdeckt? Geben Sie uns Bescheid und hinterlassen Sie Ihr Feedback.