Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 A - with Style Sheet

Picture B - without Style Sheet

Picture B - without Style Sheet

like image 945
Semjon Mössinger Avatar asked Jul 16 '12 19:07

Semjon Mössinger


People also ask

How do you get a background color on QWidget?

Use QWidget::palette(). color(QWidget::backgroundRole()) to receive the color of the background color role for that widget. Obviously, this should also work with any class that inherits QWidget.

How do I set the tab order in Qt?

Setting the Tab Order To enter tab order editing mode, open the Edit menu and select Edit Tab Order. In this mode, each input widget in the form is shown with a number indicating its position in the tab order.


2 Answers

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.

like image 177
Angie Quijano Avatar answered Oct 09 '22 14:10

Angie Quijano


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.

like image 33
MarPan Avatar answered Oct 09 '22 13:10

MarPan