Scroll-Schieber dunkler machen?

milupo

@grünerfuchs: Du solltest dir dringend mal die Zeit nehmen, folgenden Beitrag durchzulesen und versuchen zu verstehen:

https://www.camp-firefox.de/forum/viewtopic.php?f=16&t=127243

2002Andreas

Hast du bitte mal einen Beispiellink für so eine schwarze Seite.

grünerfuchs

Zitat von 2002Andreas

Hast du bitte mal einen Beispiellink für so eine schwarze Seite.

https://www.allmystery.de/

2002Andreas

Danke.
So sieht das hier aus:

[attachment=0]Screenshot (262).png[/attachment]

Also ich kann den Scrollbalken ohne Probleme erkennen mit diesem Code:

Code

:root{ 
   /* Farbe 1: Thumb - Farbe 2: Hintergund*/
  scrollbar-color: black lightgrey; 
     }

milupo

Zitat von grünerfuchs

Ja OK, aber das wußte ich ja alles nicht. Für mich ist alles Jacke wie Hose und ich setze nur die Vorschläge von euch 1:1 um. Und wenn mir keiner sagt, dass ich auch in die usercontent.css schreiben muss (weil ich mich falsch ausgedrückt habe), dann schreibe

So? Lies mal, was in Beitrag #9 unter dem Bild steht.

Zitat

Also nehmt es mir nicht übel, dass ich oft die Sachen nicht beim Namen nennen kann und dadurch Missverständnisse entstehen.

Das nimmt dir keiner übel. Aber du bist sicherlich in der Lage genauer zu beschreiben, wo das Problem liegt. Was du hier nicht wusstest, ist, dass man hier unterscheiden muss, ob ein Problem die Benutzeroberfläche von Firefox betrifft oder eine Webseite. Dafür solltest du den in Beitrag #41 verlinkten Beitrag lesen.

grünerfuchs

Zitat von 2002Andreas
Also ich kann den Scrollbalken ohne Probleme erkennen mit diesem Code:
Code
:root{ 
   /* Farbe 1: Thumb - Farbe 2: Hintergund*/
  scrollbar-color: black lightgrey; 
     }

Ja genau, das ist der richtige Weg. Super! :klasse:

Ich habe den Code nach meinen Vorstellungen noch angepasst, da er jetzt dezenter wirkt und sich irgendwie mit dem dunkelgrauen des FF vereint und nun eine Einheit bildet.

:root{
/* Farbe 1: Thumb - Farbe 2: Hintergund*/
scrollbar-color: gray lightgrey;
}

[attachment=1]Unbenannt.jpg[/attachment]

[attachment=0]Unbenannt1.jpg[/attachment]

2002Andreas

Freut mich wenn du damit jetzt zufrieden bist.

grünerfuchs

Zitat von 2002Andreas

Freut mich wenn du damit jetzt zufrieden bist.

Ja, sehr sogar. Und Danke für die Geduld mit nicht so leichten Kunden... :wink:

2002Andreas

Zitat von grünerfuchs

mit nicht so leichten Kunden.

Alles ist gut :wink:

grünerfuchs

Hallo 2002Andreas,

das haben wir ja gut gelöst gestern. Jetzt fällt mir aber was auf: Wenn ich den Schieber mit der Maus festhalte und nach oben/unten bewege wird er hellgrau, also absolut identisch mit der Schiebeleiste (egal ob dunkle oder helle Seite) und dementsprechend kaum/gar nicht zu sehen. Kann man da noch was machen, dass beim festhalten/schieben die Farbe unverändert bleibt?

2002Andreas

Ich bin mir nicht sicher ob sich das per CSS Code ändern lässt :-??

Kennst du dich mit Scripten aus die wir hier teilweise benutzen?
Wenn ja, damit kannst du die Farben wie gehabt selber austauschen, und auch eine weitere Farbe für hover auswählen.

CSS

"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

grünerfuchs

Zitat von 2002Andreas

Kennst du dich mit Scripten aus die wir hier teilweise benutzen?

Ne, gar nicht. Eh ich mir den FF zerschieße lasse ich das lieber sein.. :wink:

2002Andreas

Zitat von grünerfuchs

lasse ich das lieber sein

Teste bitte mal:

Code

:root{ 
   /* Farbe 1: Thumb - Farbe 2: Hintergund*/
  scrollbar-color: gray lightgrey;
     }
 
:root:active { 
   /* Farbe 1: Thumb - Farbe 2: Hintergund*/
  scrollbar-color: blue lightgrey; 
     }

Farben wieder anpassen.
Wenn du jetzt den den Thumb/Balken anklickst mit der Maus, dann wird er blau.

grünerfuchs

Zitat von 2002Andreas

Teste bitte mal:
...
Farben wieder anpassen.

Sehr schön! Wie machst du das bloß? Dir kann man nicht oft genug danken und ich weiß nicht wie ich das noch steigern soll. Danke! :klasse:

Ich habe "schwarz" genommen, passt 1A auch zum Theme.

:root{
/* Farbe 1: Thumb - Farbe 2: Hintergund*/
scrollbar-color: gray lightgrey;
}

:root:active {
/* Farbe 1: Thumb - Farbe 2: Hintergund*/
scrollbar-color: black lightgrey;
}

2002Andreas

Freut mich wenn ich dir wieder helfen konnte, war gern geschehen

Sören Hentzschel

Hat es eigentlich einen besonderen Grund, dass einmal die US-amerikanische ("gray") und einmal die britische ("grey") Schreibweise verwendet wird? :-??

2002Andreas

Ist mir gar nicht aufgefallen, ich habe einfach seinen Code kopiert :oops:

Edit:
Ist aber auf dieser Seite auch so:

http://tomheller.de/theholycymbal/html-farben.html

Sören Hentzschel

Man kann beide Schreibweisen verwenden, insofern macht das nichts, dass das auf der Seite so steht und dass der Code hier so verwendet wird. Ich habe mich nur gewundert, weil beide Schreibweisen ihren Ursprung auf einem jerweils anderen Kontinent haben.

Boersenfeger

// für die Schriftgesundheit und gegen den Augenkrebs:
Es sollte wohl Hintergrund heißen..

grünerfuchs

Zitat von Boersenfeger

// für die Schriftgesundheit und gegen den Augenkrebs:
Es sollte wohl Hintergrund heißen..

Da kann von mir aus auch Vordergrund stehen - solange es funktioniert, zähle ich keine Erbsen. :mrgreen: