Farbe des Scrollbalkens ändern

black10

Hallo,

Würde gerne die Farbe des grauen (manchmal schlecht zu sehenden) Scrollbalkens ändern. Auch wenn man nicht direkt am Balken scrollen muß, dient er auf langen Seiten doch für mich zur optischen Unterstützung wie weit man noch scrollen muß. Und das ist mitunter auf grauem Hintergrund teilweise nicht gut zu erkennen.

In Windows 10 ist das (meines Wissens) nicht möglich. Dort kann man nur die Taskleiste/Start verändern. Taskleiste hab ich da in Dunkelblau, die gleiche/ähnliche Farbe hätte ich gerne für den Scrollbalken.

Gibts da irgendeine Möglichkeit..?

[attachment=0]Hilfe 15.png[/attachment]

2002Andreas

Nutzt du evtl. schon etwas von unseren Scripten hier?

Wenn ja:

CSS

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


 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

AngelOfDarkness

Für die Scrollbars nutze ich dasvon Andreas gennante Script (scrollbars.us.js, von hier :

CSS

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


 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 = 15; /* 10-? // Standard = 17 (in px) */
// benutzerdefinierte Sichtbarkeit
var custom_scrollbar_opacity = false; /* Standard = false */
var custom_opacity_value = "1.0"; /* 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 = "#000000"; /* Standard = #CCCCCC / Transparenter Hintergrund = transparent */
var cs_background_image = "unset"; /* Standard = none */
// benutzerdefinierte Schiebereglerfarbe bzw. benutzerdefinierter Schiebereglerfarbverlauf
var cs_thumb_color = "#FF00FF"; /* Standard = #33CCFF */
var cs_thumb_image = "unset"; /* Standard = unset */
// benutzerdefinierte Schiebereglerfarbe (hover/ueber) bzw. benutzerdefinierter Schiebereglerfarbverlauf
var cs_thumb_hover_color = "#8B008B"; /* Standard = #66FFFF */
var cs_thumb_hover_image = "unset"; /* Standard = unset */
// benutzerdefinierte Schiebereglerrundung
var cs_thumb_roundness = 0; /* Standard = 0 (in px) */
// benutzerdefinierte Schiebereglerrandbreite
var cs_thumb_border = 0; /* Standard = 0 (in px) */
// benutzerdefinierte Schiebereglerrandfarbe
var cs_thumb_border_color = "#33CCFF"; /* default ##33CCFF */
// benutzerdefinierte Schaltflaechenfarbe bzw. benutzerdefinierter Schaltflaechenfarbverlauf
var cs_buttons_color = "#FF4500"; /* Standard = #000000 */
var cs_buttons_image = "unset"; /* Standard = unset */
// benutzerdefinierte Schaltflaechenfarbe (hover/ueber) bzw. benutzerdefinierter Schaltflaechenfarbverlauf
var cs_buttons_hover_color = "#FF7F50"; /* Standard = #000066 */
var cs_buttons_hover_image = "unset"; /* 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

sieht so bei mir aus:

black10

Also ich hab nen Chrome Ordner mit der userChrome.css...

Soll ich da den gesamten Text hineinkopieren..?

pascallo

Du erstellst im Chrome-Ordner ne Textdatei und nennst sie beispielsweise scrollbar.txt und in diese Textdatei kopierst du den Code rein und speicherst das ganze. Habe dir die Leisten mal blau gemacht....musst mal gucken, ob es passt. :wink:

CSS

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


 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 = "#0f0a35"; /* 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 = "#230dc4"; /* 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 = "#0f0a35"; /* default #33CCFF */
// benutzerdefinierte Schaltflaechenfarbe bzw. benutzerdefinierter Schaltflaechenfarbverlauf
var cs_buttons_color = "#09245b"; /* 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

Nun nur noch die Endung der Textdatei umbenennen von scrollbars.txt --> scrollbar.uc.js
Firefox neu starten und die Leisten müssten blau sein.

Gutes Gelingen! :wink:

AngelOfDarkness

Vorher muss der Firefox aber für die Nutzung von Scripten vorbereitet sein: https://www.camp-firefox.de/forum/viewtopic.php?t=122538

Scripte haben nix mit der userChrome.css zu tun.

black10

Angel...

Heißt das jetzt, das der entsprechende Code nicht in die scrollbar.uc.js (im Chrom Ordner) hineingehört...?
So sieht es jetzt bei mir aus, siehe Bild unten...

pascallo

Das hat nicht geklappt. Nach erstellen der Textdatei (im Chrom Ordner-rechte Maus-Neu-Textdokument), umbenennen in scrollbar.txt, hineinkopieren des entsprechenden Codes und Umbenennung in scrollbar.uc.js, schließen/öffnen des Firefox keine Änderung des Scrollbalkens.
Zudem erscheint beim Versuch des Öffnens der scrollbar.uc.js eine Fehlermeldung...siehe Bild... :-??

Edit...

Diese FM erscheint erst NACH dem Umbenennen von scrollbar.txt in scrollbar.uc.js. Unter scrollbar.txt kann ich die Datei öffnen..! Was allerdings am Endergebnis des weiterhin grauen Balken nichts ändert...Aktuell hab ich die Datei in scrollbar.uc.js belassen...

[attachment=0]Hilfe 15.png[/attachment]

2002Andreas

Zitat von black10

das der entsprechende Code nicht in die scrollbar.uc.js (im Chrom Ordner) hineingehört...?

Doch.
Aber um Scripte zu nutzen musst du vorher noch diverse Anpassungen am Firefox machen, dazu einfach im Beitrag von
@ AngelOfDarkness extra gegebenen Link mal klicken.

black10

Das verstehe ich nicht... :-??:-??

In meinem Fall brauche ich doch für die Veränderung des Scrollbalkens NUR den Chrome Ordner, oder nicht..?

2002Andreas

Zitat von black10

NUR den Chrome Ordner, oder nicht..

Nein.
Hast du denn mal auf den Link geklickt?
Du musst erst mehrere Dateien im Fx verteilen, u.a. im Installationsordner vom Firefox.
Wird doch alles ganz genau beschrieben.

pascallo

Zitat von black10

Das verstehe ich nicht... :-??:-??
In meinem Fall brauche ich doch für die Veränderung des Scrollbalkens NUR den Chrome Ordner, oder nicht..?

Nein...stimmt schon alles, was du gemacht hast. Du musst halt noch FF für Scriptnutzung vorbereiten...Das heißt, damit der Firefox mit den Skripten ( us.jc`s) im Chrome-Ordner umgehen kann, musst du erst noch ein paar schnelle Anpassungen vornehmen.

Hatte ich vorhin vergessen zu erwähnen... :oops::?

Führe noch die Schritte nach der Anleitung aus, dann müsste es passen. ( https://www.camp-firefox.de/forum/viewtopic.php?t=122538 )

Fehlermeldung beim Anklicken der uc.js ist normal. Willst du Veränderungen am Code vornehmen, musst du die uc.js mit rechts anklicken --> Öffnen mit --> Editor

Grüße

2002Andreas: Zwei Dumme.....ääähhhh zwei Schlaue, ein Gedanke :mrgreen:

Speravir

Zitat von AngelOfDarkness

Für die Scrollbars nutze ich dasvon Andreas gennante Script (scrollbars.us.js, von hier

Das Skript ist mittlerweile aktualisiert worden. Ich verlinke aus Bequemlichkeit mal auf mich selbst: Aktualisierungshinweis.

black10

Danke für die Hinweise, es hat jetzt geklappt.

Habe den Code von Pascallo aus Beitrag Nr. 5 übernommen und der Scrollbalken ist jetzt schön in dunkelblau.
Eine Kleinigkeit/Anmerkung noch dazu, wobei ich damit natürlich leben kann wenn dies so bleibt. Die "Anschlagpunkte" des Scrollbalkens oben/unten sind auch noch mal für ca. 0.5 cm in blau gehalten (siehe Bild unten).

Ohne Skript/Code, also im Original, ist an den "Anschlagpunkten" oben/unten eine (graue) Pfeilspitze. Bekäme man das trotz blauem Scrollbalken wieder hin, also das "Scrollende" im Originalzustand zu belassen..?

[attachment=0]22.png[/attachment]

pascallo

Zitat von black10

Ohne Skript/Code, also im Original, ist an den "Anschlagpunkten" oben/unten eine (graue) Pfeilspitze. Bekäme man das trotz blauem Scrollbalken wieder hin, also das "Scrollende" im Originalzustand zu belassen..?

Hi...freut mich, dass es geklappt hat. :klasse:

Originalzustand habe ich nicht hinbekommen. Aber Pfeilspitzen kann ich dir so anbieten....Außerdem ist es ein verbessertes Skript.

Also lösche den Code aus dem alten Skript mal und kopiere den neuen Code rein! Vielleicht sagt dir das ja mehr zu...

CSS

"use strict";


/* Firefox 57+ userChrome.js tweaks - SCROLLBARS ********************************************** */
/* by Aris (aris-addons@gmx.net)*************************************************************** */
/* Github: https://github.com/aris-t2/customscrollbarsforfx *********************************** */
/* ******************************************************************************************** */


/* ******************************************************************************************** */
/* Custom Scrollbars for Firefox ************************************************************** */
/* version 1.0.3 ****************************************************************************** */
/* ******************************************************************************************** */


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


 README
 
 [!] 'custom_scrollbars.uc.js' 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))
 
 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 = false */
var hide_scrollbar_buttons = false; /* default = false */
var custom_scrollbar_size = true; /* default = false */
var custom_scrollbar_size_value = 17; /* default = 17 // in px // 10-? */
var custom_scrollbar_opacity = false; /* default = false */
var custom_opacity_value = "1.0"; /* default = "1.0" */
var enable_floating_scrollbars = false; /* default = false // scrollbars on top of web content // uses "custom_scrollbar_size_value" inside its code anyway */


// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
var enable_custom_scrollbars = true;
var cs_thumb_border = 0; /* default = 0 // in px */
var cs_thumb_roundness = 0; /* default = 0 // in px */
var cs_buttons_roundness = 0; /* default = 0 // in px */
var cs_buttons_as_arrows = false; /* default = false // uses "custom_scrollbar_size_value" inside its code anyway */
var cs_arrows_on_buttons = true; /* default = false // uses "custom_scrollbar_size_value" inside its code anyway */


// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
var cs_background_color = "rgba(151, 151, 151, .5)"; /* default = "#CCCCCC" */
var cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* default = "unset" */
var cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; /* default = "unset" */
// - corner
var cs_corner_background_color = "rgba(151, 151, 151, .5)"; /* default = "#CCCCCC" */
var cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,240,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,240,0.5) 50%,transparent 70%)"; /* default = "unset" */
// - thumb/slider
var cs_thumb_color = "rgba(15, 55, 102, 1)"; /* default = "#33CCFF" */
var cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* default = "unset" */
var cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; /* default = "unset" */
var cs_thumb_hover_color = "rgba(43, 109, 187, 1)"; /* default = "#66FFFF" */
var cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* default = "unset" */
var cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; /* default = "unset" */
var cs_thumb_border_color = "rgba(15, 55, 102, 1)"; /* default "#33CCFF" */
// - buttons
var cs_buttons_color = "rgba(151, 151, 151, .5)"; /* default = "#000000" */
var cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* default = "unset" */
var cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; /* default = "unset" */
var cs_buttons_hover_color = "rgba(151, 151, 151, .5)"; /* default = "#000066" */
var cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* default = "unset" */
var cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; /* default = "unset" */
// - button arrows
var cs_arrows_on_buttons_color = "rgba(15, 55, 102, 1)"; /* default = "#FF0000" */
var cs_arrows_on_buttons_hover_color = "rgba(190, 56, 13, 1)"; /* default = "#FFBB00" */




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




// 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/2)+'px !important;\
	  height: '+(custom_scrollbar_size_value/2)+'px !important;\
	  max-height: '+(custom_scrollbar_size_value/2)+'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/2)+'px !important;\
	  width: '+(custom_scrollbar_size_value/2)+'px !important;\
	  max-width: '+(custom_scrollbar_size_value/2)+'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/2)+'px !important;\
	  height: '+(custom_scrollbar_size_value/2)+'px !important;\
	  max-height: '+(custom_scrollbar_size_value/2)+'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/2)+'px !important;\
	  width: '+(custom_scrollbar_size_value/2)+'px !important;\
	  max-width: '+(custom_scrollbar_size_value/2)+'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);


  }
};


// enables settings as set
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_floating_scrollbars==true) floating_scrollbars.init();
if(custom_scrollbar_opacity==true) scrollbar_opacity.init();
if(hide_scrollbars==true) remove_scrollbars.init();

Alles anzeigen

Das Ganze sieht dann so aus:

[attachment=0]Image 1.jpg[/attachment]

Gruß

black10

Habs jetzt mal geändert.

Das "Scroll-Ende" gefällt mir jetzt mit den blauen Pfeilspitzen deutlich besser als vorher. Wenn jetzt der Scrollbalken noch genauso (dunkel)Blau wäre wie im Skript vorher... :oops:

Nein, das ist jammern auf zu hohem Niveau. So wie es jetzt ist, ist es völlig in Ordnung...!

pascallo

Zitat von black10

Das "Scroll-Ende" gefällt mir jetzt mit den blauen Pfeilspitzen deutlich besser als vorher. Wenn jetzt der Scrollbalken noch genauso (dunkel)Blau wäre wie im Skript vorher... :oops:

Dann schau mal bitte auf diese Seite https://www.webpagefx.com/web-design/color-picker/ und poste die Farben im Hex-Code, die du gerne hättest....für Hintergrund, Laufleiste, Pfeilspitzen und Maus darüber...ich passe das Script dann an.

Speravir

Zitat von black10

Habe den Code von Pascallo aus Beitrag Nr. 5 übernommen und der Scrollbalken ist jetzt schön in dunkelblau.

Oh, das sehe ich jetzt erst: Das ist auch schon das von mir verlinkte Skript von Aris.

Zitat von pascallo

Also lösche den Code aus dem alten Skript mal und kopiere den neuen Code rein! Vielleicht sagt dir das ja mehr zu...

Und hier ebenso.

Mittlerweile steht es auch im Skript selbst, aber ich halte es für deutlich besser, nur auf die Originalquelle zu verlinken (solange verfügbar) – und hier wie bei allen Github-Skripten nur den Hinweis zu geben, wie man das Skript selbst auf seinen Rechner bekommt (auf Button „Raw“ klicken). (Nachtrag: Allerdings hatte selbst Aris in seiner Ankündigung nicht auf seine Github-Präsenz hingewiesen.)

Zitat von black10

Das "Scroll-Ende" gefällt mir jetzt mit den blauen Pfeilspitzen deutlich besser als vorher. Wenn jetzt der Scrollbalken noch genauso (dunkel)Blau wäre wie im Skript vorher... :oops:

Vom Screenshot ausgehend musst Du im Skript in der aktuellen Version 1.0.3a nach diesem Block suchen:

Code

// - thumb/slider
var cs_thumb_color = "#33CCFF"; /* default = "#33CCFF" */
var cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* default = "unset" */
var cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; /* default = "unset" */
var cs_thumb_hover_color = "#66FFFF"; /* default = "#66FFFF" */
var cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* default = "unset" */
var cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; /* default = "unset" */
var cs_thumb_border_color = "#33CCFF"; /* default "#33CCFF" */

Wenn Dein Schnappschuss die korrekte Farbe wiedergegeben hat, dann musst Du die erste Zeile ändern zu

Code

var cs_thumb_color = "#272349"; /* default = "#33CCFF" */

Wenn Du die Farbe ändern willst, die bei Maushover erscheint, musst Du den Wert in dieser Zeile ändern

Code

var cs_thumb_hover_color = "#66FFFF"; /* default = "#66FFFF" */

Du kannst ja mal testen mit dem Farbwert #3D367C.

Wenn dich die Farbverläufe stören, dann setze die Hintergrundbilder auf den Standard, der in Klammern angegeben ist. Um das zuerst aufgeführte als Beispiel zu nehmen:

Code

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

Du kannst aber auch etwas testen, das ich gemacht habe: Tausche doch die Farbverläufe zwischen vertikal und horizontal: Das meint, tausche immer „to right“ mit „to bottom“. Man kann dann auch noch mit der Farbe und Opazität im Gradienten selbst rumspielen.

Ansonsten freut es mich, dass es auch anderen besser mit Pfeilspitzen gefällt.

black10

Mhh...also das kriege ich jetzt irgendwie nicht mehr hin...

Der Farbverlauf des blauen Scrollbalkens "stört" mich in der Tat etwas. Die graue (Scroll) Leiste schimmert immer etwas durch das Blau hindurch. Wie auch im Beitrag 14 zu sehen.

Die Änderung des Codes auf "var cs_thumb_color = "#272349"; /* default = "#33CCFF" */" brachte gar nichts. Sieht so aus wie vorher. :-??

Speravir

Da bin ich wohl zu blöd für, kriege...

"Wenn dich die Farbverläufe stören, dann setze die Hintergrundbilder auf den Standard, der in Klammern angegeben ist. Um das zuerst aufgeführte als Beispiel zu nehmen:
var cs_thumb_image_vertical = "unset"; /* default = "unset" */

...das nicht hin...

Hatte zwischendurch so viel verstellt das ich alles rauslöschen und den Ursprungscode wieder nehmen mußte um überhaupt wieder das (durchscheinende/transparente) Blau zu bekommen. Der Blauton ist ja völlig ok, nur die Transparenz/das durchscheinende muß irgendwie weg...

black10

Habs jetzt (zufällig) hingekommen.

Habe in der Zeile "var cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba (255,255,255,0.5),transparent)"; /* default = "unset" */" einfach auf gut Glück die Klammer mit den Zahlen entfernt...und siehe da der Balken ist jetzt durchgehend
tiefblau...

Schwierige Geburt...

[attachment=0]7.png[/attachment]

milupo

Zitat von black10

... um überhaupt wieder das (durchscheinende/transparente) Blau zu bekommen. Der Blauton ist ja völlig ok, nur die Transparenz/das durchscheinende muß irgendwie weg...

Ja, was denn nun? Mit Transparenz oder ohne?