SMF Tricks

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 (http://prntscr.com/1wuik8)

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

(https://smftricks.com/proxy.php?request=http%3A%2F%2Fi.imgur.com%2FSVz5vYZ.png&hash=ab50ed83654e919efd760aaa89e1fe1415d0383d)
http://i.imgur.com/SVz5vYZ.png (http://i.imgur.com/SVz5vYZ.png)

[close]

El Resultado es este

Spoiler

(https://smftricks.com/proxy.php?request=http%3A%2F%2Fimageshack.us%2Fa%2Fimg594%2F4103%2Fasdfasdfn.jpg&hash=a3b56cb1e208c4c6bc2a97fa4bc7a5ffb36c2125)

[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

(https://smftricks.com/proxy.php?request=http%3A%2F%2Fimageshack.us%2Fa%2Fimg191%2F7783%2Fcatsnqp.jpg&hash=86d4887720764a6a26cadfa967a3ac2efc8dac36)

[close]