0 Members and 1 Guest are viewing this topic.

*

Aboul

  • Newbie
Ponerle un estilo a tu scrollbar
December 04, 2013, 12:59:22 PM
Buenas smfhispano, primero que nada voy a explicarles que es el scrollbar.

El Scrollbar es la barra que sirve para subir o bajar una pagina.

Imagen

Este Tutorial solo sirve para google chrome y safari, en mozilla y otros navegadores no se va a ver el estilo.

Empezamos:

1. Nos vamos al index.css de tu theme y al final pegamos el siguiente codigo:

Code: [Select]
/* ScrollBar by uge */

::-webkit-scrollbar
{
    width: 12px;
}
::-webkit-scrollbar-button
{   
background: #D8D8D8 url (../images/theme/scroollarriba.png);
height: 23px;

}
::-webkit-scrollbar-button:hover
{
background-color: #A4A4A4;
}
::-webkit-scrollbar-track
{
    background-color: #D8D8D8;
}
 ::-webkit-scrollbar-track-piece
{
background-color: #D8D8D8;
}
::-webkit-scrollbar-thumb
{
background: #A4A4A4;
height: 50px;
}
::-webkit-scrollbar-thumb:hover
{
background: #585858;
}

/* Final ScrollBar by uge */

Por ultimo ponemos la siguiente imagen en /images/theme

La guardan como: scrollarriba.png

(click to show/hide)

El Resultado es este

(click to show/hide)

Otro estilo es este codigo, lo ponen al final de su css:

Code: [Select]
/* ScrollBar */

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
-webkit-box-shadow: #000000;
-webkit-border-radius: 10px;
border-radius: 10px;
}

::-webkit-scrollbar-track-piece {
background-color: #000000;
}

::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #EB8A1D;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
background: #EB8A1D;
}

/* Final ScrollBar */

Quedaría asi:
(click to show/hide)
Last Edit: August 20, 2019, 09:26:44 PM by Diego Andrés


*

Daniel

  • Webmaster
Re:Ponerle un estilo a tu scrollbar
December 04, 2013, 01:04:38 PM
Muy buen tutorial! Lastima que solo sirva para chrome y safari, espero que después se pueda para los demas navegadores.
*

Aboul

  • Newbie
Re:Ponerle un estilo a tu scrollbar
December 04, 2013, 01:09:45 PM
Muy buen tutorial! Lastima que solo sirva para chrome y safari, espero que después se pueda para los demas navegadores.

Ya funciona para la ultima version de mozilla firefox.
Muchas gracias.
*

EduardO

  • ST Lover
Re:Ponerle un estilo a tu scrollbar
December 04, 2013, 01:17:29 PM
Gracias pro compartir Hur? Definivitamente primero que nada preguntarte. ¿Y LOS CREDITOS?

Cualquier tutorial que dejes o agas debes de dejar los creditos. Saludos
EduardO
AZORAHAI
NerO
EDesign



passionate-beautiful