Da und dort ist es sehr gefragt, die Browserkonsole in welche CSS-Class so Elemente des Themes zu definieren sind. Statt Suchen der Begriffe in Suchmaschinen ist das eigenständig und schnell zu finden. Jedoch der Browserkonsole von Beschrieb können des Beginns sehr langwierig sein und so sind hier dem Beitrag die Anfänge des Entwicklerwerkzeuges zum Erfolg. Somit auch von Beispielen bebildert mit Edge Browser von Microsoft, Browser-Chrome und Safari. – zur Schlussfolgerung von Selektoren braucht es auch der praktischen Erfahrung.
Browsers Entwickler-Werkzeug,
die Browserkonsole
Der Einführung nach ist auf die Sprünge zu kommen. So hier ist von WP-Freund die Basis im Beschrieb samt Screenshots Edge Browser von Microsoft.
- Der Workflows gibt es mehr und so ist dem Beschrieb nach zum Erfolg.
[tabbylink tab=1 offset=100 fade=400]Tab 1: Im Allgemeine zur Wegleitung[/tabbylink]
[tabbylink tab=2 offset=100 fade=400]Tab 2: Zur Übung von Aufgaben[/tabbylink]
[tabbylink tab=3 offset=100 fade=400]Tab 3: So separat löschen von Cookies[/tabbylink]
[tabbylink tab=4 offset=100 fade=400]Tab 4: Weiter im Beschrieb von Entwicklerwerkzeuge[/tabbylink]
[tabby title=“Wegleitung“]
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.
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;
}
- Dasselbe wie obig unter Beispiel im Reiter ‚Quellcode‘
Oder so:
- Mit Rechtsklick in die Website ‚Seitenquelltext anzeigen‘.
- Das Suchfeld öffnen und des Suchbegriffs wie hier ‚populäre inhalte‘ ist zu sehen.
[tabbylink tab=2 offset=100 fade=400]Tab 2: So bspw von Aufgaben[/tabbylink]
[tabby title=“Aufgaben“]
Die Aufgaben
Zum Beispiel so Fragen …
Fußleiste das Widget ‚Suche’…
Die Frage ist der Fußleiste das Widget ‚Suche‘ im Titel „Begriffssuche“ und nur dort soll von Titel die Farbe zu ändern, also nicht den anderen Widgets von Fußleiste. 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 wie oben des Screenshots. Dann 1-mal auf oder so unter den Widget-Titel „Begriffssuche“ klicken.
Elementauswahl
Im Mouseover ist zu sehen:
Da obig der ID-Selektor #search-3 ist relevant und folgend der Klassenselektor .widget-title
Raute # = ID-Selektor
Punkt . = Class-Selektor
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;
}
Bspw die Aufgabe …
Die Aufgabe hier ist von Widget den Balken und der Überschrift von Seitenleiste rechts 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 so alle Widgets Seitenleiste links und Fußleiste der Titel die Farbe:
.widget-title {
color: #ff6600;
}
[tabbylink tab=3 offset=100 fade=400]Tab 3: So separat löschen von Cookies[/tabbylink]
[tabby title=“Cookies“]
So separat löschen von Cookies
Das kann im Test von Anwendung erforderlich sein. Browser mit F12 zum Entwicklertool, also die Browserkonsole öffnen.
Siehe Screenshot des bspw Edge Browser von Microsoft
(1) In Edge und Chrome Reiter ‚Anwendung‘ in 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 Browserkonsole ist das mit den Cookies im Reiter App. Bild rechts: Ganz praktisch ist das in Browser Chrome mit den Cookies. Denn auch in der Adresszeile das Schlösschen klicken …
[tabbylink tab=4 offset=100 fade=400]Tab 4: Weiter im Beschrieb von Entwicklerwerkzeuge[/tabbylink]
[tabby title=“Hinweise“]
Der Entwicklerwerkzeuge 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 |
[tabbyending]
[mybutton]