Customization of push button

[David406]

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?

[J.Hilk]

@David406

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:

[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:

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:

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;}"
);