كيف اغير شكل شريط تمرير

body ::-webkit-scrollbar-button:start:decrement,body ::-webkit-scrollbar-button:end:increment{
display:block;
height:0;
background-color:transparent;
}
body ::-webkit-scrollbar-track-piece{
background-color:#C28F49;
-webkit-border-radius:0;
-webkit-border-bottom-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
}
body ::-webkit-scrollbar-thumb:vertical{
height:50px;
background-color:#B34B1A;
-webkit-border-radius:2px;
}
body ::-webkit-scrollbar-thumb:horizontal{
width:50px;
background-color:#B34B1A;
-webkit-border-radius:2px;
}

{if {$_CONF['group_info']['onlinepage_allow']} == '1'}
<a href="index.php?page=online&show=1" class="link_whois_now">
<div class="whois_now">
<?php
echo $PowerBB->_CONF['template']['GuestNumber']+$PowerBB->_CONF['template']['MemberNumber']+$PowerBB->_CONF['template']['MemberNumberHide']+$PowerBB->_CONF['template']['SpidersNumber'];
?>
</div>
</a>
{else}
<div class="whois_now">
<?php
echo $PowerBB->_CONF['template']['GuestNumber']+$PowerBB->_CONF['template']['MemberNumber']+$PowerBB->_CONF['template']['MemberNumberHide']+$PowerBB->_CONF['template']['SpidersNumber'];
?>
</div>
{/if}
<!--[if IE]>
<style  type="text/css" media="all">.whois_now{display:none;}</style>
<![endif]-->
<!--[if gte IE 8]>
<style  type="text/css" media="all">.whois_now{display:block !important;}</style>
<![endif]-->

.whois_now {
background: url('images/whois_online_now.png') no-repeat scroll 0% 0% transparent;
position: fixed;
height: 37px;
left: -45px;
top: 48%;
text-align: center;
width: 120px;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
padding-top: 10px;
font: 20px bold Tahoma;
}
.link_whois_now, .link_whois_now:hover, .link_whois_now:visited, .link_whois_now:active{
color:#FFF;
}