How to set the background color of a tab widget in Qt Creator?

Question

I’m using Qt Creator. In my GUI I use a tab widget. This widget should have the same grey background color as the main window (picture A). I accomplished this by editing the Style Sheet in Qt Designer with:

background-colour: rgb(240, 240, 240);

But now I have two new problems I can’t solve:

• The buttons (--> Send) are not rounded anymore.
• The edit boxes’ background color has changed to grey, too.

Befor I changed the Style Sheet the GUI looked like in Picture B.

I also tried

QPalette pal = m_pUi->tabWidget->palette();
pal.setColor(m_pUi->tabWidget->backgroundRole(), Qt::blue);
m_pUi->tabWidget->setPalette(pal);

but this only changes the color behind the tabs, not the entire color of the whole "tab-window-surface".

Do I have to make additional style descriptions or is there an more simple solution?

Picture A - with Style Sheet

Picture B - without Style Sheet

Physiological

Answer 1

I had the same problem and I discovered that you need to set this attribute to each one of your tabs:

ui->tab->setAutoFillBackground(true);

I'm not sure, but I think that also is necessary set that attribute to the QTabWidget as such.

I hope this help.

Superscribe

Yes, I tried this and it worked - so simple, there's no need to mess about with stylesheets if all you want is the window's background color. You can also set this in QtDesigner, which is what I did. In the Object Inspector, each tab is a QWidget under the QTabWidget; check the setAutoFillBackground property for each and you're done. – Leeleeann

Answer 2

The "things" you want to access are called QTabBars. Keeping that in mind you can write a stylesheet like this:

QTabBar::tab 
{
    background: #48555E;
    color: white;   
    border-color: #48555E;
}

QTabBar::tab:selected, 
QTabBar::tab:hover 
{
    border-top-color: #1D2A32;
    border-color: #40494E;
    color: black;
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #C1D8E8, stop: 1 #F0F5F8); 
}

Also you might find this question and this official documentation insightful.

Bautista

Answer 3

#page1 {
background-color: blue;
}
#page2 {
background-color: red;
}

It is worked.

Biweekly