Schlagwort-Archive: Mozilla Firefox Browser

Mozilla Firefox, kurz Firefox genannt, ist ein freier Webbrowser des Mozilla-Projektes.

HTML Farbcode mit Color Picker Pipette finden und kopieren

Farbwerte ermitteln mit Farbpipette Color Picker

Bei der Gestaltung von Webseiten oder Grafiken spielt die Farbwahl eine wichtige Rolle. Ein Color Picker ist ein unverzichtbares Hilfsmittel für Designer, um Farbtöne im RGB-, HEX- oder CMYK-Code exakt zu bestimmen.

Color Picker auch bekannt als Farbpipette, sind vor allem für Designer nützlich um Farben von Logos, Schriften oder Online-Medien zu bestimmen. Nur mit dem präzisen Farbwert kann weiterverarbeitet werden, damit es keine Abweichungen in der optischen Präsentation gibt. Ein Color Picker ist ein kleines und hilfreiches Tool, um jeden beliebigen Farbwert blitzschnell zu ermitteln. Auch für die private Bearbeitung von Fotos ist ein solches Zusatzprogramm hilfreich. Beispielsweise lässt sich so die Farbe eines bestimmten Bildbereichs ermitteln, um Korrekturen am Gesamtbild vorzunehmen.

Solche Color Picker gibt es viele und mit unterschiedlichen Ansätzen, einige sind in Grafik Anwenderprogramme wie Gimp oder CorelDRAW zu finden, oft in einer schwebenden Toolbox direkt integriert, andere sind als zusätzliche Tools meist kostenlos erhältlich. Ebenfalls bieten Webseiten Online-Tools zur Farben Ermittlung an, und als Browser Plugins werden in grosser Anzahl Color Pipetten oder als Lupe angeboten.

Die versteckte Firefox Farbpipette


Mozilla Firefox beinhaltet ebenfalls eine praktische Farbpipette für Webseiten Entwickler, zu erreichen über Menü    Weitere Werkzeuge => Farbpipette.

Firefox Colorpick Farbpipette  öffnen aus Menu - Weitere Werkzeuge - Farbpipette
Firefox Farbpipette mit Lupe.
Firefox - Weitere Werkzeuge - Farbpipette

Ein nützlicher Color Picker für Windows ist die freie App Screen ColorPicker (HEX) aus dem Microsoft Store.

Windows Farbpipette Color Picker (HEX)

Der Vorteil der App ist es, das sich von beliebigen Objekten aus einem Fenster jeder Anwendung Farbcodes abrufen lassen, indem man mit der Maus frei über den Bildschirm ein Pixel ins Fadenkreuz bringt, hat man das Pixel gefunden, drückt man Space um den Farbcode zu selektieren, mit Klick auf das Copy Paste Symbol in der rechten oberen Ecke, wird der Code in die Zwischenablage kopiert. Nun kann der Farbcode eingefügt werden, beim editieren von CSS Stylesheets oder zum Farbschema eines Grafikprogrammes. Es werden Farbcodes in HEX(HTML), RGB, CMYK, HSV und HSL unterstützt.

Screen ColorPicker im Microsoft Store holen

Firefox Lesezeichen unter Symbolleiste verkleinern

Firefox Update vergrössert Lesezeichen-Menü unter der Symbolleiste. Abstand zwischen den Lesezeichen Reduzierung mit userChrome.css

Wie man nach dem Mozilla Firefox Update 92 unschwer erkennen kann, erscheinen die Lesezeichen-Menü unter der Symbolleiste jetzt viel grösser. Ein Vergleich zu Chrome zeigt die Menüabstände (padding) zwischen den Lesezeichen nun gut doppelt so gross.

Geht man zu den Firefox-Einstellungen über das Menü    bei der Auswahl unter Weitere Werkzeuge und Symbolleiste anpassen beim Schalter Dichte mit der Wahl „Normal“ fördert diese nicht wirklich eine Verkleinerung zu tage. Hat man viele Lesezeichen in einem Ordner, können abhängig von der Bildschirmauflösung, die Menüs schon mal über den Rand hinaus gehen.

So wird’s gemacht

  Wie angekündigt, kann in der aktuellen Version von Firefox der Menüabstand nur über userChrome.css reduziert werden. Wer hier nicht weiterlesen will, kann nach unten zur Video Anleitung gehen.

Mit anlegen der Datei userChrome.css lassen sich die Lesezeichen-Menü (menuitem) mittels Stylesheets ändern. Zuvor muss aber bei Firefox 69 und höher die Voreinstellung auf der about:config-Seite von false auf true gesetzt werden, um userChrome.css und userContent.css im Chrome-Ordner zu aktivieren. Dabei in der Firefox Adresszeile about:config einfügen und mit Enter die Seite aufrufen.

Firefox Advanced settings about:config

  Auf der Seite Vorsicht! klicke auf Risiko akzeptieren und fortfahren

Die nächste Zeile ins Suchfeld „Einstellungsname suchen“ eingeben und mit Enter ausführen.

toolkit.legacyUserProfileCustomizations.stylesheets

Es erscheint die Option für Benutzerdefinierte Stylesheets, hier rechts auf das Symbol klicken um auf true zu setzen.

Für die Stylesheet-Dateien ein Ordner chrome anlegen (falls nicht bereits vorhanden), unter dem Firefox Profilordner, dieser Profilordner findet man am einfachsten, indem man das Firefox Menü    öffnet, dann auf Hilfe geht und Weitere Informationen zur Fehlerbehebung öffnet, hier etwas nach unten scrollen und bei Profilordner auf die Schaltfläche Ordner öffnen klicken.

Firefox Weitere Informationen zur Fehlerbehebung - Profilordner
Firefox Weitere Informationen zur Fehlerbehebung – Profilordner

Mit Klick auf Ordner öffnen wird der Profilordner im Windows Datei Explorer geöffnet. Hier nun den Ordner chrome erstellen.

Mozilla Firefox default profile path to userChrome.css

  Wahrscheinlich muss Windows noch angewiesen werden, die Dateierweiterungen anzuzeigen, falls dies nicht schon getan ist, standardmäßig werden Dateierweiterungen ausgeblendet. Unter Windows 8 oder 10 kann man einfach auf die Registerkarte Ansicht im Menüband in das Kontrollkästchen Dateinamenerweiterungen klicken, um den Dateityp sichtbar zu machen.

Windows Datei Explorer Ansicht Dateinamenerweiterungen

Die Datei userChrome.css unter dem Profilordner im Ordner chrome ist eine Stylesheet Datei mit besonderer Bedeutung für Firefox. Die Regeln in userChrome.css werden auf die Benutzeroberfläche angewendet und können fast jede integrierte built-in style Regel überschreiben.

  Diese userChrome.css Datei hat nichts mit Google Chrome zu tun. Chrome bezeichnet die Benutzeroberfläche des Webbrowsers, nach der Google Chrome benannt wurde.

menupopup > menuitem, menupopup > menu {
  padding-block: 2px !important; /*adjust: 0px-4px*/
  min-height: 22px !important; /*adjust: 21px-24px or unset*/
}
*|*:root {--arrowpanel-menuitem-padding: 2px 8px !important;}

Die CSS Code Zeilen in den Notepad Editor einfügen und mit Dateiname userChrome.css speichern. Die Datei unter dem Firefox Profilordner in den Ordner chrome kopieren. Beim nächsten öffnen von Firefox erscheinen die Lesezeichen unter der Symbolleiste wieder kleiner.

Mozilla Firefox with using Customized  userChrome.css

Möchte man die Schrift ebenfalls ändern, kann die Standard font-size mit einfügen der CSS Code Zeile verändert werden.

/*
 * Make all the default font sizes 8 pt:
 */
* {
font-size: 8pt !important
}

  Nach bearbeiten der Datei userChrome.css müssen alle geöffneten Firefox-Fenster geschlossen werden und Firefox neu gestart werden, damit die Änderungen wirksam werden.

Video: Firefox Lesezeichen-Menü unter der Symbolleiste verkleinern