Styling QProgressBar and QScrollBar

Published Tuesday June 12th, 2007
10 Comments on Styling QProgressBar and QScrollBar
Posted in KDE, Qt

Qt 4.3 Style Sheets, as you most likely know, introduces styling of most widgets. The documentation is a quite silent when it comes to providing “style templates” – templates that you can just copy/paste and get started with styling the widget. Today, I started creating templates for QProgressBar and QScrollBar. All this will become a part of 4.3.1 Style Sheet documentation.

QProgressBar

QProgressBar:horizontal {
border: 1px solid gray;
border-radius: 3px;
background: white;
padding: 1px;
}
QProgressBar::chunk:horizontal {
background: qlineargradient(x1: 0, y1: 0.5, x2: 1, y2: 0.5, stop: 0 green, stop: 1 white);
}

Here’s what you get:
Progress Bar with no chunk width

You say “Oh sweet, but I want WindowsXP like progress bars. And the label needs to be outside since its easier to read”. Yeah, sure.

QProgressBar:horizontal {
border: 1px solid gray;
border-radius: 3px;
background: white;
padding: 1px;
text-align: right;
margin-right: 4ex;
}
QProgressBar::chunk:horizontal {
background: qlineargradient(x1: 0, y1: 0.5, x2: 1, y2: 0.5, stop: 0 green, stop: 1 white);
margin-right: 2px; /* space */
width: 10px;
}

Right aligned text in progress bar

Note that you need set the height for vertical progress bars. You can use “:indeterminate” for indeterminate progress bars. And there’s a small bug which breaks text alignment (fixed in 4.3.1).

QScrollBar


QScrollBar:horizontal {
border: 2px solid green;
background: cyan;
height: 15px;
margin: 0px 20px 0 20px;
}
QScrollBar::handle:horizontal {
background: gray;
min-width: 20px;
}
QScrollBar::add-line:horizontal {
background: blue;
width: 20px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal {
background: white;
width: 20px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
width: 3px;
height: 3px;
background: pink;
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
background: none;
}

Here’s the awful but didactic screenshot:
Scroll bar

Style sheets are so powerful that you can actually place those add-line, remove-line button anywhere!

QScrollBar:horizontal {
border: 2px solid green;
background: cyan;
height: 15px;
margin: 0px 40px 0 0px;
}
QScrollBar::handle:horizontal {
background: gray;
min-width: 20px;
}
QScrollBar::add-line:horizontal {
background: blue;
width: 16px;
subcontrol-position: right;
subcontrol-origin: margin;
border: 2px solid black;
}
QScrollBar::sub-line:horizontal {
background: magenta;
width: 16px;
subcontrol-position: top right;
subcontrol-origin: margin;
border: 2px solid black;
position: absolute;
right: 20px;
}
QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
width: 3px;
height: 3px;
background: pink;
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
background: none;
}

Advanced styling of QScrollBar

For vertical scroll bars, you will need to replace width with height and use up-arrow and down-arrow. That said, remove those boring borders, slap in a few border-images, gradients and background color and it’s simple to create beautiful custom scroll bars.

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in KDE, Qt

10 comments

Cyrille Berger says:

Is it disable globally ? While I can see the coolness of those CSS style sheet can do especially for applications like KDEGames or KDEEdu, I am also affraid it will means the end of the unify style between applications if everyone starts to use them to make their application looks cooler. So I would like to know if there is plan to make CSS style sheet disabled through qt-config ?

Hmm, is it possible to make the text color change partially in the QProgressBar, when the progressbar is halfway for example.
Example: progressbar color is black, text color is black; but when progress line goes over the text, the text turns white

morphir says:

@Wesley Stessens – I’m affraid microsoft has patented colored text. As well as color that change on text during any kind of process.

Last night I got an e-mail from microsoft where they claimed I was breathing the air Ballmer had patetented. I had to update my lisence. And if I got any problem breathing, I would need contact support.

girish says:

Cyrille Berger: No, there is no way to disable this globally. There is a good reason not to: Style Sheets can be used for other purposes other than theming (http://labs.trolltech.com/blogs/2007/06/06/lineedit-with-a-clear-button for example).

Weley Stessens: No, there is no way to achieve that using Style Sheets. Using “color” changes the color of the text, of course.

morphir: :))

Kevin Kofler says:

Ugh, I agree with Cyrille Berger that using style sheets this way is a really bad idea. Sure, it makes for a cool demo of what style sheets can do, but this kind of stuff should really be up to the style, not the application. If application authors abuse style sheets like this, then I think we’ll end up with random widget->setStyleSheet(“”); calls in style engines (possibly even with crude hacks to traverse the QObject hierarchy to locate the offending QWidget instances), Qt patches to ignore some or all style sheets or both.

Kevin Kofler says:

And to disable style sheets globally:
echo ‘void _ZN12QApplication13setStyleSheetERK7QString(){} void _ZN7QWidget13setStyleSheetERK7QString(){}’|gcc -shared -fPIC -nostdlib -x c – -o qt4killstylesheets.so
then LD_PRELOAD this. ๐Ÿ™‚

Kevin Kofler says:

Oh, and add -fomit-frame-pointer -s to that GCC invocation to minimize the size of the hack. Maybe even adding -Os makes a difference for some strange architectures.
And of course this is a really dirty hack which may break things. Use at your own risk!

girish says:

Kevin Kofler, you are missing something crucial here – Providing a custom look for Qt widgets has always been possible using QStyle. Qt Style Sheets has just made the process of customizing the look much simpler. If an application sets an atrocious custom style sheet and if you don’t like it – well, do the same thing you would have done, if the application set a custom QStyle. Also remember Qt runs not only on the Desktop but on a wide range of mobile devices where UI is everything.

QTabWidget says:

Could you paste a small example how to put pngs into the tabbar of a QTabWidget?
I’m fiddling around with the width, but its really hairy,..
That would be great!

Hello,

this example is interesting but I’d like
to make a gradient with 3 colors
the progressbar colors should go from green to yellow and to red.
green is 0
red is 1
and yellow is 0.8 (for example)
I can see all the colors when value is set at maximum (let’s say 1 for maximum and 0 for minimum)
If value is set to 0 the progress bar is white
if value it set to 0.8 I should see a gradient from green to yellow… but I shouldn’t see red.
I don’t know if this is possible with stylesheet… but Qt should provide an easy way to do it..

Regards

Commenting closed.

Get started today with Qt Download now