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 change the color of a progressBar, while keep other properties unchanged
Forum Updated to NodeBB v4.3 + New Features

How to change the color of a progressBar, while keep other properties unchanged

Scheduled Pinned Locked Moved General and Desktop
7 Posts 3 Posters 26.3k Views 1 Watching
  • 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.
  • S Offline
    S Offline
    stuartx
    wrote on last edited by
    #1

    Hi, I want to change the color of a progressBar based on its value. Meanwhile I need to keep other properties of the widget unchanged. I applied the following lines to get the color changed. However the width and the border are also changed. Is there any way to keep the original properties and only change the color?
    @
    QString myStyleSheet = QString(" QProgressBar::chunk { background: yellow; }");
    QString s = ui->progressBar->styleSheet().append(myStyleSheet);
    ui->progressBar->setStyleSheet(s);
    @

    Thanks.

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

      There are two possibilites that come to my mind immediately :

      • Use a "gradient":http://developer.qt.nokia.com/forums/viewthread/12701 instead of a plain color
      • Save the style sheet before appending to it
        @
        ui->progressBar->setProperty("defaultStyleSheet", ui->progressBar->styleSheet());
        ...
        ui->progressBar->setStyleSheet(ui->progressBar->property("defaultStyleSheet").toString() +
        " QProgressBar::chunk { background: green; }");
        ...
        ui->progressBar->setStyleSheet(ui->progressBar->property("defaultStyleSheet").toString() +
        " QProgressBar::chunk { background: yellow; }");
        ...
        ui->progressBar->setStyleSheet(ui->progressBar->property("defaultStyleSheet").toString() +
        " QProgressBar::chunk { background: red; }");
        @
      1 Reply Last reply
      0
      • S Offline
        S Offline
        stuartx
        wrote on last edited by
        #3

        Hi Lukas,

        Thanks for the response. I tried the styleSheet solution. I does not work for me. The defaultStyleSheet turns out a empty string:
        @
        ui->progressBar->setStyleSheet(ui->progressBar->property("defaultStyleSheet").toString() +
        " QProgressBar::chunk { background: yellow; }");
        QString s = ui->progressBar->styleSheet();
        qDebug() << s;
        @

        The color changed. The width and border of the bar also changed.

        output:
        " QProgressBar::chunk { background: yellow; }"

        1 Reply Last reply
        0
        • L Offline
          L Offline
          lgeyer
          wrote on last edited by
          #4

          Unless you set a custom style sheet the default style sheet for a widget is always empty. If you want to modify an existing style (not style sheet) you will have to either alter the palette, subclass the corresponding QStyle or a QProxyStyle.

          1 Reply Last reply
          0
          • S Offline
            S Offline
            stuartx
            wrote on last edited by
            #5

            Could you provide some sample code for the QStyle or QProxyStyle?
            In addition, I only want to change the color of the bar, no need for fancy looking. Is there simple way to do that?

            Thanks.

            1 Reply Last reply
            0
            • A Offline
              A Offline
              andre
              wrote on last edited by
              #6

              Changing the palette may work on your platform & style, but it is not guaranteed to work everywhere. Styles are free to ignore it.

              1 Reply Last reply
              0
              • S Offline
                S Offline
                stuartx
                wrote on last edited by
                #7

                Hi Andre, I tried @QPalette p = (ui->progressBar->palette());
                p.setColor(QPalette::Foreground, Qt::red);
                p.setColor(QPalette::Background, Qt::green);
                p.setColor(QPalette::Highlight, Qt::yellow);
                ui->progressBar->setPalette(p);@ It did not work.

                Now I use the original geometry of the bar to keep the original looking except the color. The result is close to what I wanted.

                @
                QRect r = ui->progressBar->geometry();

                QString st = QString (
                            "QProgressBar::chunk {"
                            "background-color: #ff0000;"
                             "}");
                
                st.append("QProgressBar {"
                          "border: 1px solid grey;"
                          "border-radius: 2px;"
                          "text-align: center;"
                          "background: #eeeeee;"
                          "}");
                ui->progressBar->setStyleSheet(st);
                
                ui->progressBar->setGeometry(r.x(), r.y()+3, r.width(), r.height()-6 );
                

                @
                I develop this application on Mac and Linux. Do you have better method for this matter?

                1 Reply Last reply
                0

                • Login

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