Willkommen beim Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten BeitrĂ€ge und genieße den Lesemodus.

Inhaltsseite Hintergrund farbig. – geht ja

Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und 

"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7


 die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6


 und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

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

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

Lernschritt zur Theme CSS

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

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.


Aktualisiert im Jahr 2022-April