QScrollbar stylesheet

[GuS]

Hi guys!!

I am having doubs about some parts of the stylesheet of a scrollbar, and i was reading the docs from: http://doc.trolltech.com/main-snapsh...ing-qscrollbar

I've managed to style most of it, but some parts I don't understand how to do it. Lets see the example:



How I do style those missing parts?

My stylesheet code is:

QScrollBar:vertical { \
background-image: url(:/Styles/styles/scrollbar_bg.png); \
width: 15px; \
margin: 15px 0 15px 0;} \
QScrollBar::handle:vertical { \
background-image: url(:/Styles/styles/scrollbar_body.png); \
min-height: 15px;} \
QScrollBar::add-line:vertical { \
border: 0px; \
background-image: url(:/Styles/styles/scrollbar_downArrow_Bg.png); \
height: 15px; \
subcontrol-position: bottom; \
subcontrol-origin: margin;} \
QScrollBar::sub-line:vertical { \
border: 0px; \
background-image: url(:/Styles/styles/scrollbar_upArrow_Bg.png); \
height: 15px; \
subcontrol-position: top; \
subcontrol-origin: margin;} \
QScrollBar::up-arrow:vertical { \
background-image: url(:/Styles/styles/scrollbar_upArrow.png); \
background-repeat: no repeat; \
width: 15px; \
height: 15px;} \
QScrollBar::down-arrow:vertical { \
background-image: url(:/Styles/styles/scrollbar_downArrow.png); \
background-repeat: no repeat; \
width: 15px; \
height: 15px;} \
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical { \
background: none;}

Thanks!!

[wysota]

What do you mean by "missing" parts?

[GuS]

You don't see the pixmap?

Is how i do style those "parts"...

Look at the image.. and you will see that when you style a scrollbar have many splitted image parts.. so, from the handle... I don't know how to style the top and bottom part.. and the grip is the middle of that handle (example, 3 lines.. or dots.. or whatever)

Thanks...

[wysota]

You mean the parts that are white on the picture? They are styled by the scrollbar itself. Your QScrollBar:vertical { ... } rule should catch it. Try setting background:red; and you'll see for yourself.

[GuS]

You mean the parts that are white on the picture? They are styled by the scrollbar itself. Your QScrollBar:vertical { ... } rule should catch it. Try setting background:red; and you'll see for yourself.

No man.... besides.. white? lol... is grey.. and that is styled allready, which is the background of the entire scrollbar..........
Look at the handle... should have top and bottom rounded little images there...
One:
Second:

So, top and bottom of the handle... to finish it rounded.......

And the Grip.. is what goes in the middle of the scroll handle...

[wysota]

Yes, I know what a grip is, but I'm not a sightseer, so don't expect me to understand what you want if you give me an image with some things pointed out and ask about "missing" things. How did you expect me to guess what your goal was? You should have told me you want the handle to be rounded or something.

Use border-image on the ::handle sub-control - provide it with an image that can be cut into 9 parts and provide cut sizes for it. The middle parts will be stretched or repeated (depending on your settings) and corners will be applied without any scaling to prevent distortions.

See the attachment for a result.

[GuS]

Yes, I know what a grip is, but I'm not a sightseer, so don't expect me to understand what you want if you give me an image with some things pointed out and ask about "missing" things. How did you expect me to guess what your goal was? You should have told me you want the handle to be rounded or something.

No, is no t the same.. you didn't interpreted well the pixmap... to be rounded... is TO MUCH round... every scrollbar should have a top and bottom pixmap... and i was very clear

I will make some test on it... is easy.. i just need to know the controls to add those pixmaps on the scroll... cause the rest.. i've already done it.

[ihoss]

GuS, I got what you meant in the first post. Have you tried adding the "rounded" part to the sub-page and add-page images? I haven't tried it, so it might not work, but if the sub-page image was a really long, grey image, with a small "rounded" part at the top, then it would look like the scrollbar handle was rounded.

[wysota]

No, is no t the same.. you didn't interpreted well the pixmap... to be rounded... is TO MUCH round... every scrollbar should have a top and bottom pixmap... and i was very clear

Obviously you have to use your own pixmap, not my crude-example-cut-off-from-a-picture-downloaded-from-net one.

[GuS]

GuS, I got what you meant in the first post. Have you tried adding the "rounded" part to the sub-page and add-page images? I haven't tried it, so it might not work, but if the sub-page image was a really long, grey image, with a small "rounded" part at the top, then it would look like the scrollbar handle was rounded.

See? i was clear.. then you styled scrollbars somewhere
I mean, is not the first time i do this... i did it in aMSN skin when i was styling.

I will try that... but i think i already tried to use add page and subpage and i saw no effect... or maybe i did wrong.

Example code? please?


Thanks!!

Yes, I know what a grip is, but I'm not a sightseer, so don't expect me to understand what you want if you give me an image with some things pointed out and ask about "missing" things. How did you expect me to guess what your goal was? You should have told me you want the handle to be rounded or something.

Use border-image on the ::handle sub-control - provide it with an image that can be cut into 9 parts and provide cut sizes for it. The middle parts will be stretched or repeated (depending on your settings) and corners will be applied without any scaling to prevent distortions.

See the attachment for a result.

By the way, can you show me a example stylesheet code of what you mean?
Thanks.

[wysota]

Here is an article about border-image:
http://www.css3.info/preview/border-image/

As for the stylesheet you should use, it's more or less like this:

QScrollBar::handle:vertical {
  border-image: url('someimage.png') 0 2 0 2;
  border-top: 2px;
  border-bottom: 2px;
}

QScrollBar::handle:vertical {
  border-image: url('someimage.png') 0 2 0 2;
  border-top: 2px;
  border-bottom: 2px;
}

To copy to clipboard, switch view to plain text mode 

[GuS]

Here is an article about border-image:
http://www.css3.info/preview/border-image/

As for the stylesheet you should use, it's more or less like this:

QScrollBar::handle:vertical {
  border-image: url('someimage.png') 0 2 0 2;
  border-top: 2px;
  border-bottom: 2px;
}

QScrollBar::handle:vertical {
  border-image: url('someimage.png') 0 2 0 2;
  border-top: 2px;
  border-bottom: 2px;
}

To copy to clipboard, switch view to plain text mode 

This didn't worked...

[wysota]

Did you assemble a proper border image from your three images? And did you read the docs in Qt stylesheets reference about border-image? I might have mixed up the order of parameters.

[GuS]

Did you assemble a proper border image from your three images? And did you read the docs in Qt stylesheets reference about border-image? I might have mixed up the order of parameters.

Yes i did, i read all the references... but i think this is not the approach i need.. i just need to put those images (One and Second as i showed you) one on top... another in bottom...

[wysota]

This is exactly what border-image does... Just give me your assembled image (paste it as an attachment to your post) and I'll prepare you the code needed.

[GuS]

This is exactly what border-image does... Just give me your assembled image (paste it as an attachment to your post) and I'll prepare you the code needed.

You have already those images.. look some post up... ("One" and "Second", the fifth post)

[wysota]

I need a single image containing three parts - top, middle and bottom. Not two images without the middle part - it won't work that way.

[GuS]

I need a single image containing three parts - top, middle and bottom. Not two images without the middle part - it won't work that way.

Ok, so the bg of the scroll handle...

Here you go:

Scroll Top:
Scroll bg (middle):
Scroll Bottom:

[wysota]

Why do you keep ignoring what I'm telling you? I asked for a single image consisting of the three images composed into one and I asked you to attach it to your post. We don't like when people use 3rd party sites to link to images, because then they tend to remove the images and we're left with dangling links and when other people have similar problems, they can't trace the thread because of missing links.

Anyway, here is your stylesheet. I only include the part that is different from the stylesheet in the example about styling QScrollBar in the manual.

QScrollBar:vertical {
          border: 2px solid grey;
          background: white;
          width: 15px;
          margin: 22px 0 22px 0;
      }
      QScrollBar::handle:vertical {
          border-image: url("/tmp/x/scrollbar.png") 2 0 2 0 repeat;
          border-top: 2px;
          border-bottom: 2px;
 
      }

QScrollBar:vertical {
          border: 2px solid grey;
          background: white;
          width: 15px;
          margin: 22px 0 22px 0;
      }
      QScrollBar::handle:vertical {
          border-image: url("/tmp/x/scrollbar.png") 2 0 2 0 repeat;
          border-top: 2px;
          border-bottom: 2px;

      }

To copy to clipboard, switch view to plain text mode 

[GuS]

Why do you keep ignoring what I'm telling you? I asked for a single image consisting of the three images composed into one and I asked you to attach it to your post. We don't like when people use 3rd party sites to link to images, because then they tend to remove the images and we're left with dangling links and when other people have similar problems, they can't trace the thread because of missing links.

Anyway, here is your stylesheet. I only include the part that is different from the stylesheet in the example about styling QScrollBar in the manual.

QScrollBar:vertical {
          border: 2px solid grey;
          background: white;
          width: 15px;
          margin: 22px 0 22px 0;
      }
      QScrollBar::handle:vertical {
          border-image: url("/tmp/x/scrollbar.png") 2 0 2 0 repeat;
          border-top: 2px;
          border-bottom: 2px;
 
      }

QScrollBar:vertical {
          border: 2px solid grey;
          background: white;
          width: 15px;
          margin: 22px 0 22px 0;
      }
      QScrollBar::handle:vertical {
          border-image: url("/tmp/x/scrollbar.png") 2 0 2 0 repeat;
          border-top: 2px;
          border-bottom: 2px;

      }

To copy to clipboard, switch view to plain text mode 

Ok, that worked.. i was not understanding what you mean before...
I will try to round it a little more thanks!

Now.. what about the Grip? any tip?