Wie kann die Farbe + Breite des Lesezeichen-Scrollbalkens (Bildlaufleiste) verändert werden?

  • Firefox-Version
    FF 78.0.2
    Betriebssystem
    Win 10 V 1909

    Hallo, :(

    ich möchte in Firefox den linken Lesezeichen-Scrollbalken, genau wie auf dem rechten Seitenrand farblich verändern.

    Für den rechten Scrollbalken habe ich folgenden Code übers Profil verwendet, der leider nicht für die LZ-Bildlaufleiste funktioniert. S.Bild.

    C:\Users\xxxxx\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxxxxdefault-15xxxxxxxxxxx\chrome

    userContent.css und userChrome.css

    --------------------------------------------------------------

    /* Scrollbar farbig innerhalb vom Firefox */

    :root{

    /* Farbe 1: Thumb - Farbe 2: Hintergund*/

    scrollbar-color: #CC6699 #666699;

    }

    --------------------------------------------------------------

    Gibt es ausserdem eine Möglichkeit in den Windows-Einstellungen/Systemsteuerung die Breite der Leisten zu verändern?

    Wer hat eine Idee? Danke

  • Die Farbe bei dir stammt von deinem genutztem Theme.

    Hallo Andreas,

    wie meinst du das mit den genutzem Theme? Der rechte Scrollbalken mit dem Farben "Grau-Blau + Pink funktioniert nur Rechts aber nicht auf den linken LZ-Balken?

    Ich kenne mich mit den Codes nicht aus. Hab ihn vor längerer Zeit einfach kopiert und übertragen. Er ist auch für Thunderbird anwendbar.

    Gruß Andy

  • Zitat

    wie meinst du das mit den genutzem Theme?

    Du nutzt scheinbar ein Theme, welches die kompl. Oberfläche vom Firefox (bunt) macht.

    Und ich denke darum, dass dadurch auch die Farbe vom Scrollbalken bei dir geändert wird.

    Wie du auf meinem Screenshot ja erkennen kannst, funktioniert er hier zumindest nicht.

    Selbst in einer alten Fx Version funktioniert er nicht.

  • Wie du auf meinem Screenshot ja erkennen kannst, funktioniert er hier zumindest nicht.

    Doch, der Code von Andy 123 funktioniert schon. In deinem Fall hast du lediglich vergessen, dass der CSS-Code zusätzlich noch in die userContent.css gehört, wenn die Scrollbalken auf einer Webseite abgeändert werden sollen.

    der leider nicht für die LZ-Bildlaufleiste funktioniert.

    Das liegt daran, dass du deinen Code innerhalb der userChrome.css leicht anpassen musst. Bei scrollbar-color muss am Ende noch !important angehängt werden, damit der Farbwert des Scrollbalken überschrieben wird.

    Hier ein Beispiel wie du deine userChrome.css anpassen musst + noch ein zusätzlichen CSS-Schnipsel angehängt, wie man die Scrollbalkenbreite anpassen kann.

    userChrome.css⬇

    Und hier noch einmal für die userContent.css ➡ falls du dort auch die Scrollbar-Breite anpassen möchtest.

    userContent.css

    CSS: userContent.css
    :root{
       
      /* Farbe 1: Thumb - Farbe 2: Hintergund*/
      scrollbar-color: #CC6699 #666699;
      
      /* Breite der Scrollbar anpassen -> dünn*/
      scrollbar-width: thin;
    }

    Wenn es geklappt hat, sollte es dann folgendermassen aussehen ➡ siehe Screenshot unten

    Wenn du die Anpassung für die Scrollbar-Breite nicht möchtest, dann einfach die Zeile mit scrollbar-width entfernen.

    eine Möglichkeit in den Windows-Einstellungen/Systemsteuerung die Breite der Leisten zu verändern?

    Nein, in den Windows-Einstellungen wirst du dafür keine Option finden. Man kann es aber mittels Registry-Eintrag anpassen lassen, wobei aber die gewünschte Breite in px zuerst mittels einer Formel umgewandelt werden muss und danach in den Registry-Wert eingetragen werden muss. Der Einfachheit halber würde ich für diese Anpassung das kleine Tool Winaero Tweaker verwenden, welches so eine Option bereitstellt. (siehe Link)

  • Hallo @macko..du hast natürlich recht...ich werde langsam doch alt.

    Tröste dich, ich hab es auch nicht mehr gewusst. Ist ja eigentlich ein Spezialfall. Ich bin dann auch auf das Benutzerskript gewechselt, weil das weitaus mehr Anpassungsmöglichkeiten bietet. Im CSS-Code sind ja nur scrollbar-color und scrollbar-width (und da auch nur auto, thin und none) möglich.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • Edit: Na toll, ich hab hier ziemlich lang dran geschrieben mit Pausen zwischendurch. Deshalb überschneidet sich das mit Beiträgen oben.

    Dein Code funktioniert nicht.

    Selbst in einer alten Fx Version funktioniert er nicht.

    Hmm, grundsätzlich sollte er: CSS Scrollbars - CSS: Cascading Style Sheets (MDN). Dort steht aber auch (ziemlich versteckt als „implementation note“ für scrollbar-color), dass in about:config die Einstellung layout.css.scrollbar-color.enabled auf true gesetzt sein muss (Mac-Nutzer müssen noch eine weitere Einstellung tätigen). Oder: Andy hat die Eigenschaften für die Root definiert, vielleicht wird sie durch spezifischere Regeln wieder überschrieben.

    ich möchte in Firefox den linken Lesezeichen-Scrollbalken, genau wie auf dem rechten Seitenrand farblich verändern.

    […]

    Gibt es ausserdem eine Möglichkeit in den Windows-Einstellungen/Systemsteuerung die Breite der Leisten zu verändern?

    Für den Fux speziell siehe verlinkten MDN-Artikel: scrollbar-width (benötigt layout.css.scrollbar-width.enabled, gesetzt auf true). mit dem man aber keine genauen Werte eingeben kann.

    Was für den Firefox auf jeden Fall funktioniert, ist ein UserChrome-Skript: custom_scrollbars.uc.js von Aris. Er hatte das auch mal hier mit Bildern gepostet, finde es aber gerade nicht. Falls Du noch nie Skripte eingesetzt hast, benötigst Du einige Vorbereitungen, entweder nach der Forumsmethode entsprechend Funktionelle Änderungen am Firefox durch Scripte oder entsprechend Methode 2 in Aris-t2/CustomJSforFx: custom scripts, was von der hier im Forum verbreiteten Methode abgeleitet, aber nicht identisch ist.

    Nachtrag noch vor dem Abschicken: Siehe auch Farbe der Scrollbars.

  • Was für den Firefox auf jeden Fall funktioniert, ist ein UserChrome-Skript: custom_scrollbars.uc.js von Aris. Er hatte das auch mal hier mit Bildern gepostet, finde es aber gerade nicht.

    Ich verwende diese Variante (vielleicht ist es auch die Originalversion):

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • Hallo Andy 123

    Ich weiss leider nicht, was du mir genau mitteilen wolltest, da du in deinem letzten Beitrag lediglich meinen ganzen Beitrag zweimal komplett zitiert hast, ohne irgendetwas selber geschrieben zu haben. Trotzdem hoffe ich einmal, dass es bei dir geklappt hat.

    Bezüglich Zitaten hier auf dem Forum: Wenn möglich solltest du Vollzitate von Beiträgen vermeiden, da ansonsten schnell einmal die Übersichtlichkeit verloren geht, vor allem wenn der Beitrag etwas länger ist. Viel besser und einfacher ist es, wenn du bestimmte Textinhalte, welche du zitieren möchtest, mit der Maus markierst und danach auf dem erscheinenden Popup auf Zitat einfügen klickst.

  • Hallo

    wie in dem Beitrag von Macko #5 habe ich die Einstellunge in den CSS-Dateien vorgenommen.

    Den Code für die Breite der Bildlaufleiste habe ich weggelassen, war mir zu schmal,

    Er sollte breiter werden.

    über about:config waren die beiden Einstellungen:

    - layout.css.scrollbar-width.enabled, und

    - layout.css.scrollbar-color.enabled auf true gesetzt.

    ------------------------------

    Die graue Farbe der linken LZ-Scrollleiste blieb trotz der neuen Einstellungen unverändert.

    userChrome.css-Editor:

    ________________________

    /* Scrollbar farbig innerhalb vom Firefox */

    :root{

    /* Farbe 1: Thumb - Farbe 2: Hintergrund*/

    scrollbar-color: #CC6699 #666699 !important;

    }

    ----------------------------------------------------------------------------

    userContent.css-Editor:

    ________________________
    :root{

    /* Farbe 1: Thumb - Farbe 2: Hintergrund*/

    scrollbar-color: #CC6699 #666699;

    }

    ---------------------------------------------------------------------------------

    GrußAndy

  • Hi,

    das wird über CSS nicht funktionieren. Mach das über Javascript. Hier ist mein Code:

    Du musst aber vorher das tun:


    Hier die Vorbereitungen:

    https://github.com/Endor8/user…js/tree/master/userChrome

    Edit 2002Andreas
    Text in Klammercode </> gesetzt.

    Einmal editiert, zuletzt von JohnnyKidd (18. Juli 2020 um 02:30) aus folgendem Grund: Ein Beitrag von JohnnyKidd mit diesem Beitrag zusammengefügt.

  • Hier die Vorbereitungen:

    https://github.com/Endor8/userChr…ster/userChrome

    ----------------------------------------------------------

    JavaSript ???

    Hallo JonnyKidd,

    ich weiss leider nicht was ich auf "userChrome.js/userChrome/" alles anklicken muss, da ich mich nicht auskenne. Kannst du mir bitte das genauer erläutern oder auch ein Screenshot senden?

    Muß beim JavaSript der lange Code alles bis zur letzten Zeile:

    if(hide_scrollbars==true) remove_scrollbars.init();
    oder nur zum Teil in "userChrome.css und/oder userContent.css" gekopiert werden?

    Mit dem Zitieren habe ich noch Probleme und hoffe, dass nur ein statt 2 Zitate angezeigt werden.

    Mit freundlichem Gruß

    Andy

  • Sieht so mit dem CSS Code aus:

    Siehe dazu auch den Screenshot in Beitrag Nr. 5.

    Hallo,

    Ich habe alles so gemacht. Speziell die Farbe der LZ-Scrollleiste hat sich leider nicht, wie Bild dargestellt, verändert. Soll es also doch mit den CSS Code funktionieren? Oder doch nicht???

    Zum Thema "JavaSript" , wie es hier im Forum angespochen wurde, habe ich absolut keine Erfahrung und weiss auch nicht mit umzugehen. Diesbezuglich hatte schon bei JonnyKidd nachgefragt.

    Unter Windows 7 hatte man unter "Darstellung und Anpassung, Anpassungen" alles schön mit Schrift und Farbe in einem Fenster einstellen können. Aber diese Funktion wurde von Microsoft in der Form entfernt. LEIDER !!!

    Mit freundlichem Gruß

    Andy

  • also doch mit den CSS Code funktionieren?

    Ja, siehe meinen Screenshot. Die beiden CSS Code aus Beitrag Nr. 5 funktionieren.

    weiss auch nicht mit umzugehen.

    Hier wird genau beschrieben was du machen musst dazu:

    https://github.com/Endor8/userChr…ster/userChrome

    Ganz in Ruhe durchlesen, dann klappt das auch.

    Aber wie schon gesagt, mit CSS geht es auch.

  • Ich verwende diese Variante (vielleicht ist es auch die Originalversion):

    Mach das über Javascript. Hier ist mein Code:

    Ihr verwendet laut interner Numerierung beide das Skript, das ich verlinkt hatte (und ebenfalls nutze). Leider ist der im Skript enthaltene Link nicht mehr gültig.

  • Hier wird genau beschrieben was du machen musst dazu:
    https://github.com/Endor8/userChr…ster/userChrome

    Hallo Andreas,

    vielen Dank für Eure Hilfe.

    In Firefox und Thunderbird sind jetzt endlich´alle Scrollbalken farblich, so wie ich es mir vorgestellt hatte.

    Ich mußte in den Einstellungen "toolkit.legacyUserProfileCustomizations.stylesheet" auf true umstellen.

    Die Zuordnung der Pref's + Js-Ordner und Dateien waren doch nicht so schwer.

    LG Andy