[Mod] Extensions in left pane and auto hide address bar/show on hover



  • For users who prefer to use Vivaldi with the address bar hidden and are unable to use extensions because of this. With this mod, the list of extensions will appear in the left panel and can be accessed from there.

    To work, the address bar need to be showing on Settings.

    The address bar is hidden by the mod and will show up on bottom when you hover the bottom bar.

    Extension opened from left pane:

    ebe27f1f-b8bc-4bd3-b7f5-41e4c255b79d-image.png

    Address bar at bottom, showing on bottom bar hover

    bc7cb6d7-cfa7-4ef5-bba5-565920998f9a-image.png

    You'll need to add a CSS and JS files.

    custom.css

    /* list extensions toolbar icons in vertical */ 
    .toolbar-extensions {
        flex-direction: column;
    }
    
    /* make extension popup visible on left pane */
    #switch {
        contain: size;
    }
    
    /* position extension popup */
    .extension-popup {
        left: 34px !important;
        top: 15% !important;
        box-shadow: 0px 0px 10px 2px #00000075;
    }
    
    /* remove top arrow from extension popup */
    .extension-popup:before, .extension-popup:after {
        display: none !important;
    }
    
    /* put address bar on bottom and hide */
    .toolbar-addressbar {
        order: 2;
        transition: transform .2s;
        position: fixed;
        bottom: 22px;
        width: 100%;
        transform: translate3d(0, 50px, 0);
    }
    
    /* reveal on hover */
    .toolbar-addressbar.show-addressbar, .toolbar-addressbar:hover {
    transform: translate3d(0, 0, 0);
    }
    
    

    custom.js

    setTimeout(function wait() {
        const browser = document.getElementById('browser');
        if (browser) {
            const toolbarExtensions = document.querySelector('.toolbar-extensions');
            const addressbar = document.querySelector('.toolbar-addressbar');
            const statusbar = document.querySelector('.toolbar-statusbar');
    
            document.querySelector('.addwebpanel-wrapper').prepend(toolbarExtensions);
    
            statusbar.addEventListener('mouseover', () => {
              addressbar.classList.add('show-addressbar');
            });
    
            statusbar.addEventListener('mouseout', () => {
              addressbar.classList.remove('show-addressbar');
            });
        }
        else {
            setTimeout(wait, 300);
        }
    }, 300);
    

Log in to reply
 

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