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
extensionsThis 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
-
@luetage
Thank you very much for your assistance. I applied everything as listed and it worked perfectly ! -
Thanks, @luetage ! Worked like a charm:
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; }
-
-
@luetage Great, thanks! Don't know how I missed that COMPOSE link. Hadn't heard of Markdown -- glad to learn about it!
Eric -