How do I specify a style in a style sheet to be used by different object?

graniteDev

I have a style sheet being loaded by my application at start up, and that's working quite well. The issue I'm having is that I want certain buttons to be different colors from the rest of the buttons to draw attention to them.

I can access them individually by using the following code where "connectPB" is the object name in QT Designer.

QPushButton#connectPB{
    background-color: #00CC66;
    border-radius: 3px;
    text-align:center;
    font-weight: bold;
    color: white;
    padding-top:0.2em;
    padding-bottom:0.2em;
    padding-left:0.5em;
    padding-right:0.5em;
}
QPushButton#connectPB:pressed {
    background-color: #00ff80;
}
QPushButton#connectPB:checked {
    background-color: #00994d;
}
QPushButton#connectPB:disabled {
    border: 2px solid #536A75;
    border-radius: 3px;
    background-color: none;
    color: #536A75;
}

But this is highly inefficient because I then have to duplicate this code for every single button that I want to look like this!

Is there a way to generalize this, and give this specific style an identifier of some sort and then in QT-Creator assign that style to various objects as I see fit?

JonB

@graniteDev
The usual way of doing this is to sub-class QPushButton for your various different buttons you wish to look a certain way, and use that as the selector in the stylesheet.

But I don't use Qt Creator so I don't know how easy it is to do that there.

graniteDev

@JonB
I don't want to subclass the buttons. They aren't going to be any different than the normal buttons except for color, so subclassing them sounds like more of a headache than a fix. There must be a feature within Qt to handle what I'm trying to do. Style sheets came from the web, and Qt is using the same format almost verbatim, and there you can specify .style {} and assign your object an identifier that ties them to that syle. There must be a way to do this with Qt.

JonB

@graniteDev
There are alternative ways. You can use an identifier instead of a class and address that from a stylesheet if that's what you prefer. But then you have just one identifier which you must use on all your objects.

and there you can specify .style {} and assign your object an identifier that ties them to that syle.

If you would care to clarify (piece of code to illustrate) exactly what you'd like to do if it were HTML/CSS (where there are equally many ways to achieve it), we could comment on whether it can be done with Qt/QSS.

graniteDev

@JonB
How do I specify an identifier? I'm aware that I can select them via their object name, as in the example I used, but I can't give all of them the same object name without messing up the slots called by their onClick signals.

As for your question on HTML/CSS it's not directly applicable as you can arbitrarily assign "class" in HTML

// In your HTML
<button name="connectButton" class="buttonGreen">Connect</button>
<button name="okButton" class="buttonGreen">OK</button>
<button name="cancelButton" class="button">Cancel</button>

// In your CSS
.buttonGreen {
    some style
}

.buttonRed {
    some style
}

.button {
    some style
}

I might be off in my syntax, haven't played with that in a while, but that is the gist of what you can do with style sheets. Make a style, apply that to any object you need it applied to.

JonB

@graniteDev
You are the one who wrote

Is there a way to generalize this, and give this specific style an identifier of some sort and then in QT-Creator assign that style to various objects as I see fit?

and

Style sheets came from the web, and Qt is using the same format almost verbatim, and there you can specify .style {} and assign your object an identifier that ties them to that syle.

so I was asking you to explain just what you meant particularly by the second statement? Maybe you didn't mean .style {}, maybe you meant .class-name {}?

Let's ignore that one. I'll try to show you how I achieve what you have now posted using classes. Give me a few minutes and I'll edit this post to include that....

EDIT: Right, I do do what you are showing with your classes. I assign class to my widgets, and use what Qt calls *dynamic properties" to achieve similar to HTML/CSS class.

Stylesheet:

.backgroundColorTransparent { background-color: transparent; }
.colorBlack { color: Black; }
...

Code:

widget.setProperty("class", "backgroundColorTransparent colorBlack");

I do that from code. I don't know what you can do in Qt Creator to make that easy at design-time.

graniteDev

@JonB
Very cool! It definitely works, though it's a bit more involved since I have to throw all that code into the constructor for each class.

I'm curious where this is in the documentation, I didn't even know this could be done, setting a property like that that is tied to style.

Still, if I could do that on the Creator side, that would be ideal, as most of my objects are generated via Creator.

JonB

@graniteDev
The actual code is just a single line in constructor or whatever.

Properties start being documented in http://doc.qt.io/qt-5/properties.html, and sub-topic there Dynamic Properties.
QObject::setProperty() is the basic. Note that you do not have to declare Q_PROPERTY on dynamic properties.
But the interesting stuff comes in the docs for QSS. https://wiki.qt.io/Dynamic_Properties_and_Stylesheets is very brief but relevant.
The more interesting stuff is in https://doc.qt.io/Qt-5/stylesheet-syntax.html (read the Explanation in the table where QPushButton[flat="false"] appears), and the corresponding https://doc.qt.io/Qt-5/stylesheet-examples.html#customizing-using-dynamic-properties

Note that you do not have to use a property named class. (That class property is not the same thing as Qt's class which can be referenced in the stylesheet.) But I chose to do so so that I could use the neat .class-name syntax in the stylesheet instead of [name="value"] in my QSS selector rules.