(OT) Scroll in Firefox. Color

Discussion:

(demasiado antiguo para responder)

Anuack Luna

2007-11-17 02:43:58 UTC

Permalink

He probado muchísimas formas de cambiar el scroll pero en firefox no
funciona. Alguien lo ha hecho. Gracias

Walter Rincon

2007-11-17 03:20:21 UTC

Permalink

el color y el Backpicture de las scrollbars de firefox vienen definidas
dentro del tema que tenga aplicado.

si tienes un tema sin instalar, le puedes cambiar la extension a .zip y ver
como esta configurada la hoja de estilos de las scrollbars, la encontraras
en la carpeta Global/scrollbar junto a las imagenes png para cada elemento
del scrollbar, estas imagenes son las que puedes modificar para ponerlas del
color que quieras....

la hoja de estilos es similar a esta,

/* ::::: scrollbar ::::: */

scrollbar {
-moz-binding:
url("chrome://global/content/bindings/scrollbar.xml#scrollbar");
cursor: default;
}

/*
scrollbar[orient="vertical"] {
background: #B6B6B6
url("chrome://global/skin/scrollbar/track-vertical.png") repeat-y;
width: 16px;
}
*/

scrollbar[orient="vertical"] {
background: #B6B6B6
url("chrome://global/skin/scrollbar/track-vertical.png") 0 16px no-repeat;
width: 16px;
}

scrollbar[orient="vertical"] slider {
background: url("chrome://global/skin/scrollbar/slider-vertical.png") left
bottom no-repeat;
}

/*
scrollbar[orient="horizontal"] {
background: #B6B6B6
url("chrome://global/skin/scrollbar/track-horizontal.png") repeat-x;
height: 16px;
}
*/

scrollbar[orient="horizontal"] {
background: #B6B6B6
url("chrome://global/skin/scrollbar/track-horizontal.png") 16px 0 no-repeat;
height: 16px;
}

scrollbar[orient="horizontal"] slider {
background: url("chrome://global/skin/scrollbar/slider-horizontal.png")
right top no-repeat;
}

/* ::::: thumb (horizontal) ::::: */
/* top */
thumb[orient="vertical"] {
min-height: 32px;
background: url("chrome://global/skin/scrollbar/thumb-v-top.png") no-repeat
top left;
}

/* bottom */
gripper {
-moz-box-flex: 1;
}

thumb[orient="vertical"] > gripper {
background: url("chrome://global/skin/scrollbar/thumb-v-bottom.png")
no-repeat bottom left;
width: 16px;
}

/* start */
thumb[orient="horizontal"] {
background: url("chrome://global/skin/scrollbar/thumb-h-start.png")
no-repeat top left;
min-width: 32px;
}

/* end */
thumb[orient="horizontal"] > gripper {
background: url("chrome://global/skin/scrollbar/thumb-h-end.png") no-repeat
top right;
height: 16px;
}

/* ::::: square at the corner of two scrollbars ::::: */

scrollcorner {
background: url("chrome://global/skin/scrollbar/corner.png") no-repeat;
}

/* ::::: scrollbar button ::::: */

scrollbarbutton {
min-width: 16px;
min-height: 16px;
background-repeat: no-repeat;
background-position: 0px 0px;
}
scrollbarbutton:hover {
background-position: 0px -16px;
}
scrollbarbutton:hover:active {
background-position: 0px -32px;
}

/* Right Arrow */
scrollbarbutton[type="increment"] {
background-image: url("chrome://global/skin/scrollbar/arrow-right.png");
}

/* Down Arrow */
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
background-image: url("chrome://global/skin/scrollbar/arrow-down.png");
}

/* Left Arrow */
scrollbarbutton[type="decrement"] {
background-image: url("chrome://global/skin/scrollbar/arrow-left.png");
}

/* Up Arrow */
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
background-image: url("chrome://global/skin/scrollbar/arrow-up.png");
}

/* ::::: square at the corner of two scrollbars ::::: */

scrollcorner {
-moz-binding:
url("chrome://global/content/bindings/scrollbar.xml#scrollbar-base");
cursor: default;
background-color: -moz-Dialog;
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* ::::::::::::::::::::: MEDIA PRINT :::::::::::::::::::::: */
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
@media print {
/* ::::: scrollbar ::::: */

html|div scrollbar {
-moz-appearance: scrollbartrack-horizontal;
-moz-binding:
url("chrome://global/content/bindings/scrollbar.xml#scrollbar");
cursor: default;
background: url("chrome://global/skin/scrollbar/slider.png") scrollbar;
}

html|div scrollbar[orient="vertical"] {
-moz-appearance: scrollbartrack-vertical;
}

/* ::::: borders for thumb and buttons ::::: */

html|div thumb,
html|div scrollbarbutton {
border: 2px solid;
-moz-border-top-colors: ThreeDLightShadow ThreeDHighlight;
-moz-border-right-colors: ThreeDDarkShadow ThreeDShadow;
-moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow;
-moz-border-left-colors: ThreeDLightShadow ThreeDHighlight;
background-color: -moz-Dialog;
}

/* ::::: thumb (horizontal) ::::: */

html|div thumb {
-moz-appearance: scrollbarthumb-vertical;
min-height: 8px;
}

html|div thumb[orient="horizontal"] {
-moz-appearance: scrollbarthumb-horizontal;
min-width: 8px;
}

html|div thumb > gripper {
-moz-appearance: scrollbargripper-vertical;
}

html|div thumb[orient="horizontal"] > gripper {
-moz-appearance: scrollbargripper-horizontal;
}

/* ::::: scrollbar button ::::: */

html|div scrollbarbutton {
background: -moz-Dialog no-repeat 0px 1px;
min-width: 16px;
min-height: 16px;
}

html|div scrollbarbutton:hover:active {
-moz-border-top-colors: ThreeDShadow -moz-Dialog;
-moz-border-right-colors: ThreeDShadow -moz-Dialog;
-moz-border-bottom-colors: ThreeDShadow -moz-Dialog;
-moz-border-left-colors: ThreeDShadow -moz-Dialog;
background-position: 1px 2px;
}

/* ..... increment .... */

html|div scrollbarbutton[type="increment"] {
-moz-appearance: scrollbarbutton-right;
background-image: url("chrome://global/skin/arrow/arrow-rit.gif")
}

html|div scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]
{
-moz-appearance: scrollbarbutton-down;
background-image: url("chrome://global/skin/arrow/arrow-dn.png")
}

/* ..... decrement .... */

html|div scrollbarbutton[type="decrement"] {
-moz-appearance: scrollbarbutton-left;
background-image: url("chrome://global/skin/arrow/arrow-lft.gif")
}

html|div scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]
{
-moz-appearance: scrollbarbutton-up;
background-image: url("chrome://global/skin/arrow/arrow-up.png")
}

}

Post by Anuack Luna
He probado muchísimas formas de cambiar el scroll pero en firefox no
funciona. Alguien lo ha hecho. Gracias

Anuack Luna

2007-11-18 03:32:58 UTC

Permalink

Hola Walter.

Encontré esto.

http://64.233.179.104/translate_c?hl=es&langpair=en%7Ces&u=http://www.mozilla.org/unix/customizing.html

http://www.mozilla.org/unix/customizing.html

Ósea. Creo un CSS y agrego esta información?

Cambio las rutas por las imágenes en la web
Ejemplo:

Esto
chrome://global/skin/scrollbar/track-vertical.png

Por:

..//img_anuack/imagen_demo.gif?

Bueno.Voy a leerlo y te cuento si esta bien lo que creo

Gracias

Post by Walter Rincon
el color y el Backpicture de las scrollbars de firefox vienen definidas
dentro del tema que tenga aplicado.
si tienes un tema sin instalar, le puedes cambiar la extension a .zip y
ver como esta configurada la hoja de estilos de las scrollbars, la
encontraras en la carpeta Global/scrollbar junto a las imagenes png para
cada elemento del scrollbar, estas imagenes son las que puedes modificar
para ponerlas del color que quieras....
la hoja de estilos es similar a esta,
/* ::::: scrollbar ::::: */
scrollbar {
url("chrome://global/content/bindings/scrollbar.xml#scrollbar");
cursor: default;
}
/*
scrollbar[orient="vertical"] {
background: #B6B6B6
url("chrome://global/skin/scrollbar/track-vertical.png") repeat-y;
width: 16px;
}
*/
scrollbar[orient="vertical"] {
background: #B6B6B6
url("chrome://global/skin/scrollbar/track-vertical.png") 0 16px no-repeat;
width: 16px;
}
scrollbar[orient="vertical"] slider {
background: url("chrome://global/skin/scrollbar/slider-vertical.png")
left bottom no-repeat;
}
/*
scrollbar[orient="horizontal"] {
background: #B6B6B6
url("chrome://global/skin/scrollbar/track-horizontal.png") repeat-x;
height: 16px;
}
*/
scrollbar[orient="horizontal"] {
background: #B6B6B6
url("chrome://global/skin/scrollbar/track-horizontal.png") 16px 0 no-repeat;
height: 16px;
}
scrollbar[orient="horizontal"] slider {
background: url("chrome://global/skin/scrollbar/slider-horizontal.png")
right top no-repeat;
}
/* ::::: thumb (horizontal) ::::: */
/* top */
thumb[orient="vertical"] {
min-height: 32px;
background: url("chrome://global/skin/scrollbar/thumb-v-top.png")
no-repeat top left;
}
/* bottom */
gripper {
-moz-box-flex: 1;
}
thumb[orient="vertical"] > gripper {
background: url("chrome://global/skin/scrollbar/thumb-v-bottom.png")
no-repeat bottom left;
width: 16px;
}
/* start */
thumb[orient="horizontal"] {
background: url("chrome://global/skin/scrollbar/thumb-h-start.png")
no-repeat top left;
min-width: 32px;
}
/* end */
thumb[orient="horizontal"] > gripper {
background: url("chrome://global/skin/scrollbar/thumb-h-end.png")
no-repeat top right;
height: 16px;
}
/* ::::: square at the corner of two scrollbars ::::: */
scrollcorner {
background: url("chrome://global/skin/scrollbar/corner.png") no-repeat;
}
/* ::::: scrollbar button ::::: */
scrollbarbutton {
min-width: 16px;
min-height: 16px;
background-repeat: no-repeat;
background-position: 0px 0px;
}
scrollbarbutton:hover {
background-position: 0px -16px;
}
scrollbarbutton:hover:active {
background-position: 0px -32px;
}
/* Right Arrow */
scrollbarbutton[type="increment"] {
background-image: url("chrome://global/skin/scrollbar/arrow-right.png");
}
/* Down Arrow */
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
background-image: url("chrome://global/skin/scrollbar/arrow-down.png");
}
/* Left Arrow */
scrollbarbutton[type="decrement"] {
background-image: url("chrome://global/skin/scrollbar/arrow-left.png");
}
/* Up Arrow */
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
background-image: url("chrome://global/skin/scrollbar/arrow-up.png");
}
/* ::::: square at the corner of two scrollbars ::::: */
scrollcorner {
url("chrome://global/content/bindings/scrollbar.xml#scrollbar-base");
cursor: default;
background-color: -moz-Dialog;
}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* ::::::::::::::::::::: MEDIA PRINT :::::::::::::::::::::: */
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
@media print {
/* ::::: scrollbar ::::: */
html|div scrollbar {
-moz-appearance: scrollbartrack-horizontal;
url("chrome://global/content/bindings/scrollbar.xml#scrollbar");
cursor: default;
background: url("chrome://global/skin/scrollbar/slider.png") scrollbar;
}
html|div scrollbar[orient="vertical"] {
-moz-appearance: scrollbartrack-vertical;
}
/* ::::: borders for thumb and buttons ::::: */
html|div thumb,
html|div scrollbarbutton {
border: 2px solid;
-moz-border-top-colors: ThreeDLightShadow ThreeDHighlight;
-moz-border-right-colors: ThreeDDarkShadow ThreeDShadow;
-moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow;
-moz-border-left-colors: ThreeDLightShadow ThreeDHighlight;
background-color: -moz-Dialog;
}
/* ::::: thumb (horizontal) ::::: */
html|div thumb {
-moz-appearance: scrollbarthumb-vertical;
min-height: 8px;
}
html|div thumb[orient="horizontal"] {
-moz-appearance: scrollbarthumb-horizontal;
min-width: 8px;
}
html|div thumb > gripper {
-moz-appearance: scrollbargripper-vertical;
}
html|div thumb[orient="horizontal"] > gripper {
-moz-appearance: scrollbargripper-horizontal;
}
/* ::::: scrollbar button ::::: */
html|div scrollbarbutton {
background: -moz-Dialog no-repeat 0px 1px;
min-width: 16px;
min-height: 16px;
}
html|div scrollbarbutton:hover:active {
-moz-border-top-colors: ThreeDShadow -moz-Dialog;
-moz-border-right-colors: ThreeDShadow -moz-Dialog;
-moz-border-bottom-colors: ThreeDShadow -moz-Dialog;
-moz-border-left-colors: ThreeDShadow -moz-Dialog;
background-position: 1px 2px;
}
/* ..... increment .... */
html|div scrollbarbutton[type="increment"] {
-moz-appearance: scrollbarbutton-right;
background-image: url("chrome://global/skin/arrow/arrow-rit.gif")
}
html|div scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]
{
-moz-appearance: scrollbarbutton-down;
background-image: url("chrome://global/skin/arrow/arrow-dn.png")
}
/* ..... decrement .... */
html|div scrollbarbutton[type="decrement"] {
-moz-appearance: scrollbarbutton-left;
background-image: url("chrome://global/skin/arrow/arrow-lft.gif")
}
html|div scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]
{
-moz-appearance: scrollbarbutton-up;
background-image: url("chrome://global/skin/arrow/arrow-up.png")
}
}

Post by Anuack Luna
He probado muchísimas formas de cambiar el scroll pero en firefox no
funciona. Alguien lo ha hecho. Gracias

Walter Rincon

2007-11-21 03:34:02 UTC

Permalink

No te compliques:

*Descarga un tema cualesquier de firefox
* busca ese archivo de tipo *.JAR
* cambiale la extension a *.ZIP
* navega hasta la carpeta Global dentro del archivo ZIP
* copia todas las imagenes dentro de la carpeta Scrollbars [dentro del
archivo ZIP todavia] hasta una carpeta dentro de tu sistema de archivos
* Haz tu propia version de las imagenes, recolorizalas,aplicales algun
efecto, desaturalas,etc, depende de tu gusto
* reemplaza las imagenes dentro del ZIP con las tuyas.
*renombra el archivo ZIP a *.JAR
* instala el tema dentro de firefox [Yo lo hago abriendo el dialogo de
addons -- themes-- Arrastrando el archivo a dicho dialogo, esto abre la
ventana de instalacion del tema
asegurandote de que sea compatible con la version de firefox instalada
*reinicia firefox
comprueba que el color de los scrollbars ha sido cambiado.

me imagino que con Css y un poco de Javascript se puede hacer con imagenes
de un servidor, pero la verdad es que no conozco tanto de javascript como
para ponerme a averiguarlo.

Saludos

Post by Anuack Luna
Hola Walter.
Encontré esto.
http://64.233.179.104/translate_c?hl=es&langpair=en%7Ces&u=http://www.mozilla.org/unix/customizing.html
http://www.mozilla.org/unix/customizing.html
Ósea. Creo un CSS y agrego esta información?
Cambio las rutas por las imágenes en la web
Esto
chrome://global/skin/scrollbar/track-vertical.png
..//img_anuack/imagen_demo.gif?
Bueno.Voy a leerlo y te cuento si esta bien lo que creo
Gracias

Post by Walter Rincon
el color y el Backpicture de las scrollbars de firefox vienen definidas
dentro del tema que tenga aplicado.
si tienes un tema sin instalar, le puedes cambiar la extension a .zip y
ver como esta configurada la hoja de estilos de las scrollbars, la
encontraras en la carpeta Global/scrollbar junto a las imagenes png para
cada elemento del scrollbar, estas imagenes son las que puedes modificar
para ponerlas del color que quieras....
la hoja de estilos es similar a esta,
/* ::::: scrollbar ::::: */
scrollbar {
url("chrome://global/content/bindings/scrollbar.xml#scrollbar");
cursor: default;
}
/*
scrollbar[orient="vertical"] {
background: #B6B6B6
url("chrome://global/skin/scrollbar/track-vertical.png") repeat-y;
width: 16px;
}
*/
scrollbar[orient="vertical"] {
background: #B6B6B6
url("chrome://global/skin/scrollbar/track-vertical.png") 0 16px no-repeat;
width: 16px;
}
scrollbar[orient="vertical"] slider {
background: url("chrome://global/skin/scrollbar/slider-vertical.png")
left bottom no-repeat;
}
/*
scrollbar[orient="horizontal"] {
background: #B6B6B6
url("chrome://global/skin/scrollbar/track-horizontal.png") repeat-x;
height: 16px;
}
*/
scrollbar[orient="horizontal"] {
background: #B6B6B6
url("chrome://global/skin/scrollbar/track-horizontal.png") 16px 0 no-repeat;
height: 16px;
}
scrollbar[orient="horizontal"] slider {
background: url("chrome://global/skin/scrollbar/slider-horizontal.png")
right top no-repeat;
}
/* ::::: thumb (horizontal) ::::: */
/* top */
thumb[orient="vertical"] {
min-height: 32px;
background: url("chrome://global/skin/scrollbar/thumb-v-top.png")
no-repeat top left;
}
/* bottom */
gripper {
-moz-box-flex: 1;
}
thumb[orient="vertical"] > gripper {
background: url("chrome://global/skin/scrollbar/thumb-v-bottom.png")
no-repeat bottom left;
width: 16px;
}
/* start */
thumb[orient="horizontal"] {
background: url("chrome://global/skin/scrollbar/thumb-h-start.png")
no-repeat top left;
min-width: 32px;
}
/* end */
thumb[orient="horizontal"] > gripper {
background: url("chrome://global/skin/scrollbar/thumb-h-end.png")
no-repeat top right;
height: 16px;
}
/* ::::: square at the corner of two scrollbars ::::: */
scrollcorner {
background: url("chrome://global/skin/scrollbar/corner.png") no-repeat;
}
/* ::::: scrollbar button ::::: */
scrollbarbutton {
min-width: 16px;
min-height: 16px;
background-repeat: no-repeat;
background-position: 0px 0px;
}
scrollbarbutton:hover {
background-position: 0px -16px;
}
scrollbarbutton:hover:active {
background-position: 0px -32px;
}
/* Right Arrow */
scrollbarbutton[type="increment"] {
background-image: url("chrome://global/skin/scrollbar/arrow-right.png");
}
/* Down Arrow */
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
background-image: url("chrome://global/skin/scrollbar/arrow-down.png");
}
/* Left Arrow */
scrollbarbutton[type="decrement"] {
background-image: url("chrome://global/skin/scrollbar/arrow-left.png");
}
/* Up Arrow */
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
background-image: url("chrome://global/skin/scrollbar/arrow-up.png");
}
/* ::::: square at the corner of two scrollbars ::::: */
scrollcorner {
url("chrome://global/content/bindings/scrollbar.xml#scrollbar-base");
cursor: default;
background-color: -moz-Dialog;
}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* ::::::::::::::::::::: MEDIA PRINT :::::::::::::::::::::: */
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
@media print {
/* ::::: scrollbar ::::: */
html|div scrollbar {
-moz-appearance: scrollbartrack-horizontal;
url("chrome://global/content/bindings/scrollbar.xml#scrollbar");
cursor: default;
background: url("chrome://global/skin/scrollbar/slider.png") scrollbar;
}
html|div scrollbar[orient="vertical"] {
-moz-appearance: scrollbartrack-vertical;
}
/* ::::: borders for thumb and buttons ::::: */
html|div thumb,
html|div scrollbarbutton {
border: 2px solid;
-moz-border-top-colors: ThreeDLightShadow ThreeDHighlight;
-moz-border-right-colors: ThreeDDarkShadow ThreeDShadow;
-moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow;
-moz-border-left-colors: ThreeDLightShadow ThreeDHighlight;
background-color: -moz-Dialog;
}
/* ::::: thumb (horizontal) ::::: */
html|div thumb {
-moz-appearance: scrollbarthumb-vertical;
min-height: 8px;
}
html|div thumb[orient="horizontal"] {
-moz-appearance: scrollbarthumb-horizontal;
min-width: 8px;
}
html|div thumb > gripper {
-moz-appearance: scrollbargripper-vertical;
}
html|div thumb[orient="horizontal"] > gripper {
-moz-appearance: scrollbargripper-horizontal;
}
/* ::::: scrollbar button ::::: */
html|div scrollbarbutton {
background: -moz-Dialog no-repeat 0px 1px;
min-width: 16px;
min-height: 16px;
}
html|div scrollbarbutton:hover:active {
-moz-border-top-colors: ThreeDShadow -moz-Dialog;
-moz-border-right-colors: ThreeDShadow -moz-Dialog;
-moz-border-bottom-colors: ThreeDShadow -moz-Dialog;
-moz-border-left-colors: ThreeDShadow -moz-Dialog;
background-position: 1px 2px;
}
/* ..... increment .... */
html|div scrollbarbutton[type="increment"] {
-moz-appearance: scrollbarbutton-right;
background-image: url("chrome://global/skin/arrow/arrow-rit.gif")
}
html|div scrollbar[orient="vertical"] >
scrollbarbutton[type="increment"] {
-moz-appearance: scrollbarbutton-down;
background-image: url("chrome://global/skin/arrow/arrow-dn.png")
}
/* ..... decrement .... */
html|div scrollbarbutton[type="decrement"] {
-moz-appearance: scrollbarbutton-left;
background-image: url("chrome://global/skin/arrow/arrow-lft.gif")
}
html|div scrollbar[orient="vertical"] >
scrollbarbutton[type="decrement"] {
-moz-appearance: scrollbarbutton-up;
background-image: url("chrome://global/skin/arrow/arrow-up.png")
}
}

Post by Anuack Luna
He probado muchísimas formas de cambiar el scroll pero en firefox no
funciona. Alguien lo ha hecho. Gracias

Anuack Luna

2007-11-18 03:42:39 UTC

Permalink

Disculpa, busque y dentro de Windows no encontré ninguna carpeta Global o
scrollbar

Me puede colaborar en la ruta? y brindarme mas info. Gracias

Post by Anuack Luna
He probado muchísimas formas de cambiar el scroll pero en firefox no
funciona. Alguien lo ha hecho. Gracias