Contao Theme Oneo 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

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.

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 oneo.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 oneo.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.

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 oneo/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 oneo.cto aus und klicken Sie auf den Button Theme importieren. Wählen Sie nun im Bereich Beispiel-Website importieren die Datei oneo/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.

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

Vergeben Sie die CSS-Klasse oneo-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.

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 Oneo 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 oneonewsletter-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.