Styling the tab widget

Posted by on

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.

twitter