Scrollbar im Firefox ändern

Rudis

Hallo,

kann es sein, dass FF ab einer bestimmten Version die GTK-Theme-Einstellungen nur noch aus dem aktuellen Theme "zieht" und Anpassungen in der Datei ~/.config/gtk-3.0/gtk.css ignoriert? Ich nutze das Default-Theme Greybird und der Scrollbalken im FF sieht aus wie bei Greybird (keine Pfeile, sehr dünn und deutlicher Rand um den Slider). Passe ich die Optik über die gtk.css an geht das in allen GTK3-Anwendungen, nicht aber im Firefox.

Ich würde gern die gleiche Optik auch im Firefox nutzen. Einige Sachen wie die Breite kann man über about:config ändern, ich vermute aber mal dem sind Grenzen gesetzt. Ein komplett anderes Skin will ich nicht installieren. Gibt es im Firefox eine entsprechende Datei wie die 'gtk.css' unter Linux wo ich die Einstellungen rein kopieren kann?

Sören Hentzschel

Hallo,

Firefox nutzt keine nativen Scroll-Leisten bei GTK, da Mozilla kein GTK in Kind-Prozessen lädt (aus Sicherheitsgründen). Die Breite kannst du anpassen, aber aus deinem Beitrag lese ich heraus, dass dir das bekannt ist. Inwiefern hier via userChrome.css oder Script etwas machbar ist, kann ich mangels Linux nicht sagen.

Rudis

Aber die Datei userChrome.css wäre grundsätzlich ertsmal die richtige Datei? Ich gehe davon aus, dass sich das von Windows zu Linux nicht grundlegend unterscheidet, oder?

Sören Hentzschel

Die Datei userChrome.css wäre die richtige Datei, wenn sich Scroll-Leisten überhaupt auf diese Weise anpassen lassen. Das sehe ich nicht zwingend als gegeben. Scroll-Leisten sind eigentlich Teil des Betriebssystems und nicht der Produktoberfläche und als solche speziell, was die Anpassbarkeit betrifft. Windows nutze ich ebenfalls nicht, sondern macOS, dort würde das via userChrome.css definitiv nicht funktionieren. Und doch: Scroll-Leisten unterscheiden sich grundlegend je nach Plattform.

2002Andreas

So sieht das in Windows aus:

Dieser Code muss in die userChrome.css wenn es nur den Fx betrifft.

Für Webseiten muss er auch in die userContent.css.

CSS

:root{ 
  scrollbar-color: red lightgrey !important;
     }
 
:root:active { 
  scrollbar-color: blue lightgrey !important;
     }

milupo

Am meisten lassen sich die Bildlaufleisten mit folgendem Benutzerskript anpassen:

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

Wenn du aber bisher noch nicht Benutzerskripte genutzt hast, musst du erste Vorbereitungen treffen, die hier beschrieben sind:

userChrome.js/userChrome at master · Endor8/userChrome.js

Skripte für die Firefox-Erweiterung userChromeJS. Contribute to Endor8/userChrome.js development by creating an account on GitHub.

github.com

Dharkness

Zitat von milupo

Wenn du aber bisher noch nicht Benutzerskripte genutzt hast, musst du erste Vorbereitungen treffen, die hier beschrieben sind:

Bedeutet das, das das unter Linux nicht geht, denn die Beschreibung ist für Windows, oder gibt es auch irgendwo eine Beschreibung für Linux?

milupo

Zitat von Dharkness

Bedeutet das, das das unter Linux nicht geht

Wieso sollte es nicht gehen? Du brauchst nur zwei Orte: den Ordner chrome im Profil für die Datei userChrome.js und die Skripte und den Ordner userChromeJS und die Dateien config.js und config-prefs.js im Installationsverzeichnis. Du musst nur wissen, wo in Linux Profilverzeichnis und Installationsverzeichnis von Firefox liegen.

Und die Datei firefox-anpassungen.zip wirst du ja auch unter Linux entpacken können.

clio

Andreas' CSS funktioniert auch in Linux. Es müssen beide .css Dateien in den chrome Ordner, wie er das beschrieben hat.

milupo

Ja, aber das ist es auch schon, was du per CSS anpassen kannst. Mit dem Skript lässt sich Einiges mehr anpassen.

Dharkness Ich sehe gerade, du verwendest Win 10. Daher meine Frage: Kennst du dich mit Linux ein bisschen aus?

Dharkness

Zitat von milupo

Kennst du dich mit Linux ein bisschen aus?

Ich bin noch in der Lernphase, was mir immer noch ein kleines Rätsel ist, ist wo was liegt, allerdings nicht das Home-Verzeichnis, das ist kein Problem, nur wo z.B. Programme installiert sind.

milupo

Zitat von Dharkness

Ich bin noch in der Lernphase, was mir immer noch ein kleines Rätsel ist, ist wo was liegt, allerdings nicht das Home-Verzeichnis, das ist kein Problem, nur wo z.B. Programme installiert sind.

Das hängt alles etwas von der Distribution ab, die du verwendest. Für das Profil musst du wissen, dass du im Home-Verzeichnis erst versteckte Dateien anzeigen lassen musst, um den Ordner .mozilla anzuzeigen. Aber ich denke mal, dass du das schon gemacht hast.

clio

Dharkness

Anwendungsprogramme liegen in /usr/bin

oder in

/opt (wenn es Fremdprogramme sind, die nicht aus dem Repo stammen)

Systemprogramme liegen in /bin, /usr/bin, /sbin, /usr/sbin

die Einstellungen dazu in /etc

Das ist nur ein grober Überblick, es kann noch verfeinert werden, aber das sprengt hier den Rahmen.

milupo

Klar ist das Script umfangreicher, aber dem TE reicht wohl schon der CSS Schnipsel.

Dharkness

Zitat von clio

Anwendungsprogramme liegen in /usr/bin
oder in
/opt (wenn es Fremdprogramme sind, die nicht aus dem Repo stammen)
Systemprogramme liegen in /bin, /usr/bin, /sbin, /usr/sbin
die Einstellungen dazu in /etc
Das ist nur ein grober Überblick, es kann noch verfeinert werden, aber das sprengt hier den Rahmen.

Alles anzeigen

Jupp, soweit habe ich das gerade überblickt. Um in Fx unter Linux Javascripts zum laufen zu bekommen, habe ich nochmal ganz genau hin geguckt, das hat mich heute deutlich weitergebracht.

Die ersten Scripts laufen nun unter Linux, das war mal ein erfolgreicher Sonntag.

milupo

Zitat von Dharkness

Die ersten Scripts laufen nun unter Linux, das war mal ein erfolgreicher Sonntag.

Na, das ist doch bestens. Am Anfang klemmt es oft, auch unter Windows. Eine Tücke ist auch der Skript-Cache, den man nach Änderungen beim Firefox-Neustart leeren muss. Aber wenn man dann immer daran denkt ...

Ach so, das Skript habe ich mir angepasst. Die Standardversion sieht etwas anders aus.

2002Andreas

Zitat von Dharkness

das war mal ein erfolgreicher Sonntag.

Rudis

Zitat von Sören Hentzschel

Scroll-Leisten sind eigentlich Teil des Betriebssystems und nicht der Produktoberfläche und als solche speziell, was die Anpassbarkeit betrifft.

Das würde ich so nicht unterschreiben. Denn ich habe ja explizit Änderungen an der Optik vorgenommen die dann vom Firefox ignoriert werden. Dazu gibt es im Netz recht viele Threads und Fragen. Ich weiß leider nicht genau ab welcher Version (evtl. 68) das auftrat. Es kann aber auch sein, dass Firefox nur die Datei ~/.config/gtk3-0/gtk3.css ignoriert. Hier kann man Anpassungen des Standard-Themes hinterlegen. Alles was hier drin steht "überschreibt" die Einstellungen die im aktuellen Theme stehen. Wenn hier eine Scrolbar-Breite von 40 eingestellt ist und im Theme 20, wird die 20 genutzt. Wenn keine Farbe des eingestellt ist, wird die aus dem Theme genommen.

Bei mir hat das mit der userChrome.css und userContent.css zunächst nicht funktioniert. Man muss vorher in about:config "widget.non-native-theme.enabled" auf "false" setzen. Dann ein Neustart des Firefox.

Sören Hentzschel

Zitat von Rudis

Das würde ich so nicht unterschreiben. Denn ich habe ja explizit Änderungen an der Optik vorgenommen die dann vom Firefox ignoriert werden.

Den Teil verstehe ich nicht. Du schreibst, dass du meiner Aussage nicht zustimmst, dass Scroll-Leisten einen speziellen Status haben, was die Anpassbarkeit betrifft, um dann in gleichen Atemzug zu schreiben, dass Firefox deine Regeln ignoriert, was ja genau das bestätigt, was ich geschrieben habe.

Was ich schrieb, stimmt schon: Scroll-Leisten sind normalerweise Teil des Betriebssystems und nicht der Anwendung. Deswegen sehen die Scroll-Leisten ja auch auf jedem Betriebssystem anders aus! Aber Firefox nutzt nicht die nativen Scroll-Leisten des Betriebssystems, sondern rendert diese selbst (in Anlehnung an die native Erscheinung). Dementsprechend wird auch die Datei gtk3.css nicht beachtet, denn dazu müsste GTK in Kindprozessen geladen werden, da die Kindprozesse für die Darstellung von Websites ausschlaggebend sind. Firefox lädt aber kein GTK in den Kindprozessen.

Zitat von Rudis

Ich weiß leider nicht genau ab welcher Version (evtl. 68) das auftrat.

Das nicht native Theming von OS-Widgets ist erst seit Firefox 89 aktiviert.

Zitat von Rudis

Man muss vorher in about:config "widget.non-native-theme.enabled" auf "false" setzen. Dann ein Neustart des Firefox.

Das ist nicht nur aus Sicherheits- und Performancegründen nicht empfohlen, sondern hat auch ein Ablaufdatum. Nicht native Widgets sind eine Voraussetzung für die Website-Isolierung ("Fission"), dessen Ausrollung mit Firefox 94 beginnen und mit Firefox 96 abgeschlossen sein wird.

Rudis

Welcher Teil des Ubuntus bei mir für die Optik der Scrolleisten zuständig ist, weiß ich nicht genau. Im Standard-Theme bei Xfce (Greybird) sind die Scrolleisten sehr schmal und ohne Pfeile. In dem Theme sind die ganzen Einstellungen in diversen *.css-Dateien hinterlegt. Will ich irgendetwas ändern, kann ich entweder das Theme als solches ändern oder ich schreibe die Änderungen in die oben genannten gtk3.css im Benutzerverzeichnis. Das System wird weiterhin alle Einstellungen aus den Dateien des aktuelles Theme ziehen. Weiterhin wird geguckt was in der gtk.css steht. Ist z. B. die Breite des Scrollbars sowohl im Theme als auch in der gtk.css festgelegt, nimmt er die Einstellungen aus der gtk.css. Lösche ich die gtk.css nimmt er die aus dem Theme.

Nun habe ich z. B. die Breite über die Datei geändert und fast alle Anwendungen beachten das auch - außer Firefox. Beim Firefox sieht das so aus als ob nur das Greybird-Theme verwendet wird ohne irgendwelche Anpassungen. Kann durchaus sein, dass Firefox keinen eigenen Scrollbar erzeugt, dann wird evtl. die gtk.css ignoriert. Könnte man testen indem man direkt das Theme ändert, das übersteigt aber meine CSS-Kenntnisse. Das ist mehr als

Code

scrollbar { background-color: red; }

Zitat von Sören Hentzschel

Das ist nicht nur aus Sicherheits- und Performancegründen nicht empfohlen, sondern hat auch ein Ablaufdatum. Nicht native Widgets sind eine Voraussetzung für die Website-Isolierung ("Fission"), dessen Ausrollung mit Firefox 94 beginnen und mit Firefox 96 abgeschlossen sein wird.

Das heißt? Spätestens mit Version 96 fang ich wieder von vorne an?

Sören Hentzschel

Davon ist auszugehen, ja.

Scrollbar im Firefox ändern

Ähnliche Themen

Lesezeichenpopup Hintergrundfarbe ändern

FF89 Scrollbalken/Scrollbars im Proton-Design ändern

Amazon Linkfarbe im Menü ändern ?

Hintergrundfarbe im Menueband ändern?

Scrollbar-Styling unterbinden?

Firefox Desktop öffnet Websites im mobile-Modus