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
-
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)?
Thanks again!
-
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); } } })();
-
@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. -
@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).
-
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.
-
@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; }
-