QTabWidget, setting colour of tab itself ?

SPlatten

Using setStyleSheet I can set the colour of the individual tab panels, but this doesn't set the colour of the tab itself.

Is there any way to do this, as there is a requirement to set the colour of the tabs to different colours.

I am using an old version of Qt 4.8

SPlatten

Finally resolved, in the end I had to replace:

opt.palette.setColor(QPalette::Button, color);

with:

opt.palette.setColor(QPalette::Background, color);

Its still a mystery as to why the original code worked find in one project and not in the other, both using the same release of Qt.

JoeCFD

https://stackoverflow.com/questions/38369015/customuzing-qtabwidget-with-style-sheets

SPlatten

@JoeCFD , Although I marked this as the correct answer, actually for this implementation, it isn't, the tabs are created in a QTabWidget, I've tried various things but only the panel is effected....the tab itself isn't.

JonB

@SPlatten
Are you claiming QTabBar::tab { background: ... does not work/do what I understand you to want? It seems to me background or background-color ought to as shown in the SO post?

SPlatten

@JonB , I don't have a QTabBar only an instance of QTabWidget, I tried using the examples and only the pane is set to the chosen colour.

JonB

@SPlatten
So did you try QTabWidget::tab-bar as shown in Customizing QTabWidget and QTabBar? It seems to me the examples there should cover you, please try minimal example if you say it does not work.

SPlatten

@JonB , thank you I’ll will try it tomorrow.

JoeCFD

This will work. I tested it.
QString style_sheet = QString("QTabBar::tab{background: green; color: white;padding: 10px;}"
"QTabBar::tab:selected{ background: lightgray; }" );
setStyleSheet( style_sheet );

SPlatten

@JoeCFD , as stated before I am using Qt 4.8, with QTabWidget.

@JonB , I've tried modifying the styleSheet property in Qt Creator and I've only managed to change the background colour of the pane, not the tab.

[Edit] @JoeCFD , @JonB , success, thank you, I went back into Qt Creator, selected the QTabWidget and have set the styleSheet property for the tab widget to:

QTabBar::tab::selected, QTabBar::tab::hover {background-color:#ff0000;}

SPlatten

@JoeCFD , @JonB , unfortunately the requirement has now changed....each tab contains other controls. If any of the controls contain in the tab panels are in a specific fault state then the requirement is to make the tab background red to reflect this, so the user is highlighted that the content of the tab are in the fault state.

How can I do this so that multiple tabs may be in the fault (red background) state?

J.Hilk

@SPlatten you can try it via custom dynamic properties and stylesheets

I'm not sure how much of that is already supported in Qt4, you'll have to find out :D

SPlatten

@J-Hilk , how would this work? I've tried various styles in Qt Creator but I can't managed to get the tab background colour changed, keep in mind that there could be several tabs with a different background colour.

J.Hilk

@SPlatten

admittedly one has no direct access to the "Tab" but we can cheat/abuse already existing functions:

for example:

 QTabBar::tab [whatsThis="aTabWithErrors"]{
     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;
 }

than:

ui->myTabwidget->tabBar()->setTabWhatsThis(0, "aTabWithErrors");

SPlatten

@J-Hilk , I don't understand the syntax of what you have posted, what is setTabWhatsThis ?

J.Hilk

@SPlatten its a function of QTabBar
https://doc.qt.io/qt-6/qtabbar.html#setTabWhatsThis

I checked its also part of the qt4 QTabBar class.

SPlatten

@J-Hilk , just tried this and getting:

error: `QTabBar* QTabWidget::tabBar() const' is protected

The line where this error occurs:

ui_->tab_widget->tabBar()->setTabWhatsThis((int)tabIndex, style);

SPlatten

@JoeCFD , @J-Hilk , looking at: https://www.w3schools.com/cssref/css_selectors.asp

Is there a syntax that would allow me to use something like:

QTabBar::tab[id*="c2_tab"] {
    background-color: #ff0000;
}

Where id is the objectName.

J.Hilk

@SPlatten well, I can't reproduce that, this compiles just fine:

 QApplication a(argc, argv);

    QTabWidget tabWidget;
    tabWidget.setStyleSheet("QTabBar::tab[whatsThis=\"aTabWithErrors\"]{"
                            "background-color: darkred;}");

    tabWidget.addTab(new QWidget(), "SomeTab");
    tabWidget.addTab(new QWidget(), "SomeOtherTab");
    tabWidget.show();

    auto tabbar = tabWidget.tabBar();
    tabbar->setTabWhatsThis(1,"aTabWithErrors");

    qDebug() << tabWidget.tabBar()->tabWhatsThis(0);
    qDebug() << tabWidget.tabBar()->tabWhatsThis(1);

    return a.exec();

but I do not get it to work. It works fine with a QPushButton, but not with the tab.

QPushButton btn;
    btn.setStyleSheet("QPushButton[whatsThis=\"aTabWithErrors\"]{background-color:darkred;}");
    btn.setWhatsThis("aTabWithErrors");
    btn.show();

J.Hilk

@SPlatten said in QTabWidget, setting colour of tab itself ?:

Where id is the objectName.

that works too, if you can get access to the tab, to set the objectname ? I'm not sure it has one by default.

JonB

@J-Hilk said in QTabWidget, setting colour of tab itself ?:

@SPlatten well, I can't reproduce that, this compiles just fine:

auto tabbar = tabWidget.tabBar();

At Qt 5 this is fine. But at Qt4 (which is what the OP is using) the only doc reference I can find now Googling is https://het.as.utexas.edu/HET/Software/html/qtabwidget.html#tabBar, and that has

QTabBar * QTabWidget::tabBar () const [protected]

So at Qt4 it was protected..., per the OP's error message! So @SPlatten if you want/need to use the code you have been shown as-is, looks like you will need to subclass QTabWidget so as to gain access to QTabWidget::tabBar(). (Or maybe tabWidget->findChild<QTabBar *>() would work for you to avoid subclassing.)