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

Andy 123

Hallo,

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

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

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

userContent.css und userChrome.css

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

/* Scrollbar farbig innerhalb vom Firefox */

:root{

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

scrollbar-color: #CC6699 #666699;

}

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

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

Wer hat eine Idee? Danke

2002Andreas

Zitat von Andy 123

habe ich folgenden Code übers Profil verwendet,

Dein Code funktioniert nicht.

Die Farbe bei dir stammt von deinem genutztem Theme.

Andy 123

Zitat von 2002Andreas

Die Farbe bei dir stammt von deinem genutztem Theme.
Hallo Andreas,
wie meinst du das mit den genutzem Theme? Der rechte Scrollbalken mit dem Farben "Grau-Blau + Pink funktioniert nur Rechts aber nicht auf den linken LZ-Balken?
Ich kenne mich mit den Codes nicht aus. Hab ihn vor längerer Zeit einfach kopiert und übertragen. Er ist auch für Thunderbird anwendbar.
Gruß Andy

2002Andreas

Zitat

wie meinst du das mit den genutzem Theme?

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

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

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

Selbst in einer alten Fx Version funktioniert er nicht.

macko

Zitat von 2002Andreas

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

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

Zitat von Andy 123

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

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

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

userChrome.css⬇

CSS: userChrome.css

/* Scrollbar farbig innerhalb vom Firefox */

:root{

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

    scrollbar-color: #CC6699 #666699 !important;

}

/* Breite der Scrollbar anpassen -> dünn*/

scrollbar{
    scrollbar-width: thin !important;
}

Alles anzeigen

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

userContent.css⬇

CSS: userContent.css

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

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

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

Zitat von Andy 123

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

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

2002Andreas

Zitat von macko

zusätzlich noch in die userContent.css gehört

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

milupo

Zitat von 2002Andreas

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

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

Speravir

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

Zitat von 2002Andreas

Dein Code funktioniert nicht.

Zitat von 2002Andreas

Selbst in einer alten Fx Version funktioniert er nicht.

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

Zitat von Andy 123

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

[…]

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

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

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

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

milupo

Zitat von Speravir

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

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

JavaScript

"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.4 ****************************************************************************** */
/* ******************************************************************************************** */

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

 README
 
 [!] either 'method 1' or 'method 2' are 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 DELETED AFTER EVERY CHANGE!
 -> finding 'startupCache' folder: address bar > about:profiles > Local Directory > Open Folder > startupCache
 -> close Firefox
 -> delete 'startupCache' folders content

 ENABLING options > set var to true
 DISABLING options > set var to false
 Modifying appearance > change values
 - color - name: red, blue, 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, blue, #33CCFF, rgba(0,0,255,0.8))
 - unsettings 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!
 
*********************************************************************************************** */

// GENERAL SCROLLBAR SETTINGS
var hide_scrollbars = false; // default: hide_scrollbars = false
var hide_scrollbar_buttons = false; // default: hide_scrollbar_buttons = false
var custom_scrollbar_size = true; // default: custom_scrollbar_size = false
var custom_scrollbar_size_value = 17; // in px // default: custom_scrollbar_size_value = 17
var custom_scrollbar_opacity = false; // default: custom_scrollbar_opacity = false
var custom_opacity_value = "1.0"; // default: custom_opacity_value = "1.0"
// floating scrollbars
var 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
var enable_custom_scrollbars = true; // default: enable_custom_scrollbars = true

// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
var cs_thumb_border = 2; // in px // default: cs_thumb_border = 0
var cs_thumb_roundness = 10; // in px // default: cs_thumb_roundness = 0
var cs_buttons_roundness = 80; // in px // default: cs_buttons_roundness = 0
var cs_buttons_as_arrows = false; // default: cs_buttons_as_arrows = false // uses 'custom_scrollbar_size_value' inside its code
var 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
var cs_arrows_on_buttons_buttons_size = 2; // default: cs_arrows_on_buttons_buttons_size = 1.5
// 'flat' scrollbars
var cs_ignore_color_gradients = false; // default: cs_ignore_color_gradients = false

// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
var cs_background_color = "orange"; // default: cs_background_color = "#DDDDDD"
var cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_background_image_vertical = "unset"
var cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_background_image_horizontal = "unset"
// - corner
var cs_corner_background_color = "#FF0000"; // default: cs_corner_background_color = "#DDDDDD"
var 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 = "unset"
// - thumb/slider
var cs_thumb_color = "#228B22"; // default: cs_thumb_color = "#33CCFF"
var cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_image_vertical = "unset"
var cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_image_horizontal = "unset"
var cs_thumb_hover_color = "#FF0000"; // default: cs_thumb_hover_color = "#66FFFF"
var cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_hover_image_vertical = "unset"
var cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_hover_image_horizontal = "unset"
var cs_thumb_border_color = "#228B22"; // default: cs_thumb_border_color = "#33CCFF"
// - buttons
var cs_buttons_color = "#228B22"; // default: cs_buttons_color = "#66FFFF"
var cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_buttons_image_vertical = "unset"
var cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_buttons_image_horizontal = "unset"
var cs_buttons_hover_color = "#FF0000"; // default: cs_buttons_hover_color = "#33CCFF"
var cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_buttons_hover_image_vertical = "unset"
var cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_buttons_hover_image_horizontal = "unset"
// - button arrows
var cs_arrows_on_buttons_color = "#228B22"; // default: cs_arrows_on_buttons_color = "#33CCFF"
var cs_arrows_on_buttons_hover_color = "#FF0000"; // default: cs_arrows_on_buttons_hover_color = "#66FFFF"

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

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


// Scrollbar code

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

var custom_scrollbars = {

    init: function() {

    var 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 {\
      -moz-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;\
    }\
    scrollbar thumb[orient="horizontal"] {\
      background-image: '+cs_thumb_image_horizontal+' !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 scrollbarbutton {\
      background-color: '+cs_buttons_color+' !important;\
      border-radius: '+cs_buttons_roundness+'px !important;\
    }\
    scrollbar[orient="vertical"] scrollbarbutton {\
      background-image: '+cs_buttons_image_vertical+' !important;\
    }\
    scrollbar[orient="horizontal"] scrollbarbutton {\
      background-image: '+cs_buttons_image_horizontal+' !important;\
    }\
    scrollbar scrollbarbutton:hover {\
      background-color: '+cs_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="vertical"] scrollbarbutton:hover {\
      background-image: '+cs_buttons_hover_image_vertical+' !important;\
    }\
    scrollbar[orient="horizontal"] scrollbarbutton:hover {\
      background-image: '+cs_buttons_hover_image_horizontal+' !important;\
    }\
    '), null, null);

    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

    }
};

var cs_scrollbars_scrollbar_button_arrows = {

  init: function() {

  var 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,\
    scrollbar[orient="horizontal"] scrollbarbutton, \
    scrollbar[orient="vertical"] scrollbarbutton:hover,\
    scrollbar[orient="horizontal"] scrollbarbutton:hover {\
      background-color: unset !important;\
      background-image: unset !important;\
      border-radius: 0px !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton {\
      min-height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      max-height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      min-width: '+custom_scrollbar_size_value+'px !important;\
      width: '+custom_scrollbar_size_value+'px !important;\
      max-width: '+custom_scrollbar_size_value+'px !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton {\
      min-width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      max-width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      min-height: '+custom_scrollbar_size_value+'px !important;\
      height: '+custom_scrollbar_size_value+'px !important;\
      max-height: '+custom_scrollbar_size_value+'px !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {\
      border-left: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-right: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-bottom: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_color+' !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {\
      border-bottom: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {\
      border-left: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-right: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-top: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_color+' !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {\
      border-top: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {\
      border-top: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-bottom: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-right: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {\
      border-right: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {\
      border-top: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-bottom: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-left: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {\
      border-left: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_hover_color+' !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var cs_scrollbars_arrows_on_buttons = {

  init: function() {

  var 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,\
    scrollbar[orient="horizontal"] scrollbarbutton, \
    scrollbar[orient="vertical"] scrollbarbutton:hover,\
    scrollbar[orient="horizontal"] scrollbarbutton:hover {\
      border-radius: 0px !important;\
    }\
    \
    scrollbar[orient="vertical"] > scrollbarbutton {\
      min-height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      max-height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      min-width: '+custom_scrollbar_size_value+'px !important;\
      width: '+custom_scrollbar_size_value+'px !important;\
      max-width: '+custom_scrollbar_size_value+'px !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton {\
      min-width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      max-width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\
      min-height: '+custom_scrollbar_size_value+'px !important;\
      height: '+custom_scrollbar_size_value+'px !important;\
      max-height: '+custom_scrollbar_size_value+'px !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {\
      border-left: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-right: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-bottom: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_color+' !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {\
      border-bottom: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {\
      border-left: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-right: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-top: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_color+' !important;\
    }\
    scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {\
      border-top: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {\
      border-top: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-bottom: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-right: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {\
      border-right: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {\
      border-top: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-bottom: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\
      border-left: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_color+' !important;\
    }\
    scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {\
      border-left: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_hover_color+' !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var scrollbar_buttons = {

  init: function() {

  var 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 {\
      min-height: 1px !important;\
      height: 1px !important;\
      max-height: 1px !important;\
    }\
    scrollbar[orient="horizontal"] scrollbarbutton {\
      min-width: 1px !important;\
      width: 1px !important;\
      max-width: 1px !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var scrollbar_size = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar[orient="vertical"] scrollbarbutton {\
      min-width: 0 !important;\
      width: '+custom_scrollbar_size_value+'px !important;\
      max-width: '+custom_scrollbar_size_value+'px !important;\
    }\
    scrollbar[orient="horizontal"] scrollbarbutton {\
      min-height: 0 !important;\
      height: '+custom_scrollbar_size_value+'px !important;\
      max-height: '+custom_scrollbar_size_value+'px !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var floating_scrollbars = {

  init: function() {

  var 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"] {\
      -moz-margin-start: -'+custom_scrollbar_size_value+'px !important;\
      width: '+custom_scrollbar_size_value+'px !important;\
    }\
    scrollbar[orient="horizontal"] {\
      margin-top: -'+custom_scrollbar_size_value+'px !important;\
      height: '+custom_scrollbar_size_value+'px !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var scrollbar_opacity = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar {\
      opacity: '+custom_opacity_value+' !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var remove_scrollbars = {

  init: function() {

  var 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

Andy 123

Zitat von macko
Zitat von 2002Andreas

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

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

Zitat von Andy 123

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

Das liegt daran, dass du deinen Code innerhalb der userChrome.css leicht anpassen musst. Bei scrollbar-color muss am Ende noch !important angehängt werden, damit der Farbwert des Scrollbalken überschrieben wird.
Hier ein Beispiel wie du deine userChrome.css anpassen musst + noch ein zusätzlichen CSS-Schnipsel angehängt, wie man die Scrollbalkenbreite anpassen kann.
userChrome.css⬇
CSS: userChrome.css
/* Scrollbar farbig innerhalb vom Firefox */

:root{

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

    scrollbar-color: #CC6699 #666699 !important;

}

/* Breite der Scrollbar anpassen -> dünn*/

scrollbar{
    scrollbar-width: thin !important;
}
Alles anzeigen
Und hier noch einmal für die userContent.css ➡ falls du dort auch die Scrollbar-Breite anpassen möchtest.
userContent.css⬇
CSS: userContent.css
:root{
   
  /* Farbe 1: Thumb - Farbe 2: Hintergund*/
  scrollbar-color: #CC6699 #666699;
  
  /* Breite der Scrollbar anpassen -> dünn*/
  scrollbar-width: thin;
}
Wenn es geklappt hat, sollte es dann folgendermassen aussehen ➡ siehe Screenshot unten
Wenn du die Anpassung für die Scrollbar-Breite nicht möchtest, dann einfach die Zeile mit scrollbar-width entfernen.

Zitat von Andy 123

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

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

macko

Hallo Andy 123

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

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

Andy 123

Hallo

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

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

Er sollte breiter werden.

über about:config waren die beiden Einstellungen:

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

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

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

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

userChrome.css-Editor:

________________________

/* Scrollbar farbig innerhalb vom Firefox */

:root{

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

scrollbar-color: #CC6699 #666699 !important;

}

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

userContent.css-Editor:

________________________
:root{

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

scrollbar-color: #CC6699 #666699;

}

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

GrußAndy

JohnnyKidd

Hi,

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

JavaScript

"use strict";


/* Firefox 57+ userChrome.js tweaks - SCROLLBARS ********************************************** */

/* by Aris ([email='aris-addons@gmx.net'][/email])*************************************************************** */

/* Github: https://github.com/aris-t2/customscrollbarsforfx *********************************** */

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


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

/* Custom Scrollbars for Firefox ************************************************************** */

/* version 1.0.4 ****************************************************************************** */

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


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

README


[!] either 'method 1' or 'method 2' are 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 DELETED AFTER EVERY CHANGE!

-> finding 'startupCache' folder: address bar > about:profiles > Local Directory > Open Folder > startupCache

-> close Firefox

-> delete 'startupCache' folders content

ENABLING options > set var to true

DISABLING options > set var to false

Modifying appearance > change values

- color - name: red, blue, 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, blue, #33CCFF, rgba(0,0,255,0.8))

- unsettings 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!


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


// GENERAL SCROLLBAR SETTINGS

var hide_scrollbars = false; // default: hide_scrollbars = false

var hide_scrollbar_buttons = false; // default: hide_scrollbar_buttons = false

var custom_scrollbar_size = true; // default: custom_scrollbar_size = false

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

var custom_scrollbar_opacity = false; // default: custom_scrollbar_opacity = false

var custom_opacity_value = "1.0"; // default: custom_opacity_value = "1.0"

// floating scrollbars

var 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

var enable_custom_scrollbars = true; // default: enable_custom_scrollbars = true


// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")

var cs_thumb_border = 2; // in px // default: cs_thumb_border = 0

var cs_thumb_roundness = 80; // in px // default: cs_thumb_roundness = 0

var cs_buttons_roundness = 0; // in px // default: cs_buttons_roundness = 0

var cs_buttons_as_arrows = true; // default: cs_buttons_as_arrows = false // uses 'custom_scrollbar_size_value' inside its code

var 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

var cs_arrows_on_buttons_buttons_size = 1.5; // default: cs_arrows_on_buttons_buttons_size = 1.5

// 'flat' scrollbars

var cs_ignore_color_gradients = false; // default: cs_ignore_color_gradients = false


// CUSTOM SCROLLBAR COLORS/GRADIENTS

// - background

var cs_background_color = "#000000"; // default: cs_background_color = "#DDDDDD"

var cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(55,55,55,0.5),transparent)"; // default: cs_background_image_vertical = "unset"

var cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(55,55,55,0.5),transparent)"; // default: cs_background_image_horizontal = "unset"

// - corner

var cs_corner_background_color = "#000000"; // default: cs_corner_background_color = "#DDDDDD"

var cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(55,55,55,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(55,55,55,0.5) 50%,transparent 70%)"; // default: cs_corner_background_image = "unset"

// - thumb/slider

var cs_thumb_color = "#CA0000"; // default: cs_thumb_color = "#33CCFF"

var cs_thumb_image_vertical = "unset"; // default: cs_thumb_image_vertical = "unset"

var cs_thumb_image_horizontal = "unset"; // default: cs_thumb_image_horizontal = "unset"

var cs_thumb_hover_color = "#CA0000"; // default: cs_thumb_hover_color = "#66FFFF"

var cs_thumb_hover_image_vertical = "unset"; // default: cs_thumb_hover_image_vertical = "unset"

var cs_thumb_hover_image_horizontal = "unset"; // default: cs_thumb_hover_image_horizontal = "unset"

var cs_thumb_border_color = "#000000"; // default: cs_thumb_border_color = "#33CCFF"

// - buttons

var cs_buttons_color = "#CA0000"; // default: cs_buttons_color = "#66FFFF"

var cs_buttons_image_vertical = "unset"; // default: cs_buttons_image_vertical = "unset"

var cs_buttons_image_horizontal = "unset"; // default: cs_buttons_image_horizontal = "unset"

var cs_buttons_hover_color = "#CA0000"; // default: cs_buttons_hover_color = "#33CCFF"

var cs_buttons_hover_image_vertical = "unset"; // default: cs_buttons_hover_image_vertical = "unset"

var cs_buttons_hover_image_horizontal = "unset"; // default: cs_buttons_hover_image_horizontal = "unset"

// - button arrows

var cs_arrows_on_buttons_color = "#33CCFF"; // default: cs_arrows_on_buttons_color = "#33CCFF"

var cs_arrows_on_buttons_hover_color = "#66FFFF"; // default: cs_arrows_on_buttons_hover_color = "#66FFFF"


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


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

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

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



// Scrollbar code


Components.utils.import("resource://gre/modules/Services.jsm");

var ss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);


var custom_scrollbars = {


init: function() {


var 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 {\

-moz-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;\

}\

scrollbar thumb[orient="horizontal"] {\

background-image: '+cs_thumb_image_horizontal+' !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 scrollbarbutton {\

background-color: '+cs_buttons_color+' !important;\

border-radius: '+cs_buttons_roundness+'px !important;\

}\

scrollbar[orient="vertical"] scrollbarbutton {\

background-image: '+cs_buttons_image_vertical+' !important;\

}\

scrollbar[orient="horizontal"] scrollbarbutton {\

background-image: '+cs_buttons_image_horizontal+' !important;\

}\

scrollbar scrollbarbutton:hover {\

background-color: '+cs_buttons_hover_color+' !important;\

}\

scrollbar[orient="vertical"] scrollbarbutton:hover {\

background-image: '+cs_buttons_hover_image_vertical+' !important;\

}\

scrollbar[orient="horizontal"] scrollbarbutton:hover {\

background-image: '+cs_buttons_hover_image_horizontal+' !important;\

}\

'), null, null);


ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


}

};


var cs_scrollbars_scrollbar_button_arrows = {


init: function() {


var 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,\

scrollbar[orient="horizontal"] scrollbarbutton, \

scrollbar[orient="vertical"] scrollbarbutton:hover,\

scrollbar[orient="horizontal"] scrollbarbutton:hover {\

background-color: unset !important;\

background-image: unset !important;\

border-radius: 0px !important;\

}\

scrollbar[orient="vertical"] > scrollbarbutton {\

min-height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\

height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\

max-height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\

min-width: '+custom_scrollbar_size_value+'px !important;\

width: '+custom_scrollbar_size_value+'px !important;\

max-width: '+custom_scrollbar_size_value+'px !important;\

}\

scrollbar[orient="horizontal"] > scrollbarbutton {\

min-width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\

width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\

max-width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\

min-height: '+custom_scrollbar_size_value+'px !important;\

height: '+custom_scrollbar_size_value+'px !important;\

max-height: '+custom_scrollbar_size_value+'px !important;\

}\

scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {\

border-left: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\

border-right: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\

border-bottom: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_color+' !important;\

}\

scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {\

border-bottom: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_hover_color+' !important;\

}\

scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {\

border-left: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\

border-right: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\

border-top: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_color+' !important;\

}\

scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {\

border-top: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_hover_color+' !important;\

}\

scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {\

border-top: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\

border-bottom: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\

border-right: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_color+' !important;\

}\

scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {\

border-right: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_hover_color+' !important;\

}\

scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {\

border-top: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\

border-bottom: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\

border-left: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_color+' !important;\

}\

scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {\

border-left: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_hover_color+' !important;\

}\

\

'), null, null);


ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


}

};


var cs_scrollbars_arrows_on_buttons = {


init: function() {


var 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,\

scrollbar[orient="horizontal"] scrollbarbutton, \

scrollbar[orient="vertical"] scrollbarbutton:hover,\

scrollbar[orient="horizontal"] scrollbarbutton:hover {\

border-radius: 0px !important;\

}\

\

scrollbar[orient="vertical"] > scrollbarbutton {\

min-height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\

height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\

max-height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\

min-width: '+custom_scrollbar_size_value+'px !important;\

width: '+custom_scrollbar_size_value+'px !important;\

max-width: '+custom_scrollbar_size_value+'px !important;\

}\

scrollbar[orient="horizontal"] > scrollbarbutton {\

min-width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\

width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\

max-width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\

min-height: '+custom_scrollbar_size_value+'px !important;\

height: '+custom_scrollbar_size_value+'px !important;\

max-height: '+custom_scrollbar_size_value+'px !important;\

}\

scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {\

border-left: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\

border-right: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\

border-bottom: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_color+' !important;\

}\

scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {\

border-bottom: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_hover_color+' !important;\

}\

scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {\

border-left: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\

border-right: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\

border-top: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_color+' !important;\

}\

scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {\

border-top: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_hover_color+' !important;\

}\

scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {\

border-top: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\

border-bottom: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\

border-right: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_color+' !important;\

}\

scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {\

border-right: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_hover_color+' !important;\

}\

scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {\

border-top: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\

border-bottom: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\

border-left: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_color+' !important;\

}\

scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {\

border-left: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_hover_color+' !important;\

}\

\

'), null, null);


ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


}

};


var scrollbar_buttons = {


init: function() {


var 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 {\

min-height: 1px !important;\

height: 1px !important;\

max-height: 1px !important;\

}\

scrollbar[orient="horizontal"] scrollbarbutton {\

min-width: 1px !important;\

width: 1px !important;\

max-width: 1px !important;\

}\

\

'), null, null);


ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


}

};


var scrollbar_size = {


init: function() {


var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\

\

@namespace html url("http://www.w3.org/1999/xhtml");\

\

scrollbar[orient="vertical"] scrollbarbutton {\

min-width: 0 !important;\

width: '+custom_scrollbar_size_value+'px !important;\

max-width: '+custom_scrollbar_size_value+'px !important;\

}\

scrollbar[orient="horizontal"] scrollbarbutton {\

min-height: 0 !important;\

height: '+custom_scrollbar_size_value+'px !important;\

max-height: '+custom_scrollbar_size_value+'px !important;\

}\

\

'), null, null);


ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


}

};


var floating_scrollbars = {


init: function() {


var 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"] {\

-moz-margin-start: -'+custom_scrollbar_size_value+'px !important;\

width: '+custom_scrollbar_size_value+'px !important;\

}\

scrollbar[orient="horizontal"] {\

margin-top: -'+custom_scrollbar_size_value+'px !important;\

height: '+custom_scrollbar_size_value+'px !important;\

}\

\

'), null, null);


ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


}

};


var scrollbar_opacity = {


init: function() {


var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\

\

@namespace html url("http://www.w3.org/1999/xhtml");\

\

scrollbar {\

opacity: '+custom_opacity_value+' !important;\

}\

\

'), null, null);


ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


}

};


var remove_scrollbars = {


init: function() {


var 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

Du musst aber vorher das tun:

Hier die Vorbereitungen:

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

Edit 2002Andreas
Text in Klammercode </> gesetzt.

Andy 123

Zitat von JohnnyKidd

Hier die Vorbereitungen:
https://github.com/Endor8/userChr…ster/userChrome
----------------------------------------------------------
JavaSript ???

Hallo JonnyKidd,

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

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

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

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

Mit freundlichem Gruß

Andy

Zitat von JohnnyKidd

2002Andreas

Zitat von JohnnyKidd

das wird über CSS nicht funktionieren.

Sieht so mit dem CSS Code aus:

Siehe dazu auch den Screenshot in Beitrag Nr. 5.

Zitat von Andy 123

oder nur zum Teil in "userChrome.css und/oder userContent.css" gekopiert werden?

Das Script hat nichts mit der userChrome oder userContent.css zu tun.

Andy 123

Zitat von 2002Andreas

Sieht so mit dem CSS Code aus:
Siehe dazu auch den Screenshot in Beitrag Nr. 5.

Hallo,

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

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

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

Mit freundlichem Gruß

Andy

2002Andreas

Zitat von Andy 123

also doch mit den CSS Code funktionieren?

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

Zitat von Andy 123

weiss auch nicht mit umzugehen.

Hier wird genau beschrieben was du machen musst dazu:

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

Ganz in Ruhe durchlesen, dann klappt das auch.

Aber wie schon gesagt, mit CSS geht es auch.

Speravir

Zitat von milupo

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

Zitat von JohnnyKidd

Mach das über Javascript. Hier ist mein Code:

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

Endor

Speravir

das wäre der richtige Link:

https://github.com/Aris-t2/Custom…crollbars.uc.js

Obige Version ist immer noch die aktuelle.

Mfg.
Endor

Andy 123

Zitat von 2002Andreas

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

Hallo Andreas,

vielen Dank für Eure Hilfe.

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

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

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

LG Andy

2002Andreas 17. Juli 2020 um 17:57