1. Nachrichten
  2. Forum
    1. Unerledigte Themen
    2. Forenregeln
  3. Spenden
  • Anmelden
  • Registrieren
  • Suche
Alles
  • Alles
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
  1. camp-firefox.de
  2. Mira_Belle

Beiträge von Mira_Belle

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 3. September 2025 um 22:18

    Mitleser

    Zitat von Mitleser

    Deine .svg-Icons haben kein fill-opacity.

    Richtig, aber das wird ja im CSS nachgeholt!

    CSS
    		  background-image: url("${ProfileDirectory}/Chevron-up_orange.svg") !important;
    		    -moz-context-properties: fill, fill-opacity;
                fill: ${cs_scrollbar_arrows_hover_color} !important;
                fill-opacity: 1 !important;
    		}

    Es macht mir kirre, dass es auf dem einen Rechner richtig funktioniert und auf dem anderen nicht!

    Was mich noch mehr irritiert, im alten Skript welches für den FF bis 142 war/ist, gab/gibt es dieses Problem nicht!

    Erst ab Firefox 143 und dem neuen Skript treten diese Probleme auf.


    Ich werde mal eine abgespeckte Version schreiben, ohne den Firlefanz und den ganzen Einstellungen.

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 3. September 2025 um 20:56
    Zitat von 2002Andreas

    So wie ich das sehe gibt es wohl 2 Probleme hier :/

    1: Gar keine Icons bei z.B. Boersenfeger, bzw. nur bestimmte Icons bei Endor.

    2: .svg Grafiken übernehmen die Farbe aus dem Skript nicht.

    Ja, scheint so zu sein.
    Wobei zu "1", so denke ich, es einfach Kopierfehler sind.
    So war es zumindest zu Anfang bei Endor, so meine Vermutung:!:

    In der Hektik von gestern ist mit das wohl auch unterlaufen.

    Zu "2", das ist echt merkwürdig, und ich kann mir da absolut keinen Reim drauf machen.

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 3. September 2025 um 20:37
    Zitat von Mitleser

    Könnte daran liegen?:
    svg.context-properties.content.enabled steht auf false

    Habe es soeben geprüft!
    Steht im 142 sowie in der Nightly auf true.

    Daran wird es wohl nicht liegen, denn ich hatte das Problem ja auch (2: .svg Grafiken übernehmen die Farbe aus dem Skript nicht.)


    Boersenfeger Mit welchem Skript klappt es bei Dir im FF 142?
    Und mit welchen SVG-Grafiken?

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 3. September 2025 um 18:12
    Zitat von Mitleser

    Könnte daran liegen?:
    svg.context-properties.content.enabled steht auf false

    Werde ich später zu Hause nachschauen und testen.

    Danke

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 3. September 2025 um 16:24

    2002Andreas Kannst Du gerne in ein eigenes Thema auslagern.

    Es ist schon merkwürdig!
    Wären manche SVG-Grafiken bei vielen Nutzern ohne Probleme angezeigt werden,
    habe andere Nutzer damit Probleme.

    Zuerst dachte ich, es wären copy-fehler oder ich hätte irgendwas falsch in den Skript,
    welches die Grafiken aufruft, eingestellt.
    Aber nein, der Fehler liegt an irgendwas anderem!
    Nur woran?

    Ich habe Endor ein fertiges, nach seinen Wünschen eingestelltes Skript geschickt.
    Mit seinen Grafiken funktioniert es auch,
    kein Wunder, die Farbwerten sind in den Grafiken definiert!
    Ich habe ihm "meine" SVG-Grafiken geschickt, die einwandfrei bei mir die Farben, die im Skript definiert werden,
    ohne mucken und ohne Probleme übernehmen.

    Und bei Endor, .... nicht!
    Ich verstehe das nicht, hatte auch solche Probleme, die sich aufgelöst haben, nur ich weiß nicht, wo
    oder an was der Fehler lag.

    Hat jemand eine Idee? Sören Hentzschel Du vielleicht?
    Beispiel, Aris Symbole funktionieren nun bei mir, aber bei Endor offensichtlich nicht!
    Er hat nichts am Skript verändert, nur die Grafiken ausgetauscht, überschrieben.
    D.h. die Namen haben sich nicht verändert!
    Doch bei Endor übernehmen sie die Farbwerte aus dem Skript nicht.

    Das ist doch kurios!

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 3. September 2025 um 15:17
    Zitat von Endor

    Version 208 funktioniert hier nun einwandfrei.

    Naja, noch nicht so wirklich richtig!!
    Lass uns da weiter machen, wo wir aufgehört haben,
    danach melde ich mich bei Boersenfeger , versprochen.

    Wenn die Probleme bei Endor und Boersenfeger beseitigt sind,
    wird es ein kleines Tut geben, was wir gemacht haben.

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 2. September 2025 um 22:01

    milupo Stimmt. Ich wechselte so oft zwischen den verschiedenen Firefoxversionen hin und her, dass ich irgendwie die Übersicht verloren habe.

    Das von mir veröffentliche Skript Version 2.0.8 ist aber richtig, oder?

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 2. September 2025 um 21:35

    Endor siehe ^ (über Dir)


    Zitat von Endor

    Ich bleibe mal bei Version Scrollbar.v2.0.7.js

    Bitte schick die mir mal per PN.

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 2. September 2025 um 21:32

    Also ich weiß nicht weiter!
    Bei mir funktioniert das Skript wie ich es mir gedacht habe!
    Bei anderen wohl auch.
    Wenn Du Endor die Pfeile nutzen möchtest, nutze Option "1"
    und ändere die Farben nach Anleitung.

    Code
      // only for 'custom_scrollbar_arrows_version = 1'
      const custom_scrollbar_arrows_color = "%23bfbfbf";     // default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
      const custom_scrollbar_arrows_hover_color = "%23ffae00";   // default: custom_scrollbar_arrows_hover_color = "orange"; # ==> %23

    Welche 1.Farbe und welche 2.Farbe?
    Die Farbwerte bitte.

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 2. September 2025 um 21:25
    Code
      // CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
      const custom_scrollbars = true;                       // default: custom_scrollbars = true
      const custom_scrollbar_arrows = true;                 // default: custom_scrollbar_arrows = true
      const custom_scrollbar_arrows_version = 1;            // default: custom_scrollbar_arrows_version = 1
                                                            //  1 ==> SVG arrows as code: might not work on some pages
                                                            //  2 ==> SVG arrows as files: placed inside 'chrome\icons' folder
    
      // only for 'custom_scrollbar_arrows_version = 1'
      const custom_scrollbar_arrows_color = "%23bfbfbf";     // default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
      const custom_scrollbar_arrows_hover_color = "%23ffae00";   // default: custom_scrollbar_arrows_hover_color = "orange"; # ==> %23
    
      // only for 'custom_scrollbar_arrows_version = 2'
      const cs_scrollbar_arrows_color = "#1e90ff"		// "#7c7c7c"	"#bfbfbf"
      const cs_scrollbar_arrows_hover_color = "#ffa600"
    Alles anzeigen

    Also, hier wird die Option ausgewäht!
    const custom_scrollbar_arrows_version = 1;

    wenn 1
    dann hier die Farben =>

    Code
      // only for 'custom_scrollbar_arrows_version = 1'
      const custom_scrollbar_arrows_color = "%23bfbfbf";     // default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
      const custom_scrollbar_arrows_hover_color = "%23ffae00";   // default: custom_scrollbar_arrows_hover_color = "orange"; # ==> %23

    wenn 2
    dann eben hier die Farben =>

    Code
      // only for 'custom_scrollbar_arrows_version = 2'
      const cs_scrollbar_arrows_color = "#1e90ff"		// "#7c7c7c"	"#bfbfbf"
      const cs_scrollbar_arrows_hover_color = "#ffa600"
  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 2. September 2025 um 21:05

    Und die Symbole heißen wie?
    Und stimmt die Bezeichnung dann auch mit denen im Skript über ein?

    Ich habe hier keine Probleme.

    Hier noch einmal die Symbole, in denen die Farbe nicht festgelegt ist.
    Chevron.zip
    und
    Pfeile.zip


    Ach, und stimmt das nun mit dem Pfad?

    Code
      // PROFILE PHATH "CALCULATE"
      let ProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
    CSS
    background-image: url("${ProfileDirectory}/Chevron-up.svg") !important;

    oder

    CSS
    background-image: url("${ProfileDirectory}/Pfeil-hoch.svg") !important;

    Je nachdem, welches SVG Du nutzt.


    Und immer daran denken, cache löschen!

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 2. September 2025 um 20:38

    Ich bin zu der Überzeugung gekommen, dass das Flüchtigkeitsfehler beim Umbenennen der Dateien,
    bei Veränderungen im Skript oder was auch immer sein müssen.

    Trag doch einfach die gewünschten Farben in den Zeilen =>

    JavaScript
      // only for 'custom_scrollbar_arrows_version = 2'
      const cs_scrollbar_arrows_color = "#bfbfbf"		// "#7c7c7c"
      const cs_scrollbar_arrows_hover_color = "#ffa600"

    ein und ändert auch die Bezeichnungen hier =>

    JavaScript
    		scrollbar[orient="vertical"] scrollbarbutton[type="decrement"] {
    		  background-image: url("${ProfileDirectory}/Pfeil-hoch.svg") !important;
    		    -moz-context-properties: fill, fill-opacity;
                fill: ${cs_scrollbar_arrows_color} !important;
                fill-opacity: 1 !important;
    		}
    		scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
    		  background-image: url("${ProfileDirectory}/Pfeil-runter.svg") !important;
    		    -moz-context-properties: fill, fill-opacity;
                fill: ${cs_scrollbar_arrows_color} !important;
                fill-opacity: 1 !important;
    		}
    		scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {
    		  background-image: url("${ProfileDirectory}/Pfeil-links.svg") !important;
    		    -moz-context-properties: fill, fill-opacity;
                fill: ${cs_scrollbar_arrows_color} !important;
                fill-opacity: 1 !important;
    		}
    		scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {
    		  background-image: url("${ProfileDirectory}/Pfeil-rechts.svg") !important;
    		    -moz-context-properties: fill, fill-opacity;
                fill: ${cs_scrollbar_arrows_color} !important;
                fill-opacity: 1 !important;
    		}
    
    		/* Hover */
    
    		scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {
    		  background-image: url("${ProfileDirectory}/Pfeil-hoch.svg") !important;
    		    -moz-context-properties: fill, fill-opacity;
                fill: ${cs_scrollbar_arrows_hover_color} !important;
                fill-opacity: 1 !important;
    		}
    		scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {
    		  background-image: url("${ProfileDirectory}/Pfeil-runter.svg") !important;
    		    -moz-context-properties: fill, fill-opacity;
                fill: ${cs_scrollbar_arrows_hover_color} !important;
                fill-opacity: 1 !important;
    		}
    		scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {
    		  background-image: url("${ProfileDirectory}/Pfeil-links.svg") !important;
    		    -moz-context-properties: fill, fill-opacity;
                fill: ${cs_scrollbar_arrows_hover_color} !important;
                fill-opacity: 1 !important;
    		}
    		scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {
    		  background-image: url("${ProfileDirectory}/Pfeil-rechts.svg") !important;
    		    -moz-context-properties: fill, fill-opacity;
                fill: ${cs_scrollbar_arrows_hover_color} !important;
                fill-opacity: 1 !important;
    		}
    Alles anzeigen

    Und nutzt diese Symbole => Pfeile.zip


    #1e90ff für das Blau

    #d3d3d3 für das helle Grau

    #ffa500 für Orange

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 2. September 2025 um 18:37

    Bin gerade nicht zu Hause.

    Werde der Sache noch auf die Spur kommen.

    Habt Geduld.

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 2. September 2025 um 17:40

    Ich bin noch am testen!!!

    Irgendwie stört sich irgendwas an bestimmten Bezeichnungen der Pfeile.

    Oder benennt die Pfeile um!

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 2. September 2025 um 15:44
    Zitat von edvoldi

    Kannst Du dann auch deine 4 Dateien hier hochladen?

    Du meinst die blauen Pfeile?
    Warum? Die Farbe kannst Du doch nun in der Konfiguration einstellen!!
    Du musst nur die Pfeile.zip von mir runterladen und die richtigen Symbole verwenden!

    Ich verstehe das nicht.

    Aber wenn Du die Pfeile unbedingt in Blau haben willst, bekommst Du sie!

    blau.zip

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 2. September 2025 um 15:33

    Wozu mach ich mir so eine Mühe. :/

    Nun gut, is wie's is.

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 2. September 2025 um 15:09

    Und bevor es Kritik gibt, die Farben könnt/müsst ihr Euch anpassen.

    Zitat von Endor

    Prima.
    Schiebst Du mir dann bitte noch die vier orangen farbenen Pfeil Bilder rüber?

    Nö.
    Es gibt ein Update, da kann man in der Konfiguration die Farben definieren!

    Zeilen 86 & 87

    CSS
    // Scrollbar.uc.js
    
    "use strict";
    /* Firefox userChrome.js tweaks - 'Custom Scrollbars' for Firefox ************************************************************ */
    /* Original by Aris (aris-addons@gmx.net)************************************************************************************* */
    /* Github: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js
    /* *************************************************************************************************************************** */
    /* Customized by Mira********************************************************************************************************* */
    /* https://www.camp-firefox.de/forum/thema/135133-custom-scrollbars-uc-js-anpassen/ ****************************************** */
    /* Scrollbar.v1.0.6.js    https://www.camp-firefox.de/forum/thema/135133/?postID=1207718#post1207718************************** */
    /* https://www.camp-firefox.de/forum/thema/136152/?postID=1222989#post1222989************************************************* */
    /* Scrollbar.v2.0.2.js    https://www.camp-firefox.de/forum/thema/136167/?postID=1223096#post1223096************************** */
    /* Scrollbar.v2.0.3.js    https://www.camp-firefox.de/forum/thema/136167/?postID=1223124#post1223124************************** */
    /* Scrollbar.v2.0.5.js    https://www.camp-firefox.de/forum/thema/136167/?postID=1223143#post1223143************************** */
    /* Scrollbar.v2.0.6.1.js  https://www.camp-firefox.de/forum/thema/136167/?postID=1223162#post1223162************************** */
    /* Scrollbar.v2.0.7.js	  https://www.camp-firefox.de/forum/thema/139766/?postID=1278346#post1278346************************** */
    /* Scrollbar.v2.0.8.js	  https://www.camp-firefox.de/forum/thema/139766/?postID=1278349#post1278349************************** */
    /* *************************************************************************************************************************** */
    /* Custom Scrollbars for Firefox ********************************************************************************************* */
    /* Version: 2.0.8 Final for Firefox 143+ ************************************************************************************* */
    /* ******************************************************************************************************************************
    
    README
    
      about:config >
        widget.windows.overlay-scrollbars.enabled > false (Windows)
        widget.gtk.overlay-scrollbars.enabled > false (Linux)
      [!] The above preferences have to be set to 'false' for this code to work
     
      [!] DER STARTUP-CACHE MUSS NACH JEDER ÄNDERUNG GELÖSCHT WERDEN!
      -> Ordner 'startupCache' finden: Adressleiste > about:profiles > Lokales Verzeichnis > Ordner öffnen > startupCache
      -> Firefox schließen
      -> Inhalt des 'startupCache'-Ordners löschen
    
      Alternativ mit einem JavaScipt!
      -> https://github.com/Endor8/userChrome.js/blob/master/Firefox%2087/RestartFirefoxButtonM.uc.js
     
      Anpassungen vornehmen > Werte ändern
      - Optionen aktivieren/deaktivieren: true <-> false
      - Farbe
        - Name: red, blue, transparent 
        - Hexcode: #33CCFF, #FFF
        - rgb(a): rgba(0,0,255,0.8)
        - hsl(a): hsla(240,100%,50%,0.8)
      - Zahlen: 1, 2, 3 ... 10, 11, 12 ...
      - Deckkraft (in Dezimalzahlen): 0.0 bis 1.0 z.B. 1.4 oder 1.75
      - Farbverläufe: linear-gradient(direction, color, color, color)
      - Beispiel für Farbverläufe: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
      - vordefinierte Farbverläufe: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
      - keine Farbe oder keine Farbwerte -> verwende "unset"
    
    
    			/* ----------------------------------------------------------------------------------- */
    			/*     Zu beachten ist, dass die Grafiken sich im richtigen Ordner befinden müssen     */
    			/*            %appdata%\Mozilla\Firefox\Profiles\"Profilname"\chrome\icons             */
    			/*                                                                                     */
    			/*   Auch müssen die Dateinamen im Skript mit jenen im Ordner "icons" übereinstimmen   */
    			/* ----------------------------------------------------------------------------------- */
    
    /* *************************************************************************************************************************** */
    
    (function() {
    
      /* **** Konfiguration **** */
    
      // PROFILE PHATH "CALCULATE"
      let ProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
    
      // GENERAL SCROLLBAR SETTINGS
      const hide_scrollbars = false;                		// default: hide_scrollbars = false
      const hide_scrollbar_buttons = false;         		// default: hide_scrollbar_buttons = false
      const thin_scrollbars = false;                		// default: thin_scrollbars = false / browsers own way to show thin scrollbars
      const custom_scrollbar_opacity = false;        		// default: custom_scrollbar_opacity = false
      const custom_opacity_value = "1.0";           		// default: custom_opacity_value = "1.0"
    
      // CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
      const custom_scrollbars = true;                       // default: custom_scrollbars = true
      const custom_scrollbar_arrows = true;                 // default: custom_scrollbar_arrows = true
      const custom_scrollbar_arrows_version = 2;            // default: custom_scrollbar_arrows_version = 1
                                                            //  1 ==> SVG arrows as code: might not work on some pages
                                                            //  2 ==> SVG arrows as files: placed inside 'chrome\icons' folder
    
      // only for 'custom_scrollbar_arrows_version = 1'
      const custom_scrollbar_arrows_color = "%23bfbfbf";     // default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
      const custom_scrollbar_arrows_hover_color = "%23ffae00";   // default: custom_scrollbar_arrows_hover_color = "orange"; # ==> %23
    
      // only for 'custom_scrollbar_arrows_version = 2'
      const cs_scrollbar_arrows_color = "#bfbfbf"		// "#7c7c7c"
      const cs_scrollbar_arrows_hover_color = "#ffa600"
    
      const cs_thumb_border = 1;                            // default: cs_thumb_border = 0 / in px 1
      const cs_thumb_roundness = 9;                         // default: cs_thumb_roundness = 0 / in px 9
      const cs_buttons_border = 0;                          // default: cs_buttons_border = 0 / in px
      const cs_buttons_roundness = 0;                       // default: cs_buttons_roundness = 0 / in px
      const cs_thumb_minimal_size = 17;                     // default: cs_thumb_minimal_size = 17; / in px
      const cs_ignore_color_gradients = false;               // default: cs_ignore_color_gradients = false / 'flat' scrollbars
    
      // CUSTOM SCROLLBAR COLORS/GRADIENTS
      // - background
      const cs_background_color = "#5b5b66";                // default: cs_background_color = "#DDDDDD"	/ "#AEC5FA"
      let cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";           // default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
      let cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";         // default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
      const cs_background_roundness = 9;					// default: cs_background_roundness = 0 / in px	/ 9
      // - corner
      const cs_corner_background_color = "#bfbfbf";         // default: cs_corner_background_color = "#DDDDDD" / - corner	/ "#CCCCCC"
      let cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)";             // default: cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)"
      // - thumb/slider
      const cs_thumb_color = "#bfbfbf";                     // default: cs_thumb_color = "#33CCFF" / thumb/slider
      let cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";                // default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
      let cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";              // default: cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
      const cs_thumb_hover_color = "orange";                // default: cs_thumb_hover_color = "#66FFFF"
      let cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";          // default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
      let cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";        // default: cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
      const cs_thumb_border_color = "#5b5b66";              // default: cs_thumb_border_color = "#33CCFF"
      // - buttons
      let cs_button_size = 17;								  // in px // default: cs_button_size = 17	/ 26
      const cs_buttons_color = "#5b5b66";                   // default: cs_buttons_color = "#66FFFF" "Bahama Blue";/ buttons
      let cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";              // default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
      let cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";            // default: cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
      const cs_buttons_hover_color = "#5b5b66";             // default: cs_buttons_hover_color = "#33CCFF"	/ "#bfffff"
      const cs_buttons_border_color = "#5b5b66";            // default: cs_buttons_border_color = "#33CCFF"
      let cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";        // default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
      let cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";      // default: cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
    
      /* **** Ende Konfiguration **** */
    
    /* *************************************************************************************************************************** */
    
      // unset background image color gradients -> flat scrollbars
      if(cs_ignore_color_gradients === true)
    	cs_background_image_vertical
    	= cs_background_image_horizontal
    	= cs_corner_background_image
    	= cs_thumb_image_vertical
    	= cs_thumb_image_horizontal
    	= cs_thumb_hover_image_vertical
    	= cs_thumb_hover_image_horizontal
    	= cs_buttons_image_vertical
    	= cs_buttons_image_horizontal
    	= cs_buttons_hover_image_vertical
    	= cs_buttons_hover_image_horizontal
    	= "unset";
    
      let custom_scrollbars_code='';
      let custom_scrollbar_arrows_code='';
      let hide_scrollbar_buttons_code='';
      let custom_scrollbar_opacity_code='';
      let hide_scrollbars_code='';
      let thin_scrollbars_code='';
      
      if(custom_scrollbars === true)
    	custom_scrollbars_code=`
    		scrollcorner,
      		scrollbar > slider, 
    		scrollbar > slider > thumb, 
    		scrollbar > scrollbarbutton {
    		/*  appearance: auto; */
    		  -moz-default-appearance: none !important;
    		}
    		scrollbar > slider {
    		  background-color: ${cs_background_color} !important;
    		  background-image: ${cs_background_image_horizontal} !important;
    		  border-radius: ${cs_background_roundness}px !important;
    		}
    		scrollbar[vertical] > slider {
    		  background-image: ${cs_background_image_vertical} !important;
    		  border-radius: ${cs_background_roundness}px !important;
    		}
    		scrollcorner {
    		  background-color: ${cs_corner_background_color} !important;
    		  background-image: ${cs_corner_background_image} !important;
    		}
    		scrollbar > slider > thumb {
    		  background-color: ${cs_thumb_color} !important;
    		  border-radius: ${cs_thumb_roundness}px !important;
    		  box-shadow: inset 0 0 0 ${cs_thumb_border}px ${cs_thumb_border_color} !important;
    		}
    		scrollbar[vertical] > slider > thumb {
    		  background-image: ${cs_thumb_image_vertical} !important;
    		  min-height: ${cs_thumb_minimal_size}px !important;
    		}
    		scrollbar > slider > thumb {
    		  background-image: ${cs_thumb_image_horizontal} !important;
    		  min-width: ${cs_thumb_minimal_size}px !important;
    		}
    		scrollbar > slider > thumb:hover, scrollbar > slider > thumb:active {
    		  background-color: ${cs_thumb_hover_color} !important;
    		}
    		scrollbar > slider > thumb[vertical]:hover, scrollbar > slider > thumb[vertical]:active {
    		  background-image: ${cs_thumb_hover_image_vertical} !important;
    		}
    		scrollbar > slider > thumb[horizontal]:hover, scrollbar > slider > thumb[horizontal]:active {
    		  background-image: ${cs_thumb_hover_image_horizontal} !important;
    		}
    		scrollbar > scrollbarbutton {
    		  background-color: ${cs_buttons_color} !important;
    		  border-radius: ${cs_buttons_roundness}px !important;
    		  box-shadow: inset 0 0 0 ${cs_buttons_border}px ${cs_buttons_border_color} !important;
    		  height: 17px !important;
    		  width: 17px !important;
    		}
    		scrollbar[vertical] scrollbarbutton {
    		  background-image: ${cs_buttons_image_vertical} !important;
    		}
    		scrollbar[horizontal] scrollbarbutton {
    		  background-image: ${cs_buttons_image_horizontal} !important;
    		}
    		scrollbar > scrollbarbutton:hover {
    		  background-color: ${cs_buttons_hover_color} !important;
    		}
    		scrollbar[vertical] scrollbarbutton:hover {
    		  background-image: ${cs_buttons_hover_image_vertical} !important;
    		}
    		scrollbar[horizontal] scrollbarbutton:hover {
    		  background-image: ${cs_buttons_hover_image_horizontal} !important;
    		}
    	`;
    	
      if(custom_scrollbar_arrows === true && custom_scrollbar_arrows_version === 1)
    	custom_scrollbar_arrows_code=`
    
    		scrollbar > scrollbarbutton {
    		  background-repeat: no-repeat !important;
    		  background-position: center center !important;
    		}
    		scrollbar[vertical] > scrollbarbutton[type="decrement"] {
    		  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='${custom_scrollbar_arrows_color}' %3E%3Cpath d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E ") !important;
    		}
    		scrollbar[vertical] > scrollbarbutton[type="increment"] {
    		  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='${custom_scrollbar_arrows_color}' %3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E ") !important;
    		}
    		scrollbar > scrollbarbutton[type="decrement"] {
    		  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='${custom_scrollbar_arrows_color}' %3E%3Cpath d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'/%3E%3C/svg%3E ") !important;
    		}
    		scrollbar > scrollbarbutton[type="increment"] {
    		  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='${custom_scrollbar_arrows_color}' %3E%3Cpath d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3E%3C/svg%3E ") !important;
    		}
    		
            scrollbar[vertical] > scrollbarbutton[type="decrement"]:hover {
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_hover_color+`' %3E%3Cpath d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E ") !important;
              background-repeat: no-repeat !important;
              background-position: top !important;
            }
            scrollbar[vertical] > scrollbarbutton[type="increment"]:hover {
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_hover_color+`' %3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E ") !important;
              background-repeat: no-repeat !important;
              background-position: bottom !important;
            }
            scrollbar > scrollbarbutton[type="decrement"]:hover {
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_hover_color+`' %3E%3Cpath d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'/%3E%3C/svg%3E ") !important;
              background-repeat: no-repeat !important;
              background-position: left !important;
            }
            scrollbar > scrollbarbutton[type="increment"]:hover {
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_hover_color+`' %3E%3Cpath d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3E%3C/svg%3E ") !important;
              background-repeat: no-repeat !important;
              background-position: right !important;
            }
    	`;
      else if(custom_scrollbar_arrows === true && custom_scrollbar_arrows_version === 2)
    	custom_scrollbar_arrows_code=`
    		scrollbar > scrollbarbutton {
    		  background-repeat: no-repeat !important;
    		  background-position: center center !important;
    		}
    		scrollbar[vertical] > scrollbarbutton[type="decrement"] {
    		  background-image: url("${ProfileDirectory}/Chevron-up.svg") !important;
    		    -moz-context-properties: fill, fill-opacity;
                fill: ${cs_scrollbar_arrows_color} !important;
                fill-opacity: 1 !important;
    		}
    		scrollbar[vertical] > scrollbarbutton[type="increment"] {
    		  background-image: url("${ProfileDirectory}/Chevron-down.svg") !important;
    		    -moz-context-properties: fill, fill-opacity;
                fill: ${cs_scrollbar_arrows_color} !important;
                fill-opacity: 1 !important;
    		}
    		scrollbar > scrollbarbutton[type="decrement"] {
    		  background-image: url("${ProfileDirectory}/Chevron-left.svg") !important;
    		    -moz-context-properties: fill, fill-opacity;
                fill: ${cs_scrollbar_arrows_color} !important;
                fill-opacity: 1 !important;
    		}
    		scrollbar > scrollbarbutton[type="increment"] {
    		  background-image: url("${ProfileDirectory}/Chevron-right.svg") !important;
    		    -moz-context-properties: fill, fill-opacity;
                fill: ${cs_scrollbar_arrows_color} !important;
                fill-opacity: 1 !important;
    		}
    
    		/* Hover */
    
    		scrollbar[vertical] > scrollbarbutton[type="decrement"]:hover {
    		  background-image: url("${ProfileDirectory}/Chevron-up.svg") !important;
    		    -moz-context-properties: fill, fill-opacity;
                fill: ${cs_scrollbar_arrows_hover_color} !important;
                fill-opacity: 1 !important;
    		}
    		scrollbar[vertical] > scrollbarbutton[type="increment"]:hover {
    		  background-image: url("${ProfileDirectory}/Chevron-down.svg") !important;
    		    -moz-context-properties: fill, fill-opacity;
                fill: ${cs_scrollbar_arrows_hover_color} !important;
                fill-opacity: 1 !important;
    		}
    		scrollbar > scrollbarbutton[type="decrement"]:hover {
    		  background-image: url("${ProfileDirectory}/Chevron-left.svg") !important;
    		    -moz-context-properties: fill, fill-opacity;
                fill: ${cs_scrollbar_arrows_hover_color} !important;
                fill-opacity: 1 !important;
    		}
    		scrollbar > scrollbarbutton[type="increment"]:hover {
    		  background-image: url("${ProfileDirectory}/Chevron-right.svg") !important;
    		    -moz-context-properties: fill, fill-opacity;
                fill: ${cs_scrollbar_arrows_hover_color} !important;
                fill-opacity: 1 !important;
    		}
    
    		scrollbar > scrollbarbutton {
    			min-width: ${cs_button_size}px !important;
    			min-height: ${cs_button_size}px !important;
    		}
    	`;
    
      if(hide_scrollbar_buttons === true)
    	hide_scrollbar_buttons_code=`
    		scrollbar > scrollbarbutton {
    		  opacity: 0 !important;
    		}
    		scrollbar[vertical] > scrollbarbutton {
    		  min-height: 1px !important;
    		  height: 1px !important;
    		  max-height: 1px !important;
    		}
    		scrollbar[horizontal] > scrollbarbutton {
    		  min-width: 1px !important;
    		  width: 1px !important;
    		  max-width: 1px !important;
    		}
    	`;
    	
      if(custom_scrollbar_opacity === true)
    	custom_scrollbar_opacity_code=`
    		scrollbar {
    		  opacity: ${custom_opacity_value} !important;
    		}
    	`;
      
      if(hide_scrollbars === true)
    	hide_scrollbars_code=`
    		scrollbar, scrollcorner {
    		  display: none !important;
    		  visibility: collapse !important;
    		}
    	`;
      
      if(thin_scrollbars === true)
    	thin_scrollbars_code=`
    		:root{
    		  scrollbar-width: thin !important;
    		}
    		scrollbar[vertical] > scrollbarbutton {
    		  height: 14px !important;
    		  width: 7px !important;
    		}
    		scrollbar[horizontal] > scrollbarbutton {
    		  height: 7px !important;
    		  width: 14px !important;
    		}
    	`;
    
      Components.classes["@mozilla.org/content/style-sheet-service;1"]
        .getService(Components.interfaces.nsIStyleSheetService)
    	  .loadAndRegisterSheet(Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
    		${custom_scrollbars_code}
    		${custom_scrollbar_arrows_code}
    		${hide_scrollbar_buttons_code}
    		${custom_scrollbar_opacity_code}
    		${hide_scrollbars_code}
    		${thin_scrollbars_code}
      `), null, null),
      Components.classes["@mozilla.org/content/style-sheet-service;1"]
        .getService(Components.interfaces.nsIStyleSheetService).AGENT_SHEET);
    
    })();
    Alles anzeigen

    Und hier die passenden Symbole dafür.

    Symbole.zip

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 2. September 2025 um 14:52

    Bitte in jedem Skript ergänzen!

    Code
    /* ----------------------------------------------------------------------------------- */
    /*     Zu beachten ist, dass die Grafiken sich im richtigen Ordner befinden müssen     */
    /*            %appdata%\Mozilla\Firefox\Profiles\"Profilname"\chrome\icons             */
    /*                                                                                     */
    /*   Auch müssen die Dateinamen im Skript mit jenen im Ordner "icons" übereinstimmen   */
    /* ----------------------------------------------------------------------------------- */

    Hier nochmal das Skript mit der Erklärung zu den Symbolen und wo sie am besten gespeichert werden sollten,
    damit man am Skript nichts groß ändern muss.

    CSS
    // Scrollbar.uc.js
    
    "use strict";
    /* Firefox userChrome.js tweaks - 'Custom Scrollbars' for Firefox ************************************************************ */
    /* Original by Aris (aris-addons@gmx.net)************************************************************************************* */
    /* Github: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js
    /* *************************************************************************************************************************** */
    /* Customized by Mira********************************************************************************************************* */
    /* https://www.camp-firefox.de/forum/thema/135133-custom-scrollbars-uc-js-anpassen/ ****************************************** */
    /* Scrollbar.v1.0.6.js    https://www.camp-firefox.de/forum/thema/135133/?postID=1207718#post1207718************************** */
    /* https://www.camp-firefox.de/forum/thema/136152/?postID=1222989#post1222989************************************************* */
    /* Scrollbar.v2.0.2.js    https://www.camp-firefox.de/forum/thema/136167/?postID=1223096#post1223096************************** */
    /* Scrollbar.v2.0.3.js    https://www.camp-firefox.de/forum/thema/136167/?postID=1223124#post1223124************************** */
    /* Scrollbar.v2.0.5.js    https://www.camp-firefox.de/forum/thema/136167/?postID=1223143#post1223143************************** */
    /* Scrollbar.v2.0.6.1.js  https://www.camp-firefox.de/forum/thema/136167/?postID=1223162#post1223162************************** */
    /* Scrollbar.v2.0.7.js	  https://www.camp-firefox.de/forum/thema/139766/?postID=1278346#post1278346************************** */
    /* *************************************************************************************************************************** */
    /* Custom Scrollbars for Firefox ********************************************************************************************* */
    /* Version: 2.0.7 Final for Firefox 143+ ************************************************************************************* */
    /* ******************************************************************************************************************************
    
    README
    
      about:config >
        widget.windows.overlay-scrollbars.enabled > false (Windows)
        widget.gtk.overlay-scrollbars.enabled > false (Linux)
      [!] The above preferences have to be set to 'false' for this code to work
     
      [!] DER STARTUP-CACHE MUSS NACH JEDER ÄNDERUNG GELÖSCHT WERDEN!
      -> Ordner 'startupCache' finden: Adressleiste > about:profiles > Lokales Verzeichnis > Ordner öffnen > startupCache
      -> Firefox schließen
      -> Inhalt des 'startupCache'-Ordners löschen
    
      Alternativ mit einem JavaScipt!
      -> https://github.com/Endor8/userChrome.js/blob/master/Firefox%2087/RestartFirefoxButtonM.uc.js
     
      Anpassungen vornehmen > Werte ändern
      - Optionen aktivieren/deaktivieren: true <-> false
      - Farbe
        - Name: red, blue, transparent 
        - Hexcode: #33CCFF, #FFF
        - rgb(a): rgba(0,0,255,0.8)
        - hsl(a): hsla(240,100%,50%,0.8)
      - Zahlen: 1, 2, 3 ... 10, 11, 12 ...
      - Deckkraft (in Dezimalzahlen): 0.0 bis 1.0 z.B. 1.4 oder 1.75
      - Farbverläufe: linear-gradient(direction, color, color, color)
      - Beispiel für Farbverläufe: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
      - vordefinierte Farbverläufe: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
      - keine Farbe oder keine Farbwerte -> verwende "unset"
    
    
    			/* ----------------------------------------------------------------------------------- */
    			/*     Zu beachten ist, dass die Grafiken sich im richtigen Ordner befinden müssen     */
    			/*            %appdata%\Mozilla\Firefox\Profiles\"Profilname"\chrome\icons             */
    			/*                                                                                     */
    			/*   Auch müssen die Dateinamen im Skript mit jenen im Ordner "icons" übereinstimmen   */
    			/* ----------------------------------------------------------------------------------- */
    
    /* *************************************************************************************************************************** */
    
    (function() {
    
      /* **** Konfiguration **** */
    
      // PROFILE PHATH "CALCULATE"
      let ProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
    
      // GENERAL SCROLLBAR SETTINGS
      const hide_scrollbars = false;                		// default: hide_scrollbars = false
      const hide_scrollbar_buttons = false;         		// default: hide_scrollbar_buttons = false
      const thin_scrollbars = false;                		// default: thin_scrollbars = false / browsers own way to show thin scrollbars
      const custom_scrollbar_opacity = false;        		// default: custom_scrollbar_opacity = false
      const custom_opacity_value = "1.0";           		// default: custom_opacity_value = "1.0"
    
      // CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
      const custom_scrollbars = true;                       // default: custom_scrollbars = true
      const custom_scrollbar_arrows = true;                 // default: custom_scrollbar_arrows = true
      const custom_scrollbar_arrows_version = 1;            // default: custom_scrollbar_arrows_version = 1
                                                            //  1 ==> SVG arrows as code: might not work on some pages
                                                            //  2 ==> SVG arrows as files: placed inside 'chrome\icons' folder
    
      // only for 'custom_scrollbar_arrows_version = 1'
      const custom_scrollbar_arrows_color = "%23bfbfbf";     // default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
      const custom_scrollbar_arrows_hover_color = "%23ffae00";   // default: custom_scrollbar_arrows_hover_color = "orange"; # ==> %23
    
      const cs_thumb_border = 1;                            // default: cs_thumb_border = 0 / in px 1
      const cs_thumb_roundness = 9;                         // default: cs_thumb_roundness = 0 / in px 9
      const cs_buttons_border = 0;                          // default: cs_buttons_border = 0 / in px
      const cs_buttons_roundness = 0;                       // default: cs_buttons_roundness = 0 / in px
      const cs_thumb_minimal_size = 17;                     // default: cs_thumb_minimal_size = 17; / in px
      const cs_ignore_color_gradients = false;               // default: cs_ignore_color_gradients = false / 'flat' scrollbars
    
      // CUSTOM SCROLLBAR COLORS/GRADIENTS
      // - background
      const cs_background_color = "#5b5b66";                // default: cs_background_color = "#DDDDDD"	/ "#AEC5FA"
      let cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";           // default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
      let cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";         // default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
      const cs_background_roundness = 9;					// default: cs_background_roundness = 0 / in px	/ 9
      // - corner
      const cs_corner_background_color = "#bfbfbf";         // default: cs_corner_background_color = "#DDDDDD" / - corner	/ "#CCCCCC"
      let cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)";             // default: cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)"
      // - thumb/slider
      const cs_thumb_color = "#bfbfbf";                     // default: cs_thumb_color = "#33CCFF" / thumb/slider
      let cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";                // default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
      let cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";              // default: cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
      const cs_thumb_hover_color = "orange";                // default: cs_thumb_hover_color = "#66FFFF"
      let cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";          // default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
      let cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";        // default: cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
      const cs_thumb_border_color = "#5b5b66";              // default: cs_thumb_border_color = "#33CCFF"
      // - buttons
      let cs_button_size = 17;									// in px // default: cs_button_size = 17	/ 26
      const cs_buttons_color = "#5b5b66";                   // default: cs_buttons_color = "#66FFFF" "Bahama Blue";/ buttons
      let cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";              // default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
      let cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";            // default: cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
      const cs_buttons_hover_color = "#5b5b66";             // default: cs_buttons_hover_color = "#33CCFF"	/ "#bfffff"
      const cs_buttons_border_color = "#5b5b66";            // default: cs_buttons_border_color = "#33CCFF"
      let cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";        // default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
      let cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";      // default: cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
    
      /* **** Ende Konfiguration **** */
    
    /* *************************************************************************************************************************** */
    
      // unset background image color gradients -> flat scrollbars
      if(cs_ignore_color_gradients === true)
    	cs_background_image_vertical
    	= cs_background_image_horizontal
    	= cs_corner_background_image
    	= cs_thumb_image_vertical
    	= cs_thumb_image_horizontal
    	= cs_thumb_hover_image_vertical
    	= cs_thumb_hover_image_horizontal
    	= cs_buttons_image_vertical
    	= cs_buttons_image_horizontal
    	= cs_buttons_hover_image_vertical
    	= cs_buttons_hover_image_horizontal
    	= "unset";
    
      let custom_scrollbars_code='';
      let custom_scrollbar_arrows_code='';
      let hide_scrollbar_buttons_code='';
      let custom_scrollbar_opacity_code='';
      let hide_scrollbars_code='';
      let thin_scrollbars_code='';
      
      if(custom_scrollbars === true)
    	custom_scrollbars_code=`
    		scrollcorner,
      		scrollbar > slider, 
    		scrollbar > slider > thumb, 
    		scrollbar > scrollbarbutton {
    		/*  appearance: auto; */
    		  -moz-default-appearance: none !important;
    		}
    		scrollbar > slider {
    		  background-color: ${cs_background_color} !important;
    		  background-image: ${cs_background_image_horizontal} !important;
    		  border-radius: ${cs_background_roundness}px !important;
    		}
    		scrollbar[vertical] > slider {
    		  background-image: ${cs_background_image_vertical} !important;
    		  border-radius: ${cs_background_roundness}px !important;
    		}
    		scrollcorner {
    		  background-color: ${cs_corner_background_color} !important;
    		  background-image: ${cs_corner_background_image} !important;
    		}
    		scrollbar > slider > thumb {
    		  background-color: ${cs_thumb_color} !important;
    		  border-radius: ${cs_thumb_roundness}px !important;
    		  box-shadow: inset 0 0 0 ${cs_thumb_border}px ${cs_thumb_border_color} !important;
    		}
    		scrollbar[vertical] > slider > thumb {
    		  background-image: ${cs_thumb_image_vertical} !important;
    		  min-height: ${cs_thumb_minimal_size}px !important;
    		}
    		scrollbar > slider > thumb {
    		  background-image: ${cs_thumb_image_horizontal} !important;
    		  min-width: ${cs_thumb_minimal_size}px !important;
    		}
    		scrollbar > slider > thumb:hover, scrollbar > slider > thumb:active {
    		  background-color: ${cs_thumb_hover_color} !important;
    		}
    		scrollbar > slider > thumb[vertical]:hover, scrollbar > slider > thumb[vertical]:active {
    		  background-image: ${cs_thumb_hover_image_vertical} !important;
    		}
    		scrollbar > slider > thumb[horizontal]:hover, scrollbar > slider > thumb[horizontal]:active {
    		  background-image: ${cs_thumb_hover_image_horizontal} !important;
    		}
    		scrollbar > scrollbarbutton {
    		  background-color: ${cs_buttons_color} !important;
    		  border-radius: ${cs_buttons_roundness}px !important;
    		  box-shadow: inset 0 0 0 ${cs_buttons_border}px ${cs_buttons_border_color} !important;
    		  height: 17px !important;
    		  width: 17px !important;
    		}
    		scrollbar[vertical] scrollbarbutton {
    		  background-image: ${cs_buttons_image_vertical} !important;
    		}
    		scrollbar[horizontal] scrollbarbutton {
    		  background-image: ${cs_buttons_image_horizontal} !important;
    		}
    		scrollbar > scrollbarbutton:hover {
    		  background-color: ${cs_buttons_hover_color} !important;
    		}
    		scrollbar[vertical] scrollbarbutton:hover {
    		  background-image: ${cs_buttons_hover_image_vertical} !important;
    		}
    		scrollbar[horizontal] scrollbarbutton:hover {
    		  background-image: ${cs_buttons_hover_image_horizontal} !important;
    		}
    	`;
    	
      if(custom_scrollbar_arrows === true && custom_scrollbar_arrows_version === 1)
    	custom_scrollbar_arrows_code=`
    
    		scrollbar > scrollbarbutton {
    		  background-repeat: no-repeat !important;
    		  background-position: center center !important;
    		}
    		scrollbar[vertical] > scrollbarbutton[type="decrement"] {
    		  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='${custom_scrollbar_arrows_color}' %3E%3Cpath d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E ") !important;
    		}
    		scrollbar[vertical] > scrollbarbutton[type="increment"] {
    		  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='${custom_scrollbar_arrows_color}' %3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E ") !important;
    		}
    		scrollbar > scrollbarbutton[type="decrement"] {
    		  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='${custom_scrollbar_arrows_color}' %3E%3Cpath d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'/%3E%3C/svg%3E ") !important;
    		}
    		scrollbar > scrollbarbutton[type="increment"] {
    		  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='${custom_scrollbar_arrows_color}' %3E%3Cpath d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3E%3C/svg%3E ") !important;
    		}
    		
            scrollbar[vertical] > scrollbarbutton[type="decrement"]:hover {
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_hover_color+`' %3E%3Cpath d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E ") !important;
              background-repeat: no-repeat !important;
              background-position: top !important;
            }
            scrollbar[vertical] > scrollbarbutton[type="increment"]:hover {
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_hover_color+`' %3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E ") !important;
              background-repeat: no-repeat !important;
              background-position: bottom !important;
            }
            scrollbar > scrollbarbutton[type="decrement"]:hover {
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_hover_color+`' %3E%3Cpath d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'/%3E%3C/svg%3E ") !important;
              background-repeat: no-repeat !important;
              background-position: left !important;
            }
            scrollbar > scrollbarbutton[type="increment"]:hover {
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_hover_color+`' %3E%3Cpath d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3E%3C/svg%3E ") !important;
              background-repeat: no-repeat !important;
              background-position: right !important;
            }
    	`;
      else if(custom_scrollbar_arrows === true && custom_scrollbar_arrows_version === 2)
    	custom_scrollbar_arrows_code=`
    		scrollbar > scrollbarbutton {
    		  background-repeat: no-repeat !important;
    		  background-position: center center !important;
    		}
    		scrollbar[vertical] > scrollbarbutton[type="decrement"] {
    		  background-image: url("${ProfileDirectory}/Chevron-up_hellgrau.svg") !important;
    		}
    		scrollbar[vertical] > scrollbarbutton[type="increment"] {
    		  background-image: url("${ProfileDirectory}/Chevron-down_hellgrau.svg") !important;
    		}
    		scrollbar > scrollbarbutton[type="decrement"] {
    		  background-image: url("${ProfileDirectory}/Chevron-left_hellgrau.svg") !important;
    		}
    		scrollbar > scrollbarbutton[type="increment"] {
    		  background-image: url("${ProfileDirectory}/Chevron-right_hellgrau.svg") !important;
    		}
    
    		/* Hover */
    
    		scrollbar[vertical] > scrollbarbutton[type="decrement"]:hover {
    		  background-image: url("${ProfileDirectory}/Chevron-up_orange.svg") !important;
    		}
    		scrollbar[vertical] > scrollbarbutton[type="increment"]:hover {
    		  background-image: url("${ProfileDirectory}/Chevron-down_orange.svg") !important;
    		}
    		scrollbar > scrollbarbutton[type="decrement"]:hover {
    		  background-image: url("${ProfileDirectory}/Chevron-left_orange.svg") !important;
    		}
    		scrollbar > scrollbarbutton[type="increment"]:hover {
    		  background-image: url("${ProfileDirectory}/Chevron-right_orange.svg") !important;
    		}
    
    		scrollbar > scrollbarbutton {
    			min-width: ${cs_button_size}px !important;
    			min-height: ${cs_button_size}px !important;
    		}
    	`;
    
      if(hide_scrollbar_buttons === true)
    	hide_scrollbar_buttons_code=`
    		scrollbar > scrollbarbutton {
    		  opacity: 0 !important;
    		}
    		scrollbar[vertical] > scrollbarbutton {
    		  min-height: 1px !important;
    		  height: 1px !important;
    		  max-height: 1px !important;
    		}
    		scrollbar[horizontal] > scrollbarbutton {
    		  min-width: 1px !important;
    		  width: 1px !important;
    		  max-width: 1px !important;
    		}
    	`;
    	
      if(custom_scrollbar_opacity === true)
    	custom_scrollbar_opacity_code=`
    		scrollbar {
    		  opacity: ${custom_opacity_value} !important;
    		}
    	`;
      
      if(hide_scrollbars === true)
    	hide_scrollbars_code=`
    		scrollbar, scrollcorner {
    		  display: none !important;
    		  visibility: collapse !important;
    		}
    	`;
      
      if(thin_scrollbars === true)
    	thin_scrollbars_code=`
    		:root{
    		  scrollbar-width: thin !important;
    		}
    		scrollbar[vertical] > scrollbarbutton {
    		  height: 14px !important;
    		  width: 7px !important;
    		}
    		scrollbar[horizontal] > scrollbarbutton {
    		  height: 7px !important;
    		  width: 14px !important;
    		}
    	`;
    
      Components.classes["@mozilla.org/content/style-sheet-service;1"]
        .getService(Components.interfaces.nsIStyleSheetService)
    	  .loadAndRegisterSheet(Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
    		${custom_scrollbars_code}
    		${custom_scrollbar_arrows_code}
    		${hide_scrollbar_buttons_code}
    		${custom_scrollbar_opacity_code}
    		${hide_scrollbars_code}
    		${thin_scrollbars_code}
      `), null, null),
      Components.classes["@mozilla.org/content/style-sheet-service;1"]
        .getService(Components.interfaces.nsIStyleSheetService).AGENT_SHEET);
    
    
    })();
    Alles anzeigen
  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 2. September 2025 um 14:45

    Endor Sorry, wusste nicht, dass ich auch speziell darauf hinweisen muss, dass aus einem Skript aufgerufene Dateien
    auch so im Verzeichnis heißen müssen!

    Des Rätsels Lösung ist also gefunden?

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 2. September 2025 um 10:24

    Endor Nachdem ich nun alle Kommentare gelesen habe, habe ich keine Ahnung wo bei Dir der Fehler liegen könnte.
    Es liegt aber sehr wahrscheinlich an dem Rechner, bzw. dessen Installation.

Unterstütze uns!

Jährlich (2025)

101,9 %

101,9% (662,48 von 650 EUR)

Jetzt spenden
  1. Kontakt
  2. Datenschutz
  3. Impressum
Community-Software: WoltLab Suite™
Mastodon