Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
smilies.4-user.de

WordPress Twenty Fourteen
in F A R B E. – so perfekt

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

Dem WordPress Twenty Fourteen Theme sind über Customizer zwei Farbwähler. Das ist für die Farbe des Titels der Website und die Hintergrundfarbe, welche auf größeren Bildschirmen sichtbar ist. Weiter gibt es das Plug-in 'Fourteen Colors' und hiermit sind dem Theme ganz einfach andere Farben zu geben. Das Drumherum ist hier kurz erläutert. Also das Farbschema der Website anpassen. So perfekt wie selbst gemacht.

Plug-in Fourteen Colors

Der Installierung und Aktivierung des Plug-ins Fourteen Colors siehe dann Dashboard / Design / Customizer → „Farbe".

Nun erst mal der Unterscheidung, das ohne und mit dem Plug-in 'Fourteen Colors'. Links des Bilds wie von Haus aus ist und rechts mit Plug-in Fourteen Colors.

Im Bild ist zu sehen, dass in Aktivierung des Plug-ins nicht mehr die Auswahl zur 'Farbe des Titels der Website'. Jedoch sind dann Akzentfarbe, Kontrastfarbe und gleich wie ohne den Plug-in die Hintergrundfarbe. Das ohne 'Farbe der Website Titel ist aber gegeben, da sich durch die Kontrastfarbe die Textfarbe des Webseitentitels und der Widgets ergibt.

  • Die Akzentfarbe ist das für die Links, Suchmaske und der Text-Auswahl.
  • Die Kontrastfarbe, das sind die Farben von Kopf und linke Seitenleiste, der Body. So der Kontrastfarbe folgt die Textfarbe vom Titel der Website und der Widgets.
  • Das mit der Hintergrundfarbe ist dann ein Teil des Designs direkt vom Theme.

Text-Auswahl / Markierungsfarbe

Die Auswahl von Text ist gemeint, um das dann zu kopieren oder sich vorlesen zu lassen.

Wenn die Text-Auswahl / Markierungsfarbe anders sein soll, wie es sich ergibt, so ist im Customizer oder des Childs-Theme style.css das anzupassen.

Farbe von markiertem Text mit CSS anpassen.

::selection {background: #88b9b9; color: #ffffff;}
::-moz-selection {background: #88b9b9; color: #ffffff;}

Weiteres zur Nachlese im Titel Farben für das WordPress Theme “Twenty Fourteen” anpassen.

Etwas Fachsimpel

Hat sich das Farbschema der Website gefestigt, könnte man über die HTML-Ansicht der Website alleinig die Inline-CSS-Codes herausnehmen. Also die Inline-CSS-Codes resultierend aus dem Plug-in "Fourteen Colors" sind so aus dem Seitenquelltext (Maustaste rechts und Seitenquelltext anzeigen) zu kopieren. Das ist im Customizer oder besser im Childs-Themes style.css abzuspeichern.

Über Customizer folgen die CSS-Codes auch Inline, also im Seitenquelltext sichtbar. Oder der Variation über Childs-Theme, das wird aus der Datei abgerufen und in den Browser übertragen. Hiermit von einer Variation ist das Plug-in "Fourteen Colors" hinfällig, deaktiviert und gelöscht sein kann. Aber das von Inline usw. wird normalerweise über das Plug-in Autoptimize gesteuert.

Anmerkung: Die Codes aus dem Inline-CSS kopieren und direkt in die Theme style.css anfügen funktioniert, nicht. Hierzu müsste man sich die Mühe geben, allesamt Auszeichnungen direkt im Theme zu ändern.

Farbtabellen

Farbtabelle – Farbtafel – Farbcodes (mit CSS3 Farbname)
Colours dto. HTML Color Codes
Farbtabelle.at (Websichere Farben; Geschiche)

… und Tool zum Finden von Farbharmonien: Farbrad / Farbschemata (Adobe Color).


Aktualisiert im Jahr 2022-Mai