Some questions about tab icons

codic

The active tab's icon has a white outline, how do I disable this?
The new tab pages icon turns black instead of white (using a dark theme) if inactive, how do I keep it always white?

npro

You can't but you can use a search in the appropriate modifications subforum and look for CSS modifications that can already do it, fortunately Vivaldi has some great users who can create stuff like that or give you the right answers. Alternatively you can request it in the feature requests subforum, if it does not exist.

codic

I could write the css myself but I'm not sure what the selectors are, how can I get them? can i inspect element on the browser itself? if so I could write something like

.tabicon { border:none !important; }
.startPageIcon:inactive {background-color: white !important;} /* i feel like this is hardcoded into the start page's code though, and the image is raster so this won't work even if i got the right selector */

hlehyaric

@codic To inspect Vivaldi's UI, you need to enable first this flag Debugging for packed apps (#debug-packed-apps).

nomadic

@codic Yeah, like @npro said, have a look at the modifications subforum. There is a lot of cool stuff people have created. It also has lots of examples if you want to start writing your own mods. We can always use a web dev to help keep making the browser better!

You can also look at some user's GitHub accounts for mods (my CSS mods are here). I changed the startpage favicon in my CSS with this:

/* selector is probably a bit over specific */
.tab-position .tab[title="Start Page"] .tab-header .favicon img {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABMSURBVFhH7ZQxCgAgDANTH+hj/WBd4uaggxThbgk4HTQxMjNUSHOWgQACCJz8A8O56M7b9y2c4IsOPIUVUEJWwAooISvgBAggUCwgTSL8HixilnmfAAAAAElFTkSuQmCC);
}

And the active tab favicon border is here.

If you happen to know the React framework, definitely check out Vivaldi Hooks on the forum and on GitHub. That will give you the most control over modding how the browser interface works, but normal JS and CSS mods can still do a lot.

You can also use the Chrome Extension APIs in JS mods. There are a few that don't work, so be careful.

codic

Thanks @hlehyaric, then how do I open the selector?
@nomadic Wait, what? You can use React to tweak vivaldi? This browser is just awesome (even if I'm personally not a react fan, I feel it's bloated and tend to go with Vue).

Thanks for the selectors! If I could change the window title buttons...
Also, is there a general selector for all buttons (just button like standard css?) I'd like to add a ripple effect similar to chromium using keyframes

hlehyaric

@codic Let's be clear: I'm able to provide the information, but, regarding your questions, that's all I can do . If I could help you, I would. But saddly, I'm unable to (it's beyond my skills). Fortunately, others can.

Yes, Vivaldi UI is built using HTML, CSS, React.js.

nomadic

@codic

Thanks @hlehyaric, then how do I open the selector?

To inspect the UI, you just need to right click on some part of the interface, after you have enabled the flag of course. Some parts like the empty section of the tab bar won't work, but the address bar, tabs, and bookmark bar work.

The context menu says you can use the shortcut Ctrl+Shift+I, but that will just bring up the webpage's dev tools as normal.

You can also go to vivaldi://inspect/#apps and hit inspect on Vivaldi browser.html

Also, is there a general selector for all buttons (just button like standard css?) I'd like to add a ripple effect similar to chromium using keyframes

There are normal <button> tags, so you should be able to style those. Some more specific selectors from common.css might override your styles, so make sure you get more specific with the selectors or add !important as needed.

Thanks for the selectors! If I could change the window title buttons...

Guess linking to specific line in the file didn't work so great. GitHub put it at the top of the viewport. Here it is, line 194:

/* Disable white background behind favicon on active tab */
.tab-position .tab.active .tab-header .favicon {
  filter: none !important;
}

codic

@hlehyaric It's perfectly alright. Thanks for telling me to!
@nomadic thanks, that's all perfect!

Guess linking to specific line in the file didn't work so great. GitHub put it at the top of the viewport. Here it is, line 194:
/* Disable white background behind favicon on active tab */
.tab-position .tab.active .tab-header .favicon {
  filter: none !important;
}

No I had gotten that css, the titlebutton question was unrelated thank you though!

hlehyaric

@nomadic said in Some questions about tab icons:

To inspect the UI, you just need to right click on some part of the interface,

OMG, I'm just so stupid. I didn't understand @codic's question.

You can also go to vivaldi://inspect/#apps and hit inspect on Vivaldi browser.html

I've just tried thrice. Vivaldi crashed thrice when I closed devtools window. I remember I read lately some posts related to V crashes when closing devtools. Btw, it doesn't happen when I right click (that's why I didn't notice until now).
Update: It happens with floating devtools window. I'm still on 1929.28 (snapshot). Wait for the fix in next snapshot.

codic

for some reason even after i enable the flag the right click thing doesn't show inspect, but that url has browser.html which works just fine.

hlehyaric

@codic This bug is fixed in last stable (minor update) 3.1.1929.34. It still happens in snapshot though. The next release will fix it.

codic

@hlehyaric Yes, I use snpshot. Thank you for the information!

codic

@nomadic Hey, I just got a change to try your tab-favicon-changing css. It just changes the css to always be a black grid, even when the tab is active. Thought that that might be your png specifically so changed it to one I made in gimp (base64 encoded), still the same. No results with the !important rule, any ideas?

nomadic

@codic Are you talking about the one I gave earlier for changing the start page speed dial tab favicon? It would be odd if that was black as the base64 is for a white/grayish grid.

When you inspect it with dev tools, do you see common.css putting some sort of filter on it? Also, is it being applied, right? or is something else canceling it out? Mine is working well and looks like this:

And this isn't being applied to all tab favicons, right? I am just a bit confused about the way you worded it.

I use stable rather than snapshot, so I don't know if they changed something.

codic

@nomadic Yeah, and I made my own base64 to test anyways.
Here's the image:

Here are all styles that are not being inherited, the inherited ones are too long:

Maybe I use background-image instead of content? I'm on latest snapshot on Solus Linux.

nomadic

@codic Can you send an image of what the dev tools says specifically for the image? You have the tab-header selected, so I can't see if the CSS is being applied.

codic

Oopsie, sorry bout that

there's everything not being inherited. if you want the inherited stuff I can get you that too. Also, i realized that your css didn't make it black - it did absolutely nothing! it being black was because i removed the white outline from active tabs...

nomadic

@codic Thanks, but it looks like you are still one level too high. Those appear to be the styles for the .favicon span instead of the img element. Although, it is promising to see that the custom CSS to remove the white outline is working!

Here are a few possible guesses as to what the problem might be:

Your computer is in a different language.
- If you hover over a start page tab, what text shows up in the tooltip?
- It is Start Page on mine, so that is what I put in the CSS selector.
The custom CSS file didn't save when you added the new style
- Don't know, but could have happened.
You didn't restart the browser after adding the new CSS
- The new CSS won't be applied until you restart the browser. You can also open a new window to test if it is working.
Snapshot changed the UI structure and my selector doesn't work anymore.
- Look through the structure and make a new selector.

If none of these help, go ahead and send me the picture of the styles that appear on the img element below that favicon span.

codic

@nomadic

The localization for my linux system is US English and it does say Start Page.
the final image:

there's more inherited properties if you want me to scroll down. but the img tag is not using my custom style...
I did restart the browser and did save the file, and catted (Unix utility to view contents of a file) it a couple times to check
Dunno about snapshot