Farbe der Scrollbar ändern

Cordarex

Hallo zusammen,

ich habe mir einen neuen Rechner zugelegt und mit Mozbackup mein Firefox vom alten Rechner übertragen.

Auf dem alten Rechner ist die Scrollbar vom Firefox rot. Das habe ich vor einigen Jahren mal so eingestellt- kann mich aber nicht mehr erinnern wie das ging.

Leider wurde diese Einstellung nicht mit übernommen. Wisst Ihr wie ich das hinbekomme?

Gruß

Mike

2002Andreas

Zitat von Cordarex

nicht mehr erinnern wie das ging

Hallo und Willkommen hier im Forum. 😊

ich vermute, du hast dafür ein Script benutzt:

JavaScript

"use strict";


/* Firefox 57+ userChrome.js tweaks - SCROLLBARS ********************************************** */
/* by Aris (aris-addons@gmx.net)*************************************************************** */
/* Github: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js */

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

 README
 
 Aktivieren einer Einstellung > var ... auf 'true' setzen
 Deaktivieren einer Einstellung > var ... auf 'false' setzen
 Anpassungen vornehmen > Aendern von Werten
 - 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
 - Zahlen: 1, 2, 3 ... 10, 11, 12 ...
 - Sichtbarkeit (in Dezimalzahlen): 0.0 bis 1.0 e.g. 1.4, 1,75
 - Farbverlaeufe: linear-gradient(Richtung, Farbe, Farbe, Farbe)
 - Beispiel: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
 
 - Beispiel 2:
    Farbverlauf von links nach rechts - tranparent -> weiss mit 50%er Sichtbarkeit -> tranparent
    linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)
 
 Info
 - Zu kleine Breitenwerte werden sich negativ auf einige Oberflaechenelemente auswirken (z.B. auf Menuelisten)!
 
*********************************************************************************************** */

// Allgemeine Einstellungen

// Scrollbars ausblenden
var hide_scrollbars = false; /* Standard = false */
// Schaltflächen ausblenden
var hide_scrollbar_buttons = false; /* Standard = false */
// benutzerdefinierte Breite
var custom_scrollbar_width = true; /* Standard = false */
var custom_scrollbar_width_value = 13; /* 10-? // Standard = 17 (in px) */
// benutzerdefinierte Sichtbarkeit
var custom_scrollbar_opacity = true; /* Standard = false */
var custom_opacity_value = "0.9"; /* Standard = 1.0 */
// "schwebende" Scrollbars / Scrollbars über dem Webinhalt 
var enable_floating_scrollbars = false; /* Standard = false */
// benutzerdefinierte Scrollbars
var enable_custom_scrollbars = true;
// benutzerdefinierte Hintergrundfarbe bzw. benutzerdefinierter Hintergrundverlauf
var cs_background_color = "#CCCCCC"; /* Standard = #CCCCCC / Transparenter Hintergrund = transparent */
var cs_background_image = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* Standard = none */
// benutzerdefinierte Schiebereglerfarbe bzw. benutzerdefinierter Schiebereglerfarbverlauf
var cs_thumb_color = "#33CCFF"; /* Standard = #33CCFF */
var cs_thumb_image = "(to right,transparent,rgba(255,0,0,0.9),transparent)"; /* Standard = unset */
// benutzerdefinierte Schiebereglerfarbe (hover/ueber) bzw. benutzerdefinierter Schiebereglerfarbverlauf
var cs_thumb_hover_color = "red"; /* Standard = #66FFFF */
var cs_thumb_hover_image = "rgba(255,0,0)"; /* Standard = unset */
// benutzerdefinierte Schiebereglerrundung
var cs_thumb_roundness = 80; /* Standard = 0 (in px) */
// benutzerdefinierte Schiebereglerrandbreite
var cs_thumb_border = 1; /* Standard = 0 (in px) */
// benutzerdefinierte Schiebereglerrandfarbe
var cs_thumb_border_color = "#33CCFF"; /* default ##33CCFF */
// benutzerdefinierte Schaltflaechenfarbe bzw. benutzerdefinierter Schaltflaechenfarbverlauf
var cs_buttons_color = "lightgrey"; /* Standard = #000000 */
var cs_buttons_image = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* Standard = unset */
// benutzerdefinierte Schaltflaechenfarbe (hover/ueber) bzw. benutzerdefinierter Schaltflaechenfarbverlauf
var cs_buttons_hover_color = "#000066"; /* Standard = #000066 */
var cs_buttons_hover_image = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* Standard = unset */
// benutzerdefinierte Schaltflächenrundung
var cs_buttons_roundness = 0; /* Standard = 0 (in px) */


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


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 {\
      -moz-appearance: none !important;\
      background-color: '+cs_background_color+' !important; \
      background-image: '+cs_background_image+' !important; \
    }\
    scrollbar thumb {\
      -moz-appearance: none !important;\
      background-color: '+cs_thumb_color+' !important;\
      background-image: '+cs_thumb_image+' !important;\
      border-radius: '+cs_thumb_roundness+'px !important;\
      border: '+cs_thumb_border+'px solid '+cs_thumb_border_color+' !important; \
    }\
    scrollbar thumb:hover, scrollbar thumb:active {\
      -moz-appearance: none !important;\
      background-color: '+cs_thumb_hover_color+' !important;\
      background-image: '+cs_thumb_hover_image+' !important;\
    }\
    scrollbar scrollbarbutton {\
      -moz-appearance: none !important;\
      background-color: '+cs_buttons_color+' !important;\
      background-image: '+cs_buttons_image+' !important;\
      border-radius: '+cs_buttons_roundness+'px !important;\
    }\
    scrollbar scrollbarbutton:hover {\
      -moz-appearance: none !important;\
      background-color: '+cs_buttons_hover_color+' !important;\
      background-image: '+cs_buttons_hover_image+' !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_width = {

  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_width_value+'px !important;\
      max-width: '+custom_scrollbar_width_value+'px !important;\
    }\
    scrollbar[orient="horizontal"] scrollbarbutton {\
      min-height: 0 !important;\
      height: '+custom_scrollbar_width_value+'px !important;\
      max-height: '+custom_scrollbar_width_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, scrollcorner {\
      background-color: transparent !important; \
      background-image: unset !important; \
    }\
    scrollbar[orient="vertical"] {\
      -moz-margin-start: -'+custom_scrollbar_width_value+'px !important;\
      width: '+custom_scrollbar_width_value+'px !important;\
    }\
    scrollbar[orient="horizontal"] {\
      margin-top: -'+custom_scrollbar_width_value+'px !important;\
      height: '+custom_scrollbar_width_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);

  }
};

// oben aktivierte Einstellungen werden hier ausgefuehrt
if(enable_custom_scrollbars==true) custom_scrollbars.init();
if(hide_scrollbar_buttons==true) scrollbar_buttons.init();
if(custom_scrollbar_width==true) scrollbar_width.init();
if(enable_floating_scrollbars==true) floating_scrollbars.init();
if(custom_scrollbar_opacity==true) scrollbar_opacity.init();
if(hide_scrollbars==true) remove_scrollbars.init();

Alles anzeigen

Um Scripte zu nutzen bedarf es erst einer Vorbereitung die hier beschrieben wird:

Beitrag

Funktionelle Änderungen am Firefox durch Skripte

Als Ersatz für einige Erweiterungen bzw. Funktionen daraus kann man auch diverse Skripte benutzen.

( damit sind nicht optische Änderungen am Firefox gemeint)

Diese werden mit einer userChrome.css Datei erstellt.

Skripte werden als .uc.js Datei im Unterordner chrome gespeichert.

Hinweis:

Alle Skripte müssen in der Kodierung UTF-8 gespeichert werden.

Bei Notepad++ sieht das dann so aus:

Und so im Texteditor von Windows:

Besonderer Dank geht dabei aber an den user aborix , der das alles überhaupt…

2002Andreas

15. November 2017 um 16:49

U.a. betrifft das auch Vorbereitungen im Installationsorder vom Firefox.

Die werden also auf jeden Fall bei dir dann fehlen.

Msfreak

Nur für dich zur Info:

Auf Mozbackup solltest du in Zukunft verzichten, da dieses Programm unzuverlässig arbeitet. Es wurde seit zig Jahren nicht mehr gepflegt und selbst der Autor rät inzwischen davon ab es zu benutzen.

Dharkness

Zitat von Cordarex

Auf dem alten Rechner ist die Scrollbar vom Firefox rot. Das habe ich vor einigen Jahren mal so eingestellt- kann mich aber nicht mehr erinnern wie das ging.

Gehe mal ins Profil und schau, ob es dort einen Ordner Namens chrome und in dem eine Datei Namens userChrome.css bzw. userContent.css gibt und ob in about:config, einzugeben in die Adressleiste, die → toolkit.legacyUserProfileCustomizations.stylesheets Pref auf noch true steht.

milupo

Zitat von Dharkness

eine Datei Namens userChrome.css bzw. userContent.css gibt

Die CSS-Lösung ist sehr dünn, denn es gibt außer scrollbar-color und scrollbar-width keine Eigenschaften. Aber wenn es wirklich nur um die Farbe geht, kann man scrollbar-color verwenden. Die Regel muss aber in diesem speziellen Fall sowohl in die userChrome.css als auch in die userContent.css.

Dharkness

Zitat von milupo

Die CSS-Lösung ist sehr dünn

Ich weiß, die Scrollbar-Anpassung vom TE sieht mit mir aber eher nach userChrome- und userContent.css-Anpassung aus als nach einer Anpassung per Javascript.

2002Andreas

Da er das Profil gesichert und wieder eingespielt hat, könnte es an der fehlenden Änderung in der config liegen, wenn er es per CSS Code gemacht hatte

Code

/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/


/* GENERAL SCROLLBAR SETTINGS (Firefox 63+) *********************************************/
/* [!] Might not work on every page! This issue is for Mozilla to solve. ****************/
/* [!] not compatible with custom scrollbar JavaScipt userChrome scripts ****************/
/* [!] only background, thumb and width variables available for now *********************/
/* [!] color names and hex/rgb(a)/hsl(a) colors supported *******************************/
/* [!] scrollbar buttons are not visible with width value 'thin' ************************/
/* [!] width value settings are only compatible with 'web content' at the moment ********/

:root{
  scrollbar-face-color: red; /* background color (Firefox 63 only) */
  scrollbar-track-color: red; /* thumb/slider color (Firefox 63 only) */
  
  /* background color [1. color] // thumb/slider color [2. color] (Firefox 64+) *********/
  scrollbar-color: red lightgrey;
  
  /* size/width *************************************************************************/
  /*    scrollbar-width: auto; = default OS scrollbars
        scrollbar-width: thin; = small scrollbars without buttons
        scrollbar-width: none; = scrollbars are hidden
        scrollbar-width: 17px; (not working yet, but might be supported in the future)  */
  /* scrollbar-width: thin; */
}

/* MDN web docs (color): https://developer.mozilla.org/docs/Web/CSS/scrollbar-color *****/
/* MDN web docs (width): https://developer.mozilla.org/docs/Web/CSS/scrollbar-width *****/

Alles anzeigen

Dharkness

Zitat von 2002Andreas

könnte es an der fehlenden Änderung in der config liegen, wenn er es per CSS Code gemacht hatte

Ja, aber eigentlich wird das doch auch im Profil und zwar in der prefs.js gespeichert, das lägt nahe, das die Anpassungen für Javascript im Installationsordner fehlen, lassen wir uns mal überraschen, was der uns TE vermeldet.

2002Andreas

Zitat von Dharkness

lassen wir uns mal überraschen

Damit hast du recht, alles andere wäre Spekulation

Cordarex

Hallo zusammen,

erst mal vielen Dank für die vielen Tips.

Also ein Java Script wie 2002Andreas vermutet habe ich sicherlich nicht benutzt (das ist so gar nicht mein Ding und ich könnte mich bestimmt daran erinnern).

Mein alter Rechner steht ja noch hier und ich werde mal suchen ob ich irgendwas im Profil finde.. Mit Chrome war da etwas gewesen- ich meine mich dunkel daran erinnern zu können. Ich hatte die Anleitung damals dafür über Google gefunden- aber dieses mal finde ich sie nicht mehr.

Ich halte Euch auf dem laufenden...

Zur Antwort von Msfreak betreffend Mozbackup... git es eine andere Alternative?

Vg

Mike

Cordarex

allo zusammen,

ich habe es geschafft.

Ich habe vom alten Rechner

unter Chrome / userContent

das hier gefunden und ins Profil kopiert:

/* Scrollbar farbig innerhalb vom Firefox */

:root{

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

scrollbar-color: red lightgrey;

}

Dann habe ich in aubout:config den Eintrag"toolkit.legacyUserProfileCustomizations.stylesheets auf "true" gesetzt..

Jetzt funktioniert es ..

Gruß

Mike

2002Andreas

Danke für die Rückmeldung. 👍

Schön dass dein Problem gelöst ist.

Farbe der Scrollbar ändern

Funktionelle Änderungen am Firefox durch Skripte

Ähnliche Themen

Farbe der Symbole in Navigationsleiste ändern

Scrollbar im Firefox ändern

CSS, Youtube, Kanalname, Farbe ändern ?

Tableiste und inaktive Tabs in derselben Farbe

Farbe der Tabumrandung

auf YT bestimmte Farbe ändern ?