Trying to change the order of my button bar



  • I just moved from Firefox to Vivaldi, strongly advertised by a colleague whose competence in these things I trust. I like it a lot. Especially after using FF for ages and being completely exhaustipated by its latest weird behaviours. Anyhow, nice relief. However, I would like to make just a small adjustments to fit my "automatic moves": I am used to have things in certain order forward/backward buttons, address bar, search (bing etc.), reload and home, and finally pocket (which I already added).

    So, I've added a line in browser.html:

     <link rel="stylesheet" href="style/custom.css" />
    

    And then a file custom.css in style directory, with following lines:

    .button-toolbar.back, .button-toolbar.forward, .button-toolbar.rewind, .button-toolbar.next {
            order: 0;
        }
    
    .button-toolbar.reload, .button-toolbar.home {
        order: 2;
    }
    
    .button-toolbar {
        order: 3;
    } 
    
    .extensions-wrapper {
        order: 4;
    }
    

    However, no changes. What I am doing wrong here? Please, some help 😃



  • .button-toolbar {
        order: 3;
    }
    

    I don't see the point of this rule, it's trying to set the order of all toolbar buttons to 3. It will get ignored as you've specified all other buttons' orders with higher specificity above.

    In any case what you're trying to do won't work. The toolbar buttons are all children of the same element, .toolbar, which is a (previous) sibling to the address bar. That means any button ordering you do can only rearrange them within the toolbar element (and thus never have the address bar between the buttons).

    You can still do it with css (positioning, margins etc), but it's a very hacky method, prone to breakage and requires fine-tuning. I think a simpler and better method is to just use a script to move the elements. From the order you've specified I'm assuming all that needs to be moved are the reload and home buttons to after the search bar.

    Add this to the body element of browser.html:

    <script src="custom.js"></script>
    

    Place custom.js alongside browser.html with the following as it's contents:

    (function() {
        waitForElement("#main", 250, () => {
            const main = document.getElementById("main"),
                toolbar = main.getElementsByClassName("toolbar")[0],
                reload = toolbar.getElementsByClassName("reload")[0],
                home = toolbar.getElementsByClassName("home")[0];
            
            toolbar.getElementsByClassName("searchfield")[0].after(reload);
            reload.after(home);
        });
        
        function waitForElement(selector, time, callback) {
    		if(document.querySelector(selector) !== null)
    			callback();
    		else {
    			setTimeout(function() {
    				waitForElement(selector, time, callback);
    			}, time);
    		}
    	}
    })();
    


  • This problem arose only recently. Each button used to be an independent child in the address bar, then they created the toolbar, which now holds all these buttons. See here: https://forum.vivaldi.net/topic/21332/button-and-bar-order



  • @razr96 Thanks so much! This resolves my problem. Just to be able to understand better your js-code, how it should look to put search engine to the end, like on this snapshot (where arrow points)?

    0_1514045875771_Screen Shot 2017-12-23 at 4.13.35 pm.png

    Thanks again!



  • @striatum

    Using @razr96 's code, you can achieve that this way

    (function() {
        waitForElement("#main", 250, () => {
            const main = document.getElementById("main"),
                toolbar = main.getElementsByClassName("toolbar")[0],
                reload = toolbar.getElementsByClassName("reload")[0],
                home = toolbar.getElementsByClassName("home")[0];
                extensionswrapper = toolbar.getElementsByClassName("extensions-wrapper")[0];
                searchfield = toolbar.getElementsByClassName("searchfield")[0];
            
            toolbar.getElementsByClassName("addressfield")[0].after(reload);
            reload.after(home);
            home.after(extensionswrapper);
            extensionwrapper.after(searchfield);
        });
        
        function waitForElement(selector, time, callback) {
    		if(document.querySelector(selector) !== null)
    			callback();
    		else {
    			setTimeout(function() {
    				waitForElement(selector, time, callback);
    			}, time);
    		}
    	}
    })();
    

Log in to reply
 

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