Beiträge von harff182

harff182

Zitat von Mira_Belle

Siehst Du den Fehler? Blöde Frage, bist ja nicht blind.

Zitat von Mira_Belle

Echt klasse! Danke dafür.

Das "Verfahren" hab ich vor 3 Jahren bei jemandem im TB-Forum abgeguckt und nutze es seitdem.

Durch diesen Thread hier hab ich gut dazugelernt.

War mal wieder ne nette "Lehrstunde" hier im Thread.

Ich werde nach und nach meine Scripte mal checken, wo ich jetzt was verbessern kann.

Schönes/trockenes/unwetterfreies Wochenende für alle Beteiligten...

harff182

Zitat von Mira_Belle

Na dann lass sehen!

Tja, war wieder 'n Satz mit X , weil ich mit Deinem Neuen Code nicht zurechtkomme und isn bischen spät für mich heute/jetzt noch was zu testen...

Das ist mein Versuch mit Deinem aktuellen Code, wo es nicht funzt:

CSS

"use strict";
/* Firefox 57+ userChrome.js tweaks - SCROLLBARS ********************************************** */
/* Original by Aris (aris-addons@gmx.net)****************************************************** */
/* Github: https://github.com/aris-t2/customscrollbarsforfx *********************************** */
/* ******************************************************************************************** */
/* Customized by Mira************************************************************************** */
/* version 3 nach (ECMAScript 2015) *********************************************************** */
/* https://www.camp-firefox.de/forum/thema/135133-custom-scrollbars-uc-js-anpassen/ *********** */
/* ******************************************************************************************** */
/* Custom Scrollbars for Firefox ************************************************************** */
/* version 1.0.6 ****************************************************************************** */
/* ***********************************************************************************************
 README
 
 !!! Wichtig !!!

 Die Einstellungen müssen auf 'false' gesetzt werden, damit dies auf aktuellen Firefox-Builds (102+) funktioniert

 about:config >
 widget.windows.overlay-scrollbars.enabled > false (Windows)
 widget.gtk.overlay-scrollbars.enabled > false (Linux/MacOSX)

 [!] 'Methode 2' ist erforderlich, um Firefox für benutzerdefinierte JavaScript-Dateien vorzubereiten
 [!] Die Datei 'custom_scrollbars.uc.js' gehört in den Firefox-Profilordner 'chrome'!
 -> Profilordner finden: Adressleiste > about:profiles > Wurzelordner > Ordner öffnen
 -> Datei zum Ordner \chrome\ hinzufügen (ggf. einen Ordner mit Namen "chrome" erstellen)

 [!] 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

 Aktivieren einer Einstellung > let ... auf 'true' setzen
 Deaktivieren einer Einstellung > let ... auf 'false' setzen
 Anpassungen vornehmen > Werte ändern
 - Farbe - Name: red, blue, transparent / Hexcode: #33CCFF, #FFF
 - Farbe - rgb(a): rgba(0,0,255,0.8) / hsl(a): hsla(240,100%,50%,0.8) // a = Sichtbarkeit (transparenz)
 - 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))

 HINWEIS
 - Zu kleine Werte für die Scrollbar-Breite werden sich negativ auf einige Oberflaechenelemente auswirken!
 
*********************************************************************************************** */
// "berechneten" Path ermöglichen
let scrollerProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");


// GENERAL SCROLLBAR SETTINGS
let custom_scrollbar_size_value = 16; // in px // default: custom_scrollbar_size_value = 17
// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
let cs_thumb_border = 1; // in px // default: cs_thumb_border = 0 // Rahmen des Sliders
let cs_thumb_roundness = 7; // in px // default: cs_thumb_roundness = 0 // Rundung des Sliders
let cs_thumb_minimal_size = 200; // in px
// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
let cs_background_color = "#5b5b66"; // default: cs_background_color = "#DDDDDD"
let cs_background_image_vertical = "unset"; // default: cs_background_image_vertical = "unset"
let cs_background_image_horizontal = "unset"; // default: cs_background_image_horizontal = "unset"
// - corner
let cs_corner_background_color = "beige"; // default: cs_corner_background_color = "#DDDDDD"
let cs_corner_background_image = "unset"; // default: cs_corner_background_image = "unset"
// - thumb/slider
let cs_thumb_color = "#bfbfbf"; // default: cs_thumb_color = "#33CCFF"
let cs_thumb_image_vertical = "unset"; // default: cs_thumb_image_vertical = "unset"
let cs_thumb_image_horizontal = "unset"; // default: cs_thumb_image_horizontal = "unset"
let cs_thumb_hover_color = "orange"; // default: cs_thumb_hover_color = "#66FFFF"
let cs_thumb_hover_image_vertical = "unset"; // default: cs_thumb_hover_image_vertical = "unset"
let cs_thumb_border_color = "#5b5b66"; // default: cs_thumb_border_color = "#33CCFF" "#5b5b66"
// - buttons

let cs_color_arrow = "white";
let cs_color_arrow_hover = "orange";
let cs_width = 16;
let cs_height = 16;

/* ******************************************************************************************** */
/* ******************************************************************************************** */
/* ******************************************************************************************** */

// Scrollbar code

Components.utils.import("resource://gre/modules/Services.jsm");
let ss =  Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

let custom_scrollbars = {

  init: function() {

    let uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
      
      @namespace html url("http://www.w3.org/1999/xhtml");
      
      scrollbar, scrollcorner, scrollbar thumb, 
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"], 
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"], 
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"], 
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
        -moz-appearance: none !important;
        appearance: none !important;
      }
      scrollbar {
        background-color: ${cs_background_color} !important;
      }
      scrollbar[orient="vertical"] {
        background-image: ${cs_background_image_vertical} !important;
      }
      scrollbar[orient="horizontal"] {
        background-image: ${cs_background_image_horizontal} !important;
      }
      scrollcorner {
        background-color: ${cs_corner_background_color} !important;
        background-image: ${cs_corner_background_image} !important;
      }
      scrollbar thumb {
        background-color: ${cs_thumb_color} !important;
        border-radius: ${cs_thumb_roundness}px !important;
        border: ${cs_thumb_border}px solid ${cs_thumb_border_color} !important;
      }
      scrollbar thumb[orient="vertical"] {
        background-image: ${cs_thumb_image_vertical} !important;
        min-height: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
      }
      scrollbar thumb[orient="horizontal"] {
      background-image: ${cs_thumb_image_horizontal} !important;
      min-width: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
      }
      scrollbar thumb:hover, scrollbar thumb:active {
        background-color: ${cs_thumb_hover_color} !important;
      }
      scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active,
      scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {
        background-image: ${cs_thumb_hover_image_vertical} !important;
      }
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"] {
        mask-image: url("file:///C:/Users/.../chrome/icons/Chevron-up,_12.svg") !important;
      }
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"] {
        mask-image: url("file:///C:/Users/.../chrome/icons/Chevron-down,_12.svg") !important;
      }
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"] {
        mask-image: url("file:///C:/Users/.../chrome/icons/Chevron-right,_12.svg") !important;
      }
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
        mask-image: url("file:" + ${scrollerProfileDirectory} + "/chrome/icons/Chevron-left,_12.svg") !important;
      }
      scrollbarbutton[type="increment"],
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"],
      scrollbarbutton[type="increment"],
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
        
        mask-repeat: no-repeat;
        mask-position: center;
        background-color: ${cs_color_arrow};
        width: ${cs_width}px !important;
        height: ${cs_height}px !important;
      }
      scrollbarbutton[type="increment"]:hover,
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"]:hover,
      scrollbarbutton[type="increment"]:hover,
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"]:hover {
        background-color: ${cs_color_arrow_hover} !important;
      }
      
      scrollbar[orient="vertical"] {
        background-image: ${cs_background_image_vertical} !important;
        width: ${custom_scrollbar_size_value}px !important;
      }
      scrollbar[orient="horizontal"] {
        background-image: ${cs_background_image_horizontal} !important;
        height: ${custom_scrollbar_size_value}px !important;
      }
      scrollcorner {
        background-color: ${cs_corner_background_color} !important;
        background-image: url("file:" + ${scrollerProfileDirectory} + "/chrome/icons/resizer.svg") !important;
        width: ${custom_scrollbar_size_value}px !important;
      }
    `), null, null);

    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

// enable settings as configured above
custom_scrollbars.init();

Alles anzeigen

Mit Deinem älteren Code klappt es:

CSS

"use strict";
/* Firefox 57+ userChrome.js tweaks - SCROLLBARS ********************************************** */
/* by Aris (aris-addons@gmx.net)*************************************************************** */
/* Github: https://github.com/aris-t2/customscrollbarsforfx *********************************** */
/* ******************************************************************************************** */
/* ******************************************************************************************** */
/* Custom Scrollbars for Firefox ************************************************************** */
/* version 1.0.6 ****************************************************************************** */
/* ******************************************************************************************** */
/* ***********************************************************************************************
 README
 
 !!! Important !!!
 
 Preferences have to be set to false, for this to work on recent Firefox builds (102+)
 
 about:config >
 widget.windows.overlay-scrollbars.enabled > false (Windows)
 widget.gtk.overlay-scrollbars.enabled > false (Linux/MacOSX)
  
 [!] 'Method 2' is required to prepare Firefox for custom JavaScript files
 [!] 'custom_scrollbars.uc.js' file belongs into Firefox profiles 'chrome' folder!
 -> finding profile folder: address bar > about:profiles > Root Directory > Open Folder
 -> add file to \chrome\ folder (create one, if needed)
 [!] STARTUP CACHE HAS TO BE DEconstED AFTER EVERY CHANGE!
 -> finding 'startupCache' folder: address bar > about:profiles > Local Directory > Open Folder > startupCache
 -> close Firefox
 -> deconste 'startupCache' folders content
 ENABLING options > set const to true
 DISABLING options > set const to false
 Modifying appearance > change values
 - color - name: red, fuchsia, transparent / hex code: #33CCFF, #FFF
 - color - rgb(a): rgba(0,0,255,0.8) / hsl(a): hsla(240,100%,50%,0.8)
 - numbers: 1, 2, 3 ... 10, 11, 12 ...
 - opacity: 0.0 to 1.0 e.g. 1.4, 1,75
 - gradients: linear-gradient(direction, color, color, color)
 - gradients example: linear-gradient(to right, fuchsia, #33CCFF, rgba(0,0,255,0.8))
 - predefined gradients: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
 - button size with arrow (descriptions for vertical scrollbars - analogous for horizontal scrollbars)
 -- 1: space above arrow = arrow height
 -- 1.5: space above arrow = 0.5 * arrow height
 -- 2: no space above arrow
 
 NOTE
 - This is a tiny collection of scrollbar tweaks, not a port of 'NewScrollbars' add-on!
 - Small scrollbar width values will corrupt some parts of the ui!
 
*********************************************************************************************** */
// "berechneten" Path ermöglichen
const scrollerProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");

// GENERAL SCROLLBAR SETTINGS
const hide_scrollbars = false; // default: hide_scrollbars = false
const hide_scrollbar_buttons = false; // default: hide_scrollbar_buttons = false
const custom_scrollbar_size = true; // default: custom_scrollbar_size = false
const custom_scrollbar_size_value = 22; // in px // default: custom_scrollbar_size_value = 17
const custom_scrollbar_opacity = false; // default: custom_scrollbar_opacity = false

// floating scrollbars
const enable_scrollbars_on_top_of_webcontent = false; // default: enable_scrollbars_on_top_of_webcontent = false // uses 'custom_scrollbar_size_value' inside its code

// custom scrollbars
const enable_custom_scrollbars = true; // default: enable_custom_scrollbars = true

// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
const cs_thumb_border = 3; // in px // default: cs_thumb_border = 0
const cs_thumb_roundness = 80; // in px // default: cs_thumb_roundness = 0
const cs_buttons_roundness = 0; // in px // default: cs_buttons_roundness = 0
const cs_buttons_as_arrows = false; // default: cs_buttons_as_arrows = false // uses 'custom_scrollbar_size_value' inside its code
const cs_arrows_on_buttons = true; // default: cs_arrows_on_buttons = true // uses 'custom_scrollbar_size_value' inside its code

// button size with arrow - 1: space above arrow = arrow height // 1.5: space above arrow = 0.5 * arrow height // 2: no space above arrow
const cs_arrows_on_buttons_buttons_size = 1.5; // default: cs_arrows_on_buttons_buttons_size = 1.5

// 'flat' scrollbars
// const cs_ignore_color_gradients = false; // default: cs_ignore_color_gradients = false
const cs_thumb_minimal_size = 12; // in px

// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
const cs_background_color = "yellow"; // default: cs_background_color = "#DDDDDD"
const cs_background_image_vertical = "unset"; // default: cs_background_image_vertical = "unset"
const cs_background_image_horizontal = "unset"; // default: cs_background_image_horizontal = "unset"

// - corner
const cs_corner_background_color = "beige"; // default: cs_corner_background_color = "#DDDDDD"
//const cs_corner_background_image = "unset"; // default: cs_corner_background_image = "unset"

// - thumb/slider
const cs_thumb_color = "cornflowerblue"; // default: cs_thumb_color = "#33CCFF"            //von mir ?
const cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_image_vertical = "unset"
const cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_image_horizontal = "unset"
const cs_thumb_hover_color = "coral"; // default: cs_thumb_hover_color = "#66FFFF"        //von mir ?
const cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_hover_image_vertical = "unset"
const cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_hover_image_horizontal = "unset"
const cs_thumb_border_color = "black"; // default: cs_thumb_border_color = "#33CCFF"        //von mir ?

// - buttons
const cs_buttons_color = "yellow"; // default: cs_buttons_color = "#66FFFF"                //von mir ?
//const cs_buttons_image_vertical = "unset"; // default: cs_buttons_image_vertical = "unset"
//const cs_buttons_image_horizontal = "unset"; // default: cs_buttons_image_horizontal = "unset"
const cs_buttons_hover_color = "gainsboro"; // default: cs_buttons_hover_color = "#33CCFF"    //von mir ?
//const cs_buttons_hover_image_vertical = "unset"; // default: cs_buttons_hover_image_vertical = "unset"
//const cs_buttons_hover_image_horizontal = "unset"; // default: cs_buttons_hover_image_horizontal = "unset"

// 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";

/* ******************************************************************************************** */
/* scrollcornerimage von harff **************************************************************** */
/* ******************************************************************************************** */
// Scrollbar code
Components.utils.import("resource://gre/modules/Services.jsm");
const ss =  Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);
const custom_scrollbars = {
  init: function() {

    
    const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar, scrollcorner, scrollbar thumb, scrollbar scrollbarbutton[type="increment"], scrollbar scrollbarbutton[type="decrement"] {\
        -moz-appearance: none !important;\
        appearance: none !important;\
      }\
      scrollbar {\
        background-color: '+cs_background_color+' !important;\
      }\
      scrollbar[orient="vertical"] {\
        background-image: '+cs_background_image_vertical+' !important;\
        width: '+custom_scrollbar_size_value+'px !important;\
      }\
      scrollbar[orient="horizontal"] {\
        background-image: '+cs_background_image_horizontal+' !important;\
        height: '+custom_scrollbar_size_value+'px !important;\
      }\
      scrollcorner {\
        background-color: '+cs_corner_background_color+' !important;\
        background-image: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/fux2.svg") + '"); !important;\
      }\
      scrollbar thumb {\
        background-color: '+cs_thumb_color+' !important;\
        border-radius: '+cs_thumb_roundness+'px !important;\
        border: '+cs_thumb_border+'px solid '+cs_thumb_border_color+' !important;\
      }\
      scrollbar thumb[orient="vertical"] {\
        background-image: '+cs_thumb_image_vertical+' !important;\
        min-height: '+(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)+'px !important;\
      }\
      scrollbar thumb[orient="horizontal"] {\
      background-image: '+cs_thumb_image_horizontal+' !important;\
      min-width: '+(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)+'px !important;\
      }\
      scrollbar thumb:hover, scrollbar thumb:active {\
        background-color: '+cs_thumb_hover_color+' !important;\
      }\
      scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active {\
        background-image: '+cs_thumb_hover_image_vertical+' !important;\
      }\
      scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {\
        background-image: '+cs_thumb_hover_image_horizontal+' !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"] {\
        mask-image: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-down,_12.svg") + '"); !important;\
        mask-repeat: no-repeat;\
        mask-position: center;\
        display: block !important;\
        background-color: black !important;\
        content: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-down,_12.svg") + '"); !important;\
        width: 16px !important;\
        height: 16px !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"] {\
        mask-image: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-up,_12.svg") + '"); !important;\
        mask-repeat: no-repeat;\
        mask-position: center;\
        display: block !important;\
        background-color: fuchsia !important;\
        content: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-up,_12.svg") + '"); !important;\
        width: 16px !important;\
        height: 16px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"] {\
        mask-image: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-right,_12.svg") + '"); !important;\
        mask-repeat: no-repeat;\
        mask-position: center;\
        display: block !important;\
        background-color: black !important;\
        content: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-right,_12.svg") + '"); !important;\
        width: 16px !important;\
        height: 16px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {\
        mask-image: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-left,_12.svg") + '"); !important;\
        mask-repeat: no-repeat;\
        mask-position: center;\
        display: block !important;\
        background-color: fuchsia !important;\
        content: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-left,_12.svg") + '"); !important;\
        width: 16px !important;\
        height: 16px !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"]:hover {\
        background-color: lime !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"]:hover {\
        background-color: lime !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"]:hover {\
        background-color: lime !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"]:hover {\
        background-color: lime !important;\
      }\
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
const cs_scrollbars_scrollbar_button_arrows = {
  init: function() {
    const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar scrollbarbutton, \
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"],\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"],\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"],\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"],\
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"]:hover,\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"]:hover,\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"]:hover,\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"]:hover {\
        background-color: unset !important;\
        background-image: unset !important;\
        border-radius: 0px !important;\
      }\
      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
        scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]{\
        height: 16px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
const cs_scrollbars_arrows_on_buttons = {
  init: function() {
    const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar scrollbarbutton, \
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"],\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"],\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"],\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"],\
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"]:hover,\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"]:hover,\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"]:hover,\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"]:hover {\
        border-radius: 0px !important;\
      }\
      \
      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
const scrollbar_buttons = {
  init: function() {
    const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar scrollbarbutton {\
        opacity: 0 !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"] {\
        min-height: 1px !important;\
        height: 1px !important;\
        max-height: 1px !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"] {\
        min-height: 1px !important;\
        height: 1px !important;\
        max-height: 1px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"] {\
        min-width: 1px !important;\
        width: 1px !important;\
        max-width: 1px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {\
        min-width: 1px !important;\
        width: 1px !important;\
        max-width: 1px !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
const scrollbar_size = {
  init: function() {
    const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"] {\
        min-width: 0 !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"] {\
        min-width: 0 !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"] {\
        min-height: 0 !important;\
        height: 16px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {\
        min-height: 0 !important;\
        height: 16px !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
const floating_scrollbars = {
  init: function() {
    const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar {\
        position: relative !important;\
        z-index: 1000000000 !important;\
      }\
      scrollbar[orient="vertical"],\
      scrollbar[orient="horizontal"],\
      scrollbar, scrollcorner {\
        background-color: transparent !important; \
        background-image: unset !important; \
      }\
      scrollbar[orient="vertical"] {\
        margin-inline-start: -0px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] {\
        margin-top: -0px !important;\
        height: 16px !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
const scrollbar_opacity = {
  init: function() {
    const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar {\
        opacity: 0.5 !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
const remove_scrollbars = {
  init: function() {
    const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar, scrollcorner {\
        display: none !important;\
        visibility: collapse !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
// enable settings as configured above
if(enable_custom_scrollbars==true) custom_scrollbars.init();
if(cs_buttons_as_arrows==true && hide_scrollbars==false) cs_scrollbars_scrollbar_button_arrows.init();
if(cs_arrows_on_buttons==true && cs_buttons_as_arrows==false && hide_scrollbars==false) cs_scrollbars_arrows_on_buttons.init();
if(hide_scrollbar_buttons==true) scrollbar_buttons.init();
if(custom_scrollbar_size==true) scrollbar_size.init();
if(enable_scrollbars_on_top_of_webcontent==true) floating_scrollbars.init();
if(custom_scrollbar_opacity==true) scrollbar_opacity.init();
if(hide_scrollbars==true) remove_scrollbars.init();

Alles anzeigen

Schade... aber jezz bin ich und muß

bis mogghän...

harff182

Huch

Was geht denn hier ab?

Wieder mal Weiterbildung a la Sören Hentzschel .

Danke dafür, auch wenn ichs zum Verstehen ersma bookmarken muß.

Mira_Belle:

(Wo) Gibts einen aktuellen Code?

Ich glaube nämlich (mal wieder), einen Weg ohne absolute Pfade gefunden zu haben und würde den mit Deinem Code gerne mal testen und dann beisteuern...

harff182

Antwort (30 Minuten später):

CSS

      scrollbar[orient="vertical"] {\
        background-image: '+cs_background_image_vertical+' !important;\
        width: '+custom_scrollbar_size_value+'px !important;\
      }\
      scrollbar[orient="horizontal"] {\
        background-image: '+cs_background_image_horizontal+' !important;\
        height: '+custom_scrollbar_size_value+'px !important;\
      }\

Und so bekommt man unten rechts inne Ecke was rein:

CSS

      scrollcorner {\
        background-color: '+cs_corner_background_color+' !important;\
        background-image: url("file:///D:/01_gfx/scroller/doppelpfeil.svg") !important;\
        width: '+custom_scrollbar_size_value+'px !important;\
      }\

Sieht bei mir hier b.a.w. so aus:

harff182

Frage:

(Wie) kamm man die Scrollbars breiter bzw höher machen?

Das hier:

var custom_scrollbar_size_value = 17; // in px // default: custom_scrollbar_size_value = 17

führt bei Wertänderungen zu nix, weil die Variable nirgendwo mehr auftaucht...

harff182

Mira_Belle :

Hattu fein macht

Danke fürs Teilen.

Jezz habbich die Qual der Wahl , welches Layout mit welchen Funktionen mir mehr zusagt .

harff182

Zitat von Mira_Belle

Aber DAS ist das fehlende Puzzle.

Wo kommt denn der Schnipsel her?

Vielleicht kann man aus dem Zusammenhang erkennen/ableiten, was zu tun ist...

Mira_Belle:

Frage:

Interessiert es Dich, daß statt den von Dir benutzten Pfaden wie:

url("file:///C:/Users/.../chrome/icons/Chevron-up,_Web_Fundamentals_new.svg")

auch sowas funktionieren könnte:

url("file:///../icons/Chevron-down,_Web_Fundamentals.svg")

Ich bevorzuge letzteren, den relativen Pfad, und bei mir hier funktionuckelt es...

harff182

Hab das eben nochmal über den FF versucht - keine Änderung wurde gespeichert

Ich werd das aber nicht weiterverfolgen, denn:

Dann hab ich mir mal in Wikipedia anguckt, was SVG überhaupt ist.

Beim Stichwort "XML" drängelte sich mein Editor (Notepad++) in den Vordergrund.

Damit waren die Änderungen problemlos möglich.

Viele Wege führen nach Rom - und ich bin auf diesem Weg angekommen:

harff182

Ich muß für heute aufgeben - nachdem einer der Pfeile auf einmal weg war, is meine Konzentrationsfähigkeit hinüber

Bis moggähn...

harff182

Tja...

wenn ich die verkleinerte Grafik (z.b: als Chevronleft-left2,_Web_Fundamentals.svg) abspeichere, hat sie dieselbe alte Größe beim öffnen und auch 568 byte.

harff182

Mira_Belle:

Bitte erkläre mir/uns, wie das geht...

Ich hätte die Pfeile left/right gerne so klein up/down

harff182

Zitat von Mira_Belle

Nun habe ich nur noch das Problem, dass jeweils in den Scrollbars in den entgegengesetzten "Richtungen" beide
Symbole, ink. der entsprechenden Funktionen, sind (erscheinen).
Wenn dieses Problem gelöst wird/ist, dann wäre das Script fertig.

Für mich ist es jetzt schon eine Bereicherung:

Ein wenig Fine-Tuning noch, dann meinen Code aufräumen/kommentieren und meinereiner is glücklich

DANKE für Deine Hartnäckigkeit...

harff182

Zitat von Mira_Belle

Viel Spaß.

Ich hab bei meinem Bastelenthusiasmus total verdrängt, daß ich ja nur noch einen neu aufgesetzten Win11er hab und immer wieder über Unterschiede zu Win10 stolpere..

mal abwarten, ob ich was Sinnvolles hinbekomme...

harff182

Mira_Belle :

Magst Du bitte Deinen kompletten Code einstellen?

Damit meinereiner immer alle von Dir getroffenen Einstellungen zum Nachvollziehen hat.

Mich interessiert diese Bastelei auch sehr und ich würde mir dann dafür einen extra Bastel-FF einrichten.

bis später...

harff182

Ich habs noch nicht ins Bett geschafft, weil mir was von Aris Github-Seite im Hinterkopf rumschwirrte.

Jetzt hab ich die Versionen 1.0.0 bis 1.0.3a auf platte liegen und werd ersma testen, was die machen und ob die für meine Zwecke/Vorstellungen nicht schon reichen.

Jezz is abba wirklich

guuts nächtle...

harff182

Mira_Belle:

cs_scrollbars_scrollbar_button_arrows (Zeile207) ist in Zeile 73 auf "false" gesetzt und wird nicht benutzt/angesprungen.

Wenn ich es auf "true" setzte, sind die Dreiecke weg, aber der Bereich noch da - der Slider geht z.B. nicht bis ganz nach oben.

Vielleicht könnte man da eine eigene Grafik reinbugsieren, aber dafür bin ich heute zu müde, ma gucken, ob/wann ich nächste Woche Zeit zum rumtesten habe...

harff182

Frage eines weiteren Script-Dummies:

Gibt es in dem Script nicht eindeutige Bezeichner für die up-/down-/left-/-right-Dreiecke, die man in einem zusätzlichen .css durch Grafiken ersetzen kann, die einem mehr zusagen?

harff182

Zitat von 2002Andreas

Dann viel Spaß dabei

Hab ich schon:

Ich weis, daß wenigen mein buntes Gummibärchen-Layout gefällt, aber is schon erstaunlich, was man aus dem Code-Schnipsel von 2002Andreas herausholen kann...

Abendpflege vorbei - Guuts nächtle und schönes Wochenende allerseits

harff182

Kurztest, bevor ich mich um Abendessen und -pflege für meine Mom kümmern muß:

:huepf:

Dann werd ich heute Abend mal gucken, was ich mit dem Codeschnipsel für Schindluder treiben kann.

DANKE !!!

harff182

Dann lassen wirs dabei bewenden.

Wäre nur ein nettes Goodie gewesen, is ja nich lebenswichtig.

Danke für Deine Bemühungen...

Beiträge von harff182

scrollbars.uc.js anpassen - geschafft und erledigt!

scrollbars.uc.js anpassen - geschafft und erledigt!

scrollbars.uc.js anpassen - geschafft und erledigt!

scrollbars.uc.js anpassen - geschafft und erledigt!

scrollbars.uc.js anpassen - geschafft und erledigt!

scrollbars.uc.js anpassen - geschafft und erledigt!

scrollbars.uc.js anpassen - geschafft und erledigt!

Symbole unter zu Hilfenahme der Browserwerkzeugen in der Größe ändern

Symbole unter zu Hilfenahme der Browserwerkzeugen in der Größe ändern

Symbole unter zu Hilfenahme der Browserwerkzeugen in der Größe ändern

Symbole unter zu Hilfenahme der Browserwerkzeugen in der Größe ändern

scrollbars.uc.js anpassen - geschafft und erledigt!

scrollbars.uc.js anpassen - geschafft und erledigt!

scrollbars.uc.js anpassen - geschafft und erledigt!

scrollbars.uc.js anpassen - geschafft und erledigt!

scrollbars.uc.js anpassen - geschafft und erledigt!

scrollbars.uc.js anpassen - geschafft und erledigt!

Link im Ordner in der LZLeiste farblich ändern

Link im Ordner in der LZLeiste farblich ändern

Link im Ordner in der LZLeiste farblich ändern