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



  • 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!



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



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


  • Lifetime Qt Champion

    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.



  • @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?



  • @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?



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



  • @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 ;-)



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


Log in to reply