Teil 3: Elemente mit CSS anpassen Einsteiger-Tutorial

TL;DR: Ganz, ganz kurz erklärt

  1. Viele häufige Anpassungen, können Sie seitenweit mit dem Theme Assistant vornehmen – werfen Sie einen Blick auf die Einstellungsmöglichkeiten
  2. Für die Anpassung einzelner Elemente, nutzen Sie die "Element untersuchen"-Funktion Ihres Browsers (Rechtsklick auf das gewünschte Element) um den richtigen CSS-Selektor zu finden
  3. Finden Sie die Eigenschaft, die Sie anpassen möchten
  4. Suchen Sie den gewünschten Selektor im CSS Ihres Themes files/THEMENAME/css/main.css und übernehmen Sie die Änderung

Nachfolgend finden Sie eine verständliche Erklärung zu den einzelnen Schritten.

Start: Richtige Stelle und Eigenschaft finden

Die Farbe, Schrift, Größe oder Position von Elementen können Sie seitenweit mit Hilfe von CSS beeinflussen.

Der HTML-Code enthält Ihre Texte und Bilder, während CSS Ihnen das gewünschte Aussehen verleiht. Die folgenden Werkzeuge helfen Ihnen die Verbindung von Aussehen (CSS) und Element (HTML) mit einem Klick zu finden.

Hilfsmittel: Die "Entwicklerwerkzeuge" kennenlernen

Alle modernen Browser enthalten mittlerweile standardmäßig sogenannte Entwickler-Tools. Diese Werkzeuge helfen Ihnen Elemente auf jeder Website mit einem Klick zu identifizieren, zusätzlich zeigen Sie Ihnen die zugehörigen CSS-Eigenschaften, die das jeweilige HTMl-Element beeinflussen. So sparen Sie sich langwieriges Suchen und Verstehen der Stylesheets.

Die Chrome Entwickler-Tools

Die Google Chrome Entwickler-Tools öffnen Sie am besten direkt mit einem Rechtsklick auf das gewünschte Element. Alternativ mit Strg + Shift + I.

Die Firefox Web-Entwickler Werkzeuge

Der Firefox Inspektor lässt sich genauso aufrufen wie die Chrome Entwickler-Tools, allerdings fühlt sich seine Bedienung allgemein etwas holpriger an, als die der Variante von Chrome.

Alternativ zum vorinstallierten Inspektor gibt es für Firefox das weit verbreitete Tool Firebug, das wird als etwas übersichtlicher und benutzerfreundlicher empfinden. Die Installation der Erweiterung ist mit einem Klick erledigt. Der Aufruf funktioniert mit einem Rechtsklick und Element mit Firebug untersuchen.

Video-Tutorials

Einen ausführlichen Einblick in die Entwickler-Werkzeuge von Chrome und Firefox bietet dieses Video-Tutorial.

Ein freundlicher Crashkurs, der sich ebenfalls mit allen Entwickler-Tools nachvollziehen lässt ist hier auf Youtube zu finden.

Nachfolgend finden Sie eine kurze Erklärung, die alles behandelt, das Sie für den Anfang brauchen.

Bedienung: Die Werkzeuge einsetzen

Nehmen wir an, Sie würden ausschließlich die Schriftgröße der Hauptüberschrift <h1> Ihres Themes anpassen wollen. Klicken Sie dazu die Überschrift mit der rechten Maustaste an und wählen Sie »Element untersuchen«. Es öffnet sich ein zweispaltiges Fenster. Links sehen Sie den HTML-Code, rechts das zugehörige CSS.

In der rechten (CSS)-Spalte finden Sie standardmäßig den Reiter Styles (bzw. Regeln) ausgewählt, dort können Sie Eigenschaften direkt bearbeiten.

Probieren Sie es direkt aus! Färben Sie den Rahmen border-color und Hintergrund background-color der folgenden Box in Ihrer Lieblingsfarbe.

Nur lesen ist langweilig: Probieren Sie es direkt aus!

Ändern Sie die Eigenschaften "border-color" und "background-color" dieser Box mit Hilfe der Entwicklerwerkzeuge Ihres Browsers.

Zuerst: Rechtsklicken und 'Element untersuchen' wählen
Dann: Entsprechende Eigenschaften anklicken und den Teil hinter dem Doppeltpunkt bearbeiten. Chrome bietet mit mit einem Klick auf das kleine bunte Kästchen sogar standardmäßig einen Farbwähler.

Tipp: Falls Sie die Headline <h3> oder den Text <p> erwischt haben, klicken Sie im Quellcode auf <div class="demo-box">.

Sie können auf diese Weise jede erdenkliche Änderung an jeder Website testen. Wie würde Google mit einer anderen Schrift aussehen? Facebook in rot anstatt blau? Probieren Sie es aus.

Auf einen Blick sehen welcher Selektor verantwortlich ist

Wechseln Sie nun auf den Reiter Computed (bzw. Berechnet), dort sehen Sie welche Zeile bzw. welcher Selektor im CSS für die jeweilige Eigenschaft verantwortlich ist. Aufgrund des technischen Aufbaus von CSS, können mehrere verschiedene Selektoren ins Summe das Aussehen eines Elementes beeinflussen. Dieses Hintergrundwissen ist jedoch nicht nötig.

Alles was Sie jetzt tun müssen, ist zu entscheiden welche CSS-Eigenschaft Sie anpassen möchten (Deutsche Referenz). In diesem Beispiel, möchten wir die Schriftgröße anpassen. Der entsprechende Selektor lautet »font-size«. Im Computed-Reiter sehen Sie, nachdem Sie den Bereich font-size aufgeklappt haben (kleines Dreieck), auf einen Blick, dass der verantwortliche Selektor #content h1 lautet. Alle anderen Selektoren, die indirekt einen Einfluss hätten, allerdings überschrieben werden, sind durchgestrichen darsgestellt.

Mit dieser Information geht es zum nächsten Schritt: Dem Anwenden der Änderung an Ihrem Theme.

Screenshot: Schematische Darstellung der Entwicklerwerkzeuge

Schematische Darstellung der Entwicklerwerzeuge von Google Chrome. Oben die Überschrift, wie Sie auf der Seite zu sehen ist, in der Mitte der zugehörige HTML-Code und unten der CSS-Code im Reiter »Computed«.

Dann: Die gewünschten Änderungen vornehmen

Haben Sie das entsprechende Element und die anzupassende Eigenschaft gefunden, geht es daran die Änderung an Ihrem Theme vorzunehmen.

Erst: Allgemeine Anpassungen mit dem Theme Assistant

Mit dem Theme Assistant können Sie mit wenigen Klicks das Aussehen vieler Standardelemente beeinflussen. Die Möglichkeiten sind auf die wichtigsten Eigeschaften wie Farben, Schriftgrößen, Hintergründe etc. konzentriert, um es Ihnen zu ermöglichen mit sehr wenig Zeitaufwand ein stimmiges, aufeinander abgestimmtes Gesamtbild zu erreichen.

Es ist empfehlenswert die Einstellungsmöglichkeiten des Theme Assistant durchzugehen, bevor Sie beginnen Änderungen an einzelnen Elementen vorzunehmen. So sollte das Gesamtbild bereits erkennbar mit Ihren Vorstellungen zusammenstimmen. Im Anschluss können Sie optional, mit Hilfe von CSS, einzelne Elemente und Feinheiten an Ihre Anforderungen anpassen.

Im Unterschied zu anderen Options-Erweiterungen speichert der RockSolid Theme Assistant Ihre Änderungen oder gewählten Farbsets erst direkt im Stylesheet, sobald Sie Änderungen vornehmen. So bleibt Ihre Seite schnell und alle Möglichkeiten bleiben Ihnen im Anschluss offen. Deshalb empfiehlt es sich mit dem Theme Assistant zu beginnen und erst im Anschluss händische Änderungen am CSS vorzunehmen, um die manuellen Anpassungen nicht zu überschreiben.

Dann: Einzelnen Elemente mit CSS ändern

Sobald Sie alle mit dem Theme Assistant möglichen Änderungen abgeschlossen haben und die meisten Farben und Optionen Ihren Vorstellungen entsprechen, können Sie beginnen einzelne Elemente im Detail anzupassen.

Grundsätzliche Herangehensweise

Das Haupt-Stylesheet (= die CSS-Datei mit den Anweisungen für Ihr Theme) befindet sich unter files/THEMENAME/css/main.css. Dort können Sie entweder direkt im Contao-Backend oder mit einem Editor Ihrer Wahl Änderungen vornehmen.

Möglich: Editieren direkt im Contao-Backend

Navigieren Sie zu System › Dateiverwaltung › THEMENAME › CSS › main.css und Klicken Sie auf Bearbeiten (die Seite, nicht der Stift). Im Editor der sich öffnet können Sie mit Hilfe von Strg + F suchen. F11 öffnet den Editor im Vollbildmodus.

Empfohlen: Editieren mit einem FTP-Client und Ihrem lieblings Editor

Bei dieser Variante verbinden Sie sich mit Hilfe eines FTP-Programmes zu Ihrem Webspace und editieren die Datei direkt mit dem Editor Ihrer Wahl.

FTP-Programm: Der Open Source FTP-Client Cyberduck ist für sowohl für Windows als auch für Mac verfügbar. Alternativ stehen mit WinSCP (Windows), und FileZilla (Windows, Mac, Linux) weitere Alternativen zur Verfügung.

Editor: Der derzeit vermutlich beste Editor, den Sie finden können ist Sublime Text (Windows, Mac, Linux). Ihren Anforderungen genügt aber genauso das beliebte Notepad++ (Windows), TextWrangler (Mac) oder Geany (Linux).

Standardmäßig werden Dateien, die Sie doppelt anklicken heruntergeladen. Dieses Verhalten können Sie bei allen FTP-Programmen in den Einstellungen ändern und die gewählte Datei stattdessen direkt mit Ihrem Editor öffnen.

Nach der Installation des FTP-Programmes legen Sie Ihren Webspace an (Zugangsdaten von Ihrem Provider) und verbinden sich.

Navigieren Sie zu files/THEMENAME/css und öffnen Sie die Datei main.css.

Benutzen Sie die Suchfunktion des Editors Strg + F um den gewünschten Selektor zu finden. Nehmen Sie die vorher geplanten Anpassungen vor und speichern Sie die Datei.

Öffnen Sie Ihren Browser und laden Sie die Seite neu, mit der „Neu laden“-Funktion (neben der Adressleiste) bzw. über die Tastenkombination Strg + R. Wiederholen Sie die Schritte bis die Anpassungen Ihren Vorstellungen entsprechen.

Überblick häufiger CSS-Eigenschaften

margin
Der Außenabstand von Elementen. Kann in der Kurzschreibweise im Uhrzeigersinn (oben beginnend) angegeben werden.
Beispiel: margin: 10px 0 0 0; oder margin-top: 10px;
padding
Der Innenabstand von Elementen. Kann in der Kurzschreibweise im Uhrzeigersinn (oben beginnend) angegeben werden.
Beispiel: padding: 10px 0 0 0; oder padding-top: 10px;
border
Rahmendefinition, die häufige Kurzschreibweise enhält die Angaben für Breite (border-width), Stil (border-style) und Farbe (border-color).
Beispiel: border: 1px solid #ff0000;
color
Die Schriftfarbe des Elements.
Beispiel: color: #0088cc;
font-size
Schriftgröße. Kann in verschiedenen Maßeinheiten angegeben werden, in RockSolid Themes kommen häufig em zum Einsatz.
Beispiel: font-size: 1em;
background
Mit der Background-Eigenschaft (Kurzschreibweise) lassen sich viele Hintergrundoptionen wie Hintergrundbild, -Farbe und -Position auf einmal setzen.
Beispiel: background: #ff0000 url(image.png) no-repeat left top; setzt Farbe, Bild, Wiederholverhalten und Position in einer Zeile.

Tipps: CSS Link- und Literaturempfehlungen

Zu allererst muss an dieser Stelle die Google-Suchfunktion genannt werden. Selbst wenn Sie bereits fortgeschrittene Kenntnisse entwickelt haben, werden zu den meisten CSS-Problemen online bereits Lösungen finden. Im Web finden Sie tausende vorgefertigte Code-Snippets für die verschiedensten Anwendungsfälle.

Deutsche Quellen

Online
Bücher

Englische Quellen

Online
Bücher

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