CODEWITHSUNDEEP
c++qtqtabwidgetqstylesheet
Stanton
Stanton

Reputation: 1076

How to set only QTabWidget background color stylesheet

I have a Qt application that, among many other widget types, uses a QTabWidget. I'm having difficulty styling the background color for this object.

I've tried some of the following lines, which I found from other forum posts, in my stylesheet with no effect on the program

QTabWidget { background-color: black; }
QTabWidget::pane { background-color: black; }
QTabWidget#tabWidget { background-color: black; }
QTabWidget#tabWidget::pane { background-color: black; }

If I use QWidget { background-color: black; }, then yes my color is properly changed, but then all of the other widgets in my program are changed as well... so this isn't what I'm looking for...

I've also tried it in code with ui->tabWidget->setStyleSheet("background-color: black"); But this too is undesirable because it changes the background color of all of its children widgets.

Does anyone have any other ideas on how to style a QTabWidgets contents background area?

Upvotes: 2

Views: 4472

Answers (1)

MrShawn
MrShawn

Reputation: 103

About a year late but I recently ran into the same problem and got it working.

First of all QTabWidget has a child QWidget for every tab you make. That is the area that you put your other widgets into, and that is what you want to set the background color of.

Set the style-sheet by doing this.

1)Determine the name of your tab widgets from the design object window top right, they should match the currentTabName that you set when creating your tab.

2)Realize this is a QWidget not a QTabWidget this is why QTabWidget { background-color: black; } does not work.

3)Realize that by specifying the object in the style-sheet with the '#' the child object will not inherit the style-sheet.

For me I specified my style-sheet as such, repeating for each tab object name that I had:

#objectName {background-color: rgb(240,240,240);}

This provided me with the exact behavior I needed. In my case I wanted to get the natural gray background onto my Tab pages but not override the child components on the tab pages.

I hope this helps someone in the future...

Upvotes: 10

Related Questions