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
    • 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.

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 2. September 2025 um 09:47
    Zitat von Sören Hentzschel

    Das ist ganz klar ein Bug des Windows Explorers, wenn der keine Vorschau anzeigt

    Du hast Recht! Ich habe das verwechselt. Sorry.

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 2. September 2025 um 09:28
    Zitat von Endor

    Firefox 143 und 144 nur als portable verfügbar.

    Du willst das Skript auf einem Rechner nutzen, auf dem der FF nur als portable verfügbar ist?
    Wow, keine Ahnung ob das Skript damit zurecht kommt, wobei auch da ja der Profilpfad genauso
    wie bei einer Installation angelegt wird.
    Schon komisch.
    Trage doch mal den kompletten Pfad in der Zeile ein, wo das Symbol aufgerufen wird.

    Also background-image: url("C:/Users/xxxx/AppData/Roaming/Mozilla/Firefox/Profiles/z3osmcsk.Firefox-143/chrome/Icons/up.svg") !important;
    Fehler mit dem Slash behoben

    Und wenn das auch nicht fruchtet, bitte "Dein" unverändertes Skript:!:
    Ich muss das sehen und ausprobieren, Deine Symbole habe ich ja schon.

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 2. September 2025 um 08:53

    Mh, ändere mal am Ende der Variabel "icons" in "Icons".

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 2. September 2025 um 08:32

    Die Variabel stimmt!

    Wenn Du die Symbole nur in "chrome" gespeichert hast, lösche am Ende

    das "icons".

    Hast Du die Symbole unter "chrome" in einem anderen Ordner, z.b. "image",

    musst Du "icons" eben durch "image" ersetzen.


    Zitat von Endor

    sie

    Merwüdig.

    Bitte kopiere doch mal den genauen Pfad.

    Natürlich ohe Deinen Benutzernamen, mach da xxxx rein.

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 2. September 2025 um 08:24

    In welchem Ordner hast Du die Symbole denn gespeichert?

    Sie sollten unter

    "Profil"/chrome/icons

    abgespeichert sein

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 2. September 2025 um 07:40
    Zitat von grisu2099

    Bei einem Klick auf Endors .svg-Dateien öffnen die sich hier im Firefox... :/

    Ja, der Firefox macht das, aber die SVG sollte im Explorer angezeigt werden.
    Wobei man diesen unter Windows 10 erst per patch dazu bekommt, dass es auch SVG's anzeigt.

    Am besten ist, man schaut mit einem Editor sich den Code an!
    Wenn es Probleme gibt, einfach fragen.
    Nicht immer ist es so einfach wie bei diesen Symbolen.

  • Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

    • Mira_Belle
    • 2. September 2025 um 07:19

    Ach ja, die guten SVG's!

    Schaut Euch doch mal den Code an!

    Code
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
      <path fill='dodgerblue' fill-opacity='context-fill-opacity' 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'/>
    </svg>

    Wer viel mit SVG bastelt, sieht warum es nicht funktionieren kann:!:

    Code
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='dodgerblue'>
      <path 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'/>
    </svg>

    Seht Ihr den Unterschied?

    down.svg  up.svg

    Und noch etwas Klugscheiß hinterher.
    Für "dodgerblue" kann man auch Werte, was ich persönlich besser finde, nemen,
    z.B. #1e90ff oder rgb(31, 143, 255).
    ABER niemals die " " oder die ' ' vergessen!
    Und bleibt bei einem, also entweder " " oder ' '.

    Warum ich Werte bevorzuge? Weil man in einem gescheiten Editor die Farben angezeigt bekommt
    und es einefunktion gibt, diese per "Schieber" zu verändern.
    Also benutze ich immer "#ff8c00" anstatt "orange".

Unterstütze uns!

Jährlich (2025)

104,5 %

104,5% (679,10 von 650 EUR)

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