QWidget stylesheet rules
-
Hi everybody,
I want to use stylesheet rules for future customizations or multiple customizations of look (E.g. Dark or light style look), my goal is:- Using only embedded stylesheets files for look customization
- Define a default style for all my Qwidgets form in my application
- Define a style for a specific QWidget (e.g. by object name)
- Define dynamic style
- Avoid multiple definition with same value in two or more items (E.g. background: #0C0C0C;)
For point1, 2 and 4 I have no problem.
But I can’t do point n.3.I have a new project, at the moment I have only MainWindow and one QWidget (with some labels).
I have tried, tried again, tried again but I’m not able to set a custom style in a child QWidget.
In my c++ and h codes there aren’t line that could break css stylesheet file code.
I’m sure that is a my misteke, but I don’t what (Maybe Declaration order!).
Here there is my embedded stylesheet
/* child widget where I want to change my default*/
QWidget#FormTop{
background: #FFFFFF;
color: #000000;
}QLabel { background-color: transparent; }
/Default style/
QLabel, QWidget
{
background: #0C0C0C;
color: #FFFFFF;
}/Dynamic style/
*[styleBold="true"] { font-weight: bold; }Thanks in advance for help
CP71 -
@CP71 said in QWidget stylesheet rules:
But I can’t do point n.3.
QWidget#FormTop{
should indeed work. Make sure you really have done thesetObjectName("FormTop")
? Try plain#FormTop
for the rule (I think that works, though not certain), or*#FormTop
? Remove you other rules to ensure you check this alone.Avoid multiple definition with same value in two or more items (E.g. background: #0C0C0C;)
Good luck ;-) CSS/QSS doesn't work this way, regrettably :( I ended up achieving this the way I would in HTML/CSS, viz. lots of separate classes for such attributes
.buttonColorGreen { background-color: rgba(185, 245, 144, 0.9); } .colorRed { color: Red; } btnViewActions.setProperty("class", "buttonColorGreen");
-
Thanks @JonB ,
I’m certainly making a mistake, #FormTop doesn’t work also when is alone in css. I’m sure form is called FormTop but something dosn’t run in my code, I’m investigate.Thank you very much to share your way to resolve my problem, I will keep it in mind ;)
My hope was working only in the stylesheet for look customization.
Thanks
CP71 -
@CP71 said in QWidget stylesheet rules:
I’m sure form is called FormTop
To use
#FormTop{
you must usesetObjectName("FormTop")
on the instance, either explicitly in your code or implicitly in designer-generated where you set theobjectName
property? If you mean you have a class namedFormTop
then you must use justFormTop{
-
@CP71 said in QWidget stylesheet rules:
’m certainly making a mistake, #FormTop doesn’t work also when is alone in css.
I'm almost 100% certain, that there is no standalone "background:" property for QStyleSheet, what you're looking for is
background-color:
like in your QLabel example -
@J-Hilk
That's a damned good spot :) Hmm, actually read on.... And reduce your "I'm almost 100% certain" ;-)@CP71
Notice how my rule usesbackground-color:
.There is a CSS attribute
background
, but it specifies more than just the color (likebackground: lightblue url("img_tree.gif") no-repeat fixed center;
). QSS may not allow this.... EDIT Actually, it does, according to https://doc.qt.io/qt-5/stylesheet-reference.html#list-of-propertiesShorthand notation for setting the background. Equivalent to specifying background-color, background-image, background-repeat, and/or background-position.
-
@JonB
At starting I had “FormTop” only in UI Editor, next for major certain I called setObjectName in the constructor of the form.My Idea is to create an object to manage the changing of style, but now I read CSS and and call setStyleSheet in the constructor.
-
@CP71
I don't really know what you're saying here. Yes, you can set explicit stylesheets on each individualQWidget
. But this can make things harder to manage/debug than if you stick to an application- (or even window-)specific stylesheet with class/object selectors.If it were me, I would persist in finding why yours does not seem to work. I have used object-selectors, and they do work. However, I leave that to you.
-
Hi everybody.
Thanks to all for help.Now seems to work well!
I don’t know why, but the following code works well
#FormTop QWidget{
background-color: #FFFFFF;
color: #000000;
}Instead the following code doesn’t work, or it seems so:
QWidget#FormTop{
background-color: #FFFFFF;
color: #000000;
}I thought both codes are good but, maybe I made a mistake in the second case, I don't know what!
Thanks
CP71 -
@CP71
Umm, depends what you have...#FormTop QWidget
finds something with object nameFormTop
, and then sets aQWidget
inside it.QWidget#FormTop
finds aQWidget
whose object name isFormTop
and sets that. So what exactly have you setFormTop
object name on? -
Thanks @JonB
I have a empty project with following itemsMy FormTop is
In CSS I must change target for style from FormTop to WidgetFormTop.
So to link to my latest post, the following code works well.
WidgetFormTop QWidget{
background-color: #FFFFFF;
color: #000000;
}Instead the following code doesn’t work, or it seems so:
WidgetFormTop#FormTop{
background-color: #FFFFFF;
color: #000000;
}For me, the objectName you can set via UI editor (objectName property) or via code by setObjectName();
In fact, I reached up my goal only partially. I really wanted to set properties of “FormTop” but I can’t if I write “FormTop” in CSS. But I can do indirectly writing “WidgetFormTop” in CSS . Why? I’don’t know.
Remember, I call setStyleSheet of MainFrame in main.cpp.