Back to Blog home

Styling the tab widget

Published on Friday June 22, 2007 by Girish Ramakrishnan in Qt KDE Qtopia | Comments

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.

Subscribe to Our Blog

Stay up to date with the latest marketing, sales and service tips and news.

The blog comment system has been migrated to a new platform. If you face any issues, please let us know via feedback@qt.io.