Monday, 8 April 2013

How to Change the Colour of Your Scrollbar!



*NOTE*
Whenever editing your fundamental html code, always backup beforehand so if anything goes wrong, you can revert to the previous version. Visit my quick How-To Backup Post HERE.
*NOTE*

       1. Go to your blog’s Template > Edit HTML. SEE ABOVE NOTE BEFORE DOING THIS

       2. Now press Ctrl + F to open the search box and search for the code

]]>
    </b:template-skin>


Cut and paste the below code before it, with the following edits:


::-webkit-scrollbar{
height:14px;
width:14px;
background:#1stcolourcodehere;
border-left:1px solid #2ndcolourcodehere
}
::-webkit-scrollbar-thumb{
background:#3rdcolourcodehere;
border:1px solid #4thcolourcodehere
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover{
border:1px solid #5thcolourcodehere
border-radius: 10px;
}
::-webkit-scrollbar-thumb:active{
background:#6thcolourcodehere;
border:1px solid #7thcolourcodehere
border-radius: 10px;
}


The following lets you know which of the colour codes (#colourcodeherecontrols what feature in the scrollbar code, and therefore you can adjust the colouring specifically for your blog. You can either find which colours you are using in your Template section (go to advanced, then just copy the relevant code and insert into the above). Alternatively you can visit this site for a list of colour codes.

  1st colour code   is the background of the stable section of your scrollbar.

  2nd colour code   is border of the stable background section of your scrollbar

  3rd colour code   is the background colour of the moveable piece (scrolling) section of your scrollbar (when not clicked on and held with your cursor)

  4th colour code   is border of the moveable piece (scrolling) section of your scrollbar when left alone.

  5th colour code   is the border of the moveable piece (scrolling) section of your scrollbar when your mouse hovers over it.

  6th colour code   is the border of the moveable piece (scrolling) section of your scrollbar when you click on it.

  7th colour code   is the border of the moveable piece (scrolling) section of your scrollbar when you click on it.

You can also increase or decrease width of the scrollbar by editing the yellow number. The blue numbers are the width of each border, you can make the border thicker by raising these numbers. 2 would mean the borders would be 2 pixels wide instead of 1.

     3. Do a "preview" before hitting the save button, to make sure you have it the way you want it.

     4. Now hit the Save Template button and then refresh your blog to see the scrollbar has changed!

That’s it folks, hope this makes a great addition to your site and if you have any questions, just ask.

No comments :

Post a Comment

Facebook Twitter Google + RSS Feed Email Me