Move Vivaldi Button on Main Toolbar [Left|Right]
-
I see what the problem is, the button just needs to be moved to the main bar. Do you want the css integrated in the js?
-
@luetage said in [Help] Mod semplification?:
Do you want the css integrated in the js?
Yes, thank you ^^
-
Try this:
(function () { function style() { const style = document.createElement('style'); style.type = 'text/css'; style.id = 'mvVivbtn'; style.innerHTML = `.vivaldi {position: relative;}`; document.getElementsByTagName('head')[0].appendChild(style); }; function mvVivbtn() { style(); var btn = document.querySelector(".vivaldi"); btn.setAttribute('tabindex', '-1'); var bar = document.querySelector(".toolbar-addressbar"); var div = document.createElement('div'); div.classList.add('button-toolbar'); bar.insertBefore(div, bar.firstChild); div.appendChild(btn); } setTimeout(function wait() { const browser = document.getElementById('browser'); if (browser) { mvVivbtn(); } else { setTimeout(wait, 300); } }); })();
-
@luetage Tnx, now is better; I only kept few margins for fine tuning and probably removed the last bits of bad code in my css
-
@luetage that's absolutely fabulous. what would someone who isn't a JS/CSS novice do to get the V button to the right of the extension buttons?
-
@skribb Should work:
(function () { function style() { const style = document.createElement('style'); style.type = 'text/css'; style.id = 'mvVivbtn'; style.innerHTML = `.vivaldi {position: relative;}`; document.getElementsByTagName('head')[0].appendChild(style); }; function mvVivbtn() { style(); var btn = document.querySelector(".vivaldi"); btn.setAttribute('tabindex', '-1'); var bar = document.querySelector(".toolbar-addressbar"); var div = document.createElement('div'); div.classList.add('button-toolbar'); bar.appendChild(div); div.appendChild(btn); } setTimeout(function wait() { const browser = document.getElementById('browser'); if (browser) { mvVivbtn(); } else { setTimeout(wait, 300); } }); })();
-
@luetage that is soooooooooooooo good
thanks a million
-
@Hadden89 I edited the initial code too, there is no need to make the button a child of the main toolbar. It even seems detrimental, at least on Gnome the new version triggers the menu with shortcut (alt), while the original version doesn't. Something I came to realise just now.
-
@luetage Windows trigger the menu anyway, but I'll update the code
-
Hello,
I would love your help in moving the Vivaldi button to the vertical panel above the bookmarks button.
I don't know js, and was trying to play with
panelbtn
and.switch
with no luckThanks!
-
Here:
(function () { function style() { const style = document.createElement('style'); style.type = 'text/css'; style.id = 'mvVivbtn'; style.innerHTML = `.vivaldi {position: relative;}`; document.getElementsByTagName('head')[0].appendChild(style); }; function mvVivbtn() { style(); var btn = document.querySelector('.vivaldi'); btn.setAttribute('tabindex', '-1'); var panel = document.getElementById('switch'); panel.insertBefore(btn, panel.firstChild); } setTimeout(function wait() { const browser = document.getElementById('browser'); if (browser) { mvVivbtn(); } else { setTimeout(wait, 300); } }); })();
-
@luetage Thank you! perfect
-
Thanks a lot for this great Mod luetage.
-
Did you adapt the mod for the latest update?
-
Don't seem to work anymore with latest snaps.
-
That's because they've changed the
.addressbar
and.addressfield
to.URLBar
and.URLField
Just replace this line
var bar = document.querySelector(".toolbar-addressbar");
with this
var bar = document.querySelector(".UrlBar");
-
@luetage said in (Solved) Move Vivaldi Button on Main Toolbar [Left|Right]:
@skribb Should work:
β¦
Thanks a lot! But now the saved space is unused. How can the tabs use this space?
-
Sorry for necroing. I found that this works until you go into full-screen mode (double clicking on a video or by pressing F11). After that the button returns to its original position. A button still stays in the toolbar but nothing happens when you click on it. Restarting Vivaldi fixes it and launching a new window fixes it only for that new window.
-
@sbernecchia, @Ivanwah
Next is tested on win10 viv5.1. Not fix, but it recreate viv button(delay 1-2sec) after returning to maximized or normal window mode and deleting one that not working. Rarely it stop working for me, but dunno what the reason.on the right of urlbar:
(function () { function style() { const style = document.createElement('style'); style.type = 'text/css'; style.id = 'mvVivbtn'; style.innerHTML = `.vivaldi {position: relative;}`; document.getElementsByTagName('head')[0].appendChild(style); }; function mvVivbtn() { var btn = document.querySelector(".vivaldi"); btn.setAttribute('tabindex', '-1'); var bar = document.querySelector(".UrlBar"); bar.appendChild(btn); } setTimeout(function wait() { const browser = document.getElementById('browser'); if (browser) { style(); mvVivbtn(); } else { setTimeout(wait, 300); } }); //bypass wrong main button movement after fullscreen var mutationObserver = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { setTimeout(function iwillcheck() { if(document.getElementById('browser').getAttribute('Class').includes("normal") || document.getElementById('browser').getAttribute('Class').includes("maximized")) { mvVivbtn(); let element = document.querySelectorAll(".vivaldi"); if(element.length > 1){ element[0].parentNode.removeChild(element[0]); }; }; }, 1000); }); }); setTimeout(function waitAndGo() { // Starts listening for changes. mutationObserver.observe(document.getElementById('browser'), { attributes: true,//*** attributeOldValue: true,//*** attributeFilter: [ "class" ] }); }, 1000); })();
on the left, with new tab and trash buttons on the same line:
(function () { function style() { const style = document.createElement('style'); style.type = 'text/css'; style.id = 'mvVivbtn'; style.innerHTML = `.vivaldi {position: relative;}`; document.getElementsByTagName('head')[0].appendChild(style); //next is for .button-toolbar(newtab btn and trash btn), w/o static it moves somewhere right const style2 = document.createElement('style'); style2.type = 'text/css'; style2.id = 'mvTbBBtns'; style2.innerHTML = `.button-toolbar {position: static;}`; document.getElementsByTagName('head')[0].appendChild(style2); }; function mvVivbtn() { var btn = document.querySelector(".vivaldi"); btn.setAttribute('tabindex', '-1'); var bar = document.querySelector(".toolbar-mainbar.toolbar-droptarget"); bar.insertBefore(btn, bar.firstChild); //uuu } function mvPlusBtn() { var btn = document.querySelector(".newtab"); btn.setAttribute('tabindex', '-1'); var bar = document.querySelector(".toolbar-mainbar.toolbar-droptarget"); bar.appendChild(btn); } function mvTrashBtn() { var btn = document.querySelector(".toggle-trash"); btn.setAttribute('tabindex', '-1'); var bar = document.querySelector(".toolbar-mainbar.toolbar-droptarget"); bar.appendChild(btn); } setTimeout(function wait() { const browser = document.getElementById('browser'); if (browser) { style(); mvVivbtn(); mvPlusBtn(); mvTrashBtn(); } else { setTimeout(wait, 300); } }); //bypass wrong main button movement after fullscreen var mutationObserver = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { setTimeout(function iwillcheck() { if(document.getElementById('browser').getAttribute('Class').includes("normal") || document.getElementById('browser').getAttribute('Class').includes("maximized")) { mvVivbtn(); let element = document.querySelectorAll(".vivaldi"); if(element.length > 1){ element[1].parentNode.removeChild(element[1]); }; }; }, 1000); }); }); setTimeout(function waitAndGo() { // Starts listening for changes. mutationObserver.observe(document.getElementById('browser'), { attributes: true,//*** attributeOldValue: true,//*** attributeFilter: [ "class" ] }); }, 1000); })();
based on previous code from this thread
-
Is it possible to make the move for people who don't know how to code?