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 !



  • Basic Instructions: https://forum.vivaldi.net/topic/10549/modding-vivaldi/

    Create a Javascript file with following code:

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

    Create a CSS file with following code:

    .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 !



  • Thanks, @luetage ! Worked like a charm:

    0_1510847285308_Viv_address_bar_button_order.png

    with this custom.css:

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


  • @ehm The forum uses markdown, instructions are available here. You can also access them by clicking the grey "COMPOSE?" text in the editor in the top right of the left field.



  • @luetage Great, thanks! Don't know how I missed that COMPOSE link. Hadn't heard of Markdown -- glad to learn about it!
    Eric


Log in to reply
 

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