Stylesheets: Different background colors inside QTabBar



  • Hello everyone,

    I have a QTabBar and I want to know if the following is possible:
    I rounded the corners of the tabs, using:

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    Now that the corners are round, behind them appears the background color of the QTabWidget. I would however prefer to see the background color of the parent element. Is that possible?

    Cheers
    Alex


  • Moderators

    @Alex
    try QTabBar { background: transparent; }



  • Unfortunately this didn't change anything. My stylesheets look like this:

    1. QMainWindow has
    QMainWindow {
    background: rgb(227,235,255);
    border: 2px solid rgb(0, 0, 0);
    }
    
    
    QTabBar::tab {
    background: rgb(200,210,235);
    border: 2px solid rgb(160, 170, 220);
    min-width: 64px;
    padding: 4px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    
    }
    
    QTabBar { background: transparent; }
    
    QTabWidget::pane {
    border: 2px solid rgb(160, 170, 220);
    }
    
    
    QTabBar::tab:selected, QTabBar::tab:hover {
    	background: rgb(227,235,255)
    }
    
    1. QTabWidget has
    QWidget {
    background: rgb(200,210,235);
    }
    

  • Moderators

    @Alex said in Stylesheets: Different background colors inside QTabBar:

    QTabBar::tab {
    background: rgb(200,210,235);
    border: 2px solid rgb(160, 170, 220);
    min-width: 64px;
    padding: 4px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    }

    QTabBar { background: transparent; }

    These 2 definitions do what you intend to do. That's also what the docs say.
    I tried it with Qt 4.8 on Windows.



  • Oh, I get it now! I should've put the "QTabBar { background: transparent; }" into the QTabWidget's stylesheet. Thanks!


Log in to reply
 

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