Farbe des Scrollbalkens ändern

  • Hallo,

    Würde gerne die Farbe des grauen (manchmal schlecht zu sehenden) Scrollbalkens ändern. Auch wenn man nicht direkt am Balken scrollen muß, dient er auf langen Seiten doch für mich zur optischen Unterstützung wie weit man noch scrollen muß. Und das ist mitunter auf grauem Hintergrund teilweise nicht gut zu erkennen.

    In Windows 10 ist das (meines Wissens) nicht möglich. Dort kann man nur die Taskleiste/Start verändern. Taskleiste hab ich da in Dunkelblau, die gleiche/ähnliche Farbe hätte ich gerne für den Scrollbalken.

    Gibts da irgendeine Möglichkeit..?


    [attachment=0]Hilfe 15.png[/attachment]

  • Nutzt du evtl. schon etwas von unseren Scripten hier?

    Wenn ja:

  • Für die Scrollbars nutze ich dasvon Andreas gennante Script (scrollbars.us.js, von hier :

    sieht so bei mir aus:

    Bilder

    Chromebook Lenovo IdeaPad Flex 5 - chromeOS 122 (Stable Channel) - Linux Debian Bookworm: Firefox ESR 115.8.0 und Firefox Nightly, Beta und Main Release (Mozilla PPA), Android 13: Firefox Nightly und Firefox (Main Release)

    Smartphone - Firefox Main Release, Firefox Nightly, Firefox Klar (Main Release)

  • Du erstellst im Chrome-Ordner ne Textdatei und nennst sie beispielsweise scrollbar.txt und in diese Textdatei kopierst du den Code rein und speicherst das ganze. Habe dir die Leisten mal blau gemacht....musst mal gucken, ob es passt. :wink:

    Nun nur noch die Endung der Textdatei umbenennen von scrollbars.txt --> scrollbar.uc.js
    Firefox neu starten und die Leisten müssten blau sein.

    Gutes Gelingen! :wink::D

  • Vorher muss der Firefox aber für die Nutzung von Scripten vorbereitet sein: https://www.camp-firefox.de/forum/viewtopic.php?t=122538

    Scripte haben nix mit der userChrome.css zu tun.

    Chromebook Lenovo IdeaPad Flex 5 - chromeOS 122 (Stable Channel) - Linux Debian Bookworm: Firefox ESR 115.8.0 und Firefox Nightly, Beta und Main Release (Mozilla PPA), Android 13: Firefox Nightly und Firefox (Main Release)

    Smartphone - Firefox Main Release, Firefox Nightly, Firefox Klar (Main Release)

  • Angel...

    Heißt das jetzt, das der entsprechende Code nicht in die scrollbar.uc.js (im Chrom Ordner) hineingehört...?
    So sieht es jetzt bei mir aus, siehe Bild unten...


    pascallo

    Das hat nicht geklappt. Nach erstellen der Textdatei (im Chrom Ordner-rechte Maus-Neu-Textdokument), umbenennen in scrollbar.txt, hineinkopieren des entsprechenden Codes und Umbenennung in scrollbar.uc.js, schließen/öffnen des Firefox keine Änderung des Scrollbalkens.
    Zudem erscheint beim Versuch des Öffnens der scrollbar.uc.js eine Fehlermeldung...siehe Bild... :-??

    Edit...

    Diese FM erscheint erst NACH dem Umbenennen von scrollbar.txt in scrollbar.uc.js. Unter scrollbar.txt kann ich die Datei öffnen..! Was allerdings am Endergebnis des weiterhin grauen Balken nichts ändert...Aktuell hab ich die Datei in scrollbar.uc.js belassen...


    [attachment=0]Hilfe 15.png[/attachment]


  • Das verstehe ich nicht... :-??:-??

    In meinem Fall brauche ich doch für die Veränderung des Scrollbalkens NUR den Chrome Ordner, oder nicht..?


    Nein...stimmt schon alles, was du gemacht hast. Du musst halt noch FF für Scriptnutzung vorbereiten...Das heißt, damit der Firefox mit den Skripten ( us.jc`s) im Chrome-Ordner umgehen kann, musst du erst noch ein paar schnelle Anpassungen vornehmen.

    Hatte ich vorhin vergessen zu erwähnen... :oops::?

    Führe noch die Schritte nach der Anleitung aus, dann müsste es passen. ( https://www.camp-firefox.de/forum/viewtopic.php?t=122538 )

    Fehlermeldung beim Anklicken der uc.js ist normal. Willst du Veränderungen am Code vornehmen, musst du die uc.js mit rechts anklicken --> Öffnen mit --> Editor

    Grüße :D

    2002Andreas: Zwei Dumme.....ääähhhh zwei Schlaue, ein Gedanke :mrgreen:

  • Danke für die Hinweise, es hat jetzt geklappt.


    Habe den Code von Pascallo aus Beitrag Nr. 5 übernommen und der Scrollbalken ist jetzt schön in dunkelblau.
    Eine Kleinigkeit/Anmerkung noch dazu, wobei ich damit natürlich leben kann wenn dies so bleibt. Die "Anschlagpunkte" des Scrollbalkens oben/unten sind auch noch mal für ca. 0.5 cm in blau gehalten (siehe Bild unten).

    Ohne Skript/Code, also im Original, ist an den "Anschlagpunkten" oben/unten eine (graue) Pfeilspitze. Bekäme man das trotz blauem Scrollbalken wieder hin, also das "Scrollende" im Originalzustand zu belassen..?


    [attachment=0]22.png[/attachment]

  • Ohne Skript/Code, also im Original, ist an den "Anschlagpunkten" oben/unten eine (graue) Pfeilspitze. Bekäme man das trotz blauem Scrollbalken wieder hin, also das "Scrollende" im Originalzustand zu belassen..?

    Hi...freut mich, dass es geklappt hat. :klasse:

    Originalzustand habe ich nicht hinbekommen. Aber Pfeilspitzen kann ich dir so anbieten....Außerdem ist es ein verbessertes Skript.

    Also lösche den Code aus dem alten Skript mal und kopiere den neuen Code rein! Vielleicht sagt dir das ja mehr zu...

    Das Ganze sieht dann so aus:


    [attachment=0]Image 1.jpg[/attachment]

    Gruß :D

  • Habs jetzt mal geändert.


    Das "Scroll-Ende" gefällt mir jetzt mit den blauen Pfeilspitzen deutlich besser als vorher. Wenn jetzt der Scrollbalken noch genauso (dunkel)Blau wäre wie im Skript vorher... :oops:

    Nein, das ist jammern auf zu hohem Niveau. So wie es jetzt ist, ist es völlig in Ordnung...!


  • Das "Scroll-Ende" gefällt mir jetzt mit den blauen Pfeilspitzen deutlich besser als vorher. Wenn jetzt der Scrollbalken noch genauso (dunkel)Blau wäre wie im Skript vorher... :oops:

    Dann schau mal bitte auf diese Seite https://www.webpagefx.com/web-design/color-picker/ und poste die Farben im Hex-Code, die du gerne hättest....für Hintergrund, Laufleiste, Pfeilspitzen und Maus darüber...ich passe das Script dann an.


  • Habe den Code von Pascallo aus Beitrag Nr. 5 übernommen und der Scrollbalken ist jetzt schön in dunkelblau.


    Oh, das sehe ich jetzt erst: Das ist auch schon das von mir verlinkte Skript von Aris.


    Also lösche den Code aus dem alten Skript mal und kopiere den neuen Code rein! Vielleicht sagt dir das ja mehr zu...


    Und hier ebenso.

    Mittlerweile steht es auch im Skript selbst, aber ich halte es für deutlich besser, nur auf die Originalquelle zu verlinken (solange verfügbar) – und hier wie bei allen Github-Skripten nur den Hinweis zu geben, wie man das Skript selbst auf seinen Rechner bekommt (auf Button „Raw“ klicken). (Nachtrag: Allerdings hatte selbst Aris in seiner Ankündigung nicht auf seine Github-Präsenz hingewiesen.)


    Das "Scroll-Ende" gefällt mir jetzt mit den blauen Pfeilspitzen deutlich besser als vorher. Wenn jetzt der Scrollbalken noch genauso (dunkel)Blau wäre wie im Skript vorher... :oops:


    Vom Screenshot ausgehend musst Du im Skript in der aktuellen Version 1.0.3a nach diesem Block suchen:

    Code
    // - thumb/slider
    var cs_thumb_color = "#33CCFF"; /* default = "#33CCFF" */
    var cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* default = "unset" */
    var cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; /* default = "unset" */
    var cs_thumb_hover_color = "#66FFFF"; /* default = "#66FFFF" */
    var cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* default = "unset" */
    var cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; /* default = "unset" */
    var cs_thumb_border_color = "#33CCFF"; /* default "#33CCFF" */


    Wenn Dein Schnappschuss die korrekte Farbe wiedergegeben hat, dann musst Du die erste Zeile ändern zu

    Code
    var cs_thumb_color = "#272349"; /* default = "#33CCFF" */


    Wenn Du die Farbe ändern willst, die bei Maushover erscheint, musst Du den Wert in dieser Zeile ändern

    Code
    var cs_thumb_hover_color = "#66FFFF"; /* default = "#66FFFF" */


    Du kannst ja mal testen mit dem Farbwert #3D367C.

    Wenn dich die Farbverläufe stören, dann setze die Hintergrundbilder auf den Standard, der in Klammern angegeben ist. Um das zuerst aufgeführte als Beispiel zu nehmen:

    Code
    var cs_thumb_image_vertical = "unset"; /* default = "unset" */

    Du kannst aber auch etwas testen, das ich gemacht habe: Tausche doch die Farbverläufe zwischen vertikal und horizontal: Das meint, tausche immer „to right“ mit „to bottom“. Man kann dann auch noch mit der Farbe und Opazität im Gradienten selbst rumspielen.

    Ansonsten freut es mich, dass es auch anderen besser mit Pfeilspitzen gefällt.

  • Mhh...also das kriege ich jetzt irgendwie nicht mehr hin...

    Der Farbverlauf des blauen Scrollbalkens "stört" mich in der Tat etwas. Die graue (Scroll) Leiste schimmert immer etwas durch das Blau hindurch. Wie auch im Beitrag 14 zu sehen.

    Die Änderung des Codes auf "var cs_thumb_color = "#272349"; /* default = "#33CCFF" */" brachte gar nichts. Sieht so aus wie vorher. :-??

    Speravir

    Da bin ich wohl zu blöd für, kriege...

    "Wenn dich die Farbverläufe stören, dann setze die Hintergrundbilder auf den Standard, der in Klammern angegeben ist. Um das zuerst aufgeführte als Beispiel zu nehmen:
    var cs_thumb_image_vertical = "unset"; /* default = "unset" */

    ...das nicht hin...

    Hatte zwischendurch so viel verstellt das ich alles rauslöschen und den Ursprungscode wieder nehmen mußte um überhaupt wieder das (durchscheinende/transparente) Blau zu bekommen. Der Blauton ist ja völlig ok, nur die Transparenz/das durchscheinende muß irgendwie weg...

  • Habs jetzt (zufällig) hingekommen.


    Habe in der Zeile "var cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba (255,255,255,0.5),transparent)"; /* default = "unset" */" einfach auf gut Glück die Klammer mit den Zahlen entfernt...und siehe da der Balken ist jetzt durchgehend
    tiefblau...

    Schwierige Geburt... :D


    [attachment=0]7.png[/attachment]


  • ... um überhaupt wieder das (durchscheinende/transparente) Blau zu bekommen. Der Blauton ist ja völlig ok, nur die Transparenz/das durchscheinende muß irgendwie weg...


    Ja, was denn nun? Mit Transparenz oder ohne?

    Ü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