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.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 ;)



  • 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! :)


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.