Teil 1: Wie passe ich Element X von Contao Theme Y an?
TL;DR: Ganz, ganz kurz erklärt
- Änderungen am Aussehen von Elementen (Abstände, Breiten, Farben, Schrift), betreffen fast immer das CSS – weiter zum CSS-Tutorial
- Viele allgemeine Änderungen können Sie mit dem Theme Assistant vornehmen – Anpassungen an einzelnen Elementen direkt am CSS
- Änderungem von Bildern, Text und Icons im Inhalt können Sie mit Hilfe von HTML bzw. dem Contao-Backend durchführen – weiter zum HTML-Tutorial
Ein Link zu dieser Seite war Teil einer Support-Antwort?
Falls Sie im Zuge einer Support-Anfrage hierher verwiesen wurden: Sie haben mit einer konkreten Hilfestellung bei der Umsetzung Ihrer Individualisierung gerechnet und nicht mit einer allgemeinen Anleitung und sind jetzt etwas verwundert. Wir verstehen Sie!
Dennoch möchten wir Ihnen als Herz legen: Jede der rund 20 Minuten, die Sie für das Erarbeiten dieses kostenlosen dreiteiligen Workshops benötigt wird sich für Sie lohnen.
Das folgende Training ist spannend, sehr kompakt und vermittelt wertvolles Wissen. Sie werden in wenigen Minuten nicht nur in der Lage sein das einzelne gewünschte Element anzupassen, sondern noch viele weitere Ideen und Möglichkeiten entdecken Ihr Theme zu verändern.
Start
Sie haben Ihr Theme erfolgreich installiert und möchten nun einige Details anpassen. Nur wie? In diesem Tutorial lernen Sie in wenigen Minuten, wie Sie Inhalte mit Hilfe Ihres Browsers und dem RockSolid Frontend Helper einfach lokalisieren und editieren können.
Das Anpassen von Elementen ist sehr viel einfacher als die Erstellung. Deshalb werden die praktischen Erweiterungen und Ihr Theme, Ihre Arbeit deutlich erleichtern.
Setup: Einfache Anpassung mit den richtigen Werkzeugen
Zuerst: Den RockSolid Theme Assistant installieren
Wenn Sie Änderungen lieber direkt mit CSS, dem internen Editor oder mit Hilfe von Sass vornehmen möchten, können Sie diesen Schritt überspringen.
Navigieren Sie im Contao-Backend zur Erweiterungsverwaltung und klicken Sie rechts oben auf Erweiterung installieren. Geben Sie dort rocksolid-theme-assistant in das Feld Erweiterung ein und klicken Sie auf weiter. Wählen Sie die aktuellste Version und folgen Sie dem Installations-Assistenten, bis die Erweiterung erfolgreich installiert wurde.
Und: Den RockSolid Frontend Helper installieren
Navigieren Sie im Contao-Backend zur Erweiterungsverwaltung und klicken Sie rechts oben auf Erweiterung installieren. Geben Sie dort rocksolid-frontend-helper in das Feld Erweiterung ein und klicken Sie auf weiter. Wählen Sie die aktuellste Version und folgen Sie dem Installations-Assistenten, bis die Erweiterung erfolgreich installiert wurde.
Dann: Einen modernen Browser installieren
Installieren Sie sich einen der von Webdesignern am häufigsten eingesetzten Browser: Google Chrome oder Mozilla Firefox. Beide enthalten im Auslieferungszustand leistungsstarke und praktische Werkzeugleisten, die Ihnen eine große Hilfe sein werden.
Hinweis: Dieser Workshop lässt sich grundsätzlich auch mit den Entwicklerwerkzeugen des Internet Explorer nachvollziehen. Wir empfehlen Ihnen jedoch einen der beiden Marktführer einzusetzen.
Gut: Wo kann ich X anpassen?
Die Anpassung von Texten, Bildern sowie Icons und das Umorganisieren von Inhalten, können Sie häufig ganz einfach im Contao-Backend vornehmen (HTML). Änderungen, die das Aussehen Ihrer Seite betreffen sind meist am CSS vorzunehmen (z.B. mit dem Theme Assistant oder direkt).
Beispiele für CSS-Anpassungen
Viele der hier angeführten Eigenschaften lassen sich bequem mit wenigen Klicks und dem Theme Assistant aufeinander abgestimmt anpassen.
- Standardbildgröße
- Farben
- Schriftgrößen
- Abstände
- Breiten (Seitenleiste, Hauptspalte)
- Hintergrundbilder
- Mehrmals vorkommende Icons
Beispiele für Änderungen am HTML bzw. im Contao-Backend
Für die meisten Änderungen reichen wenige Klicks mit den Frontend Helper.
- Logo ändern
- Texte und Seitenstruktur anpassen
- Bilder (Kopfbilder)
- Icons (im Inhaltsbereich oder Adressblöcken)
- Custom Elements
- Slider Inhalte
Klar: Zum nächsten Schritt
Aussehen? Anpassungen am Aussehen erkennen (CSS)
Betrifft Ihre Änderung Farben, Schriftgrößen, Abstände oder sonstige optische Eigenschaften (siehe Beispiele CSS-Anpassung)? Dann handelt es sich mit hoher Wahrscheinlichkeit um eine Anpassung, die Sie mit Hilfe von CSS vornehmen können.
Ich möchte: Das Aussehen eines Elements anpassen
Inhalt? Anpassungen am Inhalt erkennen (HTML/Contao)
Sie möchten ein Bild, eine Telefonnummer, einen Bildtext austauschen oder neue Inhalte an einer bestimmten Stelle einfügen? Dann reden wir über eine Anpassung, die Sie an den Inhalten vornehmen können.
Ich möchte: Inhalte und Bilder ändern und einfügen
Gab es Unklarheiten oder haben Sie einen Fehler in diesem Artikel entdeckt? Geben Sie uns Bescheid und hinterlassen Sie Ihr Feedback.