Ponerle un estilo a tu scrollbar

Started by Aboul, December 04, 2013, 12:59:22 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Aboul

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:

/* 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

Spoiler

El Resultado es este

Spoiler
[close]

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

/* 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:
Spoiler
[close]
Last Edit: August 20, 2019, 09:26:44 PM by Diego Andrés

Daniel

Muy buen tutorial! Lastima que solo sirva para chrome y safari, espero que después se pueda para los demas navegadores.

Aboul

Quote from: Daniel on 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.

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

EduardO

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