How do I customize <h1> header style for a QWidget

Rory_1

I am trying to make the font size of my app scalable. Almost everything is working. I am defining a font size via user input (fontPixelSize) and then combining it with a css QString (cssBase) that has the formatting for all the widgets I am using. Here is the relevant snippet:

G::fontSize = QString::number(fontPixelSize);
css = "QWidget {font-size: " + G::fontSize + "px;}" + cssBase;
this->setStyleSheet(css);

I want to define some html tags such as <h1> like this:

h1 {
    font-size: 150%;
}

How do I set it up so this is the default for QWidget?

Thanks in advance!

JonB

@rory_1
What do you mean by "<h1> for a QWidget"? You can just include the HTML you have in the overall app stylesheet and any <h1> will respect it, I can only think of an <h1> appearing in a QTextEdit.

Rory_1

@jonb Thanks for the reply. The code I posted above is not working in a QLabel with rich text. However the font-size is working, which has been set at the QWidget level and is inherited by QLabel.

SGaist

Hi,

Just in case Qt's stylesheet system is for customising widgets. It's not a full blown CSS engine that you can use to manipulate the html content of QLabel like you would for a website.

JonB

@rory_1
So do you mean you have QLabel("<h1>Title</h1>"), intending it to render the font? Why not just say so?!

As @SGaist has said, QSS is only a subset, you have to read https://doc.qt.io/qt-5/richtext-html-subset.html to see what is supported. And there I see

h1 Level 1 heading Supports the standard block attributes.

so it does not say it will respect font stuff?

Rory_1

@sgaist Thanks. That is what I thought but I was hoping I was wrong. Do you have any advice for how to make html in Widgets (ie QLabel) scalable?

Rory_1

@jonb I have tried referring to an external css file from the html in a QLabel->text.

    h1 {
        font-size: 5px;             /*does not work*/
        color: red;                 /*works*/
    }
    
    h2 {
        color: green;               /*works*/
        font-zize: 50px;            /*does not work*/
    }
    
    body {
      background-color: lightblue;  /*works*/
      font-size: 100px;             /*works*/
      color: blue;                  /*works*/
    }

All attributes except font size seem to work for the header tags. So, something appears to be over-riding the font-size for the header tags in Qt Widgets.

JonB

@rory_1
Have a read of https://stackoverflow.com/questions/932092/default-html-style-for-controls-in-the-qt-library , and the accepted answer.

What you want cannot be done with a QLabel. The QLabel is designed to hold primative text labels - it's HTML support is rather... ropey.

That was 10 years ago. My guess: it still applies ;-)

Rory_1

@jonb Thanks for the link and your help. Much appreciated!!

MMD18

@JonB said in How do I customize <h1> header style for a QWidget:

@rory_1
Have a read of https://stackoverflow.com/questions/932092/default-html-style-for-controls-in-the-qt-library , and the accepted answer.

What you want cannot be done with a QLabel. The QLabel is designed to hold primative text labels - it's HTML support is rather... ropey.

That was 10 years ago. My guess: it still applies ;-)

4 years later it is still actual :-)

SGaist

@MMD18 hi,

Because nothing has changed on that front for QLabel as it is not meant for complex html rendering. If you really need CSS styling, using WebEngine would be more indicated.