Stylesheets and tiling images

[GuS]

hi guys!

I have this next situation:

I've created this button:

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

And i want to increase the image size (width only) depending of the size of the button of course. But, tiling from the center part of the image. Lets see:

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

In the example, I've added 10px in the middle, where the black rectangle mark is.

I've tried with border-image... but with no luck, maybe i am doing it wrong.

Any tip or idea of how to do this? Thanks.

Cheers.

[jpn]

Perhaps attaching some code snippet of what you've done so far would bring some action to this thread...

PS. Attach image files instead of linking to external sites, please.

[GuS]

I just followed the tip on

http://doc.trolltech.com/qq/qq20-qss.html#creatingscalablestyles

But i want only to tile the center part of the image. As you could see my buttons have same px on the middle (and has a gradient on left and right side). The height i need as it is, i just want to tile the width starting from the middle like i draft on those images.

I am using common background-image for now... the thing is i don't want to use one image every different button size.

Thanks.

PS: yes i know, sorry... just in case my host being offline i am attaching the files.

[GuS]

Nobody guys/girls? :(

Cheers.

[przemoc]

I've tried with border-image... but with no luck, maybe i am doing it wrong.

Styling Qt Using Style Sheets (http://foss.in/2007/register/slides/Styling_Qt_Using_Style_Sheets_484.pdf) <- here you can find few examples of border-image usage inspired by the CSS3 Draft Specification (http://www.w3.org/TR/css3-background/#the-border-image).
Remember, border-image is drawn over background-image, but you don't need the latter here.

[GuS]

Thanks, this was more clear even that in the CSS3 draft specification.

So i did:



QPushButton {
border-image: url(:/Styles/styles/normalButton.png) 0 10 0 10 tile stretch;
color: black; }


And now the image does not appears.

The button size is 80px width (height is unchanged, cause I don't need to change it, only the width), so I need to maintain 8px as it is from the left and from right and only tile from the "middle". 8px is, 10% from each side.

I don't know if i am doing it right.

Thanks in advance.

Cheers.

[przemoc]

The button size is 80px width (height is unchanged, cause I don't need to change it, only the width), so I need to maintain 8px as it is from the left and from right and only tile from the "middle". 8px is, 10% from each side.

Numbers used in border-image correspond to image pixels, unless you put percent symbol next to them.


QPushButton {
border-width: 0px 8px 0px 8px;
border-image: url(:/Styles/styles/normalButton.png) 0 8 0 8 stretch;
color: black;
}

Specifying border-width is important, because otherwise you'll see only the inner part.
I hope that at last you have what you want.

But... I don't know why this works correctly only with stretch, e.g. with round or tile inner part is not drawn and that's not the only problem (for interested testers: I've used Linux and Qt 4.3.2).

[GuS]

Hi,

This works... but i have a annoying dot line border on focus state but inside the button, there is a way to eliminate it? :S

Have a look on the attached file.

EDIT: maybe is stupid to continue post over this.. i know that is a minor problem... and many has other priority when develop an application. But i want to improve the style and even if Qt allows us to use StyleSheets. Just i want to use only one image for buttons of the same height... and not one image per button size... is why i keep trying to solve it.

Thanks in advance.

Cheers.

[przemoc]

This works... but i have a annoying dot line border on focus state but inside the button, there is a way to eliminate it? :S

Focus rectangle is nothing weird here, it's standard thing, check non-styled QPushButton. It looks bad here, because you set only left and right border, so my suggestion is to change border-image to 8 8 8 8 and border-width appropriately.

If you really want to completely remove this dotted rectangle, which is IMO a wrong idea (non-standard interface), there are 2 solutions:

Worse - change focusPolicy (http://doc.trolltech.com/latest/qwidget.html#focusPolicy-prop) to Qt::NoFocus (from Qt 4.3 you can do this in style sheet: qproperty-focusPolicy: NoFocus) - now button is inaccessible with keyboard.
Better - subclass the style and reimplement drawControl() to strip out the State_HasFocus flag for the buttons - http://trolltech.org/developer/knowledgebase/743.
However, if you use style sheets, drawControl() is never called with element equal to CE_PushButton, but CE_PushButtonBevel, which is useless. Maybe Qt Experts can voice on this behaviour. I'm relatively new to Qt, hence I cannot help you here.

[GuS]

Yes, i know that the dotted border is normal behavior on focus action.
Anyway, is not big problem, maybe Qt developers should add an "option" in stylesheet to have a way to disable it, or something similar inside the code, so we could avoid reimplementing QStyle only for that.

Thanks for all!!

Cheers.

[GuS]

Well, since long time I've not continued this post.
I was having anoying look of the border since i have a border-image with left and right about 8px of "padding". So, to have a normal dotted border (around the border image, like a normal behavior) i did this:



QPushButton {
color: black;
border-image: url(:/Styles/styles/normalButton.png) 2 8 2 8 stretch stretch;
border-width: 2px 8px 2px 8px;
padding-left: -6px;
padding-right: -6px;}


Hope this help to someone :)

Cheers.