Styling the tab widget

Published Friday June 22nd, 2007
18 Comments on Styling the tab widget
Posted in KDE, Qt, Qtopia

Today we will look at the styling of one of the most complex widgets (when it comes to styling) in Qt – The QTabWidget. Fasten your seat belts so you don’t get blown away πŸ˜‰

Comments inline.

QTabWidget::pane { /* The tab widget frame */
border-top: 2px solid #C2C7CB;
QTabWidget::tab-bar {
left: 5px; /* move to the right by 5px */
/* Style the tab using the tab sub-control. Note that it reads QTabBar _not_ QTabWidget */
QTabBar::tab {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #E1E1E1, stop: 0.4 #DDDDDD, stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
border: 2px solid #C4C4C3;
border-bottom-color: #C2C7CB; /* same as the pane color */
border-top-left-radius: 4px;
border-top-right-radius: 4px;
min-width: 8ex;
padding: 2px;
QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #fafafa, stop: 0.4 #f4f4f4, stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
QTabBar::tab:selected {
border-color: #9B9B9B;
border-bottom-color: #C2C7CB; /* same as pane color */
QTabBar::tab:!selected {
margin-top: 2px; /* make non-selected tabs look smaller */

This is how it looks:

Tab widget take one

“But but but… I want overlapping tabs!”. Negative margins to the rescue. Add this to the style sheet above.

/* IMPORTANT: 8< Add the code above here 8< */ QTabBar::tab:selected { /* expand/overlap to the left and right by 4px */ margin-left: -4px; margin-right: -4px; } QTabBar::tab:first:selected { margin-left: 0; /* the first selected tab has nothing to overlap with on the left */ } QTabBar::tab:last:selected { margin-right: 0; /* the last selected tab has nothing to overlap with on the right */ } QTabBar::tab:only-one { margin: 0; /* if there is only one tab, we don't want overlapping margins */ }

Here's how it looks:

Tab widget with overlapping tabs

You can also play around with fonts and colors. For example,

QTabBar::tab:selected { font: bold; color: green; }

You can move the tab bar to the center and adjust the pane using something like,

/* 8< remove the tab-bar rule and the margin-top rule in the first stylesheet */ QTabWidget::tab-bar { alignment: center; } QTabWidget::pane { position: absolute; top: -0.5em; }

Tab Widget with centered tabs

Note that the above style sheets style assumes the tab bar to be at the top. You can use the :left, :right, :top, :bottom pseudo states for the position of the tab bar. There is also, :next-selected to indicate the next tab is selected, :previous-selected to indicate the previous tab is selected, :middle for a tab that is not the first or the last (same as :!first:!last). With some creative use of the above pseudo states, you can "merge" adjacent tab borders like in Plastique. And of course, you can use border-images to have the tabs curve in to the tab pane.

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

Posted in KDE, Qt, Qtopia


NoobSaibot says:

isn’t that move to the right by 5px?

QTabWidget::tab-bar {
left: 5px; /* move to the left by 5px */

girish says:

NoobSaibot – Oops, corrected.

Adam Treat says:

Is Trolltech aware that stylesheets are seriously broken in qtopia?

Rob says:

Thanks for these demos. Very nice. Any chance you could show how to style a QSlider so that it 1) uses an image for the thumb and 2) has a thumb that is, say, twice the size of a “normal” thumb?

QTabWidget says:

Really cool, Thanks!
Could it be that for a QLabel in a QVBoxLayout
QLabel { height: 30px; }
is broken?

QTabWidget says:

Any ideas how I could set the background right (behind) from the tabs?

girish says:

Adam Treat – It probably is. I am not aware of any testing style sheet testing done with the Qtopia style. We do run it with plastique in qvfb and that works fine πŸ™‚
Rob – QSlider coming up in my next blog post πŸ™‚

girish says:

QTabWidget – height and width can be set only for sub-controls. There is on way to force the width/height of a label.

As for setting the background, I assume you want a background for the tabs that is displayed all the way through the length of the tab widget (like Firefox). This is currently not possible with style sheets or QStyle. Please report this as a suggestion.

Jochen says:

girish, i really like those tips about styling widgets. i would like to see more of them πŸ™‚

wysota says:

Does Trolltech plan to fully support stylesheets for user-made widgets? I mean for things drawn without the help of QStyle API… I think that currently you can only manipulate colours by respecting the palette, right? For instance allow manipulating positions, use subcontrols or pseudostates… I would imagine that the widget author would have to query the stylesheet somehow in the paint event, I guess this should be possible…

QTabWidget says:

“height and width can be set only for sub-controls. There is on way to force the width/height of a label.”
But then it is not possible to replace background images with different sizes without changing the source
code, is this the intention of qss?

Tab background: at least it is possible to set the color when the QTabWidget has a name:
.cpp: tabWidget.setObjectName(“tabWidget”);
.qss: QWidget#tabWidget { background-color: white;}

NoobSaibot says:

girish, is it possible to define a :hover effect for the entries in a ItemView?

ginglese says:

Is it possible to set background image in tabs ? or set the size of the tabs icons ? when i put a stylesheet icons remains very small even if iconSize are changed.

girish says:

wysota – We don’t have plans to support stylesheets for custom widgets
QTabWidget – Ok, we are fixing the limitations with the height and width properties. Let’s see if it makes it to 4.3.1.
NoobSaibot – Not possible.
ginglese – background-image does not work?

ginglese says:

In fact it works. what doesn’t work (or it’s not design like that) is to apply a name selector on tabs.
for example this work:
QTabBar::tab {
border: 2px rgb(144,147,149);border-right-style :none; border-left-style :solid; border-top-style :solid;
border-bottom-style :solid; border-top-left-radius: 15px;border-bottom-left-radius: 15px;
min-width: 90px;min-height: 75px;margin-top :4px;

background-image : url(:/buttons/BtnUsers.png);}

but this doesn’t :
background-image : url(:/buttons/BtnUsers.png);}

i would like to have different background image for each tabs … how could i do that ?
i have also tried to mix icon and stylesheet (to set the rounded border) but the icon size is not updated an remain very small….

ginglese says:

Girish, Another question concerning background, how to fill background with pattern thanks to stylesheet ?

girish says:

ginglese: The icons not being painted correctly with the right size is a bug.
To fill background with a pattern, create a pixmap with the pattern and just use background-image, background-repeat.

inglese says:

Ok girish. is that bug added to tasktracker ?
thanks for the pattern tips.

Commenting closed.

Get started today with Qt Download now