Define tabs background with stylesheets without changing QWidget?

Question

I want to make a very basic GUI: tabs, text area.

But I want to color my tabs and make them always looking the same on MAC, Windows and Linux.

So, I tryed to use a stylesheet:

QTabWidget::pane
{
    border-top: 2px solid #1B1B1B;
    background-color: #262626;
}

QTabWidget::tab-bar
{
    left: 5px;
    alignment: left;
    background: #3E3E3E;
}

QTabBar::tab
{
    background: transparent;
    color: #757575;
    padding: 15px 5px 15px 5px;
}

QTabBar::tab:hover
{
    text-decoration: underline;
}

QTabBar::tab:selected
{
    color: #DEF600;
    background: qlineargradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #262626, stop: 1.0 #3D3D3D );
}

But even if the tabs looks well, there is a problem: The tab pane is still transparent...

I can force a background color by adding:

QWidget
{
    background-color: #262626;
}

But as you know, this change the background color of ALL the widgets, even my QPlainTextEdit that I still want to have a white background. And more annoying, this reset the OS skin and display ugly scrollbars (I really want to keep them as they were).

Is there a way to change the tabs pane background without having to reskin all the components ?

Ruan · Answer 1 · 2017-07-12T13:27:21.170

11

I had the same problem. I could get it to work with this:

QTabWidget::pane > QWidget {
    background-color: #262626;
}

edited Jul 12 '17 at 13:27

answered Jul 12 '17 at 13:01

Ruan

163
1
8

1

I had been searching all over the globe for how to properly set the background color for a QTabWidget and this post was what did it for me. This should be marked as the correct answer. – Stanton Aug 22 '17 at 15:42
1

Finally a useful answer, it should really be made more visible! – CybeX Jan 26 '18 at 21:18
This changes the background color of all child widgets, too. I had more success with `QTabBar { background-color: #262626; }` – elsamuko Feb 10 '20 at 08:04
only workaround that worked in my context thanks ! – Oka May 16 '23 at 13:03

score 3 · Answer 2 · answered Oct 21 '12 at 00:33

3

Try this.

QTabWidget::pane {
    background: red;
}

You can read this for details. And one more thing to comment. You can use QObject::objectName() as style sheet's id selector. for example,

QTabWidget#myTab { ... }

hope this helps.

answered Oct 21 '12 at 00:33

Joonhwan

495
5
11

changing background color on QTabWidget::pane don't work for me. It looks like the background still transparent. For the moment I solved this by settings QMainWindow background color (it works for me, but it will not be the solution in common cases). – MARTIN Damien Oct 21 '12 at 11:03
QWidget's style has hierachy. Before moving on, first create simple application where only QTabWidget::pane style is configured to test whether it works. And then I beilieve you can add additional style one by one till something goes wrong. – Joonhwan Oct 21 '12 at 12:41

NRUB · Answer 3 · 2016-07-05T00:07:55.310

It is possible simply by:

* {background: green;}

This style set background for this widget and all their childs so you need to know one important thing. The area you think is QTabWidget in fact is QWidget which is set inside of QTabWidget. You can easly check where QTabWidget is and where is their child by adding to your style

QTabWidget::pane {background: green; padding: 10px;}

green area is a QTabWidget, all inside is overlapped by QTabWidgets child (any QWidget added by addTab() function).

score 0 · Answer 4 · answered Oct 22 '12 at 03:09

0

add style

 "background-color:rgb(255,255,255)"

to each tab.

answered Oct 22 '12 at 03:09

Al2O3

3,103
4
26
52

This will work, but I want to change the pan background color (so, where there is no tabs too). `background-color` is still not used by Qt in `QTabWidget::pane` so even if my tabs have a nice background, the space where there is no tabs will stay transparent. – MARTIN Damien Oct 22 '12 at 12:14

score 0 · Answer 5 · answered Nov 01 '12 at 10:49

0

Refer this: http://doc.qt.digia.com/qt/stylesheet-syntax.html

Read ID Selector under Selector Types. You can instruct a certain style to be applied only for a given object name. So you can use whatever the name you have given to your tabWidget.

answered Nov 01 '12 at 10:49

warunanc

2,221
1
23
40

or you could simply set QTabBar {background-color: #fff;} This will set color for the area where there are no tabs – warunanc Nov 01 '12 at 11:01

score 0 · Answer 6 · answered Aug 29 '13 at 08:28

Try enabling document mode with

myTab->setDocumentMode(true);

This has worked for me when everything else has failed. You can do it in code, or by twiddling the property in qtcreator.

You still might have to apply some styles to the pane like so:

QTabWidget:pane{
background: red;
}

Read more about this in the documentation.

Define tabs background with stylesheets without changing QWidget?

6 Answers6