Solved Colors customization

[TheFlyingCelt]

Is it possible to change the address bar color without affecting other parts of the theme?
I mean, it's only 4 colors we can play with and If I make the address bar white, so will be the vertical tabs background. Is there any way to edit colors in a more detailed way?

Thanks

[Pathduck]

@TheFlyingCelt Yes, this is possible

Please read:
https://forum.vivaldi.net/topic/10549/guide-modding-vivaldi
https://forum.vivaldi.net/topic/16684/inspecting-the-vivaldi-ui-with-devtools

[barbudo2005]

@TheFlyingCelt

With Vivaldi the sky is the limit.

Three colors of the URL:

[TheFlyingCelt]

@Pathduck thank you

[Pathduck]

@TheFlyingCelt Don't hesitate to ask if you have questions

[mib2berlin]

@Pathduck
Hi, I have a question.
I cant remember exactly but some time ago one have to set a flag or start with a command line switch to fully inspect with dev tools.
I cant inspect the address bar following the description in the modding thread, only the page.
So if I want to change the background color of the address bar I am lost.

From an existing script I get this with trial and error:

/******* .UrlBar-AddressField , .UrlBar-SearchField { border: none; }****/

.UrlBar-AddressField,
.UrlBar-SearchField,
.UrlBar-AddressField:focus,
.UrlBar-SearchField:focus
{
	border: none !important;
	outline: none !important;
    background-color: #FFF;
}

But I would never find out .UrlBar-AddressField is what I need.

Cheers, mib

[barbudo2005]

@mib2berlin

Said:

I cant remember exactly but some time ago one have to set a flag or start with a command line switch to fully inspect with dev tools.

I cant inspect the address bar following the description in the modding thread, only the page.

That happens to me every time I upgrade. I have to delete Vivaldi from the Windows bar and load it from the desktop where the appropriate commands are:

"C:\Users\XXXXX\AppData\Local\Vivaldi\Application\vivaldi.exe" --flag-switches-begin --debug-packed-apps --silent-debugger-extension-api --force-renderer-accessibility --process-per-site --disable-g --disable-renderer-accessibility  --flag-switches-end

[mib2berlin]

@barbudo2005
Hm, even with this flags I cant inspect the address bar.
Move the mouse up and the inspection stops.

[barbudo2005]

@mib2berlin

Strange. You need to investigate the problem.

[mib2berlin]

@barbudo2005
I try this since Vivaldi 1.0, never worked for me, the same with the start page, no way to inspect anything.

[nomadic]

@mib2berlin Open vivaldi://settings in a tab or start page tab and then use Quick Commands to Toggle Developer Tools.

You can also setup a command chain to make it easier.

[mib2berlin]

@nomadic
Man, this is working, I remember read this in the forum but I never try it.
Thank you very much, I can now do my own changes instead of copying code from others much easier.

[barbudo2005]

@mib2berlin

Said:

I try this since Vivaldi 1.0, never worked for me...

So much time wasted.

[Pathduck]

@nomadic said in Colors customization:

pen vivaldi://settings in a tab or start page tab and then use Quick Commands to Toggle Developer Tools.

Yep, that's what I've been doing, much faster than the other methods.

The --debug-packed-apps flag still works, but I rarely need to use it. It's the only flag you need to be able to right-click any UI element to inspect. It's handy in some cases, but not really needed for most things.

The --silent-debugger-extension-api flag I have no idea what it's for - I assume something specific for extension developers. For CSS modding it seems to have no use.

The thing I wish I knew more about is setting breakpoints for the times when you have to inspect the code of stuff that disappears when focus is lost, like popups etc. I can never seem to get it right, but then again I'm not a developer

[nomadic]

@Pathduck said in Colors customization:

The thing I wish I knew more about is setting breakpoints for the times when you have to inspect the code of stuff that disappears when focus is lost, like popups etc. I can never seem to get it right, but then again I'm not a developer

Breakpoints have stopped working since the introduction of window.html, or at least since the last time I checked. Think it has something to do with the JS still being in browser.html, but inspecting that context still doesn't work.

Most people mainly used that method for the address field dropdown or Quick Commands, but luckily those both now stay visible when you switch to the devTools window. The most annoying one to inspect is the status info overlay. Best way I can find to deal with it is by searching for the element in the HTML and manually changing the class to be visible.

Is there any particular popup that causes you problems now?

[Pathduck]

@nomadic said in Colors customization:

Breakpoints have stopped working since the introduction of window.html

Oh yeah, that would explain it - I could never get it to trigger lately

Is there any particular popup that causes you problems now?

Nope, currently no popups in need of modding

[barbudo2005]

@mib2berlin

Said:

I try this since Vivaldi 1.0, never worked for me...

I was so saddened and shocked by your case that I am offering to make up for lost time.

[mib2berlin]

@barbudo2005
Don't worry, in the meantime I have used scripts from other users like you and made small changes to suit my needs.
Now I have more control and can create my own code snippets, nice.

Cheers, mib