Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. QTabWidget, setting colour of tab itself ?
Forum Updated to NodeBB v4.3 + New Features

QTabWidget, setting colour of tab itself ?

Scheduled Pinned Locked Moved Solved General and Desktop
114 Posts 4 Posters 60.0k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • JoeCFDJ JoeCFD

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

    SPlattenS Offline
    SPlattenS Offline
    SPlatten
    wrote on last edited by
    #3

    @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.

    JonBJ 1 Reply Last reply
    0
    • SPlattenS 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.

      JonBJ Online
      JonBJ Online
      JonB
      wrote on last edited by JonB
      #4

      @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?

      SPlattenS 1 Reply Last reply
      0
      • JonBJ 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?

        SPlattenS Offline
        SPlattenS Offline
        SPlatten
        wrote on last edited by
        #5

        @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.

        JonBJ 1 Reply Last reply
        0
        • SPlattenS 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.

          JonBJ Online
          JonBJ Online
          JonB
          wrote on last edited by JonB
          #6

          @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.

          SPlattenS 1 Reply Last reply
          0
          • JonBJ 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.

            SPlattenS Offline
            SPlattenS Offline
            SPlatten
            wrote on last edited by
            #7

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

            1 Reply Last reply
            0
            • JoeCFDJ Offline
              JoeCFDJ Offline
              JoeCFD
              wrote on last edited by
              #8

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

              SPlattenS 1 Reply Last reply
              2
              • JoeCFDJ 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 );

                SPlattenS Offline
                SPlattenS Offline
                SPlatten
                wrote on last edited by SPlatten
                #9

                @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;}
                
                1 Reply Last reply
                0
                • SPlattenS Offline
                  SPlattenS Offline
                  SPlatten
                  wrote on last edited by
                  #10

                  @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.HilkJ JoeCFDJ 2 Replies Last reply
                  0
                  • SPlattenS 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.HilkJ Offline
                    J.HilkJ Offline
                    J.Hilk
                    Moderators
                    wrote on last edited by
                    #11

                    @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


                    Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                    Q: What's that?
                    A: It's blue light.
                    Q: What does it do?
                    A: It turns blue.

                    SPlattenS 1 Reply Last reply
                    0
                    • J.HilkJ 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

                      SPlattenS Offline
                      SPlattenS Offline
                      SPlatten
                      wrote on last edited by
                      #12

                      @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.HilkJ 1 Reply Last reply
                      0
                      • SPlattenS 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.HilkJ Offline
                        J.HilkJ Offline
                        J.Hilk
                        Moderators
                        wrote on last edited by
                        #13

                        @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");
                        

                        Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                        Q: What's that?
                        A: It's blue light.
                        Q: What does it do?
                        A: It turns blue.

                        SPlattenS 1 Reply Last reply
                        0
                        • J.HilkJ 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");
                          
                          SPlattenS Offline
                          SPlattenS Offline
                          SPlatten
                          wrote on last edited by
                          #14

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

                          J.HilkJ 1 Reply Last reply
                          0
                          • SPlattenS SPlatten

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

                            J.HilkJ Offline
                            J.HilkJ Offline
                            J.Hilk
                            Moderators
                            wrote on last edited by
                            #15

                            @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.


                            Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                            Q: What's that?
                            A: It's blue light.
                            Q: What does it do?
                            A: It turns blue.

                            SPlattenS 2 Replies Last reply
                            1
                            • J.HilkJ 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.

                              SPlattenS Offline
                              SPlattenS Offline
                              SPlatten
                              wrote on last edited by SPlatten
                              #16

                              @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);
                              
                              J.HilkJ 1 Reply Last reply
                              0
                              • J.HilkJ 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.

                                SPlattenS Offline
                                SPlattenS Offline
                                SPlatten
                                wrote on last edited by SPlatten
                                #17

                                @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.HilkJ 1 Reply Last reply
                                0
                                • SPlattenS 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);
                                  
                                  J.HilkJ Offline
                                  J.HilkJ Offline
                                  J.Hilk
                                  Moderators
                                  wrote on last edited by
                                  #18

                                  @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();
                                  

                                  Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                                  Q: What's that?
                                  A: It's blue light.
                                  Q: What does it do?
                                  A: It turns blue.

                                  JonBJ 1 Reply Last reply
                                  0
                                  • SPlattenS 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.HilkJ Offline
                                    J.HilkJ Offline
                                    J.Hilk
                                    Moderators
                                    wrote on last edited by
                                    #19

                                    @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.


                                    Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                                    Q: What's that?
                                    A: It's blue light.
                                    Q: What does it do?
                                    A: It turns blue.

                                    1 Reply Last reply
                                    0
                                    • J.HilkJ 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();
                                      
                                      JonBJ Online
                                      JonBJ Online
                                      JonB
                                      wrote on last edited by JonB
                                      #20

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

                                      SPlattenS 1 Reply Last reply
                                      1
                                      • JonBJ 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.)

                                        SPlattenS Offline
                                        SPlattenS Offline
                                        SPlatten
                                        wrote on last edited by
                                        #21
                                        This post is deleted!
                                        1 Reply Last reply
                                        0
                                        • SPlattenS 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?

                                          JoeCFDJ Offline
                                          JoeCFDJ Offline
                                          JoeCFD
                                          wrote on last edited by JoeCFD
                                          #22

                                          @SPlatten Ideally it may be better to flash a tiny icon on the tab. For this you may need to customize your tab and it can take long for you make it. You can simply check the source code of qtabwidget and qtabbar and borrow some. But sure you can reset the tab color with style sheet like
                                          warning: yellow; fatal: red.

                                          SPlattenS 1 Reply Last reply
                                          0

                                          • Login

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Categories
                                          • Recent
                                          • Tags
                                          • Popular
                                          • Users
                                          • Groups
                                          • Search
                                          • Get Qt Extensions
                                          • Unsolved