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
Wird geladen ...