[SOLVED] QTabWidget Pane - style question



  • Hi guys,

    I swear this is my last post on style, I'm starting to get the hang of it ;)

    I want to achieve this :
    https://www.dropbox.com/s/wl7rj8eatk5n9tn/now.png
    Without the pane up-border where the tab is selected

    The best I could achieve is removing the up-border pane completly :
    https://www.dropbox.com/s/blym9ug65pn4gg0/todo.png

    Anyone knows how to achieve the desired result? Merci!

    My stylesheet :
    @/* ------------------------------------ tab Workout -----------------------------------/
    #tabWidget_workout::pane { /
    The tab widget frame */
    border-top: 3px solid rgb(7, 1, 98);
    border-left: 3px solid rgb(7, 1, 98);
    border-right: 3px solid rgb(7, 1, 98);
    border-bottom: 3px solid rgb(7, 1, 98);

    }
    #tabWidget_workout::tab-bar {
    left: 5px; /* move to the right by 5px /
    }
    #tabBarWorkout::tab {
    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 rgb(7, 1, 98);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    min-width: 8ex;
    padding: 10px;
    }
    #tabBarWorkout::tab:!selected {
    /
    background : transparent; */
    }
    #tabBarWorkout::tab:hover {
    background-color: rgb(255, 255, 0);
    }
    #tabBarWorkout::tab:selected {
    background-color: rgb(255, 255, 255);
    border-bottom-color: rgb(255, 255, 255);
    }@



  • Hi,

    can you send me those pics by email? ... here I'm forbidden to reach dropbox

    :)



  • @#tabWidget::pane
    {
    border: 3px solid rgb(7, 1, 98);
    margin-top:-3px;
    }

    #tabBar::tab:!selected
    {
    border-bottom: 3px solid rgb(7, 1, 98);
    }

    #tabBar::tab:hover
    {
    background-color:rgba(0,0,255,100);
    }

    #tabBar::tab:selected
    {
    border-left: 3px solid rgb(7, 1, 98);
    border-top: 3px solid rgb(7, 1, 98);
    border-right: 3px solid rgb(7, 1, 98);
    border-bottom: 3px solid rgba(255,255,255); /your pane background/
    }@

    hope this is what you want! :)



  • You sir are a hero!

    negative margin I didn't think of that :)

    Here is the result with the code :
    https://www.dropbox.com/s/u4wwssejmnluu0v/result.png

    Mulțumiri!

    @/* -------------------- Tab Workout (Thanks to NicuPopescu) ---------------------*/
    #tabWidget_workout::pane
    {
    border: 3px solid rgb(7, 1, 98);
    margin-top:-3px;
    }

    #tabBarWorkout::tab {
    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 rgb(7, 1, 98);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 12px;
    }
    #tabBarWorkout::tab:!selected
    {
    border-bottom: 3px solid rgb(7, 1, 98);
    }

    #tabBarWorkout::tab:hover
    {
    background-color:rgba(0,0,255,100);
    }

    #tabBarWorkout::tab:selected
    {
    background: rgba(255,255,255); /your pane background/
    border-bottom: 3px solid rgba(255,255,255); /your pane background/
    }@



  • "One is glad to be of service"!

    :)


Log in to reply
 

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