(Solved) Move Vivaldi Button on Main Toolbar [Left|Right]



  • Go To Fixed version: Left | Right 😉

    Tnx again Luetage ^^ :


    The code is for test only, may cause self-combustion.

    There is an old mod which still work but I feel is became over complicated over the time (js is untouched since 1.4 or even before).

    [JS] Move the button (top left)

    setTimeout(function wait() {
        var vivbtn = document.querySelector(".vivaldi");
        var toolbar = document.querySelector(".toolbar-addressbar.toolbar");
        if (toolbar != null) {
            toolbar.appendChild(vivbtn);
        }
        else {
            setTimeout(wait, 300);
        }
    }, 300);
    

    [CSS] Hide header, fix colors, positions and uses workaround not to break Windows Background Image.

    /* UI: HeaderLess Mod; NEED vbutton.js */
    #browser.native:not(.tabs-top) #header {display: none;} 
    #browser:not(.native) #header {display: block;} 
    #browser #main {background-color: var(--colorAccentBg);} 
    #browser #main .inner {background-color: var(--colorBg);} /*fixtabbar*/
    .address-top .toolbar-mainbar:after {display: none;} 
    .toolbar-addressbar {margin-left: 26px;}
    .native .vivaldi {transform: scale(1.4); margin-top: 3px; margin-left: -27px;}
    :not(.native) .vivaldi {transform: scale(1.2); margin-top: -2px; margin-left: -28px;}
    .native:not(.tabs-top) .burger-icon {margin-top: 6px;  margin-right: 1px;}
    
    /* Tabs: Manual point to background + "transparent" fix */
    #tabs-container.right, #tabs-container.left {
    	background-image: url("chrome://vivaldi-data/local-image/88407a27-63ce-4777-a600-76367ccf4eed");
    }
    .tab-position .tab .tab-header {background-color: rgba(0, 0, 0, 0.81);}
    .stacks-on.tabs-right .tab.tab-group .tab-group-indicator, 
    .stacks-on.tabs-left .tab.tab-group .tab-group-indicator,
    .tab-position .tab.active .tab-header {background-color: inherit;}
    

    Wondering if there is room for a better coded approach 🙂

    • Margins follow 2.11 and UI scale between 75-85% (Button may un-centered in 2.12)
    • (Your) background image path is found in developer tools.
    • Switching to horizontal menu will crash Vivaldi

    The problem is, I guess, the moved button is at same "level" of #browser or #main - while it should be an "element" of the toolbar (to avoid some css hacks which mess with the overall UI).



  • @Hadden89 said in Mod semplification?:

    The code is for test only, may cause self-combustion.

    There is an old mod which still work but I feel is became over complicated over the time (js is untouched since 1.4 or even before).

    [JS] Move the button (top left)

    setTimeout(function wait() {
        var vivbtn = document.querySelector(".vivaldi");
        var toolbar = document.querySelector(".toolbar-addressbar.toolbar");
        if (toolbar != null) {
            toolbar.appendChild(vivbtn);
        }
        else {
            setTimeout(wait, 300);
        }
    }, 300);
    

    where does this move the V button?



  • @Hadden89 Javascript looks suspiciously like my work, but I don't remember doing it, got a link to the original thread?



  • @luetage It's probably your own, but I could have mess with it.
    I think this was made in chat some years ago 🙂

    @skribb Top left.
    Without strange css hacks:
    vbutton_vanilla.PNG

    With strange css hacks:
    vbutton_mod.PNG

    (Screenshot are from latest snapshot where I didn't centered the button yet as I feel I'm still doing something wrong)



  • @Hadden89 Anyway, you shouldn't do this with a background image, but with an svg instead. This makes it possible to use theme colors.



  • @luetage I'm not using a background image for the button - just the regular icons (hamburger/v-icon) manually adapted with margin and transform for some tab positioning.
    The black area is part of the "window background image" which come from behind as I moved the toolbar to accomodate the button.
    The error came out when V updated where in the code the window background image is generated.



  • @luetage Oh, I found the first iteration of the mod. Dated 2/9/17

    On main profile (Snapshot 2.11 RC), of course, I keep the button (more or less)centered.

    vhamburger.PNG



  • I see what the problem is, the button just needs to be moved to the main bar. Do you want the css integrated in the js?



  • @luetage said in [Help] Mod semplification?:

    Do you want the css integrated in the js?

    Yes, thank you ^^



  • Try this:

    (function () {
    
    function style() {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.id = 'mvVivbtn';
        style.innerHTML = `.vivaldi {position: relative;}`;
        document.getElementsByTagName('head')[0].appendChild(style);
    };
    
    function mvVivbtn() {
            style();
            var btn = document.querySelector(".vivaldi");
            btn.setAttribute('tabindex', '-1');
            var bar = document.querySelector(".toolbar-addressbar");
            var div = document.createElement('div');
            div.classList.add('button-toolbar');
            bar.insertBefore(div, bar.firstChild);
            div.appendChild(btn);
        }
    
    setTimeout(function wait() {
        const browser = document.getElementById('browser');
        if (browser) {
              mvVivbtn();
        }
        else {
             setTimeout(wait, 300);
        }
    });
    
    })();
    


  • @luetage Tnx, now is better; I only kept few margins for fine tuning and probably removed the last bits of bad code in my css 🙂



  • @luetage that's absolutely fabulous. what would someone who isn't a JS/CSS novice do to get the V button to the right of the extension buttons? 😃 😃



  • @skribb Should work:

    (function () {
    
        function style() {
            const style = document.createElement('style');
            style.type = 'text/css';
            style.id = 'mvVivbtn';
            style.innerHTML = `.vivaldi {position: relative;}`;
            document.getElementsByTagName('head')[0].appendChild(style);
        };
    
        function mvVivbtn() {
            style();
            var btn = document.querySelector(".vivaldi");
            btn.setAttribute('tabindex', '-1');
            var bar = document.querySelector(".toolbar-addressbar");
            var div = document.createElement('div');
            div.classList.add('button-toolbar');
            bar.appendChild(div);
            div.appendChild(btn);
        }
    
        setTimeout(function wait() {
            const browser = document.getElementById('browser');
            if (browser) {
                  mvVivbtn();
            }
            else {
                 setTimeout(wait, 300);
            }
        });
    
        })();
    
    


  • @luetage that is soooooooooooooo good 😍 😍 😍

    thanks a million



  • @Hadden89 I edited the initial code too, there is no need to make the button a child of the main toolbar. It even seems detrimental, at least on Gnome the new version triggers the menu with shortcut (alt), while the original version doesn't. Something I came to realise just now.



  • @luetage Windows trigger the menu anyway, but I'll update the code 👍



  • Hello,

    I would love your help in moving the Vivaldi button to the vertical panel above the bookmarks button.

    I don't know js, and was trying to play with panelbtn and .switch with no luck

    Thanks!



  • @ChimeraLove

    Here:

    (function () {
    
        function style() {
            const style = document.createElement('style');
            style.type = 'text/css';
            style.id = 'mvVivbtn';
            style.innerHTML = `.vivaldi {position: relative;}`;
            document.getElementsByTagName('head')[0].appendChild(style);
        };
    
        function mvVivbtn() {
            style();
            var btn = document.querySelector('.vivaldi');
            btn.setAttribute('tabindex', '-1');
            var panel = document.getElementById('switch');
            panel.insertBefore(btn, panel.firstChild);
        }
    
        setTimeout(function wait() {
            const browser = document.getElementById('browser');
            if (browser) {
                  mvVivbtn();
            }
            else {
                 setTimeout(wait, 300);
            }
        });
    
        })();
    
    


  • @luetage Thank you! perfect 🙂



  • Thanks a lot for this great Mod luetage.



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