Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. How to apply a button stylesheet
Forum Update on Monday, May 27th 2025

How to apply a button stylesheet

Scheduled Pinned Locked Moved Solved General and Desktop
3 Posts 2 Posters 279 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • L Offline
    L Offline
    LISP
    wrote on last edited by
    #1

    I placed a stackedwidget in the mainwindow.
    And set the background.

    ui->page1->setStyleSheet("QWidget {background-image: url(:/images/bg.png);}");
    ui->page2->setStyleSheet("QWidget {background-image: url(:/images/bg.png);}");
    ui->page3->setStyleSheet("QWidget {background-image: url(:/images/bg.png);}");

    Setting the background of stackedwidget succeeded.
    But the button background color inside the stackedWidget doesn't change.

    ui->button->setStyleSheet("QPushButton {background-color: white; color: rgb(58, 134, 255); border: 2px solid rgb(58, 134, 255);}");

    Button background color is not white.
    The button background appears as image/bg.png.

    What did I do wrong?

    CP71C 1 Reply Last reply
    0
    • L LISP

      I placed a stackedwidget in the mainwindow.
      And set the background.

      ui->page1->setStyleSheet("QWidget {background-image: url(:/images/bg.png);}");
      ui->page2->setStyleSheet("QWidget {background-image: url(:/images/bg.png);}");
      ui->page3->setStyleSheet("QWidget {background-image: url(:/images/bg.png);}");

      Setting the background of stackedwidget succeeded.
      But the button background color inside the stackedWidget doesn't change.

      ui->button->setStyleSheet("QPushButton {background-color: white; color: rgb(58, 134, 255); border: 2px solid rgb(58, 134, 255);}");

      Button background color is not white.
      The button background appears as image/bg.png.

      What did I do wrong?

      CP71C Offline
      CP71C Offline
      CP71
      wrote on last edited by
      #3

      @LISP
      Hi,
      Your description makes me think ui->button is child one of three pages, if it is so is normal.
      "QWidget {background-image: url(:/images/bg.png);}" is too general, all chieldren of page inherit this style.
      You have two ways:
      Insert your style in design without insert QWidget keyword
      Indicate class name "QWidget#NamePage {background-image: url(:/images/bg.png);}"

      see https://doc.qt.io/qt-5/stylesheet-syntax.html at Conflict Resolution

      1 Reply Last reply
      2
      • L Offline
        L Offline
        LISP
        wrote on last edited by
        #2

        I can specify directly in "Designer" without putting the code directly.

        1 Reply Last reply
        0
        • L LISP

          I placed a stackedwidget in the mainwindow.
          And set the background.

          ui->page1->setStyleSheet("QWidget {background-image: url(:/images/bg.png);}");
          ui->page2->setStyleSheet("QWidget {background-image: url(:/images/bg.png);}");
          ui->page3->setStyleSheet("QWidget {background-image: url(:/images/bg.png);}");

          Setting the background of stackedwidget succeeded.
          But the button background color inside the stackedWidget doesn't change.

          ui->button->setStyleSheet("QPushButton {background-color: white; color: rgb(58, 134, 255); border: 2px solid rgb(58, 134, 255);}");

          Button background color is not white.
          The button background appears as image/bg.png.

          What did I do wrong?

          CP71C Offline
          CP71C Offline
          CP71
          wrote on last edited by
          #3

          @LISP
          Hi,
          Your description makes me think ui->button is child one of three pages, if it is so is normal.
          "QWidget {background-image: url(:/images/bg.png);}" is too general, all chieldren of page inherit this style.
          You have two ways:
          Insert your style in design without insert QWidget keyword
          Indicate class name "QWidget#NamePage {background-image: url(:/images/bg.png);}"

          see https://doc.qt.io/qt-5/stylesheet-syntax.html at Conflict Resolution

          1 Reply Last reply
          2

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved