Mask for the address bar

[luetage]

@stardepp You forgot the closing brackets in both of your last statements. You should really set the closing bracket on its own line to be aware of such mistakes. I can see that the only existing closing bracket is in the first statement, but that one doesn’t have an opening bracket. Nothing can work this way.

[A Former User]

@luetage said in Mask for the address bar:

that one doesn’t have an opening bracket

It has—but it’s placed similarly.

[luetage]

@potmeklecbohdan lol, my mistake
@stardepp What kind of editor are you using? Normally you should be made aware of such mistakes.

[stardepp]

@luetage I changed it, it works, but now the yellow color is gone in the base domain.

[luetage]

@stardepp Works for me. Copy and paste this, it’s your code sans errors:

/* URL Base-domain  */
.UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD {
    color: #FFE63B !important;
    font-weight: bold;
}
.UrlBar-AddressField > .secure + .UrlBar-UrlFieldWrapper, .UrlFragment-Wrapper > .UrlFragment--Lowlight:first-of-type {
    color: #46c235 !important;
}

[stardepp]

@luetage I changed it the same way, but unfortunately the basedomain remains white.

/*Highlight Active Tab*/
.tab-position .tab.active:not(.tab-group)
}

{border-top: 2px solid var(--colorHighlightBg) !important;
border-bottom: 2px solid var(--colorHighlightBg) !important;}
}

/* URL Base-domain  */
.UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD {
    color: #FFE63B !important;
    font-weight: bold;
}
.UrlBar-AddressField > .secure + .UrlBar-UrlFieldWrapper, .UrlFragment-Wrapper > .UrlFragment--Lowlight:first-of-type {
    color: #46c235 !important;
}

[luetage]

@stardepp Then you have some other code interfering. Delete the whole content of your custom file and only paste the code I posted, then try again.

And damn, you inserted a closing bracket instead of an opening bracket in your first statement, that may be the reason the rest of the code doesn’t do what you want. Please install a proper text editor.

[stardepp]

I use the Windows Editor. I also have Visual Studio code installed, but so far this program was too complex for me.

[luetage]

@stardepp What’s the Windows editor, Notepad? I don’t have information about this editor and never tried it. VS Code will do what you want, but it’s a bit overkill for simple CSS indeed. The best thing you can do is to learn CSS syntax, e.g.: https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax.

[stardepp]

@luetage ist es besser?

*Highlight Active Tab*/
.tab-position .tab.active:not(.tab-group)
}

border-top: 2px solid var(--colorHighlightBg) !important;
border-bottom: 2px solid var(--colorHighlightBg) !important;
}

/* URL Base-domain  */
.UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD {
    color: #FFE63B !important;
    font-weight: bold;
}

.UrlBar-AddressField > .secure + .UrlBar-UrlFieldWrapper, .UrlFragment-Wrapper > .UrlFragment--Lowlight:first-of-type {
    color: #46c235 !important;
}

[stardepp]

If I omit the code from tam710562

.UrlBar-AddressField > .secure + .UrlBar-UrlFieldWrapper .UrlFragment-Wrapper > .UrlFragment--Lowlight:first-of-type {
    color: #46c235;
}

, all my other .css modifications will work

[luetage]

@stardepp No, it isn’t. You have a closing bracket after your selectors, and then another closing bracket after your declarations. Moreover you are missing a slash in your top comment. I fix it now, because we are spamming this topic with troubleshooting. Try and learn CSS, it’s very helpful in fixing your own mistakes and potentially writing your own modifications. It won’t take long and you will benefit immensely.

/* Highlight Active Tab */
.tab-position .tab.active:not(.tab-group) {
    border-top: 2px solid var(--colorHighlightBg) !important;
    border-bottom: 2px solid var(--colorHighlightBg) !important;
}

I noticed you copied the css into VS Code. But there is no syntax highlighting, because you didn’t save the file as css. Do that and you will see the mistakes.

[stardepp]

But all my .css modifications work without your modification suggestions.

[barbudo2005]

@stardepp

I use Notepad++ as editor for CSS. Is perfect for that (and also for JS). Give it a try.

[A Former User]

@barbudo2005 Btw., you still have the non-functioning code you’ve tried (L402—L405) there.

Edit: sorry, I didn’t realise it was actually also the code that works now.

[stardepp]

@barbudo2005 ...thank you very much, I would like to try, but I can't copy yours...can you please send me your lines as code, that would be very nice.

[barbudo2005]

@stardepp It is the same code of @tam710562 only that I change some colors.

/* URL colour */

.UrlFragment-Wrapper, .UrlFragment--Lowlight:first-of-type

 { color: var(--colorFgFadedMore); }


/* URL Base-domain  */

.UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD

 {color: #d8d8d8 !important; 
  font-family: Lato !important;
  font-size: 18px !important;}
  
/* URL Sub-domain */

.UrlFragment-HostFragment-Subdomain:not([data-content="www."])

 {color: #679CEB !important ;
 font-size: 18px!important;  }

I present the image to show you that in Notepad++ you can define the language, so you have syntax highlight, and the colors of your taste.

It is so easy to use.

I have my custom.css and custom.js open directly in Notepad++. It open in two tabs and maintain the tabs:

So every time I open Notepad++ I have both ready to make a modification.

And of course I have the "Home page " as vivaldi:// restart (and change the icon) so is easy to restart Vivaldi to see the changes.

[stardepp]

This is what my address line looks like now, I am very satisfied with it. I do not need any more changes.

I am very grateful for your patience with me and I appreciate your professional help

[barbudo2005]

@stardepp I have only give a grain of sand to reward the huge sand beaches I receive in this Forum.

[stardepp]

@barbudo2005 I feel very comfortable here in this forum and don't know any better forum or browser