Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

---

Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

---

Werbung

Einfach und intuitiv –
Der Classic-Editor für alle.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

---

Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

---

Inhaltsseite Hintergrund farbig. Folgende Auszeichnungen gehen über CSS Stylesheet Editor. So der Beitrag hier sehr an mühselig scheint, so erfüllt das des Grundlegenden und eventuell ist das gleich zu finden, welches gesucht ist.

• Für Auszeichnungen mehrere Seiten-IDs Body ist aber die Version CSS-Style Body über "Individuelle Felder" die elegante Form.

Dieser Beitrag zeigt Lernschritt, dessen es mir damals zur Auffassung gereichte. – am gescheitesten ist, dem Artikel hier zu folgen CSS Selektor finden. So ist das viel einfacher zu eruieren als die des Themes style.css in einem Texteditor zu öffnen und des Stylesheet mit Suchen der Begriffe zu finden oder im Netz zu recherchieren. Im Weiter ist dann in der style.css viel leichter zu finden. Das hier ist so mit Theme Twenty Fourtenn, aber einfacheren Themes ist das mit #content.site-content {background-color: #fffedc;} schon okay.

So wie das Stylesheet allein hier diesem Beitrag zu sehen ist, das folgt der Aufgabenstellung: Inhaltsbereich und das Drumherum farbig.

/* Inhaltsbereich und das Drumherum farbig.  */
/*Titelheader*/
#post-5039 .entry-header {
    background-color: #fffedc;
}
/* Meta */
#post-5039 .entry-meta {
    background-color: #fffedc;
}
/* Inhaltsbereich */
#post-5039 .entry-content {
    background-color: #fffedc;
}
/* Inhaltsbereich schmaler Rand zu den Widgets */
#post-5039 {
    background-color: #fffedc;
}
/* Lesemodus Rand, spez. Lesemodus */
body.postid-5039 #content.site-content {
    background-color: #fffedc;
}

Zum letzten Styles von body.postid-5039 ist anzumerken, dass dieser Form das nicht mit postid-5039 oder postid-id-5039 funktionell würde.

Lernschritt zur Theme CSS

Der Aufgabe hier dem Hintergrund von Farbgebung usw.

Seite/Beitrag Inhaltsseite Hintergrund farbig

Hierzu eignet sich wiederum der CSS Stylesheet Editor.

Selektoren können einfach über Dashboard/Design/Editor/Template/Stylesheets/ Stylesheet (style.css) eruiert werden, evtl. diese in einen Code Editor kopieren (z. B. "Textastic Code Editor" von Alexader Blach, App Store).

• Video Tipp: HTML- und CSS-Elemente schnell im Browser kontrollieren

Hinweis zur ID: Die Seiten-ID erhält man durch entsprechenden Seitenaufruf „Bearbeiten“ bzw. „Seite bearbeiten“ und anschließenden Click in die Adresszeile. Am Ende jener URL ist eine Nummer (…post=746&action=edit), welche die Seiten-ID ist. – Durch Plugin Reveal IDs können die IDs angezeigt werden, diese ist bei Abruf Dashboard/Seite/Alle Seiten, Beiträge/Alle Beiträge und Kategorien dann zu sehen.

Für eine bestimmte Website (also mit ID-Selektor) setzt sich die Syntax wie folgt zusammen:

• Seiten oder Beiträge/Seiten ID, erster Selektor
• Breich von Body der Website, zweiter Selektor
• und { CSS Eigenschaften } (Attribut mit Attributwert)

Seiten-ID mit CSS-Selektor für Auszeichnung einzelner Seiten/Beiträge

Styles für "Seiten":

/*Seite, Hintergrund, rundherum Inhalt*/
 .page-id-123 #page {
 background-color: #ececec;
 }
 /*Linke Seitenleiste, Bereich unter sekundärem Menü*/
 .page-id-123 .site:before {
 background-color: #ececec;
 }
 /*Bereich "Sekundärs Menü"*/
 .page-id-123 #secondary {
 background-color: #ececec;
 }
 /*Header (Primäres Menü)*/
 .page-id-123 .site-header {
 background-color: #ececec;
 }
 /*Header, Suche*/
 .page-id-123 .search-toggle {
 background-color: #ececec;
 }

Seiten, Inhaltsbereich Seitenhintergrund mitsamt Überschrift:

/*Seite, Hintergrund, Inhaltsbereich*/
 .page-id-123 .entry-content {
 background-color: #ececec;
 }
 /*Seite, Hintergrund, Titel*/
 .page-id-123 .entry-title {
 background-color: #ececec;
 }
 /*Seite, Hintergrund, Titelheader*/
 .page-id-123 .entry-header {
 background-color: #ececec;
 }

Inhaltsbereich Beiträge, Überschrift ohne Hintergrund, so die Farbe sonst auch bei "Hervorgehobene Inhalte" im Raster/Slider (Startseite) dargestellt ist:

/*Beiträge, Hintergrund Beitrag, Inhaltsbereich*/
 .post-321 .entry-content {
 background-color: #ececec;
 }

Inhaltsbereich Beiträge und Überschrift mit Hintergrund:

/*Beitrag, Hintergrund, Inhaltsbereich*/
.post-321 .entry-content {
 background-color: #ececec;
 }
 /*Beitrag, Hintergrund, Titel*/
.single #post-321 .entry-title {
 background-color: #ececec;
 }
 /*Beitrag, Hintergrund, Titelheader*/
.single #post-321 .entry-header {
 background-color: #ececec;
 }
/*Beitrag, Hintergrund, .entry-meta*/
.single #post-321 .entry-meta {
 background-color: #ececec;
}

Hinweis Theme Twenty Fourtenn: Dass die Hintergrundfarbe in "Hervorgehobene Inhalte" im Raster/Slider (Startseite) nicht dargestellt ist, gehört dies extra mit .single  notiert.

Header-Bild auf bestimmten Seiten ausblenden:

Wo das Headerbild die Seite überladet oder unpassend wirkt, mit folgenden Code das Headerbild ausgebleden:

/*Header-Bild ausblenden, Beispieltitel*/
.page-id-123 #site-header img {
 display: none;
}

Für weitere Kreativität (hier ohne Angabe spezifischer Seite):

/*Inhaltsseitenleiste allein, rechts (diese mit #page ohnehin mit angesprochen würde)*/
 .content-sidebar {
 background-color: #ececec;
 }

Die gesamten Inhaltsseitenleisten und Drumherum den farbigen Bereich auch wie beim "Sekundäres Menü" (z. B dort durch den Code .site:before für linke Seitenleiste) geradlinig fortlaufen zu lassen, in Einem:

.site {
background-color: #a4d3ee;
}

Und z. B. ohne Egebnis:

 Hintergrund, ohne Ergenis:
.page-id-444 {
background-color: #f7f7f7;
}

Also in Zusammenfassung: wobei für jede Seite der zweite Selektor (erster Selektor die spezifische Seite mit Seiten-ID und zweiter Selektor das Element für einen bestimmten Bereich), separat durch den ersten Selektor mit Seiten-ID angeführt werden möchten. Das Attribut jedoch (die CSS-Eigenschaft) mit dem Attributwert für alle Selektoren selber ID und verschiedene IDs gilt (s. auch Kurzform folgenden Beispiels).

Beispiel von zwei Seiten, jeweils eigenen zweiten Selektor und gemeinsames  Attribut:

/*---Hintergrund, Inhalt Gesamtbereich, Zusammenfassung---*/
 /*Beispieltitel für erste Seiten-ID*/
 .page-id-123 #page,
 .page-id-123 .entry-content,
 .page-id-123 .entry-title,
 .page-id-123 .entry-header
 .page-id-123 .site:before, 
 .page-id-123 #secondary,
 .page-id-123 .site-header,
 .page-id-123 .search-toggle {
 background-color: #efefef;
 }

/*Beispieltitel für zweite Seiten-ID*/
 .page-id-456 #page,
 .page-id-456 .entry-content,
 .page-id-456 .entry-title,
 .page-id-456 .entry-header,
 .page-id-456 .site:before, 
 .page-id-456 #secondary,
 .page-id-456 .site-header,
 .page-id-456 .search-toggle {
 background-color: #efefef;
 }

Nun das Beispiel in kürzerer Form für zwei verschiedene Seiten-IDs mit zweiten Selektor (deren Zahl hier vier) und ein gleiches Attribut.

Beispiel von zwei Seiten wiederum einem Attribut:

/*Beispieltitel für verschiedene Seiten-IDs und ein gleiches Attribut*/
 .page-id-123 #page,
 .page-id-456 #page,
 .page-id-123 .entry-content,
 .page-id-456 .entry-content,
 .page-id-123 .entry-title,
 .page-id-456 .entry-title,
 .page-id-123 .entry-header,
 .page-id-456 .entry-header {
 background-color: #efefef;
 }

Seiten-ID  entsprechend und Farbnummern individuell,
Anmerkung: Attribute können mehrere angefügt werden.

Welches der beiden Versionen sympathischer ist, ist individueller Abstimmung.

Hinweise:

• Gruppieren von Selektoren

Der Auszeichnung mehrerer spezifischer Seiten Body gibt es elegantere Version, siehe eingangs (ganz oben) Hinweis.

CSS-Selektoren (ohne ID-Selektor) für Auszeichnung Sektoren (Bereiche)

• Einzelne Beiträge,
• Kategorie-Archiv,
• Schlagwort-Archiv (Tag) und Blog (Startseite Beiträge),
• Suchergebnissen und error404 (Seite wurde nicht gefunden …),
• Headerleiste durchsichtig,
• Fußleiste,
• Site-Info (Stolz präsentiert von WordPress) andere Farbe zuweisen,
• Portfolio,
• Spezifische Kategorien Body separate Farbe.

Der Website fabige Unterscheidung von Seiten, Beiträge (Kategorie-Archiv und Schlagwort-Archiv) usw. eine gestalterische Möglichkeit darstellt, so Fußleiste mit Farbverlauf, zum Beispiel:

/*---Einzelne Beiträge, Kategorie-Archiv, Schlagwort-Archiv (Tag) und Blog (Startseite Beiträge) eine Farbe zuweisen---*/

/*Einzelne Beiträge, Bereich „Sekundärs Menü“*/
.single #secondary {
background-color: #ececec;
}
/*Einzelne Beiträge, Breich unter "Sekundäres Menü"*/
.single .site:before {
background-color: #ececec;
}
/*Einzelne Beiträge, Header Menü (Primäres Menü)*/
.single .site-header {
background-color: #ececec;
}
/*Einzelne Beiträge, Fußleiste mit Farbverlauf*/
.single .site-footer {
background: -webkit-gradient(linear,0 0,0 100%,from(#ececec),to(#f5f5f5));
background: -moz-linear-gradient(top,#ececec,#f5f5f5);
}
/*Kategorie-Archiv, Bereich „Sekundärs Menü“*/
.archive #secondary {
 background-color: #ececec;
}
/*Kategorie-Archiv, Breich unter "Sekundäres Menü"*/
.archive .site:before {
 background-color: #ececec;
}
/*Kategorie-Archiv, Header Menü (Primäres Menü)*/
.archive .site-header {
 background-color: #ececec;
}
/*Kategorie-Archiv, Fußleiste mit Farbverlauf*/
.archive .site-footer {
 background: -webkit-gradient(linear,0 0,0 100%,from(#ececec),to(#f5f5f5));
 background: -moz-linear-gradient(top,#ececec,#f5f5f5);
}
/*Schlagwort-Archiv (Tag), Bereich „Sekundärs Menü“*/
.tag #secondary {
 background-color: #ececec;
}
/*Schlagwort-Archiv (Tag), Bereich unter "Sekundäres Menü"*/
.tag .site:before {
 background-color: #ececec;
}
/*Schlagwort-Archiv (Tag), Header Menü (Primäres Menü)*/
.tag .site-header {
 background-color: #ececec;
}
/*Schlagwort-Archiv (Tag), Fußleiste mit Farbverlauf*/
.tag .site-footer {
 background: -webkit-gradient(linear,0 0,0 100%,from(#ececec),to(#f5f5f5));
 background: -moz-linear-gradient(top,#ececec,#f5f5f5);
}
/*Blog (Startseite Beiträge), Bereich „Sekundärs Menü“*/
.blog #secondary {
 background-color: #ececec;
}
/*Blog (Startseite Beiträge), Bereich unter "Sekundäres Menü"*/
.blog .site:before {
 background-color: #ececec;
}
/*Blog (Startseite Beiträge), Header Menü (Primäres Menü)*/
.blog .site-header {
 background-color: #ececec;
}
/*Blog (Startseite Beiträge), Fußleiste mit Farbverlauf*/
.blog .site-footer {
 background: -webkit-gradient(linear,0 0,0 100%,from(#ececec),to(#f5f5f5));
 background: -moz-linear-gradient(top,#ececec,#f5f5f5);
}

/*---Ende. Einzelne Beiträge, Kategorie-Archiv, Schlagwort-Archiv (Tag) und Blog (Startseite Beiträge) eine Farbe zuweisen. Ende---*/

Das Headerbild ausblenden für Einzelne Beiträge, Kategorie-Archive, Schlagwort-Archiv (Tag) und Blog (Startseite Beiträge):

/*Header-Bild ausblenden für Einzelne Beiträge, Kategorie Archive, Schlagwort Archiv (Tag) und Blog (Startseite Beiträge)*/
.single #site-header img {
 display: none;
}
.archive #site-header img {
 display: none;
}
.tag #site-header img {
 display: none;
}
.blog #site-header img {
 display: none;
}

Das Header-Menü ausblenden (nicht den Header) in Einzelne Beiträge, Kategorie-Archive, Schlagwort-Archiv (Tag) und Blog (Startseite Beiträge) sowie in Suchergebnissen:

/*"Header-Menü" in Einzelne Beiträge, Archive, Tag und Blog sowie in Suchergebnissen ausblenden*/
.single .primary-navigation, .archive .primary-navigation, .tag .primary-navigation, .blog .primary-navigation, .search .primary-navigation {
 display: none;
}

Der Body Website, Suchergebnisse und error404 (Seite wurde nicht gefunden… ) eine Farbe zuweisen + Header-Bild ausblenden:

/*Body Website, Suchergebnisse eine Farbe zuweisen + Header-Bild ausblenden*/
.search #secondary, .search .site:before, .search .site-header {
 background-color: #ffc086;
}

.search .site-footer {
 background: -webkit-gradient(linear,0 0,0 100%,from(#ffc086),to(#f5f5f5));
 background: -moz-linear-gradient(top,#ffc086,#f5f5f5);
}

.search #site-header img {
 display: none;
}

/*Body Website error404 eine Farbe zuweisen + Header-Bild ausblenden*/
.error404 #secondary, .error404 .site:before, .error404 .site-header {
 background-color: #3A9BB2;
}

.error404 .site-footer {
 background: -webkit-gradient(linear,0 0,0 100%,from(#3A9BB2),to(#3EA6BF));
 background: -moz-linear-gradient(top,#3A9BB2,#3EA6BF);
}

.error404 #site-header img {
display: none;
}

Wenns gefällt, die Headerleiste durchsichtig gestalten, z.B.:

/* Header, durchsichtig */
.site-header {
 background-color: rgba(201,235,255,0.8);
}

Allerdings sollten betreffender Seiten dann auch die anderen Auszeichnungen auf durchsichtig angepasst werden, denn sonst Farbunterschied besteht.

Fußleiste:

/* Fußleiste */
 .site-footer {
 background-color: #ececec;
 }

und zum Beispiel:

/*Fußleiste mit Farbverlauf*/
 .site-footer {
 background: -webkit-gradient(linear,0 0,0 100%,from(#a4d3ee),to(#f5f5f5));
 background: -moz-linear-gradient(top,#a4d3ee,#f5f5f5);
 }

• Hintergrund-Verläufe mit CSS3

Site-Info (Stolz präsentiert von WordPress) andere Farbe zuweisen:

/*Site-Info WordPress*/
 .site-info > a {
 color: #6f6f6f;
 }

Des Weiteren im Beitrag, Fußzeile Textfarbe und Text (.site-info).

Beispiel Portfolio mit "!important-Regel": Portfolios ist automatisch der Beiträge individuelles fabiges Design und Schriftgestaltung zugewiesen (sowie Headermenü und Headerbild ein- oder ausgeblendet ist gleich Beiträgen eingestellt).

Mit folgenden Codes und "!important-Regel" wird für Portfolio das Headermunü wiederum eingeblendet nachdem es für Beiträge ausgeblendet wurde und eine farbliche Unterscheidung des Body Website designiert. Der Selektor heißt für Plug-in "Portfolio Post Type" .single-portfolio und Beispiels für WP-Jetpack Portfolio hieße der Selektor .single-jetpack-portfolio

/*Headermenü für Portfolio einblenden*/
.single-portfolio .primary-navigation {
 display: block !important;
}
/*Body Website Portfolio eine Farbe zuweisen*/
.single-portfolio .site-header, .single-portfolio #secondary, .single-portfolio .site:before {
 background-color: #c9ebff !important;
}

.single-portfolio .site-footer {
 background: -webkit-gradient(linear,0 0,0 100%,from(#c9ebff),to(#f5f5f5)) !important;
 background: -moz-linear-gradient(top,#c9ebff,#f5f5f5) !important;
}

Zusammen Seiten und Portfolio den Suche-Button ausblenden, weil dessen eigene Suche über Plug-in WP Ajax Search Widget zugewiesen wurde, also:

/*Search Button für "Seiten" und "Portfolio" ausblenden*/
.page .search-toggle, .single-portfolio .search-toggle {
 display: none;
 }

😉 Designidee, z. B.:  Portfolio Headerleiste durchsichtig:

/*Portfolio Header, durchsichtig*/
.single-portfolio .site-header {
 background-color: rgba(201,235,255,0.8) !important;
}

Ebd. das !important ist hier im speziellen für Portfolio, weil es sich ansonsten gemäß der Auszeichnung der Beiträge darstellt.

Spezifische Kategorien Body separate Farbe

Siehe bitte Beitrag: Vorheriger/Nächster Beitrag gleicher Kategorie und CSS Style

"… farbiges Styling", wie ich es teils im CSS Stylesheet Editor gespeichert hatte:

/*---Body Website Einzelne Beiträge, Kategorie-Archiv, Schlagwort-Archiv (Tag) und Blog (Starseite Beiträge) Farbe zuweisen, Header-Bild + Header-Menü ausblenden; Portfolio Farbe zuweisen; Suchergebnisse und error404 Farbe zuweisen---*/

/*Body Website Einzelne Beiträge, Kategorie-Archiv, Schlagwort-Archiv (Tag) und Blog (Starseite Beiträge) Farbe zuweisen*/
.single #secondary, .single .site:before, .single .site-header, .archive #secondary, .archive .site:before, .archive .site-header, .tag #secondary, .tag .site:before, .tag .site-header,  .blog #secondary, .blog .site:before, .blog .site-header {
 background-color: #ececec;
}

.single .site-footer, .archive .site-footer, .tag .site-footer, .blog .site-footer {
 background: -webkit-gradient(linear,0 0,0 100%,from(#ececec),to(#f5f5f5));
 background: -moz-linear-gradient(top,#ececec,#f5f5f5);
}

/*Header-Bild ausblenden für Einelne Beiträge, Archive, Tag und Blog*/
.single #site-header img, .archive #site-header img, .tag #site-header img, .blog #site-header img {
 display: none;
}

/*Header-Menü ausblenden für Einelne Beiträge, Archive, Tag und Blog ausblenden*/
.single .primary-navigation, .archive .primary-navigation, .tag .primary-navigation, .blog .primary-navigation {
 display: none;

/*Body Website, Suchergebnisse eine Farbe zuweisen + Headerbild ausblenden*/
.search #secondary, .search .site:before, .search .site-header {
 background-color: #ffc086;
}

.search .site-footer {
 background: -webkit-gradient(linear,0 0,0 100%,from(#ffc086),to(#f5f5f5));
 background: -moz-linear-gradient(top,#ffc086,#f5f5f5);
}

.search #site-header img {
 display: none;
}

/*Body Website error404 eine Farbe zuweisen + Headerbild ausblenden*/
.error404 #secondary, .error404 .site:before, .error404 .site-header {
 background-color: #3A9BB2;
}

.error404 .site-footer {
 background: -webkit-gradient(linear,0 0,0 100%,from(#3A9BB2),to(#3EA6BF));
 background: -moz-linear-gradient(top,#3A9BB2,#3EA6BF);
}

.error404 #site-header img {
 display: none;
}

/*Portfolio, Body Website eine Farbe zuweisen*/
.single-portfolio .site-header, .single-portfolio #secondary, .single-portfolio .site:before {
 background-color: #c9ebff !important;
}

.single-portfolio .site-footer {
 background: -webkit-gradient(linear,0 0,0 100%,from(#c9ebff),to(#f5f5f5)) !important;
 background: -moz-linear-gradient(top,#c9ebff,#f5f5f5) !important;
}
/*---Ende. Body Website Einzelne Beiträge, Kategorie-Archiv, Schlagwort-Archiv (Tag) und Blog (Starseite Beiträge) Farbe zuweisen, Header-Bild + Header-Menü ausblenden; Portfolio Farbe zuweisen; Suchergebnisse und error404 Farbe zuweisen. Ende---*/

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 April