Symbol für Schaltfläche

Wirst du auch nicht erfassen können, ich habs auch schon versucht. Aber:

Anmelde-/Zugangsdaten Fenster anpassen bzw.entfernen

Zitat von .DeJaVu

Wirst du auch nicht erfassen können

Und warum nicht?

#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"]::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-image: url('https://www.soeren-hentzschel.at/wp-content/themes/agenedia-mozblog/assets/images/icons/logo.webp');
    background-size: 24px 24px;
}

Den passenden Selektor habe ich über die Entwicklerwerkzeuge gefunden. Und dann war es einfachstes CSS. Du sagst immer recht schnell, dass Dinge nicht gehen…

Weil ich es weder über den Inspektor noch Entwicklerwerkzeuge gefunden habe, das ist für mich eine Funktion von Firefox. Klar muss es ein Tag haben, aber wie gesagt, nicht gefunden. Die Entwicklerwerkzeuge finden für die Eingabe sogar gar nichts hier (Firefox 67/68), allenfalls ein <event> wird angezeigt, das endet aber in Javascript. Und auch die nightly kriegt es nicht gebacken, via Picker das Feld zu "erleuchten" (rot dotted) wie üblich. Deswegen findet Endor (vermutlich) genau so viel bzw wenig wie ich.

Eigenartig ist in dem Zusammenhang, dass ich hier für die Anmeldung eine eigene Seite bekomme (v67), am Hauptrechner ein Popup (v68/69).

Erst mit "#PopupAutoComplete > richlistbox" konnte ich was ausmachen, aber auch nicht das von dir gezeigte. Deswegen fände ich das toll, wenn du deinen Weg dahin aufzeigen könntest.

Den Picker habe ich dafür gar nicht erst bemüht. Das geht nämlich auch wesentlich einfacher. Einfach einen Teil des Textes in das Suchfeld des Inspektors (der Browser-Werkzeuge natürlich, das kommt ja nicht von der Website) eingeben und man landet beim richtigen Element. Das Suchfeld findet nämlich sowohl Selektoren als auch Textinhalte.

Und dass man dann ::before nutzt sowie der komplette Inhalt dessen ist Schema F, wie man Icons vor einem Text platziert. Das muss man nur einmal verstanden haben und kann es dann immer anwenden.

Zitat von Sören Hentzschel

Einfach einen Teil des Textes

Hallo Sören..

danke dafür, wusste ich auch noch nicht

Zitat von Sören Hentzschel

Den Picker habe ich dafür gar nicht erst bemüht. Das geht nämlich auch wesentlich einfacher. Einfach einen Teil des Textes in das Suchfeld des Inspektors (der Browser-Werkzeuge natürlich, das kommt ja nicht von der Website) eingeben und man landet beim richtigen Element. Das Suchfeld findet nämlich sowohl Selektoren als auch Textinhalte.

Das mache ich schon seit geraumer Zeit so, nur dass meine Texte in Sorbisch sind. Leider kommen die gleichen Texte gelegentlich mehrfach vor. Ich würde es ja schön finden, wenn man auf ein GUI-Element klicken könnte und Firefox springt im Inspektor an die richtige Codestelle. Ob das machbar wäre, weiß ich nicht.

Wenn Texte mehrfach vorkommen, kann man durch mehrfaches Drücken von Enter die Elemente durchgehen. Das mit dem Anklicken eines Elements in der Oberfläche und Firefox springt im Inspektor an die richtige Stelle gibt es mit dem Elemente-Picker ja und das funktioniert auch für fast alles. Nur ein paar Dinge wie das, worum es hier geht, erreichst du so nicht, weil das Element immer sofort verschwindet, sobald das Fenster den Fokus verliert.

Sören Hentzschel Bei mir funktioniert dein Code auch. Auch von mir ein Danke. Ich hatte ja schon fast den richtigen Selektor, nur das ::before fehlte mir.

Wenn man weiss, wie das Teil heisst, dann ist es ja einfach :p Naja.

Zitat von .DeJaVu

Wenn man weiss, wie das Teil heisst, dann ist es ja einfach :p Naja.

Wie Sören schon in Beitrag #5 schrieb, kann man nach dem Text suchen, in diesem Fall ist das „Gespeicherte Zugangsdaten anzeigen“. Irgendwo in der Umgebung muss dann das Symbol eingefügt werden. Die Elemente sind hierarchisch geordnet. Etwas Zeit braucht man aber schon, entweder zum Nachdenken doer zum Experimentieren oder für Beides. Da das Symbol unmittelbar vor dem Text eingefügt werden soll, bietet sich das Pseudoelement ::before an.

Mache dir nichts draus. Man muss Erfahrung sammeln und die fehlt mir auch noch reichlich.

Das ist echt Balsam für die Seele hier, danke

Nichtsdestotrotz wurmt es mich, dass ich das nicht wie gewöhnlich finden kann. Ich tu mich auch mit den root-Styles sehr schwer. Ich glaub, ich werd zu alt für diesen Sch***

Zitat von .DeJaVu

Das ist echt Balsam für die Seele hier, danke

Gern geschehen.

Zitat

Nichtsdestotrotz wurmt es mich, dass ich das nicht wie gewöhnlich finden kann. Ich tu mich auch mit den root-Styles sehr schwer. Ich glaub, ich werd zu alt für diesen Sch***

Du musst dran bleiben. Als Erstes musst du wissen, dass es ein Unterschied ist, Firefox zu verändern und eine Website zu ändern. Letzteres ist einfacher, da du mit dem Kontextmenüeintrag „Element inspizieren“ auf die richtige Codestelle zugreifen kannst. Du hast dann noch den Picker in den Entwicklerwerkzeugen. Der funktioniert aber nur bei HTML-Seiten. Beides hast du nicht, wenn du die Firefox-GUI verändern willst. Das weißt du vielleicht schon alles, aber man muss sich das trotzdem ab und zu bewusst machen. Jedenfalls geht es mir so.

Das mit dem Symbol im Anmeldeformular war ein Spezialfall. Das Formular ist zwar in die Forumssite eingebaut, der Formularcode gehört aber hier zu Firefox. Außerdem war dann das Pseudolement ::before nötig, das es in diesem Fall vorher gar nicht gab. Mit den Pseudoelementen ::before und ::after kann man in Verbindung mit der CSS-Eigenschaft content Inhalt einfügen.

Zitat von milupo

Außerdem war dann das Pseudolement ::before nötig, das es in diesem Fall vorher gar nicht gab.

::before und ::after wird schon lange benutzt in diversen Codes:

#4

#9

Zitat von milupo

Du hast dann noch den Picker in den Entwicklerwerkzeugen. Der funktioniert aber nur bei HTML-Seiten. Beides hast du nicht, wenn du die Firefox-GUI verändern willst.

Auch die Browserwerkzeuge haben wie gesagt einen Picker, mit dem sich Elemente der Browseroberfläche auswählen lassen. In der Regel funktioniert das auch, wenn auch nicht in diesem Fall.

Zitat von Sören Hentzschel

Auch die Browserwerkzeuge haben wie gesagt einen Picker, mit dem sich Elemente der Browseroberfläche auswählen lassen. In der Regel funktioniert das auch, wenn auch nicht in diesem Fall.

Ja, der ist da, war aber ausgegraut.

Zitat von 2002Andreas

::before und ::after wird schon lange benutzt in diversen Codes:

Es ging ja speziell um den Fall in diesem Thread, nicht darum, dass die beiden Pseudoelemente sonst nicht benutzt werden, Im Gegenteil, sie werden doch recht häufig benutzt.

Zitat von Sören Hentzschel

CSS

#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"]::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-image: url('https://www.soeren-hentzschel.at/wp-content/themes/agenedia-mozblog/assets/images/icons/logo.webp');
    background-size: 24px 24px;
}

Wie muss dieser Code aussehen, um in Menüs, wo ja schon Platz für Icons ist, fehlende Icons einzufügen - also nicht vor den Text, der dann nach rechts verschoben wird, sondern an den Platz davor.

Und wie muss die URL jetzt aussehen, wenn es in meiner nicht mehr funktionierenden CSS-Datei für einen Ausschnitt aus einer Mosaik-Grafikdatei heißt

{-moz-image-region:rect(416px 160px 432px 144px)!important; list-style-image: url("mosaic.png") !important }

Vielen Dank.