Showing extension icons on the bottom of the browser

  • I'd like to make it so that all the icons for my extensions that currently display in the top right, next to the search box display down at the bottom. I'd like to either add a new bar to the bottom that I can put them all in or make it so I can put them on the status bar, next to the capture page, image toggle etc. Firefox has an addon that creates an addon bar at the bottom, so I'd imagine it would be possible for Vivaldi too. Does anyone know how to do this? Does anything already exist?

  • @rebanar Moving them about is easy enough. A hacky way of doing it is

    .extensions-wrapper {
        position: fixed;
        top: calc(100vh - 30px);
        z-index: 2;
        transform: scale(0.5);
        right: 300px;
    .extensionaction {
        transform: scale(2);
        bottom: 400px !important;
        top: unset !important;
        left: unset !important;

    The issue with this method is the little pop-ups that normally appear get cut off, so I have to use a hacky fix which may not always work depending on the size of the popup. This could be a starting point for you to fix your problem. I'm not sure how one could solve the problem neatly though.

    You would install this as a custom mod:

    As for customising the toolbars in general, that's a feature we have yet to see come to fruition.

  • Just to make a note if you or anyone else wants to implement the js for this:

    1. Individually scale the icons so you don't scale everything which is messy
    2. observe the .extensionaction class and whenever it becomes active you could move the popup as needed by the size

  • Thanks for the quick and dirty fix to at least get them out of the top right corner. I'd love it if someone could tweak it and implement your suggestions since my understanding of how all of it works is limited. I know that's it's probably not very likely for anyone to do, so I appreciate what I have so far.

  • I'm working on a proper solution, but this will take time. If anyone else is looking into this, I will stop work though, since this will be time-intensive, so please tell me.

    Here is what I have so far:
    0_1504645232853_Screenshot 2017-09-05 22.59.22.png

  • Ok, here is what I have so far. I'm having trouble with the pop-up menus, but that was to be expected. Everything else works decently.

    You will need 1 custom.js file and 1 custom.css file to implement this. Both have to be referenced in browser.html and placed correctly in the application.


    setTimeout(function wait() {
    	var wrapper = document.querySelector(".toolbar-addressbar.toolbar > .extensions-wrapper");
    	var footer = document.getElementById('footer');
    	if (wrapper != null) { = "height: 27px";
    	else {
    		setTimeout(wait, 300);
    }, 300);


    /* extensions-wrapper configurations */
    #footer .extensions-wrapper {
    	-webkit-app-region: no-drag;
    #footer .extensions-wrapper img {
    	height: 19px;
    	width: 19px;
    	margin-top: 2px;
    #footer .extensions-wrapper .button-badge {
    	max-height: 10px;
    	max-width: 10px;
    	min-width: 5px;
    #footer .toggle-extensions-group svg {
    	vertical-align: middle;
    #footer .extensions-wrapper .dragging-cancelled, #footer .toggle-extensions-group {
    	border-right: none;
    /* background colors */
    #footer .extensions-wrapper .dragging-cancelled, #footer .toggle-extensions-group {
    	background-color: transparent;
    #footer .extensions-wrapper span:hover, #footer .toggle-extensions-group:hover {
    	background-color: var(--colorBgDark);
    /* popup */
    #footer .extensionaction, #footer .extensionaction {
    	display: none !important;
    #footer .extensionaction {
    	position: absolute;
    	top: unset !important;
    	bottom: 35px;
    /* footer button alignment */
    #footer button.button-toolbar-small {
    	height: 27px;
    #footer input.button-toolbar-small:last-of-type {
    	margin-right: 6px;
    #footer button.button-toolbar-small svg {
    	padding-top: 4px;
    #footer .tilingtoggle {
    	padding-top: 1px;

    last edit: 2017-09-07

  • @luetage It's definitely looking good so far. One thing to note is that I have the button hidden on one of the extensions. The icon is hidden, but there's still a spot for it. This is definitely a nit pick, so if there's no solution for it I won't feel too bad. The menu for the items when I click on them comes up more in the middle of the page instead of right by where the icon is, but this is not a big deal either. I'm very happy with what you've provided and not trying to complain. I'm just trying to give feedback in case you or someone feels inclined to address them. Thanks a lot.

  • My mistake, I didn't check hidden buttons. Made it a little tighter and fixed this. Exchange both files -- I have made the according edits in the post above.

    The display height of the popup can be configured with the last entry in custom.css file -- #footer .extensionaction {top: 40% !important;}, adjust it as needed. Having all popus start exactly at the bottom is probably complicated. We would need a javascript that listens for a click on each button, checks the height of the popup and then spawns it correctly. Haven't looked into it, might do it later.

  • @luetage Good work. I really appreciate it.

  • Oh boy, I'm far too complicated as usual. The popup height can be fixed with css only, no javascript needed. Now it works.
    #footer .extensionaction {position: absolute; top: unset !important; bottom: 35px;}

  • This is working great. Thanks a lot.

  • @luetage The mod works great. Is there any way extensions could be centered between the hide panel icon and the Capture Page icon?

    It would be great if Vivaldi created additional extensions-wrappers: Addressbar-left, Addressbar-right, Sidebar, and statusbar-center.

  • Hmm, there is no between. What you are referring to is the status info field, and it's size varies depending on the width of your browser. And links are displayed there. But it's possible to move the extensions before or after the status info.

  • hi,
    sorry for bringing up this old topic again. I just started to use vivaldi more frequently.

    I would like to disable the address bar but still have access to my extensions. So I used this mod to bring the icons to another position. This works fine so fare, but when I disable the a address bar now vivaldy stops working with this error:

    DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    Error in event handler for storage.onChanged: NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

    Do you get similar errors? (I'm using Vivaldi 1.14.1064.3 snapshot) Or do you already have a solution for that?

    Anyway, thank you very much for sharing this nice mod.

  • @titzi If the address bar is disabled in settings, the mod has no way to fetch the extensions from it, therefore you can't use this setting. Try hiding the address bar with css instead.

  • @luetage ah, that's the trick. Thank you very much

Log in to reply

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