Setting a QSS style on all QToolButtons in an application except the ones inside a QToolBar
-
The application I am working on uses QToolButtons as simple elements in a layout and as QActions added to QToolBars. I would like to apply a style on all the QToolButtons in my application except the ones within a QToolBar. I saw that I can set a style on all QToolButtons with the entry:
QToolButton{ background-color: rgb(255, 0, 0); }
And I can apply a style for all the QToolButtons inside a QToolBar using:
QToolBar > QToolButton { background-color: rgb(0, 255, 0); }
But how can I perform the required styling without adding a style entry for the buttons in QToolBar, so that they would still have the default styling?
-
The application I am working on uses QToolButtons as simple elements in a layout and as QActions added to QToolBars. I would like to apply a style on all the QToolButtons in my application except the ones within a QToolBar. I saw that I can set a style on all QToolButtons with the entry:
QToolButton{ background-color: rgb(255, 0, 0); }
And I can apply a style for all the QToolButtons inside a QToolBar using:
QToolBar > QToolButton { background-color: rgb(0, 255, 0); }
But how can I perform the required styling without adding a style entry for the buttons in QToolBar, so that they would still have the default styling?
@SajasKK
This is a good question! I answered a similar-ish question yesterday, there we were able to solve it effectively without have to put a general rule onQToolButton
items, but that won't work for your case.Unless one of
QToolBar > QToolButton { background-color: default; } QToolBar > QToolButton { background-color: auto; }
works to "cancel" the general
QToolButton
rule --- and I don't see that they will/are accepted by Qt CSS --- I can see the problem and have thought about it before. Consequently I shall be interested to see what reply you get...! :)P.S.
It looks like I asked something similar when I first joined in 2017: https://forum.qt.io/topic/85184/undoing-an-added-setstylesheet-property. And I don't think I got an answer there which did the right thing! Somebody there suggested one ofbackground-color: initial; background-color: unset;
You could also try those, I think I found they did not work....
I also see MDN CSS says you can use
background-color: revert;
, you could try that one too in Qt, but don't hold your breath... ;-) -
@SajasKK
This is a good question! I answered a similar-ish question yesterday, there we were able to solve it effectively without have to put a general rule onQToolButton
items, but that won't work for your case.Unless one of
QToolBar > QToolButton { background-color: default; } QToolBar > QToolButton { background-color: auto; }
works to "cancel" the general
QToolButton
rule --- and I don't see that they will/are accepted by Qt CSS --- I can see the problem and have thought about it before. Consequently I shall be interested to see what reply you get...! :)P.S.
It looks like I asked something similar when I first joined in 2017: https://forum.qt.io/topic/85184/undoing-an-added-setstylesheet-property. And I don't think I got an answer there which did the right thing! Somebody there suggested one ofbackground-color: initial; background-color: unset;
You could also try those, I think I found they did not work....
I also see MDN CSS says you can use
background-color: revert;
, you could try that one too in Qt, but don't hold your breath... ;-)@JonB Thank you. Setting the style to auto seems to set the right default style for the button in QToolBar.
I was setting certain border and background-color for my QToolButtons. But setting the style to "auto" for the QToolButtons in QToolBar keeps the style there unchanged.QToolButton:enabled:focus{ border: 2px solid palette( highlight ); } QToolButton:enabled:checked{ background-color: palette( dark ); } QToolBar > QToolButton { border: auto; background-color: auto }
-
@JonB Thank you. Setting the style to auto seems to set the right default style for the button in QToolBar.
I was setting certain border and background-color for my QToolButtons. But setting the style to "auto" for the QToolButtons in QToolBar keeps the style there unchanged.QToolButton:enabled:focus{ border: 2px solid palette( highlight ); } QToolButton:enabled:checked{ background-color: palette( dark ); } QToolBar > QToolButton { border: auto; background-color: auto }
@SajasKK
Interesting. You are sayingauto
will "revert" a rule back to the default?The code now is different because you introduce
:enabled
stuff. I should be obliged to know if you go back to your original that you are saying just:QToolButton{ background-color: rgb(255, 0, 0); } QToolBar > QToolButton { background-color: auto; }
does what we hope?
-
@SajasKK
Interesting. You are sayingauto
will "revert" a rule back to the default?The code now is different because you introduce
:enabled
stuff. I should be obliged to know if you go back to your original that you are saying just:QToolButton{ background-color: rgb(255, 0, 0); } QToolBar > QToolButton { background-color: auto; }
does what we hope?
@JonB Yes. "auto" also resets the background color to the default one for the buttons inside QToolBar for the code above. Just test it.
I had used the simple background-color case as an example for my case. But what I really wanted to fix was the border color around the QToolButton(when in focus) and the background-color when the button is checked. By setting "auto" value for these properties, it seems to keep the buttons inside QToolBar unchanged. -
-
@JonB Yes. "auto" also resets the background color to the default one for the buttons inside QToolBar for the code above. Just test it.
I had used the simple background-color case as an example for my case. But what I really wanted to fix was the border color around the QToolButton(when in focus) and the background-color when the button is checked. By setting "auto" value for these properties, it seems to keep the buttons inside QToolBar unchanged.@SajasKK
Thank you for confirming. Now that your question is solved, forgive me if I hijack this thread :)@Axel-Spoerl , or any other expert:
The gist of this thread is that if, for whatever reason, a widget has an inherited CSS/QSS rule and wishes to cancel it on certain elements which would match, it appears thatauto
can be used to achieve that --- revert to whatever the default was originally before the rule was added.This is a very useful feature! I have wanted it in the past. I searched the Qt documentation (and the web) but it does not seem to be mentioned anywhere? https://doc.qt.io/qt-6/stylesheet-syntax.html would be where I would expect, possibly in the Inheritance sub-section. Can you find the mention of
auto
anywhere? Do you think this should be raised for addition into the documentation? -
@SajasKK
Thank you for confirming. Now that your question is solved, forgive me if I hijack this thread :)@Axel-Spoerl , or any other expert:
The gist of this thread is that if, for whatever reason, a widget has an inherited CSS/QSS rule and wishes to cancel it on certain elements which would match, it appears thatauto
can be used to achieve that --- revert to whatever the default was originally before the rule was added.This is a very useful feature! I have wanted it in the past. I searched the Qt documentation (and the web) but it does not seem to be mentioned anywhere? https://doc.qt.io/qt-6/stylesheet-syntax.html would be where I would expect, possibly in the Inheritance sub-section. Can you find the mention of
auto
anywhere? Do you think this should be raised for addition into the documentation?@JonB
Absolutely right. Thanks, I shall raise that issue. -
@JonB
Absolutely right. Thanks, I shall raise that issue.@JonB
I have not forgotten this issue.
However, usingauto
in a style sheet to fall back to the default palette of a widget, seems to be a fortunate side effect. For the records, I don't find any reference tounset, default, revert, initial
.
Theauto
keyword translates into the enum valueValue_Auto
, which is used to automatically determine html page breaks. I haven't started debugging it to the bottom. But from what I get by readingparseColorValue()
, the usage ofauto
will make the method return an invalid instance ofColorData
. That means nothing but "we failed to parse a meaningful color". That, as a consequence, triggers a graceful fallback to the widget's original palette.
While I keep my fingers crossed, I trust you understand that I'd rather not document that side effect.A generic way to override a brush inherited by a style sheet, is to keep a copy of the widget's original palette handy, before setting style sheets. You can either remove the stylesheet from the widget and set the desired palette, e.g.
widget->setStyleSheet(QString()); widget->setPalette(originalPalette);
Or you can use a specific brush/color of that palette to create a CSS string and assign the desired color.
-
@JonB
I have not forgotten this issue.
However, usingauto
in a style sheet to fall back to the default palette of a widget, seems to be a fortunate side effect. For the records, I don't find any reference tounset, default, revert, initial
.
Theauto
keyword translates into the enum valueValue_Auto
, which is used to automatically determine html page breaks. I haven't started debugging it to the bottom. But from what I get by readingparseColorValue()
, the usage ofauto
will make the method return an invalid instance ofColorData
. That means nothing but "we failed to parse a meaningful color". That, as a consequence, triggers a graceful fallback to the widget's original palette.
While I keep my fingers crossed, I trust you understand that I'd rather not document that side effect.A generic way to override a brush inherited by a style sheet, is to keep a copy of the widget's original palette handy, before setting style sheets. You can either remove the stylesheet from the widget and set the desired palette, e.g.
widget->setStyleSheet(QString()); widget->setPalette(originalPalette);
Or you can use a specific brush/color of that palette to create a CSS string and assign the desired color.
@Axel-Spoerl
I will keep this brief :) I don't want to/don't have the "original palette" handy, and I don't want to write any code anyway, just CSS. And I cannot generically/safely usewidget->setStyleSheet(QString());
as I have no idea whether the widget may have its own explicit stylesheet for other things which this would cancel. And Qt/setStyleSheet()
does not offer any easy way to access/cancel/merge just, saybackground-color
in a stylesheet without messing up any existing stuff.I just want to be able to do something like the following in a stylesheet on the window/application:
Parent { background-color: ...; } Child /* or Parent > Child */ { background-color: auto; }
Anyway, this was just a question about documentation. I leave it to you/others.
-
@Axel-Spoerl
I will keep this brief :) I don't want to/don't have the "original palette" handy, and I don't want to write any code anyway, just CSS. And I cannot generically/safely usewidget->setStyleSheet(QString());
as I have no idea whether the widget may have its own explicit stylesheet for other things which this would cancel. And Qt/setStyleSheet()
does not offer any easy way to access/cancel/merge just, saybackground-color
in a stylesheet without messing up any existing stuff.I just want to be able to do something like the following in a stylesheet on the window/application:
Parent { background-color: ...; } Child /* or Parent > Child */ { background-color: auto; }
Anyway, this was just a question about documentation. I leave it to you/others.
@JonB
Fully understand the requirement, whichauto
fulfills by coincidence.
I think that an "unset" functionality should be implemented (and documented) at some point, which really unsets one specific CSS element and make it fall back to the default. -
@Axel-Spoerl
I will keep this brief :) I don't want to/don't have the "original palette" handy, and I don't want to write any code anyway, just CSS. And I cannot generically/safely usewidget->setStyleSheet(QString());
as I have no idea whether the widget may have its own explicit stylesheet for other things which this would cancel. And Qt/setStyleSheet()
does not offer any easy way to access/cancel/merge just, saybackground-color
in a stylesheet without messing up any existing stuff.I just want to be able to do something like the following in a stylesheet on the window/application:
Parent { background-color: ...; } Child /* or Parent > Child */ { background-color: auto; }
Anyway, this was just a question about documentation. I leave it to you/others.
@JonB said in Setting a QSS style on all QToolButtons in an application except the ones inside a QToolBar:
And Qt/setStyleSheet() does not offer any easy way to access/cancel/merge just, say background-color in a stylesheet without messing up any existing stuff.
Slightly off topic: I hate it when setting the background-color messes with the size of a button. Without a stylesheet "OK" and "Cancel" for a dialog have the same width, but with the stylesheet (IIRC setting the color is sufficient), suddenly the "OK" button shrinks...
-
@JonB said in Setting a QSS style on all QToolButtons in an application except the ones inside a QToolBar:
And Qt/setStyleSheet() does not offer any easy way to access/cancel/merge just, say background-color in a stylesheet without messing up any existing stuff.
Slightly off topic: I hate it when setting the background-color messes with the size of a button. Without a stylesheet "OK" and "Cancel" for a dialog have the same width, but with the stylesheet (IIRC setting the color is sufficient), suddenly the "OK" button shrinks...
@SimonSchroeder that's strange since the size constraint should come from the base style. Maybe create a bug report and notify me so I can take a look after holidays
-
@JonB said in Setting a QSS style on all QToolButtons in an application except the ones inside a QToolBar:
And Qt/setStyleSheet() does not offer any easy way to access/cancel/merge just, say background-color in a stylesheet without messing up any existing stuff.
Slightly off topic: I hate it when setting the background-color messes with the size of a button. Without a stylesheet "OK" and "Cancel" for a dialog have the same width, but with the stylesheet (IIRC setting the color is sufficient), suddenly the "OK" button shrinks...
@SimonSchroeder
(I have to be diplomatic now, otherwise a can feel a bug report coming my way)
QStyleSheetStyle
doesn't always get the love it deserves. The poor thing has to swallow, whateversetStyleSheet()
shovels on its plate. It has no public getters, to convey its feelings to the outside world. That's why it's sometimes moody and stubborn.
If your OK button gets too small, maybe try another, more positive color.
If there's nothing else to cheer you up, you may file a bug report. And if you really have no other idea whom to assign it to, I'll make an exception just for you ;-) -
@SimonSchroeder
(I have to be diplomatic now, otherwise a can feel a bug report coming my way)
QStyleSheetStyle
doesn't always get the love it deserves. The poor thing has to swallow, whateversetStyleSheet()
shovels on its plate. It has no public getters, to convey its feelings to the outside world. That's why it's sometimes moody and stubborn.
If your OK button gets too small, maybe try another, more positive color.
If there's nothing else to cheer you up, you may file a bug report. And if you really have no other idea whom to assign it to, I'll make an exception just for you ;-)@Axel-Spoerl said in Setting a QSS style on all QToolButtons in an application except the ones inside a QToolBar:
maybe try another, more positive color.
Well, you might be right. The trouble started when we tried to introduce a dark theme... ;-)