Customization of push button

J.Hilk

are you sure the stylesheet is applied at all? And is this the only place where you set a stylesheet;

theres a t least a ; missing, what usually results in a stylesheet parsing error.

drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255);}");

mostefa

@David406 said in Customization of push button:

Hi all, thanks for all of your help! I tried to set my buttons flat with
button->setFlat(true);
and it looks good. But there is still a problem remained, that is, I can't set
the background color the these button. I was using stylesheet
drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
See below:

The background color only come into effect when I click on the button:

Any suggestions?

Is your QPushButton checkable??

If yes you need to add stylesheet when button is checked

I think that this should be something like this:

QPushButton:checked{background-color: white;};

David406

@mostefa
Thanks.
Yes, my button is checkable.
I think you mis-understand my intention. I want my buttons to be set with background color of my choice without even pressing it. However, this code

drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");

only works when I push the button (second picture). When the buttons are un-pushed, the background color set in the setStyleSheet does not help in any means (first picture).

mostefa

@David406 said in Customization of push button:

@mostefa
Thanks.
Yes, my button is checkable.
I think you mis-understand my intention. I want my buttons to be set with background color of my choice without even pressing it. However, this code
drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
only works when I push the button (second picture). When the buttons are un-pushed, the background color set in the setStyleSheet does not help in any means.

Ok

Then what about unchecked property?

QPushButton:unchecked{background-color: white;};

David406

@J.Hilk
Thanks.
Yes, I'm sure this stylesheet applied. because I leave other button un-setting the stylesheet as a comparison, and it's obviously different:

alt text

David406

@mostefa
Unfortunately,

QPushButton:unchecked{background-color: white;};

doesn't help.

mostefa

@David406 said in Customization of push button:

@J.Hilk
Thanks.
Yes, I'm sure this stylesheet applied. because I leave other button un-setting the stylesheet as a comparison, and it's obviously different:

Hi again @David406

i am not sure that setFlat(true) is really what do you want,

http://doc.qt.io/qt-5/qpushbutton.html#flat-prop

The doc actually says:

If this property is set, most styles will not paint the button background unless the button is being pressed.

And i think that this is your problem,

So i suggest you to delete the line pushbutton->setFlat(true)

And setStylesheet of your PushButton as follow

QPushButton
{
border-style: outset;
background-color: red ;/** for example **/
}

Keep me informed if this is what you want or no?

Best regards !

David406

@mostefa
Thanks again.
Yes, this helped. But there are separators between the buttons which I don't want, see below:

alt text

this is also the reason I used setflat(true). Any suggestion to eliminate those separators?

J.Hilk

@David406

QPushButton{border: none;}

mostefa

@David406 said in Customization of push button:

this is also the reason I used setflat(true)

Any suggestion to eliminate those separators?

How are you adding your buttons?

With yourPushButton->move(x + width - 8 * 32, y + height);
why -8*32 ,cause of spacing is maybe here, why just -8 * 32 ?

mostefa

@J.Hilk said in Customization of push button:

@David406

QPushButton{border: none;}

AFAIK border: none; will not change anything

David406

@mostefa
Yes, border: none; is the default setting.
And I want to be able to move those buttons around, so I did not use layout to add these buttons.

J.Hilk

@mostefa

Just checked it, it does exactly what the OP want to, it removes the border/bulge of the default QPushButton

David406

@J.Hilk
Yes, I checked it too. This really helped.
border-style:none; is default, not border:none;
Thank you all !!!

David406

Hi all, I have one more question. How can I let the buttons pushed down when mouse hovers on it, like below:

alt text

The arrow button is pushed down when my mouse hovers on it.
Could you please give some hints on what method to use? There's no hover or enter event for a button.

Aside: When border is set to none, there would never appear a border even when I pused on it, which is not what I meant to do. Confused!

J.Hilk

@David406

QStyleSheet is also here your friend. For example:

QPushButton:hover{background-color:red;}

Here a link to some examples

David406

@J.Hilk
Oh, yes! Please forgive me, I'm quite new about the usage of stylesheet! So I need to set different stylesheet for normal, hover and pushed status.

J.Hilk

@David406

that would be correct:

a small example:

ui->myButton->setStyleSheet(
//Default Button
"QPushButton{border:none; color: black; background-color:transparent;}"
//When mose over
"QPushButton:hover{border: 1px solid grey; color: red; background-color:white;}"
//When checked
"QPushButton:checked{border: 1px solid black; color: white; background-color:red;}"
);