jScrollPane theme with CSS

Question

Hi everybody. I want to apologize now for my bad english, i hope you will understand what i want:

I recently used the plugin jquery 'jScrollPane' on my website malossane.fr/sqf/. Everything is ok, but i appeared to not be able to make the only little change i wanted. In fact , it is very simple in the idea, but my css scripting level is very bad.

Just now, i have something like that :http://malossane.fr/usb-file-723

And i want something like that :What i want

In fact, i want the .jspDrag to be larger than the .jspVerticalBar that should have a width of 5px. But if i put a width of 5px for the vertical bar, the .jspDrag width become also of 5px although i want him to stay at 16px.

Is someone able to help me? Thanx a lot, Tim

Answer 1

I don't know much about that plugin but i can give u a solution set the color of .jspVerticalBar to transparent or same color as that of background and put another vertical bar (fake one . . ) right on the .jspVerticalbar so that it looks as what you want

Answer 2

There are a couple of possible solutions:

1. You could use a background image on the .jspTrack which is the width you require and centered e.g.

   .jspTrack
   {
       background: #fff url(/path/to/image.png) repeat-y 5px 0;
   }
   

   This way even through the .jspTrack is the width of the .jspDrag it's background makes it look less wide.

2. You could try using negative margins on the .jspDrag to pull it outside the .jspTrack e.g.

   .jspVerticalBar .jspTrack
   {
       width: 5px;
       background: #c4c4c4;
   }
   .jspVerticalBar .jspDrag
   {
       margin: 0 -5px;
       width: 15px;
       background: #363636
   }
   

   Possibly you could use left instead of the negative margin.

Both of these solutions are untested but they should give you a good start...