Time for action — adding our own styles

  1. Open jquery.jscrollpane.css. Around line 56, you'll find the CSS that styles .jspTrack. This is the track for our scrollbar the background area you might say. The default style for it is a pale lavender color.
    .jspTrack
{
background: #dde;
position: relative;
}

    We don't want to mess with the position, since our scrollbar is relying on that to work correctly, but you can feel free to change the background color to any color, gradient, or image you'd like. I'm going to make mine pale pink: 

    .jspTrack
{
background: #fbebf3;
position: relative;
}
The next style I'd like to change is for .jspDrag. This is the actual scrollbar handle. I'm going to make it bright pink:
.jspDrag
{
background: #D33682;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
  2. Next, I'll tackle the top and bottom buttons. I have not only a default style, but also a disabled style. For example, when the scroll area is all the way to the top the top button is disabled since I can't possibly scroll any higher. If I examine the buttons with my developer tools, I can also see that there's an additional class name on the buttons that's not styled in the default CSS — the top button has a class of jspArrowUp and the bottom button has a class of jspArrowDown. That will let me set a different style for the up and down buttons — I'm going to use an image of an upward pointing arrow as a background for the top arrow, and a downward-pointing arrow for the bottom button to make their function clear to my site visitors.

    Here's my CSS for styling those: 

    .jspArrow
{
text-indent: -20000px;
display: block;
cursor: pointer;
}
.jspArrow.jspDisabled
{
cursor: default;
background-color: #999;
}
.jspArrowUp
{
background: #d6448b url(../images/arrows.png) 0 0 no-repeat;
}
.jspArrowDown
{
background: #d6448b url(../images/arrows.png) 0 -16px no-repeat;
}

What just happened?

Now when you refresh the browser, you can see that the scrollbars are styled pink — just the way I wanted them. We modified the CSS that was supplied by the plugin developer to make the scrollbars appear just the way we wanted. We were able to use the developer tools built into our browser to target the file and line numbers of the code that needed to be updated to change the appearance of the scrollbars.

Have a go hero — style the scrollbars the way you want

Now, you might not care for bright pink scrollbars, and you might think my example is a little bit plain, and you'd be right. But you can get creative with background colors, gradients, images, rounded corners, and more, to style your scrollbars just the way you'd like. You can mimic the scrollbars of your favorite operating system so that all of your site visitors see them the way you like, or you can create an entirely new style. Experiment with the CSS to create your own scrollbar style.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.134.79.121