Tabs On Bottom For 1.8



  • Tabs Below Address Bar for 2.0

    #tabs-container.bottom {
        order: -1;
        border-top: none;
        padding-top: var(--padding);
        padding-bottom: 0px !important;
    }
    
    /* bookmarks bar above tabs */
    /*
    .bookmark-bar {
        order: -2;
    }
    */
    
    .toolbar.toolbar-addressbar {
        order: -3;
    }
    
    /* corner rounding */
    .tabs-bottom .tab-position .tab {
        border-top-left-radius: var(--radiusHalf);
        border-top-right-radius: var(--radiusHalf);
        border-bottom-left-radius: unset;
        border-bottom-right-radius: unset;
    }
    
    /* tab group indicators*/
    .tabs-bottom .tab-strip .tab-group-indicator {
        bottom: 28px !important;
    }; 
    

    CSS only. Please remember that you still need to set tab position to bottom in Vivaldi settings for this mod to work at all.



  • @luetage

    @luetage said in Tabs On Bottom For 1.8:

    #tabs-container.bottom {
    order: -1;
    border-top: none;
    padding-top: var(--padding);
    padding-bottom: 0px !important;
    }

    /* bookmarks bar above tabs /
    /

    .bookmark-bar {
    order: -2;
    }
    */

    .toolbar.toolbar-addressbar {
    order: -3;
    }

    /* corner rounding */
    .tabs-bottom .tab-position .tab {
    border-top-left-radius: var(--radiusHalf);
    border-top-right-radius: var(--radiusHalf);
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
    }

    /* tab group indicators*/
    .tabs-bottom .tab-strip .tab-group-indicator {
    bottom: 28px !important;
    };

    Thanks a lot it worked perfectly 😃

    edit: wondering if theres a way to hide the line between the address bar and the tab bar 0_1538426534716_vivaldi2.PNG


  • Moderator

    @eilegz said in Tabs On Bottom For 1.8:

    edit: wondering if theres a way to hide the line between the address bar and the tab bar !

    Try this:

    .address-top .toolbar-addressbar:after { background-color: transparent !important; }
    

    I haven't checked if it works with this mod, I just took it from here. If it doesn't work, let me know.



  • @pafflick said in Tabs On Bottom For 1.8:

    @eilegz said in Tabs On Bottom For 1.8:

    edit: wondering if theres a way to hide the line between the address bar and the tab bar !

    Try this:

    .address-top .toolbar-addressbar:after { background-color: transparent !important; }
    

    I haven't checked if it works with this mod, I just took it from here. If it doesn't work, let me know.

    based on the one you put didnt work but im added the border bottom and now it works, THANKS 😃

    .bookmark-bar-top .bookmark-bar { border-bottom-width: 0 !important; }
    .address-top .toolbar-addressbar:after { 
    
    background-color: transparent !important;
    border-bottom-width: 0 !important;  }
    

  • Moderator

    @eilegz Are you sure about that? I've just checked and the .toolbar-addressbar:after pseudo-element doesn't have any border and thus adding border-bottom-width attribute shouldn't actually change anything. Or perhaps the border was coming from the .bookmark-bar? 🤔
    That is strange to me, nevertheless, I'm glad that you achieved what you wanted.



  • tried few variants but all have some flaws.. so did anybody succeed in putting address bar above tabs with drop-down menus appearing above everything?(not covered by tabs/appearing below them)

    now i have this: 0_1552215760745_2019-03-10_145549.png
    i'd wish it to become this: 0_1552215844089_2019-03-10_1455492.png
    or at least this: 0_1552215977648_2019-03-10_1455493.png


 

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