Customize your Tumblr Scroll Bar – Tumblr Tutorial

Published by Tumble Guy on March 18th, 2012 |

Here is a quick tutorial on how to customize your scrollbar using webkit. It’s as as easy as pasting a code to your Tumblr HTML.

Note: This may only work for Safari and Chrome browsers

Method 1: Simple Scrollbar

To customize your Scrollbar, go to your customize page and click Edit HTML.

Insert following code below

::-webkit-scrollbar-thumb:vertical {
    background-color: #colorcode;
    width:15px;
    height:100px;
    border: 1px solid #colorcode;
    -webkit-border-radius: 6px;
    }

::-webkit-scrollbar {
    height:10px;
    width:15px;
    background-color: #colorcode;
    }

Change ‘colorcode’ to the color you want. To choose a color code, you can go to Color Picker or Colour Lovers. Copy the code the insert it to the code above.

You can also adjust the width size of the scroll bar. Simply change ‘width:15px‘.

Method 2: Scrollbar with Image

If you want to use an image for your scrollbar, use the code below instead:

::-webkit-scrollbar {
    height:10px;
    width:32px;
    background-color: #colorcode;
    }

::-webkit-scrollbar-thumb:vertical {
    height: 32px;
    background-color: #e0e0e0;
    background-image:url('image.jpg');
    background-repeat:no-repeat;
    border: 1px solid #colorcode;
    background-position:center;
    -webkit-border-radius: 20px;
    }

Change ‘image.jpg’ URL of the image you want. It can be any photo. In the example below, I used a photo of a rocket (http://icons.iconarchive.com/icons/etherbrian/space-bits/32/Rocket-icon.png).

Custom Rocket scroll bar

About the Author

Tumble Guy Tumble Guy is the chief-monster-editor and founder of Tumbtips. He writes killer tutorials for Tumblr, provides great tips for budding Tumblr superstars, and thinks you should like Tumbtips Facebook page and follow them on Tumblr.