Stylizing QTabWidget

[maximus]

Hi,

I'm doing some stylesheet on my QTabWidget
I have 2 QtabWidget that I need to stylize.
Here is my current interface :
https://www.dropbox.com/s/4owk414cmwdnhgk/interface2.png

My problem:
The QTabWidget bar on the left is stylized properly with the stylesheet below (specified in MainWindow)
But for some reason, I cannot stylize the other QTabWidget (the one north) with his identifier

Both tabBar name have been set in MainWindow.cpp
@ ui->tabWidget_menu->tabBar()->setObjectName("tabBarMenu");
ui->tabWidget_workout->tabBar()->setObjectName("tabBarW");@

@/* left QTabWidget menu*/
QTabBar#tabBarMenu::tab:!selected {
background : transparent;
}
QTabBar#tabBarMenu::tab:hover {
background-color: rgb(0, 0, 162);
}
QTabBar#tabBarMenu::tab:selected {
background-color: rgb(255, 255, 255);
}

/* tab Workout (THIS ONE DOESNT WORK, WHY? */
QTabBar#tabBarW::tab:!selected {
background : transparent;
}
QTabBar#tabBarW::tab:hover {
background-color: rgb(0, 0, 162);
}
QTabBar#tabBarW::tab:selected {
background-color: rgb(255, 255, 255);
}

@

Here is my object structure in case it helps.
https://www.dropbox.com/s/7638qdq8onpjbj7/designerStruc.png

Thank you ;)

[Jeroentjehome]

Hi,
It probably has to do with the fact that when setting the stylesheet of a widget all child widgets that are of the same type inherit the stylesheet automatic. So TabWidgetMenu will set the stylesheet for your TabWidgetWorkout.

[maximus]

Thanks for your input.

That is what I thought, I tried removing the style section covering TabWidgetMenu, even then, the stylesheet is not applied to my other tab. The only way I was able to apply a style to this Tab, is to not specify a #name in the stylesheet, but then I get the same style for all my TabWidget.

I found a workaround, I set all TabBar to a specific style first, then I overwrite the menu TabBar

#1
@/* tab Workout WORKS!*/
QTabBar::tab:!selected {
background : transparent;
}
QTabBar::tab:hover {
background-color: rgb(0, 0, 162);
}
QTabBar::tab:selected {
background-color: rgb(255, 255, 255);
}@

#2
@/* tab Workout NOT WORKING*/
QTabBar#tabBarW::tab:!selected {
background : transparent;
}
QTabBar#tabBarW::tab:hover {
background-color: rgb(0, 0, 162);
}
QTabBar#tabBarW::tab:selected {
background-color: rgb(255, 255, 255);
}@

#3
@/* tab Workout Workaround (specify it first)*/
QTabBar::tab:!selected {
background : transparent;
}
QTabBar::tab:hover {

background-color: rgb(255, 255, 0);
}
QTabBar::tab:selected {
background-color: rgb(255, 255, 255);
}

/* left menu*/
QTabBar#tabBarMenu::tab:!selected {
background : transparent;
}
QTabBar#tabBarMenu::tab:hover {
background-color: rgb(0, 0, 162);
}
QTabBar#tabBarMenu::tab:selected {
background-color: rgb(255, 255, 255);
}
@

[NicuPopescu]

for a general case:

@QTabBar *tabBar = ui->tabWidget->findChild<QTabBar *>(QLatin1String("qt_tabwidget_tabbar"));

QTabBar *tabBar2 = ui->tabWidget2->findChild<QTabBar *>(QLatin1String("qt_tabwidget_tabbar"));

tabBar->setObjectName("tabBar");
tabBar2->setObjectName("tabBar2");

tabBar->setStyleSheet(data);
tabBar2->setStyleSheet(data);@

and in css file use just widget id selector:

@/* left menu*/
#tabBar::tab:!selected
{
background : transparent;
}

#tabBar::tab:hover
{
background-color: rgb(0, 0, 162);
}

#tabBar::tab:selected
{
background-color: rgb(255, 255, 255);
}@

[maximus]

I suspect it has to do with the #name of the TabBar not found when trying to apply the style.
Is the style applied during setupUI? because I have set my style in MainWindow (with Designer)

Weird that it works for tabBarMenu but not tabBarW

@ ui->setupUi(this);
ui->tabWidget_menu->tabBar()->setObjectName("tabBarMenu");
ui->tabWidget_workout->tabBar()->setObjectName("tabBarW");
ui->tabWidget_profile->tabBar()->setObjectName("tabBarProfile");@

Edit : I already set the name for the tabBar with
ui->tabWidget_workout->tabBar()->setObjectName("tabBarW");
Even when printing it, the name is set :
@ QTabBar *tabBar2 = ui->tabWidget_workout->tabBar();
qDebug () << "NAME TABBAR : " << tabBar2->objectName();@

After that, I cannot use #tabBarW
This tabBar is inside another QTabWidget so I think there's a problem with nested widget here

[maximus]

It would be helpful to add a field "tabBarName:" in the Object editor interface when a QTabWidget is selected..

[maximus]

Okay I fixed it with trial and error

@ ui->setupUi(this);
ui->tabWidget_menu->tabBar()->setObjectName("tabBarMenu");
ui->tabWidget_workout->tabBar()->setObjectName("tabBarW");
ui->tabWidget_profile->tabBar()->setObjectName("tabBarProfile");@

Adding this line of code fix it :

*ui->tabWidget_workout->tabBar()->setStyleSheet("");*

Now all tag with #tabBarW in my stylesheet are applied, definitely a bug

[NicuPopescu]

bq. Is the style applied during setupUI? because I have set my style in MainWindow (with Designer)

yes ... check the generated header file

perhaps calling later for mainwindow

@setStyleSheet(styleSheet());@

will take into account the object name for tab bars

[maximus]

Thanks NicuPopescu
I just added this line after setupUI and my style are working

[NicuPopescu]

you welcome! :)