Get back old functional button design, even on Windows 10

[agruber]

Hello,

Some of you might have noticed, that there is no Windows classic style anymore in Windows 10. So when you use the background of a button to signal something, like an alarm, only a small border is changed and it is not really that good visible.

You can use "-style windows" or "-style fusion" as UI startup option. However this changes all UI elements which you probably do not want.

A way to get back the old style, but functional button, is to use a stylesheet.

Just add a stylesheet.css in the config directory of your project containing the following:

Code: Select all

QPushButton
{
    background-color: rgb(214, 211, 206);
}

The color code in the above example is the default one from the Windows classic style.

It will look like the Windows classic style independent from the OS, the screen was taken from an openSuse machine:


You will see the various differences and benefits better once you set the background color of the button, see the examples included below. Note, the above button always uses the stylesheet and the below button is the unchanged OS button.

With that change you are able to also have influence on the button display on a webclient (or mobile UI), where you typically have no information which Windows style a user uses.

With the type option in the stylesheet you can apply this change only to specific buttons, if you like.

Hope that helps some of you.

BR,
Andreas Gruber
Head of WinCC OA customer care

Windows 10


Windows 7 AERO


Centos7 - GNOME


Windows 7 classic style


OpenSuse 13.2 - KDE

[RudiKreiner]

We had the same problem and a colleague fixed it with a style sheet containing this:

QPushButton
{
background-color: #EFEFEF;
}

Same difference, right?

[fmulder]

The stylesheets are an extremely powerfull tool to change the appearance of your gui. we use it to make buttons that have a color scheme that a normal button won't even do. ( For example: we have a yellow disabled(!) button).

We use the 'Typename' property of the button. This has the advantage that we can selectively change buttons. The example below will only affect the buttons where you type the value "YELLOWBUTTON" in the property 'Typename'.

Code: Select all

QPushButton[type = "YELLOWBUTTON"]
{
  border: 1px solid rgb(0,0,0);
  border-radius: 1px;
  font-family: "Arial Narrow";
  font-size: 15px;
  
  background:rgb(220,220,220);
}

We even use script code to change the style of the buttons by assigining a different 'Typename' to the button 'on the fly'.

Stylesheets are pretty awesome !

share the fun
Frenk

[agruber]

Frenk Mulder wrote:

We even use script code to change the style of the buttons by assigining a different 'Typename' to the button 'on the fly'.

On vacation I finally have time to work on my home automation.

I have tried to change stylesheet on a button during runtime on the fly, but maybe I am missing something.

I have used a very basic code, like:

Code: Select all

  setValue("btn", "type", "myAlternateStyle");

I do not get an error message and the style does not change. How did you do it, Frenk?

BR,
Andreas

[fmulder]

I'm sure you forgot the last line of code:

Code: Select all

  // assign some styles
  buttonOpen.type  = "BUTTONYELLOW";
  buttonClose.type = "BUTTONRED";
  
 // Must call this line so that change has effect !
  setApplicationProperty( "styleSheet", getApplicationProperty( "styleSheet" ));

Share the Fun !
Frenk Mulder

[agruber]

Thanks, that worked perfectly fine.

I will try to find out, if there is a better way to do a refresh the style of a single object.

BR,
Andreas

[agruber]

Beginning with the upcoming patches for 3.14 and 3.15 we will support "-style windows" again.

You can still use the example in the top post if you just want to have the "old" button design which enables changing of the background.