Moving the new tab button to the address bar

torpedopradera

@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;
}

hlehyaric

@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;
}

sjudenim

@torpedopradera

Have a look HERE

torpedopradera

@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

hlehyaric

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

torpedopradera

@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

hlehyaric

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

torpedopradera

@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

hlehyaric

@torpedopradera You're welcome.

hlehyaric

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

torpedopradera

@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?

hlehyaric

@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.

torpedopradera

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

Kind Regards

nomadic

@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):

.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.

If you want to have all the default buttons available, you could add a space for it with some additional CSS:

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

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

nomadic

@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

torpedopradera

@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 !!!!

torpedopradera

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

and after

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

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

hlehyaric

@torpedopradera Please use code block to paste code in post:

```
code
code
code
```

code
code
code

Or use </> in formatting bar.

See here about Markdown.

It's far better and it's more readable.

nomadic

@torpedopradera I am away from my computer right now, but I can give you some guesses.

I would say remove this:

toolbar-tabbar > .newtab {
    /* right: 0px !important; */
	/* top: 0px !important; */
	right: 0px !important;
    position: absolute;
    width: 30px !important;
	}

And this

#tabs-container .newtab {
padding-left: 5px;
left: -38px !important;
}

They are both doing things that aren't needed anymore with the CSS I gave. You can do a search for newtab in the CSS and remove everything other than maybe the one that changes the SVG icon.

You can also try increasing the z-index value from 1 to something high like 100

I should be free in about 12 hours. If those suggestions don't work, I can help you then.

nomadic

@torpedopradera Well, unfortunately it looks like this can't be done with CSS alone Unless someone else can figure it out. I am a bit of a novice when it comes the web design, but from my research, it seems impossible (even with weird hacks like using transform and opacity: 0.99;)

The mod that places the Tab Bar below the Bookmark Bar requires the setting Tab Bar Position: [Bottom] which places the Tab Bar lower in the HTML hierarchy than the Address Bar. This messes up what I used in my CSS. No z-index value will make an element of the Tab Bar go above the Address Bar.

I did find that setting the z-index of the Address Bar to 0 allowed my CSS to work, but that breaks things... so many things... All the dropdowns from the Address Bar are hidden below other elements if you do that.

~~.UrlBar { z-index: 0; }~~

So, the content blocker, address suggestions, bookmark button, search suggestions, profile button, and extension popups are all useless with that "fix".

This leaves 5 options:
1 - Have the Tab Bar positioned on top
2 - Use a JavaScript Mod to make a new tab button in the Address Bar
3 - Have the new tab button placed statically somewhere else
4 - Never use any of the dropdowns/popups in the Address Bar (other than Site Info, that works )
5 - No mod

Sorry I wasn't able to fix it. That Tab Bar repositioning really threw a wrench into things.