Anklickt! â Advanced Editor Tools; und NEU! â Classic Widgets
Anklickt! â Advanced Editor Tools; und NEU! â Classic Widgets
Anklickt! â Advanced Editor Tools; und NEU! â Classic Widgets
Anklickt! â Advanced Editor Tools; und NEU! â Classic Widgets
Anklickt! â Advanced Editor Tools; und NEU! â Classic Widgets
Anklickt! â Advanced Editor Tools; und NEU! â Classic Widgets
Anklickt! â Advanced Editor Tools; und NEU! â Classic Widgets
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
- 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, 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