PDA

View Full Version : QScrollbar stylesheet



GuS
1st December 2007, 14:22
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-snapshot/stylesheet-examples.html#customizing-qscrollbar

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

http://opencoffee.lnxteam.org/downloads/pub/pics/OpenCoffee-ScrollBar_parts.png

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
1st December 2007, 14:52
What do you mean by "missing" parts?

GuS
1st December 2007, 16:58
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
1st December 2007, 17:20
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
1st December 2007, 22:22
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: http://opencoffee.lnxteam.org/downloads/pub/pics/scrollbar_bg_top.png
Second: http://opencoffee.lnxteam.org/downloads/pub/pics/scrollbar_bg_bottom.png

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
1st December 2007, 22:48
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
1st December 2007, 22:56
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
2nd December 2007, 00:22
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
2nd December 2007, 00:36
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
2nd December 2007, 13:24
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
2nd December 2007, 13:42
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;
}

GuS
2nd December 2007, 13:53
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;
}

This didn't worked...

wysota
2nd December 2007, 14:00
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
2nd December 2007, 14:05
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
2nd December 2007, 14:09
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
2nd December 2007, 14:12
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
2nd December 2007, 14:16
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
2nd December 2007, 14:23
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: http://opencoffee.lnxteam.org/downloads/pub/pics/draft/scrollbar_bg_top.png
Scroll bg (middle): http://opencoffee.lnxteam.org/downloads/pub/pics/draft/scrollbar_body.png
Scroll Bottom: http://opencoffee.lnxteam.org/downloads/pub/pics/draft/scrollbar_bg_bottom.png

wysota
2nd December 2007, 14:42
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;

}

GuS
2nd December 2007, 16:16
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;

}

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?

wysota
2nd December 2007, 16:33
Now.. what about the Grip? any tip?

I don't think you can do that with the current implementation of stylesheets as there is no sub-control for the grip. To do that you'd have to implement a proper style.

GuS
2nd December 2007, 16:35
I don't think you can do that with the current implementation of stylesheets as there is no sub-control for the grip. To do that you'd have to implement a proper style.

Ok, thanks.. i will see what i can do...

One more question... does exist hover and pressed states on Scrollbars?

Cheers.

EDIT: well.. yes..exist ;)

ihoss
3rd December 2007, 00:40
Check the documentation about the hover and pressed. According to the documentation it should work with any element.

Oh, and the border-image is a pretty neat thing. I didn't know it was implemented :p

wysota
3rd December 2007, 00:49
It's been in Qt for over a year now.

GuS
3rd December 2007, 00:55
It's been in Qt for over a year now.

Yeah.. i used it for some buttons...


Check the documentation about the hover and pressed. According to the documentation it should work with any element.

yeah, like i said, it works :)

Final results:

http://opencoffee.lnxteam.org/downloads/pub/pics/OpenCoffee-ScrollBar.png

ihoss
3rd December 2007, 01:06
It's cool to see that you can edit the style of your application so it no longer looks like a boring windows application.

GuS
3rd December 2007, 01:13
Is the idea, just look ;)

http://opencoffee.lnxteam.org/trac/#CapturadePantallas

I have more skill designing than developing (i am still newbie in PyQt).
Time to time :)

GuS
4th December 2007, 01:54
Hi again!

I used the border method in the scroll background too... but i have some problems... the handle limits (top and bottom), is like the background is more bigger than the handle itself, just look:

http://opencoffee.lnxteam.org/downloads/pub/pics/draft/OpenCoffee-scroll-limits.png

The stylesheet code:


QScrollBar:vertical { \
border-image: url(:/Styles/styles/scrollbar_bg.png) 5 0 5 0 repeat; \
width: 15px; \
margin: 15px 0 15px 0;\
border-top: 5px; \
border-bottom: 5px;} \
QScrollBar::handle:vertical { \
border-image: url(:/Styles/styles/scrollbar_body.png) 5 0 5 0 repeat; \
min-height: 10px; \
border-top: 5px; \
border-bottom: 5px;} \
QScrollBar::handle:vertical:hover { \
border-image: url(:/Styles/styles/scrollbar_body_hover.png) 5 0 5 0 repeat; \
border-top: 5px; \
border-bottom: 5px;} \
QScrollBar::handle:vertical:pressed { \
border-image: url(:/Styles/styles/scrollbar_body_pressed.png) 5 0 5 0 repeat; \
border-top: 5px; \
border-bottom: 5px;} \
QScrollBar::sub-line:vertical { \
border: 0px; \
background-image: url(); \
height: 15px; \
subcontrol-position: top; \
subcontrol-origin: margin;} \
QScrollBar::add-line:vertical { \
border: 0px; \
background-image: url(); \
height: 15px; \
subcontrol-position: bottom; \
subcontrol-origin: margin;} \
QScrollBar::up-arrow:vertical { \
background-image: url(:/Styles/styles/scrollbar_upArrow.png); \
background-repeat: no repeat; \
width: 15px; \
height: 15px;} \
QScrollBar::up-arrow:vertical:hover { \
background-image: url(:/Styles/styles/scrollbar_upArrow_hover.png); \
background-repeat: no repeat; \
width: 15px; \
height: 15px;} \
QScrollBar::up-arrow:vertical:pressed { \
background-image: url(:/Styles/styles/scrollbar_upArrow_pressed.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::down-arrow:vertical:hover { \
background-image: url(:/Styles/styles/scrollbar_downArrow_hover.png); \
background-repeat: no repeat; \
width: 15px; \
height: 15px;} \
QScrollBar::down-arrow:vertical:pressed { \
background-image: url(:/Styles/styles/scrollbar_downArrow_pressed.png); \
background-repeat: no repeat; \
width: 15px; \
height: 15px;} \
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical { \
background: none;}

Any tip?

Thanks!

ihoss
4th December 2007, 03:18
It looks like the white, rounded part is actually in the downArrow image, and not in the add-page/sub-page image.
Could you post the different images you use (not the hover/pressed), and I'll point it out if I'm right.

GuS
4th December 2007, 03:32
It looks like the white, rounded part is actually in the downArrow image, and not in the add-page/sub-page image.
Could you post the different images you use (not the hover/pressed), and I'll point it out if I'm right.

Indeed it not the arrow image... the arrow image its only the black/grey arrows you see there....
Heres the scroll background:

http://opencoffee.lnxteam.org/downloads/pub/pics/draft/scrollbar_bg.png

ihoss
4th December 2007, 03:47
I wish I could test this, but now I'm just throwing ideas :p

Are you sure you have to set a border and specify the border-background width? Try setting the border-top and border-bottom to 0px in the handle.

GuS
4th December 2007, 03:52
I wish I could test this, but now I'm just throwing ideas :p

Are you sure you have to set a border and specify the border-background width? Try setting the border-top and border-bottom to 0px in the handle.

LoL.. I can see you are just throwing :P
Setting those borders to 0 will not show the rounded part of the scroll handle...

wysota
4th December 2007, 11:23
I suggest you play a little with changing the origin and padding/margin of different sub controls. Maybe it helps.

GuS
4th December 2007, 13:14
I suggest you play a little with changing the origin and padding/margin of different sub controls. Maybe it helps.

Yes, I've forgot that and i was thinking when I was sleeping :P
So, today i decided to try the padding-top and padding-bottom with -5px; in QScrollBar:vertical (where i have the margin too) and works ;)

By the way, what is for QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical?
I was reading the docs about that.. but I don't clearly understand...

EDIT: by the way, the result of the scrollbar style:

http://opencoffee.lnxteam.org/downloads/pub/pics/OpenCoffee-Server_Client.png

ihoss
4th December 2007, 17:12
Sub-page and Add-page is the part of the scrollbar that will scroll one page when you click it. It's the area between the handle and the up/down arrows.