You are not logged in.

Dear visitor, welcome to QtForum.org. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Tuesday, September 15th 2009, 4:24pm

How to change appearance of QPushButton by Style Sheet

I have some problem about Qt Style Sheet,
I want to change QPushButton's appearance by Qt Style Sheet.
A QPushButton may have four status, which are
disable
normal
normal+focus
pressed+focus

I have prepared four bitmaps for each status of a QPushButton, which are
btn_disable.bmp
btn_normal.bmp
btn_normal_focus.bmp
btn_pressed_focus.bmp

But I don't know how to change appearance of QPushButton with these Bitmap by Qt Style Sheet.
Is there anyone who can help me to write correct Style Sheet.

Besides QPushButton, there is same problem with checkable QPushButton.
A checkable QPushButton may have six status, whare are
disable
unchecked
unchecked+focus
checked
checked+focus
pressed+focus

And I also prepared six bitmaps for each status of a checkable QPushButton, but I don't konw how to write correct Style Sheet to change appearance of a checkable QPushButton.

Is there anyone who can help me ?

Thank you in advance.

PS:
Qt version : 4.5
Compiler : VS2002/VS2008

2

Tuesday, September 15th 2009, 4:44pm

try

Source code

1
2
3
4
5
6
7
8
9
10
11
12
QPushButton:hover:checked
{
    /* ... */
}
QPushButton::hover
{
    /* ... */
}
QPushButton:checked
{
    /* ... */
}

This post has been edited 1 times, last edit by "Nicolas SOUCHON" (Sep 15th 2009, 4:53pm)


3

Wednesday, September 16th 2009, 4:54pm

I have write some style sheet for a standard QPushButton,
but it doesn't work correctly.
The result is that the appearance of pressed stutas is the same as the appearance of focus status.
I don't know what the problem is, and how to correct it.

script as follows
QPushButton
{
border-image: url(:/btn_normal.bmp);
color:white;
}

QPushButton:disabled
{
border-image: url(:/btn_disable.bmp);
color:grey;
}

QPushButton:pressed
{
border-image: url(:/btn_pressed_focus.bmp);
color:black;
}

QPushButton:focus
{
border-image: url(:/btn_normal_focus.bmp);
color:white;
}

PS:the QPushButton in our application doesn't need hover status.

4

Wednesday, September 16th 2009, 5:54pm

this works for me

Source code

1
2
3
4
5
QPushButton          { color: white; }
QPushButton:disabled { color: grey;  }
QPushButton:pressed  { color: black; }
QPushButton:focus    { color: green; }
QPushButton:hover    { color: red;   }

This post has been edited 1 times, last edit by "Nicolas SOUCHON" (Sep 16th 2009, 6:17pm)


5

Thursday, September 17th 2009, 2:59am

QPushButton { color: white; }
QPushButton:disabled { color: grey; }
QPushButton:pressed { color: black; }
QPushButton:focus { color: green; }
QPushButton:hover { color: red; }

I have test your style script.
But the result is not currect.

1.
The color of caption of QPushButton change to red from white when I move mouse over a non-focus QPushButton.
This is right

2.The color is red when I press left mouse button on a non-focus QPushButton.
This is wrong, and the color should change to black in theory.

We doesn't need a hover status, because our system is a touch screen system.
we doesn't have a mouse installed, but have a hardware key used to move input focus.

I have also tested your style sheet without hover
that is
QPushButton { color: white; }
QPushButton:disabled { color: grey; }
QPushButton:pressed { color: black; }
QPushButton:focus { color: green; }

The result is:
1.The color of caption of QPushButton change to green from white when I press left mouse button on a non-focus QPushButton.
This is wrong, and the color should change to black in theory.

2.The color of captopn is green when I press left mouse button on a focus QPushButton.
this is wrong, and the color should change to black in theory.

6

Thursday, September 17th 2009, 8:02am

try

Source code

1
2
3
4
QPushButton                { color: white; }
QPushButton:disabled       { color: grey;  }
QPushButton:focus:pressed  { color: black; }
QPushButton:focus          { color: green; }

and read: doc/html/stylesheet-syntax.html#conflict-resolution

7

Wednesday, September 23rd 2009, 2:49am

:) :) :)

Thank Nicolas SOUCHONfor his help.