QWidget stylesheet rules

[CP71]

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:

1. Using only embedded stylesheets files for look customization
2. Define a default style for all my Qwidgets form in my application
3. Define a style for a specific QWidget (e.g. by object name)
4. Define dynamic style
5. 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

[JonB]

@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 the setObjectName("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");

[CP71]

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

[JonB]

@CP71 said in QWidget stylesheet rules:

I’m sure form is called FormTop

To use #FormTop{ you must use setObjectName("FormTop") on the instance, either explicitly in your code or implicitly in designer-generated where you set the objectName property? If you mean you have a class named FormTop then you must use just FormTop{

[J.Hilk]

@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

[JonB]

@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 uses background-color:.

There is a CSS attribute background, but it specifies more than just the color (like background: 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-properties

Shorthand notation for setting the background. Equivalent to specifying background-color, background-image, background-repeat, and/or background-position.

[CP71]

@J-Hilk
Thanks.
Seems background and background-color are interchangeable, so seems they have same behavior, anyway I changed all in background-color and I have same result.

[CP71]

@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.

[JonB]

@CP71
I don't really know what you're saying here. Yes, you can set explicit stylesheets on each individual QWidget. 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.

[CP71]

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

[JonB]

@CP71
Umm, depends what you have...

#FormTop QWidget finds something with object name FormTop, and then sets a QWidget inside it. QWidget#FormTop finds a QWidget whose object name is FormTop and sets that. So what exactly have you set FormTop object name on?

[CP71]

Thanks @JonB
I have a empty project with following items

My 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.