Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets
Das Browser Entwickler-Werkzeug ist jedem Browser. Jedoch der Beschrieb vom Entwickler-Werkzeug können sehr langwierig sein und so sind hier dem Beitrag die Anfänge zum Erfolg. Denn im Grunde sind CSS-Elemente und Selektoren eigenständig und schnell zu finden. Weiter kann man dort das CSS bearbeiten und live sehen, wie sich die Website ändert. Also ähnlich wie WordPress Customizer. Das alles ist bebildert, um das optimal zu verwenden. Aber zur Schlussfolgerung von Elementen und Selektoren braucht es auch der praktischen Erfahrung, um zu wissen, was man tut.
“Besucher bleib drauf!
– denn das ist der Einstieg zum Erfolg“
Browsers Entwickler-Werkzeug
Der Einführung nach ist auf die Sprünge zu kommen. So wie hier im Beschrieb ist das von WP-Freund die Basic samt Screenshots Edge Browser von Microsoft.
Für Interessierte ist das Punkt-um-Punkt mal durchzugehen und es so ein für alle Mal intus.
Tab 1: Das Allgemeine zur Wegleitung
Tab 2: Das in Übung von Aufgaben
Tab 3: Das separat löschen von Cookies
Tab 4: Des Werkzeugs von Reiter Berechnen
Tab 5: Weiter im Beschrieb von Entwicklerwerkzeuge
Tab 1
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’

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

Tab 2: So bspw von Aufgaben
Tab 2
Übungen
Zum Beispiel zwei 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 obig 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; }Tab 3: So separat löschen von Cookies
Tab 3
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 …
Tab 4: Das Werkzeug von Reiter Berechnen
Tab 4
Berechnen
Das Entwickler-Werkzeug von Reiter Berechnen, wie das so von Nutzen sein kann.
- Kurz zum Verständnis siehe hier: books.google

Tab 5
Das sonst von Beschrieb …
- Firefox-Entwicklertools → Seiteninspektor
- Browser Werkzeug “Element untersuchen” u. a. das Merke …
Merke von Tastenkürzel
Öffne das Werkzeug „Element untersuchen“ | Command + Shift + C für Mac, Control + Shift + C für Windows |
Bewegen zwischen den einzelnen Knoten | Pfeil nach oben und unten |
Erweitern des ausgewählten Knotens | Rechter Pfeil |
Komprimieren des ausgewählten Knotens | Linker Pfeil |
Rekursives Auf- und Zuklappen von Knoten | Option + Klick für Mac, Alt + Klick für Windows |
Bewegen innerhalb eines Knotens, um mit Attributen zu arbeiten | Enter oder Zurück |
Schritt vorwärts durch die Attribute eines Knotens | Tab |
Schritt rückwärts durch die Attribute eines Knotens | Shift + Tab |
Ausblenden oder Anzeigen des ausgewählten Knotens | H |
Bearbeiten und Beenden der Bearbeitung eines Knotens als HTML | F2 |
Wenn eine CSS-Eigenschaft ausgewählt ist, wird der Wert um eins erhöht | Pfeil nach oben |
Wenn eine CSS-Eigenschaft ausgewählt ist, verringerst du den Wert um einen | Pfeil nach unten |
Wenn eine CSS-Eigenschaft ausgewählt ist, erhöhe den Wert um zehn | Shift + Pfeil nach oben |
Wenn eine CSS-Eigenschaft ausgewählt ist, verringerst du den Wert um eins | Shift + Pfeil nach unten |
Wenn eine CSS-Eigenschaft ausgewählt ist, erhöhe den Wert um 0,1 | Option + Pfeil nach oben für Mac, Alt + Pfeil nach oben für Windows |
Wenn eine CSS-Eigenschaft ausgewählt ist, verringerst du den Wert um 0,1 | Option + Pfeil nach unten für Mac, Alt + Pfeil nach unten für Windows |
Aktualisiert im Jahr 2022-Mai
Hat dir der Beitrag was gebracht!
Und ist zum Lesen gut gemacht?
Wegerl-Feld heißt Dich Willkomm!
– und dann gern Dein Sagen
auch kleine Frage.
Wenn du hier nach dem Voten noch was schreibst, so ist das und wird der Form nicht öffentlich.