Mask for the address bar

[stardepp]

Now in detail: I inserted the data for .css from above into "common.css

In Browser.html it looks like this:

And in custom.js I saved the data from Javascript from above:

I chose theme-1.

The result looks like me:

What can I still improve?

[luetage]

@stardepp It’s easy. We told you many, many times before on this subforum, that you should never, under any circumstance change, the content of common.css. Please use the guide provided ⟨LINK) and follow it to the letter. We can’t provide support, if you don’t do that.

[stardepp]

@luetage Okay, this subject is too complicated for me. But all other modifications work for me via custum.css. Thanks for your patience and help.

[nomadic]

@stardepp In the css, you included the top comment, but it looks like you removed the comment markers /* and */.

Change this:

  Mask for the address bar
  Written by Tam710562
  Thanks to sjudenim and LonM for bug fixes and new ideas 

To this:

/*
 * Mask for the address bar
 * Written by Tam710562
 * Thanks to sjudenim and LonM for bug fixes and new ideas 
 */

---

And sorry that link didn't bring you to the right post. Guess the numbering can be different on different devices. Here are the details:

---

@nomadic said in tabs below address bar and overlay menus:

Checking out the pinned topics here in the modding forum should get you all the info you need to start applying mods, but I will give you a quick condensed version here:
 
First Step
Find the mod you would like to apply.

These steps are for how to apply a css only mod, so there are additional steps you need to apply the js part of the mod.

Second Step
Because this mod only uses a css file, it is a little more straight forward. Vivaldi Devs added an option that should allow custom css to stick around even when the browser updates. To enable this feature, you need to go to vivaldi://experiments in the Vivaldi Browser. There you will find an option called "Allow for using CSS modifications." Check this option so it is selected.

Third Step

Now is probably a good time to create the actual css file. You can practically create this file anywhere on your computer, but you should avoid putting it in your Vivaldi directory, as this gets wiped out whenever you update Vivaldi.

• On Windows, the Documents folder might be a good place to keep the mod files. Create a new folder there, and call it anything you want, like "Vivaldi CSS Mods"

• Now, to easily make a file with the .css extension, you need to enable a feature on Windows. You can do this by going to the view tab on File Explorer and selecting the "File name Extensions" option.
  

• Now you can create a text file and change the extension from .txt to .css again calling the file whatever you want, like "tabs-below-url.css" but make sure to not include any spaces in the name, as this will stop the mod from working.

Good File Names	Bad File Names
example.css	example file.css
tabs-below-url.css	tabs below url.css

Fourth Step
Now you can paste the css styles inside the file using Notepad or another text editor and save it.

Fifth Step
The file is all done, so now go back to the Vivaldi Browser to finish up some changes in the settings.

• Go to settings and navigate to the "Appearance" tab. If you scroll down to near the bottom, there should be a new section available called "CUSTOM UI MODIFICATIONS" In this section is a select folder button which allows you to select that folder in Documents we created in the third step.
  

Last Step
The mod should be all done now, just restart the browser to see if it worked.

[stardepp]

@nomadic Many thanks for your very detailed instructions. I was able to implement it successfully.

But the topic "Mask for the address bar" still doesn't work, although I started all over again from scratch and implemented everything step by step.

[nomadic]

@stardepp Hmm, really thought that "bad comment" in the css was the issue. Bad syntax in css is quite often the reason css styles stop working at a certain point in the file.

Can you take another screenshot of the beginning of your css file and the file in File Explorer?

[stardepp]

@nomadic All this is written in the tabs-below-url.css

[stardepp]

[stardepp]

[stardepp]

[stardepp]

[stardepp]

[luetage]

I guess pastebin would be a better idea than screenshots… Anyway, all of these posts are completely off‐topic here, because they have nothing to do with the mod, which works fine.

[nomadic]

@stardepp Sorry I wasn't clear, didn't need all the css in images, just the beginning. Must have taken some time.

It is getting off topic here.

Send me a chat message and I will try and help you if I can. I tried sending you a message, but you have it restricted to only people you follow.

[tam710562]

@stardepp I see a few problems in your css file

[stardepp]

@tam710562 Many thanks for this tip, I have changed. But it has not solved the problem yet.

[Streptococcus]

@tam710562
Why make anything in the address bar hard to read? I have never understood why that is desirable. Of all the ways to emphasize the domain name, most browsers will choose the most awkward way to do that: by making most of the URL semitransparent and hard to read or remove it altogether. What is so bad about the prefix of the hostname? Why hide that?

[nomadic]

@tam710562 and anyone else following along at home, @stardepp and I managed to get it working on their computer.

Thanks for the great Mod!

[sjudenim]

Vivaldi have somewhat added this mod to the Snapshot but the colour scheme they are using is very hard to read. And since I used theme-3, nothing is centred anymore.

While this mod is less needed, it still seems like the right place to add any changes. so to recreate theme-3 in the snapshot you can use this

CSS

.UrlField {
  justify-content: center;
  font-weight: 700;
}

 .UrlField .UrlBar-UrlField {
  text-align: center;
  font-weight: 400;
}

.UrlFragment-Wrapper--ShouldHighlight {
  --HighlightColor: var(--colorFg) !important;
  --LowlightColor: var(--colorFgFaded) !important;
}

[embryo626]

it does not work on v3.3,please fix it,thank you.