Button and Bar Order



  • Good afternoon all,
    Finally switched permanently from FF to Vivaldi. Transition was pretty painless. I am down to the last few tweaks that I just can't get working correctly. So far I have modified my browser.html to include custom.css and have added a few entries that are working. The following are mostly working; however, I am unable to get the order working correctly for 2 of the buttons.

    I would like to have the following order :
    (far left)previous page/next page/rewind/fast forward
    search bar (bonus - would also like to increase to 600px, but width wasn't working)
    reload/home
    address bar
    extensions

    This is what I have so far. The only portion that isn't working is the reload and home stay put no matter the order. I also try using flex, but that wasn't working either.

    /Custom/
    button.button-toolbar.back, button.button-toolbar.forward, button.button-toolbar.rewind, button.button-toolbar.next {
    order: -1;
    }
    .searchfield {
    order: 1;
    }
    button.button-toolbar.reload, button.button-toolbar.home {
    order: 2;
    }
    .addressfield {
    order: 3;
    }
    .extensions-wrapper {
    order: 4;
    }
    /End Custom/

    Many thanks for any help getting this working.



  • You can change the width of the search bar easily:
    .iconmenu-container.searchfield {flex-basis: 600px !important;}

    I'm gonna look at the positioning, your code seems alright but somehow doesn't work, strange.



  • I think they changed something, because I know I set the home button behind the addressbar for someone, now it's all or nothing -- you can't part the buttons in the toolbar, only move the whole toolbar.

    It's possible to do this in javascript though -- shouldn't be hard.



  • @luetage
    Thank you for your help and information on this. I applied the width code and it worked perfectly !



  • js

    setTimeout(function wait() {
    	var reload = document.querySelector("button.button-toolbar.reload");
    	var home = document.querySelector("button.button-toolbar.home");
    	var addr = document.querySelector(".toolbar-addressbar");
    	if (addr != null) {
    		var toolalt = document.createElement('div');
    		toolalt.classList.add('toolalt');
    		addr.appendChild(toolalt);
    		toolalt.appendChild(reload);
    		toolalt.appendChild(home);
    	}
    	else {
    		setTimeout(wait, 300);
    	}
    }, 300);
    

    css

    .iconmenu-container.searchfield {
    	order: 1;
    	flex-basis: 600px !important;
    }
    .toolalt {
    	order: 2;
    	display: flex;
    	position: relative;
    }
    .addressfield {
    	order: 3;
    }
    .extensions-wrapper {
    	order: 4;
    }
    

    img
    0_1506980233629_Screenshot 2017-10-02 23.36.19.png



  • @luetage
    Thank you very much for your assistance. I applied everything as listed and it worked perfectly !


Log in to reply
 

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