Design Your Web Scroll Bar

Posted by Unknown  |  at  08:35 No comments

Making your scroll bar “looks” more impressive will leave a good impression on your user, because its usage is high. The only way to make it look good is to change the width and the color of the bar, normally this is done by heavy javascriptcodes, but Kownleg provides you a method via CSS, through which all the designing of the scrollbar can be done.

This is the easiest and the simplest way to design your scroll bar.

To make it done, go to template section > Edit Html, press ctrl+F and write ]]></b:skin>, and paste the code below before the

]]></b:skin> 

..............section.

/* Webkit Scrollbar */
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background: #FFFFFF;
-webkit-box-shadow: inset1px1px2px#E0E0E0;
border: 1pxsolid#D8D8D8;
}
::-webkit-scrollbar-thumb {
background: #646464;
-webkit-box-shadow: inset1px1px2pxrgba(155, 155, 155, 0.4);
}
::-webkit-scrollbar-thumb:hover {
background: #AAA;
}
::-webkit-scrollbar-thumb:active {
background: #888;
-webkit-box-shadow: inset1px1px2pxrgba(0,0,0,0.3);
}

• 1. Select the width of the scroll bar 
• 2. Select the color of your scroll bar 
• 3. Select the color when the viewer of your website will mouseover (hover) on the scroll bar 
• 4. Select the color when the viewer will click on the scroll bar 

Enjoy Your Beautiful Website And Stay Beautiful. : )