[SOLVED] Creating classes in Qt Stylesheet

[holygirl]

Hi all!

I’m new to Qt and I have a question regarding stylesheets. I’m using many labels in my designed and I want each label to have a different styling. As of now, I have

@QLabel
{
border: none;
padding: 0;
background: none;
}@

but this applies the same style to all the labels. I even tried
@
.heading
{
color: brown;
}

.heading2
{
color: red;
}@

for different styles for each label. But I can’t get it to work. My question is, how can I customize the styling for each label even though I am referring to the same stylesheet?
Thanks.

[sierdzio]

You need to use id selector:
@
QLabel#myObjectName {}
@

myObjectName is the objectName property of QObject (QObject::setObjectName()). More about QSS here: "link":http://qt-project.org/doc/qt-4.8/stylesheet-syntax.html.

Just be sure not to overload the thing. QSS parsing takes time and can noticeably impact the performance if it grows too big.

[holygirl]

Thanks for the reply sierdzio. I went through the document and tried implementing the id selector but I think I'm doing something wrong. In my .qss, I have

@
QLabel#heading
{
color: brown;
}
@

and in my code, I call it as

@
ui->label->setObjectName("heading");
@

Is this syntax right? Could you please guide me in the right direction?

[sierdzio]

It is correct, yes.

[holygirl]

That's odd. My label doesn't seem to be brown in color! I've also included the stylesheet in my main.cpp as

@
QFile styleFile( "://new//prefix1//the-path.qss" );
styleFile.open( QFile::ReadOnly );
QString style( styleFile.readAll() );
app.setStyleSheet( style );
@

Is there anything else I need to include? Could you please a provide an example? You've been a lot of help to me. Thanks.

[sierdzio]

Wow, and it works in general? Qt uses unix paths. No need to use double forward slashes like that.

I don't know the answer. This code should be enough. Most probably the object name is changed after stylesheet is loaded, so it is not updated. Try either loading QSS later, or run ui->label->setStyleSheet(""); after you set the object name. Maybe that would trigger a redraw.

[jazzycamel]

The following is a full working example with C++, QSS and QRC sources:

main.cpp
@
#include <QtGui>

class Widget : public QWidget
{

public:
Widget(QWidget *parent = 0){
Q_UNUSED(parent)

    QVBoxLayout *l=new QVBoxLayout(this);
    QLabel *hLabel=new QLabel("Heading Label", this);
    hLabel->setObjectName("headingLabel");
    l->addWidget(hLabel);

    l->addWidget(new QLabel("Other Label", this));
}

};

int main(int argc, char *argv[])
{
QApplication a(argc, argv);

QFile sFile(":/main.qss");
if(sFile.open(QFile::ReadOnly)){
    QString style(sFile.readAll());
    a.setStyleSheet(style);
}

Widget w;
w.show();
return a.exec();

}
@

main.qss
@
QLabel {
background-color: pink;
}

QLabel#headingLabel {
color: brown;
}
@

example.qrc
@
<RCC>
<qresource>
<file>main.qss</file>
</qresource>
</RCC>
@

Hope this helps ;o)

[holygirl]

sierdzio

You were right! Running

@
ui->label->setStyleSheet(”“);
@

worked like a charm! Thank you so much for your time :)

@jazzycamel: Thanks to you too for providing a nice example.

[ochampao]

Hello,

Is there a way to have the same result as @jazzycamel example on the hLabel but without registering the object using the setObjectName() method?

In other words, specify within the stylesheet directly that the style must be applied to hLabel only which is a member of the class Widget.

Why is the setObjectName() necessary?

The reason I am asking this is, let's say you have a series of custom dialogs (e.g. dialog1-dialog3) with each one having as a member a QPushButton with the same name "nextButton". Then using the setObjectName() approach one needs to register each "nextButton" with a different identifier if he wants to apply a separate style to each one.

What I am looking for is a way to identify directly in the stylesheet each nextButton from the dialog it is a member of.

Thanks for your help.