Du möchtest ein Element einer speziellen Seite ändern? In diesem Video zeige ich Dir, wie Du herausfindest, welchen CSS-Code Du im Customizer eingeben musst, um Dein Design ein wenig anzupassen. Das ist gar nicht so schwer – probier’s einfach mal aus! In vier aufeinander aufbauenden Abschnitten erkläre ich dir, wie’s geht:
Zunächst erkläre ich Dir kurz,
- welche »Selektoren« es in CSS gibt (ab 2:58). Keine Sorge: das klingt nur »nerdig«, ist aber eigentlich ein sehr logisches Konzept, das Du kennen solltest, wenn Du mit CSS arbeitest. Hier die Tabelle, die ich im Video zeige:
CSS-Selektoren
Selektorart | Beispiele | Besonderheit |
---|---|---|
HTML-Element / Tag | p, h1, img, aside | Elementselektoren sind Teil der HTML-Spezifikation und können daher nicht selbst vergeben / benannt werden |
Klasse | .post, .zitat | Klassen können selbst vergeben / benannt werden und dürfen beliebig oft pro HTML-Seite eingesetzt werden |
ID | #content, #vorlauftext | IDs können selbst vergeben / benannt werden und dürfen nur ein einziges Mal pro HTML-Seite eingesetzt werden |
Anschließend lernst Du,
- wie Du den Footer und den Footer-Text auf allen Seiten umfärbst (ab 5:40)
- wie Du den Header auf einer einzigen Seite umfärbst (ab 14:50)
- wie Du die Überschrift eines Blogbeitrages stylst (ab 22:40)
Hier der CSS-Code, den ich im Tutorial entwickle:
/* gilt fuer alle Seiten und Beitraege */ #colophon { background: lightgray; } #colophon .site-info { color: white; } /* gilt nur fuer Blog-Seite */ .blog .site-header { background: lightgray; } /* gilt nur fuer einen bestimmten Beitrag */ .post-1031 .entry-title { color: lightgray; text-transform: uppercase; }
Hier die erwähnten Tools, die ich neben WordPress und Firefox im Videotutorial nutze:
- wptest.io – Umfangreicher Dummycontent zum Testen von WordPress-Seiten
- local by Flywheel – Gratissoftware zum lokalen Entwickeln von WordPress-Seiten auf eigenem Rechner. Du findest auf meinem Blog unter WordPress lokal installieren – mit local by flywheel einen Beitrag, in dem ich erkläre, wie Du diese tolle Software einsetzen kannst.
Hilft Dir das Video und die Infos darin? Ich freue mich über jeden Kommentar!