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. Styling tab background in QTabWidget
Forum Updated to NodeBB v4.3 + New Features

Styling tab background in QTabWidget

Scheduled Pinned Locked Moved General and Desktop
23 Posts 2 Posters 14.6k 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.
  • M Offline
    M Offline
    mbnoimi
    wrote on last edited by
    #1

    As you can see in this screenshot I styled QTabWidget but I couldn't set tab's background to transparent although I used:

    [code]QTabWidget#tabWidget_sidebar {
    background-color: rgba(255, 255, 255, 0);
    }[/code]

    How can I fix this issue?

    !http://img692.imageshack.us/img692/3221/yexf.png(QTabWidget stylesheet)!

    The complete QSS of QTabWidget:
    [code]QMainWindow#MainWindow {
    background-image: url(:/theme/bg.jpg);
    }

    QWidget#centralWidget {
    background-color: rgba(255, 255, 255, 0);
    }
    /**************** SIDE BAR ****************/
    QTabWidget#tabWidget_sidebar {
    background-color: rgba(255, 255, 255, 0);
    }

    QTabWidget#tabWidget_sidebar::tab-bar {
    alignment: center;
    }

    QTabWidget#tabWidget_sidebar::pane {
    background-color: rgb(255, 255, 255, 0);
    }

    QTabBar::tab {
    background-color: rgb(0, 0, 0, 0);
    padding: 2px;
    border: 2px;
    text-align: center;
    height: 64px;
    width: 64px;
    }

    QTabBar::tab:selected {
    background-color: rgba(255, 255, 255, 100);
    }

    QTabBar::tab:hover {
    background-color: rgba(255, 255, 255, 150);
    }
    [/code]

    1 Reply Last reply
    0
    • SGaistS Offline
      SGaistS Offline
      SGaist
      Lifetime Qt Champion
      wrote on last edited by
      #2

      Hi,

      Did you also

      @widget->setAttribute(Qt::WA_TranslucentBackground);@

      ?

      Interested in AI ? www.idiap.ch
      Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

      1 Reply Last reply
      0
      • M Offline
        M Offline
        mbnoimi
        wrote on last edited by
        #3

        [quote]Did you also

        widget->setAttribute(Qt::WA_TranslucentBackground);[/quote]
        

        Didn't work!

        1 Reply Last reply
        0
        • M Offline
          M Offline
          mbnoimi
          wrote on last edited by
          #4

          Any suggest guys?

          P.S. I prefer stylesheet solution.

          1 Reply Last reply
          0
          • M Offline
            M Offline
            mbnoimi
            wrote on last edited by
            #5

            Guys I read ton of pages about this issue and I got nothing, so I'm really desperate and your help is really appreciated.

            1 Reply Last reply
            0
            • SGaistS Offline
              SGaistS Offline
              SGaist
              Lifetime Qt Champion
              wrote on last edited by
              #6

              Is your QTabWidget contained in another widget ? And what do you expect to see through it (i.e. desktop, other program window etc...) ?

              Interested in AI ? www.idiap.ch
              Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

              1 Reply Last reply
              0
              • M Offline
                M Offline
                mbnoimi
                wrote on last edited by
                #7

                [quote]Is your QTabWidget contained in another widget ?[/quote]
                It contained in MainWindow directly.

                [quote]And what do you expect to see through it (i.e. desktop, other program window etc…) ?[/quote]
                As shown in the screenshot I expect to see transparent tab (see the wood instead of gray color)

                1 Reply Last reply
                0
                • SGaistS Offline
                  SGaistS Offline
                  SGaist
                  Lifetime Qt Champion
                  wrote on last edited by
                  #8

                  Then try this:

                  @
                  QStackedWidget *stack = tabWidget->findChild<QStackedWidget *>();
                  stack->setStyleSheet("background-color: rgba(255, 255, 255, 0)");
                  @

                  Interested in AI ? www.idiap.ch
                  Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

                  1 Reply Last reply
                  0
                  • M Offline
                    M Offline
                    mbnoimi
                    wrote on last edited by
                    #9

                    It make all tabs appears white instead of transparent!

                    1 Reply Last reply
                    0
                    • M Offline
                      M Offline
                      mbnoimi
                      wrote on last edited by
                      #10

                      BTW, I tried to use this but I got same result (white tabs's background)!

                      [code]stack->setStyleSheet("background-color: rgba(0, 0, 0, 0)");[/code]

                      1 Reply Last reply
                      0
                      • SGaistS Offline
                        SGaistS Offline
                        SGaist
                        Lifetime Qt Champion
                        wrote on last edited by
                        #11

                        add

                        @stack->setAttribute(Qt::WA_TranslucentBackground);@

                        Interested in AI ? www.idiap.ch
                        Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

                        1 Reply Last reply
                        0
                        • M Offline
                          M Offline
                          mbnoimi
                          wrote on last edited by
                          #12

                          [quote author="SGaist" date="1378068949"]add

                          @stack->setAttribute(Qt::WA_TranslucentBackground);@[/quote]

                          Didn't fix the issue :(

                          1 Reply Last reply
                          0
                          • M Offline
                            M Offline
                            mbnoimi
                            wrote on last edited by
                            #13

                            I created a repository contains on demo application for testing QTabWidget stylesheet and I added you as a moderator: https://github.com/mbnoimi/test

                            May you please see what's going on?

                            1 Reply Last reply
                            0
                            • SGaistS Offline
                              SGaistS Offline
                              SGaist
                              Lifetime Qt Champion
                              wrote on last edited by
                              #14

                              Your example is missing the stylesheet/background/icons to reproduce what you show in your first post.

                              Interested in AI ? www.idiap.ch
                              Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

                              1 Reply Last reply
                              0
                              • M Offline
                                M Offline
                                mbnoimi
                                wrote on last edited by
                                #15

                                [quote author="SGaist" date="1378155444"]Your example is missing the stylesheet/background/icons to reproduce what you show in your first post.[/quote]

                                It doesn't missing anything. I created very simple project so may you please run the project to test your suggestions.

                                1 Reply Last reply
                                0
                                • SGaistS Offline
                                  SGaistS Offline
                                  SGaist
                                  Lifetime Qt Champion
                                  wrote on last edited by
                                  #16

                                  If you'd like me to test anything related to your widget styling problem, I'll need a complete example with the style sheet your are using and the necessary elements for it (i.e. the background / icons)

                                  Interested in AI ? www.idiap.ch
                                  Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

                                  1 Reply Last reply
                                  0
                                  • M Offline
                                    M Offline
                                    mbnoimi
                                    wrote on last edited by
                                    #17

                                    [quote author="SGaist" date="1378157197"]If you'd like me to test anything related to your widget styling problem, I'll need a complete example with the style sheet your are using and the necessary elements for it (i.e. the background / icons)[/quote]

                                    OK; I updated a new version with resources (modified the screenshot)

                                    1 Reply Last reply
                                    0
                                    • M Offline
                                      M Offline
                                      mbnoimi
                                      wrote on last edited by
                                      #18

                                      !http://img692.imageshack.us/img692/3221/yexf.png(screenshot)!

                                      1 Reply Last reply
                                      0
                                      • SGaistS Offline
                                        SGaistS Offline
                                        SGaist
                                        Lifetime Qt Champion
                                        wrote on last edited by
                                        #19

                                        Then... The first question that should have been asked: What version of Qt/OS are you using ?

                                        Interested in AI ? www.idiap.ch
                                        Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

                                        1 Reply Last reply
                                        0
                                        • M Offline
                                          M Offline
                                          mbnoimi
                                          wrote on last edited by
                                          #20

                                          [quote author="SGaist" date="1378217522"]Then... The first question that should have been asked: What version of Qt/OS are you using ?[/quote]

                                          Qt 5.1.1
                                          Mint KDE 15 + Windows 7

                                          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