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

SelektorartBeispieleBesonderheit
HTML-Element / Tagp, h1, img, asideElementselektoren sind Teil der HTML-Spezifikation und können daher nicht selbst vergeben / benannt werden
Klasse.post, .zitatKlassen können selbst vergeben / benannt werden und dürfen beliebig oft pro HTML-Seite eingesetzt werden
ID#content, #vorlauftextIDs 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:

Hilft Dir das Video und die Infos darin? Ich freue mich über jeden Kommentar!

Ähnliche Beiträge

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert