Moving the Status Bar
-
Good afternoon all,
Are there any options/mods to move the status bar ? For example, above the bookmark bar (under the main address bar) ? I use RoboForm and have the lower toolbar enabled. Doing so covers up the status bar. Technically I could use the RF button and turn off the lower bar, but I figured I would check to see if the status bar location could be tweaked (since I like using both). -
@vongalin By borrowing some code from @luetage I have developed this mod which should do the trick:
setTimeout(function wait() { var foot = document.querySelector("#footer"); var topbar = document.querySelector("#main > div.bookmark-bar"); var topinner = document.querySelector("#main > div.inner"); if (foot != null && topbar != null) { topbar.parentNode.insertBefore(foot, topbar); } else if (foot != null && topinner != null) { topinner.parentNode.insertBefore(foot, topinner); } else { setTimeout(wait, 300); } }, 300);
It should work whether or not you have the bookmarks bar enabled.
-
Just an aside - Having the same issue and suggested to RoboForm that they allow the RF status bar to be resizable. Nothing yet.
@LonM - as I understand it, any mods have to be replicated every time Vivaldi is updated?
-
@lonm
Worked perfectly ! Thank you. I dropped it in my custom.js, restarted the browser and everything looks great. To deal w/browser updates, I have a Syncback profile setup to monitor my 'resources\vivaldi\style' folder and 1) backup the data to my NAS on-change and 2) restore from NAS if the files are missing or modified "by not me". -
@escolar Most simple scripts dont need to be changed, but they do need to be copied over each time the browser is updated. There are scripts available to do this. Mine is here: https://raw.githubusercontent.com/LonMcGregor/VivaldiMods/master/custom.py
-
@LonM - Thank you.
-
@lonm Nice...for moving under bookmark bar? (it has sense in that area)
-
@hadden89 try
setTimeout(function wait() { var foot = document.querySelector("#footer"); var topinner = document.querySelector("#main > div.inner"); if (foot != null && topinner != null) { topinner.parentNode.insertBefore(foot, topinner); } else { setTimeout(wait, 300); } }, 300);
basically the same but without the code for checking if the bookmarks bar is there.
-
@lonm Perfect, thanks ^^
-
@lonm Minor issue. Probably divs should be repositioned in css as they overlap urlbar/bookmarkbar but I'm not sure how to do it with flex items. (footer under bookmarkbar code)
-
@hadden89 Use the following custom css
#footer .status-toolbar > span, #footer .status-toolbar > span > button, #footer .status-toolbar > span > .callout { transform: rotateZ(180deg) } #footer {z-index: 2} #footer .status-toolbar > span > .callout::after, #footer .status-toolbar > span > .callout::before { top: -20px; bottom: unset; transform: rotateZ(180deg); border-top-color: var(--colorBg) } #footer .status-toolbar > span > .callout::before{ border-top-color: unset }
It works without needing js or css to "guess" where the popup position should be, and places it below the status bar. It does this by rotating the entire button group, then rotating the button and the contents of the button so they're the right way up again.
It also makes the status bar appear "on top" of the main page so things don't clip and become unseen.
Then it does some rotation on the little
v
to make it a^
, and some additional styling to make it look roughly the correct colour. I unfortunately can't figure out what exactly makes the border colour change though, so it might look a little off.Does that fix it?
Incidentally, if anyone can think of a less convoluted way than rotation that doesn't use explicit position values, I'd be happy to hear it.
-
@lonm Yup, it works
-
@lonm may I ask, how I simply move the whole ".status-toolbar" to the left? I can't figure it out
-
@lebaux Moving it to the right or left isn't simple, because the orientation has to be changed. Not only for the buttons, but also the popups -- it's a lot of coding.
-
@LeBaux @luetage It should be doable. Try this:
generic_mover.js
- same as above with the relevant rule to move the status bar to the top and then move the buttons to the left.setTimeout(function wait() { var Elements_To_Move = [ /*["original_element", "desired_location", "child"],*/ /*["original_element", "desired_location", "before"],*/ /*["original_element", "desired_location", "after"],*/ ["#footer", "#main > div.inner", "before"], ["#footer .status-toolbar", "#status_info", "before"] ] /* check the final element in the vivaldi dom is loaded */ var everything_loaded = document.querySelector("#vivaldi-tooltip"); if(everything_loaded){ Elements_To_Move.forEach(function(mover, index){ if(mover.length == 3){ /* load this move */ var item_to_move = document.querySelector(mover[0]); var place_to_move_to = document.querySelector(mover[1]); var move_method = mover[2]; /* check move possible */ if(item_to_move && place_to_move_to){ /* do appropriate move */ if(move_method === "child"){ place_to_move_to.appendChild(item_to_move); } else if(move_method === "before"){ place_to_move_to.parentNode.insertBefore(item_to_move, place_to_move_to); } else if (move_method === "after") { if(place_to_move_to.nextSibling){ place_to_move_to.parentNode.insertBefore(item_to_move, place_to_move_to.nextSibling); } else { place_to_move_to.parentNode.appendChild(item_to_move); } } } } }); } else { /* wait for vivaldi to fully load */ setTimeout(wait, 300); } }, 300);
With this
custom.css
(same as above, plus the bottom two lines to shunt everything along a wee bit so the button flyouts still fit on the page. Unfortunately its not as easily doable to have them both be completely left-aligned and have the callouts on page.:div#footer {}#footer .status-toolbar > span, #footer .status-toolbar > span > button, #footer .status-toolbar > span > .callout { transform: rotateZ(180deg) } #footer {z-index: 2} #footer .status-toolbar > span > .callout::after, #footer .status-toolbar > span > .callout::before { top: -20px; bottom: unset; transform: rotateZ(180deg); border-top-color: var(--colorBg) } #footer .status-toolbar > span > .callout::before{ border-top-color: unset } #footer .status-toolbar{left: 80px; position: relative} #footer #status_info {left: 80px; top: 1px; position: relative}
-
@lonm oh man, thank you so much! I wrongly assumed it would be some silly css edit, if I knew I would not bother you.
-
@LeBaux Dont feel afraid to ask for help! thats the first step towards learning for yourself.
-
-
@hadden89 I imagine that's due to parts of the UI being re-created and removed when the browser enters and leaves fullscreen. To fix this would require mutation observers to see when the fullscreen state changes.
-
custom.css seems changed in latest snaps