Browserkonsole
CSS Selektor finden usw.

Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
“Classic und TinyMCE – ist so klasse!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit TinyMCE Advanced
“Classic und TinyMCE – ist das ausgezeichnete!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
“Classic und TinyMCE – ist so sehr gut !”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
“Classic und TinyMCE – und tut sehr gut!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

TinyMCE aktive Installationen: 2+ Millionen
“Classic und TinyMCE – ist so fabelhaft!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
“Classic und TinyMCE – ist de luxe!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
“Classic Widgets – sind so grandiose!”
Anklickt Classic! – TinyMCE; 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
“Classic und TinyMCE – ist so fein!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Da und dort ist es sehr gefragt, welche CSS-Class so Elemente des Themes sind. Meist findet sich das der Begriffe in Suchmaschinen. Doch eigenständig und schnell ist das selbst zu finden. Jedoch der Entwicklerwerkzeuge von Beschrieb können des Beginns sehr langwierig sein und so sind hier dem Beitrag die Anfänge zum Erfolg von Browserkonsole. 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.

Tab 1: Im Allgemeine zur Wegleitung
Tab 2: Zur Übung von Aufgaben
Tab 3: So separat löschen von Cookies
Tab 4: Weiter im Beschrieb von Entwicklerwerkzeuge

 

Wegleitung

Im Allgemeine

 Edge Browser von Microsoft. (1) Element Website klick Maustaste rechts / Untersuchen. (2) Element ist anvisiert. Weiteres (3) Formatvorlagen bspw. 'border'
(Screenshot WP Freund) Edge Browser von Microsoft
Mit der rechten Maustaste das Element anklicken und dann 'Untersuchen'
Mit der rechten Maustaste das Element anklicken und dann ‘Untersuchen’

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

 Edge Browser von Microsoft. (1) 'F12', (2) klick Symbol oder statt (1 u. 2) 'Strg+Shift+C'. (3) Mouseover von Elemente. Weiter (4) Formatvorlagen bspw. 'border'
(Screenshot WP Freund) Edge Browser von Microsoft

(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

 Edge Browser von Microsoft. (1) 'F12'. (2) Auf Elemente klicken. (3) Das Suchfeld öffnen, 'Strg+F'. (4) Und direkt im Quelltext suchen.
(Screenshot WP Freund) Edge Browser von Microsoft

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.

(1) Des Widgets Titel eingeben und nach Enter ist (2) das Ergebnis. Und zu finden ist (3) der ID-Selektor und (4) der Klassenselektor.

‘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’
Der Website Mausklicks rechts und dann 'Seitenquelltext anzeigen'
Der Website Mausklicks rechts und dann ‘Seitenquelltext anzeigen’

Oder so:

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

Tab 2: So bspw von Aufgaben

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

ID-Selektor #footer-sidebar… 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

Element mit Maustaste rechts visieren und klick Element-Informationen
Element mit Maustaste rechts visieren und klick ‘Element-Informationen’

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

 

 

 

Zur Schlussfolgerung von Selektoren braucht es der praktischen Erfahrung
Zur Schlussfolgerung von Selektoren braucht es auch der praktischen Erfahrung
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.

ID-Selektor #content-sidebar

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

Klassenselektor .widget-title

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;
}
Tab 3: So separat löschen von Cookies

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

 Edge Browser von Microsoft
(Screenshot WP Freund) 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 …


Tab 4: Weiter im Beschrieb von Entwicklerwerkzeuge

Hinweise

Der Entwicklerwerkzeuge von Beschrieb

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 2021-Dezember

… Und wie ist dein Erfolg des Beitrags?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

DSGVO: Blog Website wegerl.at bedient sich dem Dienst Gravatar der Automattic Inc. In Angabe der E-Mail-Adresse, welche deiner Nutzung von Gravatar, erfolgt der Service nach Art. 6 Abs. 1 lit. f) DSGVO. Also nachdem dein Kommentar von wegerl.at freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.