Im Allgemeine

Im Allgemeine funktioniert das so, dass (1) das beabsichtigte Element mit der rechten Maustaste anzuklicken ist und dann ‘Untersuchen’. Siehe Bild rechts.

(2) In der Regel wird das richtige Element unter Elemente anvisiert und es ist zu sehen.

Weiteres (3) ist unter “Formatvorlagen” oder Browser-Safari in namens “Stile” zu sehen bspw von border.

Im Mouseover der Elemente finden

(1) ‘F12’ für Windows / Mac ‘fn+F12’,

(2) Symbol anklicken und in die Website klicken.

Dasselbe in einem

Des nun folgenden Modus geht aber auch in einem also ohne (1 u. 2) mit ‘Strg+Shift+C’ für Windows / Mac ‘cmd+Shift+C’. Daher beides ob ‘F12’ und Symbol oder allein mit ‘Strg+Shift+C’ für Windows / Mac ‘cmd+Shift+C’ öffnet in einen speziellen Modus.

(3) Durch Mouseover von Elementen der Website zeigt das, was da zu finden ist.

(4) Weiter ist das der Formatvorlagen bspw von border zu sehen.

Das Suchen direkt unter Elemente

Wer gut im HTML lesen,
ist das auch unter Elemente zu suchen

(1) ‘F12’ für Windows / Mac die Tasten ‘fn+F12’.

(2) Auf Elemente klicken.

(3) Das Suchfeld öffnen, ‘Strg+F’ für Windows / Mac ‘cmd+F’

(4) Und so direkt im Quelltext suchen.

Das erleichtert die Suche bspw nach dem Klassenselektor .widget-title und so ist dann auch der ID-Selektor zu finden. Im Anklicke der Pfeile neben dem Suchfeld rechts ist zum nächst .widget-title zu springen.

Andersrum wie dem folgenden Beispiel den Titel des Widgets eingeben und so ist beides zu finden.

Beispiel

So ist hier der Aufgabe allein des Statify-Widgets den Titel samt Balken die Farbe anzupassen.

‘F12’ oder so ‘fn+F12’, dann in Elemente klicken und mit ‘Strg+F’ für Windows / Mac ‘cmd+F’ das Suchfeld öffnen.

(1) Des Widgets Titel eingeben und nach Enter ist

(2) das Ergebnis. Und zu finden ist

(3) der ID-Selektor und

(4) der Klassenselektor.

Raute # = ID-Selektor #statifywidget-4
Punkt . = Class-Selektor .widget-title

Der Erfolg

#statifywidget-4 .widget-title {
border-color: #ff6600;
color: #ff6600;
}

Des Beispiels ist dasselbe
unter ‘Seitenquelltext anzeigen’

1. Mit Rechtsklick in die Website und ‘Seitenquelltext anzeigen’.
2. Das Suchfeld öffnen und des Suchbegriffs wie hier ‘populäre inhalte’ ist zu sehen.

Übungen

Zum Beispiel drei so Aufgaben …

Erste Aufgabe

Das Widget ‘Suche’ ist im Titel “Begriffssuche”. Dort soll nun die Farbe des Titel geändert werden. Hierzu braucht es des Elements der Selektoren.

Im Beispiel ist das Twenty Fourteen Theme.

Browser Chrome

Des bspw machen wir das mit “Strg+Shift+C” für Windows, am Mac “cmd+Shift+C”. So erscheint das Entwickler-Werkzeug. Dann 1-mal auf oder so unter den Widget-Titel “Begriffssuche” klicken.

Elementauswahl

Im Mouseover ist zu sehen:

Da oben ist der ID-Selektor #search-3 relevant und folgend der Klassenselektor .widget-title

Raute # = ID-Selektor
Punkt . = Class-Selektor

Das Ergebnis, die Selektoren, die Eigenschaft und der Wert

#search-3 .widget-title {
color: cyan;
}

Und ferner des Beispiels

… weiter Mouseover dann mit ID-Selektor #footer-sidebar sind im Footer alle Widget-Title.

#footer-sidebar .widget-title {
color: cyan;
}

Zweite Aufgabe

Von Widget ist dem Balken und der Überschrift die Farbe zu ändern. Also braucht es die Selektoren von CSS. Hier im Beispiel mit Browser Safari.

Im Beispiel ist das Twenty Fourteen Theme.

Browser Safari

Das anvisierte Element anklickt der Maustaste rechts und dann klick auf ‘Element-Informationen’.

Browser Safari der Taskleiste Entwickler

• Der Taskleiste bedarf es von Entwickler, das ist erst mal unter Safari, Einstellungen → Erweitert und dort das Häkchen bei “Menü ‘Entwickler’ in der Menüleiste anzeigen”.

Elementauswahl starten

Browser Safari, Menüleiste → Entwickler. Mit “Elementauswahl starten” ist dann im Mouseover der Seitenleiste zu sehen. Zuerst ist der Website die Seitenleiste zu Mouseovern.

Im Ersten ist da obig das mit dem ID-Selektor #content-sidebar welches wir brauchen.

Im nächst Mouseover ist zu sehen der Klassenselektor .widget-title

Die Selektoren, die Eigenschaft und der Wert

Die Deklaration für den Balken heißt border-color und der Überschrift color. Infolge das CSS:

#content-sidebar .widget-title {
border-color: #ff6600;
color: #ff6600;
}

Soweit allein mit drei Klassenselektoren und der Deklarationen. Das ist nur des bspw, weil von zwei Selektoren wie oben besser ist:

.content-sidebar .widget .widget-title {
border-color: #ff6600;
color: #ff6600;
}

Und bspw alle Widgets Seitenleiste links und Fußleiste der Titel die Farbe:

.widget-title {
color: #ff6600;
}

Dritte Aufgabe

WP-Polls, da ist ja unter dem Abstimmen-Button der Link zu den Ergebnissen und zurück. Der Link nun ( .wp-polls a) sollte auch so als Button sein. Vorerst ist der Selektor zu definieren.

Selektor finden

1. Den Link Ergebnisse (1) Rechsklick → Untersuchen

Die Browserkonsole öffnet und dort ist

2. Folgendes von Interesse

Das bei (2) ist nach Doppelklick auf href zu kopieren. Somit haben wir das Grundlegende href="#ViewPollResults".

Selektor dann CSS richtig

So ziemlich jeder a-Tag ist individuell zu gestalten. Einfach mit: a[href=""] oder wenn der Link besonders anfängt, bspw bei einem Beitrag: a[id^="post-"]

Das ^ steht dann für “fängt mit an”. Da geht einiges mit. Lese hier: https://www.w3schools.com/cssref/sel_attr_contain.asp. Funktioniert mit allen Attributen sowie oben auch mit dem href Attribut.

^{Pr. WP-Freund}

Somit heißt der Selektor: a[href="#ViewPollResults"].

Wie des WP-Polls das CSS weiter der Deklaration siehe evtl. zum Beitrag.

CSS direkt im Browser anpassen

So kann man dort das CSS bearbeiten und live sehen, wie sich die Website ändert. Das ist dasselbe wie der Customizer. So nun als Entwickler, um anderer Website das. Das ist sehr patentes Tool!

Das löschen von Cookies

Das kann im Test von Anwendung erforderlich sein.

Browser mit F12 zum Entwicklertool, also das Entwickler-Werkzeug öffnen. Siehe Screenshot des bspw Edge Browser von Microsoft.

(1) In Browser Edge Reiter ‘Anwendung’, Chrome und Safari Reiter ‘App’ und in Firefox Reiter ‘Web-Speicher’.

(2) dann unter Speicher → Cookies.

(3) und so die Cookies die da gesetzt sind.

Bild links: F12 und bspw in Chrome Entwickler-Werkzeug ist das mit den Cookies im Reiter App. Bild rechts: Ganz praktisch ist das in Browser Chrome und Opera mit den Cookies. Denn auch in der Adresszeile das Schlösschen klicken …

Berechnen

Das Entwickler-Werkzeug von Reiter ‘Berechnen’, wie das so von Nutzen sein kann.

• Kurz zum Verständnis siehe hier: books.google

Das sonst von Beschrieb …

• Firefox-Entwicklertools → Seiteninspektor
• Browser Werkzeug “Element untersuchen” u. a. das Merke …