Change the color of a QProgressBar

Question

I am running ubuntu 11.04. This is what my progress bars look like:

I am showing the progress bars in a batch processing window (one per batch item) and would like to use them as a status indicator (green while all is going well, red in case of errors, ...).

I have tried several suggestions, including the ones made to this almost identical question. Unfortunately, I couldn't make it work and the documentation on customizing QProgressBars doesn't help me either, so I would be very grateful for any suggestions as to what I'm doing wrong.

I have subclassed the QProgressBar as suggested and have tried using stylesheets as well as the palette (not at the same time but as alternatives). With stylesheets, I can't make it look anything like the regular progress bars. Changing the color is really all I want to do, so I figured it should be much easier to do that by use of a palette instead of a stylesheet, but with the palette nothing happens at all.

Here is one of the versions I've tried for the palette:

#include "myprogressbar.h"

#include <QtGui/QPalette>

MyProgressBar::MyProgressBar(QWidget *parent) :
    QProgressBar(parent)
{}

void MyProgressBar::onProgress(int value, int maximum, QString phase)
{
    setMaximum(maximum);
    setValue(value);
    setFormat(phase);

    QPalette p = this->palette();
    p.setColor(QPalette::Highlight, QColor(Qt::green));
    this->setPalette(p);
}

...

I also tried the version suggested here, but that didn't help either.

Solution 1

It tried this :

QProgressBar {
     border: 2px solid grey;
     border-radius: 5px;
     background-color: #FF0000;
 }

 QProgressBar::chunk {
     background-color: #05B8CC;
     width: 20px;
 }

as styleSheet for the progressBar and I got this

so it is easy to change the background of the bar to the color you want and you can display a text by yourself with setFormat(). Is it working for you?

Solution 2

I had this problem too, but I find a way, with the help of this site: http://thesmithfam.org/blog/2009/10/13/cool-qprogressbar-stylesheet/

but I just wanted to change the color and not the progressbar itself. so I got rid of the first line, and change the second one a little bit.

Finally I got what I wanted.

First do this:

QString danger = "QProgressBar::chunk {background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #FF0350,stop: 0.4999 #FF0020,stop: 0.5 #FF0019,stop: 1 #FF0000 );border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;border: .px solid black;}";
QString safe= "QProgressBar::chunk {background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #78d,stop: 0.4999 #46a,stop: 0.5 #45a,stop: 1 #238 );border-bottom-right-radius: 7px;border-bottom-left-radius: 7px;border: 1px solid black;}";

Now all you have to do is:

if(ui->progressbar->value()<80)
    ui->progressbar->setStyleSheet(danger);
else
    ui->progressbar->setStyleSheet(safe);

Solution 3

Using the "Highlight" color role does the trick in my case (using Plastique style).

QPalette p = palette();
p.setColor(QPalette::Highlight, Qt::green);
setPalette(p);

Comments

[Frg]

Documentation on palette and setPalette says: Warning: Do not use this function in conjunction with Qt Style Sheets. Maybe that's the problem? In that case you could try style and setStyle. But that's just my guess.

[Dmitriy]

What is your OS? How does the progress bar look like in it?

[koan]

If you use style sheets then you have to set everything not just a single element. Show us the style sheet you tried.

[steps]

@Frg I haven't used palettes in conjunction with style sheets but separately (see edit).

[steps]

@koan I know that. But I find it difficult to generate a look via stylesheets that differs from the "native" progess bars only in terms of the color of the progress bar.

[steps]

@geotavros I have added an image (see above).

[koan]

@Steps so does everyone. If you don't touch style then Qt uses the native widget but if you use styling then it has to draw the widget itself; that's why you can't simply change a single colour.

[Frg]

@koan Wait a minute. Qt drawing native widgets? That's the first time I hear about it. When I was still using Ubuntu in graphical mode, Qt used to create its own stylesheet based on the gnome one that was detected in the system. Theoretically it should be possible to load that stylesheet and change just one parameter before applying it to the widget. If it's not possible to change only one instance of the progress bar, you could try subclassing it and then applying the modified style. But again, theoretically.

[koan]

@Frg I mean Qt gets the underlying native system to generate widgets until you start styling them, in which case Qt steps in and draws the whole thing - this is how I understand it to work.

[steps]

Ok, so what am I doing wrong about the palette?

[steps]

Yes, that works for me. But as I said I find it very hard to create a look using stylesheets that is close enough to what the regular progress bars look like. That's why I was hoping for a solution using palettes. Thanks for your answer though!

[Nicolas Holthaus]

also, you can do p.setColor(QPalette::Base, Qt::red); if you want to style the background of the progress bar.

[Daniel Kamil Kozar]

This is totally ignored by the GTK style, sadly.

[McLan]

where to write this codes ? or how to add it !! thanks

[Jesse Elliott]

Make sure you don't remove the border settings or it will ignore the background-color!

[Alexis Wilke]

@McLan, the answer by Arwen tells you how to make it work: i.e. progressbar->setStyleSheet(...)