siehe auch: Stile für Websites
Ein Weg, die Stile einer Website zu erkunden und anzupassen, ist mittels Site-Editor. Dort gibt es die Möglichkeit die Stile, ohne Risiko und in Ruhe zu durchstöbern. Erst wenn wir auf der angezeigten Webseite(Homepage oder Stillbuch) Speichern klicken, wird die Anpassung vollzogen. Das alles kann mit folgenden Schritten gemacht werden:
- Website-Editor Aufruf im Backend: Design>Editor
(siehe Bild 1: Aufruf Editor) - Aufruf des Stile-Bereich: klick auf Stile
(siehe Bild 2: Bereich Stile wählen ) - Klick auf Stile durchstöbern
(siehe Bild 3: Stil-Art wählen) - Stil-Variante wählen
(Kombination: Farbpalette, Typografie)
(siehe Bild 4: Stil anschauen/mutieren)
Bild 1: Aufruf Site-Editor
Anmerkungen:
- Im 4-ten Bild, kann man die Stile durchstöbern, dazu eine Kombination auswählen. Da können alle Stilarten gefahrlos ausprobiert werden, jedoch nur solange wir nicht Speichern klicken.
- Die 5 mutierbaren Stilarten sind:
Typografie, Farben, Hintergrund, Schatten, Layout (siehe Bild 3)
Bild 2: Stile wählen 
Bild3: Stil-Art wählen (durchstöbern) 
Bild 4: Stil-Variante wählen
Exkurs zur Stil-Bearbeitung
In TT5, dem aktuellen Theme von WordPress, kannst du zuerst einen der 9 Stile wählen, so ein Stil hat immer eine Farbpalette, eine Typografie und ein Layout. Danach kannst du entscheiden, ob die zugehörige Farbpalette, Typografie und Layout OK ist, oder ob du vielleicht weitere Anpasssungen vornimmst.
Ich bevorzuge gerne die Standard-Farbpalette, ein Layout mit 1920px Inhaltsbreite. Dem Header und Footer verpasse ich häufig eine schwarze Hintergrundfarbe und eine orange Textfarbe, siehe dazu auch Header+Footer anpassen. Dies ändere ich jeweils in den entsprechend gewählten Blöcken der Vorlagen Header+Footer.
Auf der vorliegenden Site haben wir einen Header + Footer der nicht von den Farbvorgaben des Themes gestillt wird. Wir haben die entsprechenden Blöck im Header + Footer mit den entsprechenden Farben versehen (Hintergrund=Schwarz, Text- und Iconfarbe=Orange).
Für die Typografie Farbe sind die 6 individuellen Farben(Orange, Green, Red, Blue, Skyblue, Gold), die aufgeführt sind sehr hilfreich, weil sie so auf einfache Weise zur Verwendung gewählt werden können.
Layout
Exkurs rem=r(wie root)+em: Die Einheit Pixel ist nicht flexibel. 16 Pixel sind immer 16 Pixel, ganz gleich, was um sie herum passiert.
Wenn jemand in seinem Browser die Schriftgröße verändert, weil er alles ein bisschen größer sehen möchte, reagieren Texte, bei denen die Schriftgröße in Pixel angegeben ist, nicht auf diese Einstellung. Ist die Schriftgröße in em oder rem angegeben, skaliert der Text. Die Einheit rem bezieht sich auf das html-Root-Element, em bezieht sich auf den nächsthöheren Container.
Farben
ORANGE=#FFA500
GREEN=#008000
RED=#FF0000
BLUE=#0000FF
SkyBlue=#87CEEB
Gold=#FFD700
Für die Farben wählen wir die Palette Standard und für Spezialitäten nehmen wir die 6, neben stehenden, individuellen Farben.
Für die Textfarbe von Header + Footer nehmen wir Orange, dies müssen wir in der Block-Ebene der beiden Vorlagen anpassen. Dazu navigieren wir im Dashbord in den Site-Editor. Dort passen wir die Blöcke Zeile und Icon-List mit der entsprechenden Textfarbe an.
Typografie
Für die Typografie nehmen wir Vollkorn(2Varianten) & Fira Code, das entspricht der 4-ten Auswahl in der Typografie, des TT5 Theme. Dann stellen wir für Texttypen Text, Überschriften und Beschriftungen Vollkorn ein.
