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.

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.

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.

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.

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.

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

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

• Selfhtml: Der Klassiker unter den deutschsprachigen CSS-Tutorials
• Die bekannte und umfassende Referenz css4you.de
• CSS-lernen.net, schöner Glossar mit verständlichen Texten

Bücher

• Modernes Webdesign mit CSS3 (empfehlenswerter Überblick)
• Fortgeschrittene CSS-Techniken

Englische Quellen

Online

• MDN Tutorials, ein ausgezeichneter Startpunkt
• Leicht nachvollziehbare Tutorials von css-tricks.com
• Die MDN CSS-Referenz – das Nachschlagewerk
• Interaktives HTML-Tutorial bei Codecademy

Bücher

• HTML and CSS: Design and Build Websites (toller Einstieg)
• CSS3: The Missing Manual (umfassender Überblick)