Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QTabWidget style the top buttons...



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



  • Bump any1? ^^


  • Lifetime Qt Champion

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



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



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



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



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


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