Moving the new tab button to the address bar



  • Hi everybody.

    At this moment, and by using a multirow-tabs css mod, I´m able to place the new tab button in a more static and predictable position (always at the left edge of the tab bar) but it´s not enough, because the button, while mantaining its lateral placing, goes down with every new row.

    I would like to move it to the very beginning of the address bar, to achieve a 100% static (and predictable) position.

    Is this posible by using only css? Or is completely unavoidable to use js or another (non portable) method?

    Thanks in advance



  • @torpedopradera I’d advise using a one‐key shortcut instead. Why click stuff in the first place? Maybe there is some css trick to position the button absolute and move the toolbar buttons over to make place for the newtab button; but this is an unreliable solution, completely dependent on your setup. Which leaves us with javascript. The address bar is a static target existing in the DOM even when invisible, the tabstrip and its content get removed when the tabbar is being hidden, which complicates things. Moreover, if the tabbar is gone, there should be no newtab button in the addressbar. It’s quite convoluted to make it all clean. My suggestion is hiding the newtab button with CSS and making a new button at the beginning of the toolbar, which opens a new tab with custom target specified in the mod alone (independent from settings).


  • - Ambassador -

    @torpedopradera You could try setting your Home Page to your New Tab page. The Home Page button is already on the Address Bar, and can be moved to the first position if you wish.



  • @luetage Thanks luetage. I already have the newtab button at the beginning of the tab bar. I just want to move to the beginning of the address bar, as the its first button.

    I use this machine as some kind of a HTPC and desktop mix, with HTPC as the primary use, and that´s why I don´t want to use keyboard shortcuts except unavoidable.

    Pesala: thanks, your proposal is very interesting and easy. I only need to change the icon.

    Do you know how to convert a custom image to a custom svg secuence like this, in order to achieve it?

    svg.folder-icon path {
    d: path("M6.16,2.5H1.6A1.12,1.12,0,0,0,.5,3.63v8.75A1.12,1.12,0,0,0,1.6,13.5H14.4a1.12,1.12,0,0,0,1.1-1.12V5.76a1.19,1.19,0,0,0-1.1-1.23H7.76Z") !important;
    }



  • @torpedopradera Try this:

    .button-toolbar.home svg path {
      d: path("M6.16,2.5H1.6A1.12,1.12,0,0,0,.5,3.63v8.75A1.12,1.12,0,0,0,1.6,13.5H14.4a1.12,1.12,0,0,0,1.1-1.12V5.76a1.19,1.19,0,0,0-1.1-1.23H7.76Z") !important;
    }
    

    You may have to scale the svg icon.

    See here to apply a CSS in Vivaldi.

    Edit (I forgot I'm using a JS mod «Class Name Buttons»)

    button[title="Go to homepage"] svg path {
       d: path("M6.16,2.5H1.6A1.12,1.12,0,0,0,.5,3.63v8.75A1.12,1.12,0,0,0,1.6,13.5H14.4a1.12,1.12,0,0,0,1.1-1.12V5.76a1.19,1.19,0,0,0-1.1-1.23H7.76Z") !important;
    }
    ```


  • @torpedopradera

    Have a look HERE



  • @sjudenim Hi, thanks in advance

    Excuse me if I´m wrong but it seems that .button-toolbar.home doesn´t point to the home button maybe perhaps due to changes in recent versions of Vivaldi. I´m using v3.4

    I have seen that exact syntax in several post of the thread you mentioned, and it doesn´t work now, the same with back, forward, etc buttons

    Aside that, my question was about how to get the svg code ( d: path("M6.16,2.5H1.6A1.12,1......) from an image of my own

    Regards



  • @torpedopradera .button-toolbar.home won't work. Take a look at the post @sjudenim refer to.



  • @hlehyaric Thanks

    Following your suggestion I found the solution in

    https://forum.vivaldi.net/topic/20227/changing-icons-with-css-part-ii/170?page=9

    The correct syntax to the home button is

    .button-toolbar > button[title="Go to homepage"] svg path,
    .button-toolbar[title="Go to homepage"] > button svg path

    Do you know how to asign the newtab action to the home button ? Maybe about:newtab ? I mean to exact replicate the newtab behaviour in the home button, opening a new blank page with every new click on the button. I tried vivaldi://newtab and it opens a speed dial page only in the first click



  • @torpedopradera Go to Setting | General | Start Up | Homepage, select Specific Page and try about:blank.



  • @hlehyaric thanks, it works with plain about:blank without the vivaldi:// .

    I can replicate the behaviour of the left click in newtab by usin middle click in the home button. Solved.

    Regards



  • @torpedopradera You're welcome.



  • @torpedopradera Depending on what you want to achieve, you can also select Blank Page or Homepage in Settings | Tabs | New Tab Page.



  • @hlehyaric thanks, I already had selected Blank Page as newtab.

    Is really not possible to move the newtab button to the UrlBar with only css? I asked for the possibility to move the StatusInfo to the Page Title bar, and was found. Any chance?



  • @torpedopradera Move the newtab button from the tab bar to the address bar? If it's what you mean, I'm sincerely sorry but it's far beyond my skills. As far as I understand from previous posts, you need JS to achieve that.

    Perhaps, @nomadic will be able to advise you better than me.



  • @hlehyaric Thank you very much, I will keep an eye on the matter.

    Kind Regards



  • @torpedopradera

    @hlehyaric is correct, JS would be required to move the button correctly, but there is a sort of hacky way to move the new tab button with only CSS (because it is hacky, you might need to adjust the left and top pixel values in the 3rd chunk of the CSS):
     
    moved-newtab.png
     

    .color-behind-tabs-off .toolbar > .button-toolbar.newtab {
      background: var(--colorAccentBg);
      fill: var(--colorAccentFg);
    }
    
    .color-behind-tabs-on .toolbar > .button-toolbar.newtab {
      background: var(--colorBg);
      fill: var(--colorFg);
    }
    
    .toolbar > .button-toolbar.newtab {
      transform: unset !important;
      left: -32px !important;
      top: 32px !important;
      z-index: 1 !important;
    }
    

    To make it work, I just stacked it on top of the Fast Forward Button placed in the leftmost position because I never use that button.
     
    fastforward-position.png
     
    If you want to have all the default buttons available, you could add a space for it with some additional CSS:
     
    all-buttons.png
     

    .UrlBar .toolbar-mainbar.toolbar-droptarget {
      padding-left: 34px;
    }
    

    If you need the button placed in a different position, let me know 👍



  • @torpedopradera said in Moving the new tab button to the address bar:

    how to get the svg code ( d: path("M6.16,2.5H1.6A1.12,1......) from an image of my own

    These are the steps I go through when replacing an SVG element in Vivaldi's interface:
    https://forum.vivaldi.net/post/389223



  • @nomadic No doubt, hlehyaric was right, you are the man !!!!

    I will follow your steps. I plan to move a less useful button from the status bar to the UrlBar, and then I will cover it with the moved new tab icon, for what I already have a suitable code. Any problem with that approach?

    Later I will forge my own set of icons.

    Thank you very much !!!!



  • I tried the mod, tweaking the values, but the mod, in my setup, seems to need to be modified because I have a mod for arranging bar in a classic way, with the following order:
    1-menu bar
    2-Urlbar
    3-bookmarks bar
    4-tab bar

    and, at the same time, I have a multiline tab bar, with the newtab button at the very beginning.

    The code for both mods is

    
    ```/*   TOOLBAR RE-ARRANGEMENT    */
    
    #tabs-container.bottom {
      order: -1;
      border-top: none;
      background-color: var(--colorAccentBg); /* Tab bar color */
      padding-top: 1px;
      padding-bottom: 0px !important;
    }
    
    /* bookmarks bar above tabs */
    .bookmark-bar {
      order: -2;
    }
    
    /* MULTI-LINE TAB BAR */
    
    #tabs-container {
        height: auto !important;
    	/* margin-bottom: -30px; */
    }
    .resize {
        display: block !important;
    }
    .tab-strip {
        display: block;
    }
    .tab-strip > span {
        display: inline-block;
    }
    .tab-strip > span > .tab-position {
        left: 0px !important;
        position: relative;
        height: 34px !important; /* ESTE VALOR HA DE IR ACORDE CON LA ALTURA DE PESTAÑA */
        width: auto !important;
    }
    .tab-strip > span > .tab-position > .tab:not(.pinned){
        width: 195px !important;  /* ESTE VALOR HA DE IR ACORDE CON EL ANCHO DE PESTAÑA */
    	border-style: solid;
    	border-width: 1px;
    	border-color: grey;
    }
    .tab-strip > span > .tab-position > .tab.pinned{
        width: 30px !important;
    	border-style: solid;
    	border-width: 1px;
    	border-color: grey;
    }
    .toolbar-tabbar > .newtab {
        /* right: 0px !important; */
    	/* top: 0px !important; */
    	right: 0px !important;
        position: absolute;
        width: 30px !important;
    	}
    
    
    
    /* MODIFIED NEWTAB BUTTON AT THE BEGINING OF TAB BAR AND DESCENDING WITH IT   */
    .tab-strip {left: 43px; }
    
    #tabs-container .newtab {
    padding-left: 5px;
    left: -38px !important;
    }
    
    #tabs-container .newtab svg path {d: path('M18.501 12h-4.252c-.151 0-.248-.099-.248-.251V7.5c0-.298-.197-.5-.5-.5H12.5c-.3 0-.5.203-.5.5v4.249c0 .153-.098.251-.25.251H7.5c-.297 0-.5.2-.5.5v.998c0 .306.203.503.5.503h4.249c.152 0 .251.094.251.248v4.252c0 .297.2.499.5.499h1.001c.303 0 .5-.202.5-.499v-4.252c0-.154.097-.248.248-.248h4.252c.297 0 .499-.197.499-.503V12.5c0-.3-.202-.5-.499-.5z')}
    

    This is a capture of my setup, before aplying your mod

    001.PNG

    and after

    0002.PNG

    when I move the button upwards, it stops working when entering the address bar.

    I apologize for the non-very-cleaned css....


Log in to reply
 

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