Body Website sowie Inhaltsseite Hintergrund farbig (Tag CSS)

Folgende Auszeichnungen gehen über CSS Stylesheet Editor. Für grundlegende Auszeichnungen auch ein Ideal, für Auszeichnungen mehrere Seiten-IDs Body ist aber die Version CSS-Style Body über „Benutzerdefinierte Felder“ die elegante Form.

Der Website und/oder der Inhaltsseite für Seite/Beitrag individuellen farbigen Hintergrund zuweisen

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

Hinweis Seiten-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 sind die IDs angezeigt, bei Abruf Dashboard/Seite/Alle Seiten, Beiträge/Alle Beiträge und Kategorien, Portfolio* Alle Projekte und Projektarten.

*Portfolio hier durch Plug-in „Portfolio Post Type“.

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

Body 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

Hinweis: Dass die Hintergrundfarbe in „Hervorgehobene Inhalte“ im Raster/Slider (Startseite) nicht dargestellt ist, gehört dies extra mit .single annotiert:

/*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;
}
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;
 }

Hinweis: Der Inhaltsseitenleiste (rechts) den farbigen Bereich wie beim „Sekundäres Menü“ (z. B dort durch den Code .site:before für linke Seitenleiste) geradlinig fortlaufen zu lassen ist mir nicht gelungen.

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

Welches der beiden Versionen sympathischer ist, ist individueller Abstimmung. Der betreffenden Seiten eigenen Überschriften für den CSS Stylesheet Editor hat das seine.

Hinweise:

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.

* via Plugin WP-Jetpack; Portfolio auf meiner Website im Begriff DIALOGMAPPE

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---*/
Headerbild ausblenden

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;
}
Header-Menü ausblenden

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;
}
Suchergebnisse und error404

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;
}
Headerleiste durchsichtig

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);
 }
Site-Info (Stolz präsentiert von WordPress) andere Farbe zuweisen
/*Site-Info WordPress*/
 .site-info > a {
 color: #6f6f6f;
 }

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

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


Vorhergehendes, „… farbiges Styling“, wie ich es teils im CSS Stylesheet Editor gespeichert habe:

Das ist alles in allem Auszeichnung im CSS Styleshead Editor.

Schreibe einen Kommentar

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