Stylizing QTabWidget
-
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.pngMy 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 identifierBoth 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.pngThank you ;)
-
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. -
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);
}
@ -
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);
}@ -
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 -
It would be helpful to add a field "tabBarName:" in the Object editor interface when a QTabWidget is selected..
-
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
-
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
-
Thanks NicuPopescu
I just added this line after setupUI and my style are working -
you welcome! :)