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 style the top buttons...
QtWS25 Last Chance

QTabWidget style the top buttons...

Scheduled Pinned Locked Moved Unsolved General and Desktop
qtabwidgetqstyleqstylesheetcss
8 Posts 3 Posters 2.2k Views
  • 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.
  • D Offline
    D Offline
    Dariusz
    wrote on last edited by aha_1980
    #1

    Hey

    I'm losing my bananas... how can I remove the "white line" between "New Project" and content below?

    9d08f88d-c136-4abd-b8b3-cef509c9bb24-image.png

    TIA!

    Ketan__Patel__0011K 1 Reply Last reply
    0
    • D Offline
      D Offline
      Dariusz
      wrote on last edited by
      #2

      Bump any1? ^^

      1 Reply Last reply
      -1
      • Christian EhrlicherC Offline
        Christian EhrlicherC Offline
        Christian Ehrlicher
        Lifetime Qt Champion
        wrote on last edited by
        #3

        https://bugreports.qt.io/browse/QTBUG-68642 should be your issue afaics. But to few information.

        Qt Online Installer direct download: https://download.qt.io/official_releases/online_installers/
        Visit the Qt Academy at https://academy.qt.io/catalog

        1 Reply Last reply
        2
        • D Dariusz

          Hey

          I'm losing my bananas... how can I remove the "white line" between "New Project" and content below?

          9d08f88d-c136-4abd-b8b3-cef509c9bb24-image.png

          TIA!

          Ketan__Patel__0011K Offline
          Ketan__Patel__0011K Offline
          Ketan__Patel__0011
          wrote on last edited by
          #4

          @Dariusz

          Apply This StyleSheet for your tabwidget control

          QTabWidget
          {
          	background:<YOUR_COLOR_NAME>
          }
          
          QTabBar::tab:selected 
          {
              background:<YOUR_COLOR_NAME>
              color:<YOUR_COLOR_NAME>
          }
          
          QTabBar::tab:!selected 
          {
              background:<YOUR_COLOR_NAME>
          }
          
          QTabBar::tab:!selected:hover 
          {
              background:<YOUR_COLOR_NAME>
              color:<YOUR_COLOR_NAME>
          }
          

          Set your colors According to your theme or Design

          D 1 Reply Last reply
          0
          • Ketan__Patel__0011K Ketan__Patel__0011

            @Dariusz

            Apply This StyleSheet for your tabwidget control

            QTabWidget
            {
            	background:<YOUR_COLOR_NAME>
            }
            
            QTabBar::tab:selected 
            {
                background:<YOUR_COLOR_NAME>
                color:<YOUR_COLOR_NAME>
            }
            
            QTabBar::tab:!selected 
            {
                background:<YOUR_COLOR_NAME>
            }
            
            QTabBar::tab:!selected:hover 
            {
                background:<YOUR_COLOR_NAME>
                color:<YOUR_COLOR_NAME>
            }
            

            Set your colors According to your theme or Design

            D Offline
            D Offline
            Dariusz
            wrote on last edited by Dariusz
            #5

            @Ketan__Patel__0011 said in QTabWidget style the top buttons...:

            @Dariusz

            Apply This StyleSheet for your tabwidget control

            Set your colors According to your theme or Design

            Hey, thanks for the pign! it seems its tab:!selected that is affecting it. but as long as I make lets say...

            QTabBar::tab:!selected
            {
                background:rgb(55,55,55);
            }
            

            I lose all existing settings of the tab and it turns in to >52440abf-f11d-4cd2-baf8-d13223e9fcac-image.png

            Any way of preserving it? Or maybe... where can I find "FUSION" template of style as thats the one I'm starting with.

            With this code I get this >

            QTabBar::tab:!selected
            {
                background:rgb(55,55,55);
                border-radius: 8px 8px 0px 0px;
                padding: 6px 10px 10px 10px;
                margin: 10px 10px 10px 10px;
            }
            
            QTabBar::tab:!selected:hover
            {
                background:rgb(80,80,80);
                border-radius: 8px 8px 0px 0px;
            }
            

            46c35958-3b92-4b9d-b84a-d4fbba445da0-image.png

            Its like button shadow or something like that o.o

            Ketan__Patel__0011K 1 Reply Last reply
            0
            • D Offline
              D Offline
              Dariusz
              wrote on last edited by Dariusz
              #6

              Welp this got me somehow closer...

              
              QTabBar::tab:!selected
              {
              
              
                  background:rgb(75,75,75);
              
              
                  border: 2px solid rgb(85,85,85);
                  /*
                  border-top-color: rgb(200,200,10);
                  border-bottom-color: rgb(10,200,10);
                  border-left-color: rgb(10,10,100);
                  border-right-color: rgb(10,10,50);
                  border-top-style: dotted;
                  border-bottom-style: dotted;
                  border-left-style: dotted;
                  border-right-style: dotted;
                  */
                  border-bottom-style: none;
              
                  border-top-left-radius:     4px;
                  border-top-right-radius:    4px;
                  border-bottom-right-radius: 0px;
                  border-bottom-left-radius:  0px;
                  padding: 6px 10px 4px 10px;
                  margin: 4px 0px 0px 0px;
              
              }
              
              
              QTabBar::tab:!selected:hover
              {
                  background:rgb(100,100,100);
              
              
                  border: 2px solid rgb(120,120,120);
                  /*
                  border-top-color: rgb(200,200,10);
                  border-bottom-color: rgb(10,200,10);
                  border-left-color: rgb(10,10,100);
                  border-right-color: rgb(10,10,50);
                  border-top-style: dotted;
                  border-bottom-style: dotted;
                  border-left-style: dotted;
                  border-right-style: dotted;
                  */
                  border-bottom-style: none;
              
                  border-top-left-radius:     4px;
                  border-top-right-radius:    4px;
                  border-bottom-right-radius: 0px;
                  border-bottom-left-radius:  0px;
                  padding: 6px 10px 4px 10px;
                  margin: 4px 0px 0px 0px;
              }
              

              0531d289-694f-464b-93b4-88260711a4fd-image.png
              But I don't know how to make that double border black&light color that the selected tab has o.o

              I wonder how is that fusion made, all buttons have that nice "grad" to them >
              ad1a6fd1-759e-4042-a32e-5f74dbc0b1f1-image.png
              Any hints?

              1 Reply Last reply
              0
              • D Dariusz

                @Ketan__Patel__0011 said in QTabWidget style the top buttons...:

                @Dariusz

                Apply This StyleSheet for your tabwidget control

                Set your colors According to your theme or Design

                Hey, thanks for the pign! it seems its tab:!selected that is affecting it. but as long as I make lets say...

                QTabBar::tab:!selected
                {
                    background:rgb(55,55,55);
                }
                

                I lose all existing settings of the tab and it turns in to >52440abf-f11d-4cd2-baf8-d13223e9fcac-image.png

                Any way of preserving it? Or maybe... where can I find "FUSION" template of style as thats the one I'm starting with.

                With this code I get this >

                QTabBar::tab:!selected
                {
                    background:rgb(55,55,55);
                    border-radius: 8px 8px 0px 0px;
                    padding: 6px 10px 10px 10px;
                    margin: 10px 10px 10px 10px;
                }
                
                QTabBar::tab:!selected:hover
                {
                    background:rgb(80,80,80);
                    border-radius: 8px 8px 0px 0px;
                }
                

                46c35958-3b92-4b9d-b84a-d4fbba445da0-image.png

                Its like button shadow or something like that o.o

                Ketan__Patel__0011K Offline
                Ketan__Patel__0011K Offline
                Ketan__Patel__0011
                wrote on last edited by
                #7

                @Dariusz said in QTabWidget style the top buttons...:

                FUSION

                If you want to set "FUSION" Style for your application

                add this line in your main function

                qApp->setStyle(QStyleFactory::create("Fusion"));
                
                D 1 Reply Last reply
                0
                • Ketan__Patel__0011K Ketan__Patel__0011

                  @Dariusz said in QTabWidget style the top buttons...:

                  FUSION

                  If you want to set "FUSION" Style for your application

                  add this line in your main function

                  qApp->setStyle(QStyleFactory::create("Fusion"));
                  
                  D Offline
                  D Offline
                  Dariusz
                  wrote on last edited by
                  #8

                  @Ketan__Patel__0011 said in QTabWidget style the top buttons...:

                  @Dariusz said in QTabWidget style the top buttons...:

                  FUSION

                  If you want to set "FUSION" Style for your application

                  add this line in your main function

                  qApp->setStyle(QStyleFactory::create("Fusion"));
                  

                  Hey
                  Yeah that's the style im using. I'm trying to reproduce in css the button style now with black outline, then the white "ping" of border and gradient background.

                  Are there any more style presets I can download? I know there is also windows/windowvista ones but... more ?
                  There seem to be a large preset/plugin system build for styles but I dont see any on web available for use... mhmm ?

                  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