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);
    		}
    	}
    })();
    


  • @sjudenim
    Hello,
    Greatly appreciate it if you could modiffy the code to show the following for me:

    Bookmark button (I am using wea0 Bookmarks in address bar Mod)
    Address bar
    Reload
    Home
    Back
    Next
    Rewind
    Forward
    Search
    Extensions



  • @raed You can do this yourself. Use the code provided here: https://forum.vivaldi.net/topic/21332/button-and-bar-order/5
    This puts the reload and home button into an alternative toolbar and you can use css to shuffle everything around the way you please. The advantage of above code is that you keep everything in javascript, but it's harder to understand. And eventually you will need an additional css file for other mods anyway.



  • @luetage Thank you luetage for your reply,

    I have used the code you linked to, it works in the same way as the code available in this post,
    it moves the tool part (I do not know what its technical name is) in one block without being able to change the relative positions of the icons it contains (Bookmark, Back, Next, Rewind, Forward).

    What I am attempting, and unable to achieve, is to be able to place the Bookmark button to the left of the address bar, and the rest of the tools icons (Back, Next, Rewind, Forward) to the right of the address bar.



  • @raed You don't even want to take buttons out of the toolbar. You simply posted in the wrong thread ^^

    Updated javascript code for the bookmarks button (gives it a unique id and places it at the end of the address bar)

    setTimeout(function wait(){
        toolbar = document.querySelector("div.toolbar-addressbar.toolbar");
        bookmarkbar = document.querySelector("div.bookmark-bar");
        morebookmarks = document.querySelector("button[title='More bookmarks']");
        if (bookmarkbar != null){
            bookmarkbar.style.width = 0;
        }
        if (toolbar != null && bookmarkbar != null && morebookmarks != null){
            toolbar.appendChild(morebookmarks);
            morebookmarks.classList.add("button-toolbar");
            morebookmarks.id = "addbookmarks";
            bookmarkbar.remove();
            morebookmarks.firstElementChild.firstElementChild.setAttribute("d", "M7 22.5l6-3.5 6 3.5v-16.5h-12v16.5zm2-3.5v-11h8v11l-4-2.2-4 2.2z");
            morebookmarks.firstElementChild.setAttribute("viewBox", "0 0 26 26");
            morebookmarks.firstElementChild.setAttribute("height", "26");
            morebookmarks.firstElementChild.setAttribute("width", "26");
        } else {
            setTimeout(wait, 100);
        }
    }, 300);
    

    css code for moving stuff around

    #addbookmarks {
    	order: 1;
    }
    .addressfield {
    	order: 2;
    }
    .toolbar-addressbar.toolbar .toolbar {
    	order: 3;
    }
    .searchfield {
    	order: 4;
            margin-left: 5px;
    }
    .toolbar-addressbar.toolbar > .extensions-wrapper {
    	order: 5;
    }
    button.button-toolbar.back {
    	order: 1;
    }
    button.button-toolbar.next {
    	order: 2;
    }
    button.button-toolbar.rewind {
    	order: 3;
    }
    button.button-toolbar.forward {
    	order: 4;
    }
    

    edit: I'm not sure if you really want it this way, this looks a bit odd. You probably mixed up forward (big) and next (small) buttons in your wishlist. Anyway, the code does what you wrote down, if you want it differently just change the order in the toolbar (last 4 selectors).



  • @luetage
    Thank you (from the bottom of my heart and with a cherry on top).

    Your code did not just work beautifully, it was elegant enough for a lay person to understand and play with it unguided.

    Indeed, I did mix up the forward and next buttons, the simplicity and elegance of your code allowed me to correct it and to add the functionality of moving the home and reload buttons.

    #addbookmarks {
    	order: 1;
    }
    .addressfield {
    	order: 2;
    }
    .toolbar-addressbar.toolbar .toolbar {
    	order: 3;
    }
    .searchfield {
    	order: 4;
            margin-left: 5px;
    }
    .toolbar-addressbar.toolbar > .extensions-wrapper {
    	order: 5;
    }
    button.button-toolbar.home {
    	order: 1;
    }
    button.button-toolbar.back {
    	order: 2;
    }
    button.button-toolbar.rewind {
    	order: 3;
    }
    button.button-toolbar.reload {
    	order: 4;
    }
    button.button-toolbar.next {
    	order: 5;
    }
    button.button-toolbar.forward {
    	order: 6;
    }
    

    here is the image of your final product which I have tweaked as it appears on my screen.

    Showing all buttons

    0_1519647792756_adbar.png

    Without search and forward/rewind (used scripts unaltered, changes made from Vivaldi settings)

    0_1519649427398_adbar1.png

    One last note, unlike other codes I have found and tinkered with on the forum to change position of address bar icons, your code does not hang the browser when adding fast forward and rewind from settings.

    Thanks to you, I am one day closer to the old Opera12 interface.

    Edit: added image and further comment.



  • Good morning all,
    Thank you for posting this code and screenshots of the final layout. These were very helpful in allowing me to update my modified layout (linked in a post above) as it provided even more flexibility in arrangement.

    Even though I don't use the Bookmark button, I added it so I can see how it interacted and to get the order correct in the event that my next question is possible.

    Is it possible to put the tiny "Add/Edit Bookmark" button (currently inside of the address bar) on the toolbar as its own full-size button ? I searched through the CSS file and didn't find anything specific to that button.



  • @vongalin It's probably possible, but you need javascript to get the button out of the addressfield.



  • @vongalin
    Rummaging around in the forum I came across this code which removes the add bookmark icon, but retains its function in the space allocated for it:

    .add-bookmark-container>button.button-addressfield {
    opacity: 0;
    }
    

    Unfortunately I am clueless as to how to place it as a full-size button on the address bar.

    So basically the functionality remains, but the icon goes, hopefully a coder familiar with java scripting could help out if you still think that after removing the icon but retaining the functionality you would also still need a full size icon for it on the address bar.



  • @raed I just tried using my mover script to move the button out via javascript instead of CSS. Suffice it to say this makes vivaldi very unhappy and causes a soft crash. I'm guessing because it has to look for this element on each tab change to update it's status (is the current page bookmarked).

    Moving this will probably require some deeper investigation / some sort of CSS hack involving placing it on top of elements and using padding. Something akin to

    #main > div.toolbar-addressbar.toolbar > span.extensions-wrapper {
    margin-left: 50px;
    }
    #main > div.toolbar-addressbar.toolbar > div.addressfield > div.add-bookmark-container.addressfield-popup-container {
        position: relative;
        left: 50px;
    }
    

Log in to reply
 

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