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.
Dieser Beitrag zeigt Lernschritt, dessen es mir damals zur Auffassung gereichte. – am gescheitesten ist, die des Themes style.css in einem Texteditor zu öffnen. – und des Stylesheet mit Suchen der Begriffe zu finden.
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*/
.single #post-5039 .entry-header {
background-color: #fffedc;
}
/*Meta*/
.single #post-5039 .entry-meta {
background-color: #fffedc;
}
/*Inhaltsbereich*/
.post-5039 .entry-content {
background-color: #fffedc;
}
/*Rand vom Inhaltsbereich*/
.single #post-5039
{background-color: #fffedc;}
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;
}
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 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:
Auszug:
/*---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---*/
Das ist alles in allem Auszeichnung im CSS Styleshead Editor.