Scrollbar Farbe ändern

laubenpieper

Hallo Andreas, kannst du mir mal die Schrift in der Scrollbar in Yellow und den Balken in Green umändern, ich bekomme es nicht hin.

Anbei das Script.

Danke bis später

Grüsse vom laubenpieper

JavaScript

"use strict";



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



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 = 0; /* 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

Edit 2002Andreas
Text in Klammercode </> gesetzt.

2002Andreas

Meinst du das so?

Wenn ja, teste bitte:

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 = "#008000"; /* 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 = "yellow"; /* 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

laubenpieper

Ja das ist in Ordnung, kannst du die Schrift von den Lesezeichen in Yellow ändern?

lp

2002Andreas

Zitat von laubenpieper

die Schrift von den Lesezeichen in Yellow ändern?

Was genau meinst du damit?

Das hat ja nichts mit der Scrollbar zu tun

Oder meinst du den Text der Lesezeichen in der Lesezeichensymbolleiste?

Wenn ja, dann teste bitte:

CSS

toolbarbutton.bookmark-item {
  color: yellow !important;
}

laubenpieper

Nicht ganz , dazu ein Screenshot

lp

2002Andreas

Zitat von laubenpieper

Nicht ganz

Darum ist es immer besser, eine ganz genaue Frage zu erstellen

Teste wieder:

CSS

.sidebar-placesTreechildren {
  color: yellow !important;
}

laubenpieper

Hallo Andreas, alles Bestens und ich hatte mich an der scrollbar.uc.js versucht

Also vielen Dank für deine Hilfe.

So da kann ich weiter machen und den FF mal entschlacken

Viele Grüsse vom laubenpieper

2002Andreas

Zitat von laubenpieper

alles Bestens

Freut mich

So hätten die Ordner eine andere Farbe als die Links.

Wenn du magst, dann teste wieder:

CSS

@-moz-document url("chrome://browser/content/browser.xhtml"),
                          url("chrome://browser/content/places/bookmarksSidebar.xhtml") {    

.sidebar-placesTreechildren::-moz-tree-cell-text {
  color: yellow !important;
}

.sidebar-placesTreechildren::-moz-tree-cell-text(container) {
    color: orange !important;
    font-weight: bold !important;
}

.sidebar-placesTreechildren::-moz-tree-cell-text(container, hover) {
   color: blue !important;
}
}

Alles anzeigen

laubenpieper

Ja, bin jetzt am basteln

Danke

Viele Grüsse vom laubenpieper

2002Andreas

Zitat von laubenpieper

bin jetzt am basteln

Dann viel Spaß dabei

laubenpieper

Andreas eine Stelle habe ich übersehen, dort ist die Schrift noch in weiss,

Geht das dort zu ändern?

lp

2002Andreas

Zitat von laubenpieper

Geht das dort zu ändern?

Teste bitte:

CSS

#sidebar-header {
    color: red !important;
    background: yellow !important;
}

laubenpieper

Andreas, Test bestanden

Danke und Grüsse vom laubenpieper

2002Andreas

Zitat von laubenpieper

Test bestanden

Scrollbar Farbe ändern

Ähnliche Themen

Farbe der Scrollbar ändern

Rahmen für Menüleiste

Farbe des Scrollbalkens ändern

Multirow-Tableiste mit userChrome.css anpassen für FF 89.0