Custom CSS in Linux

mudshark

I recently lost my old Windows hard drive and moved to Ubuntu (Zorin). I installed Vivaldi (5.7.2921.65 ) and am trying to restore a custom CSS that was working in Windows under a previous ver of Vivaldi.
I have the path set properly and a file (VIVALDI.CSS) there reads as shown below.
It is not working as it was earlier.
Any clues anyone?
Thanks all,
Rich

.header-bar.default-decoration .button.titlebutton {
padding-top: 3;
padding-bottom: 3px;
}
.header-bar.default-decoration {
color:#FFFFFF;
background-color:#0000EE;
background-image:none;
}
.header-bar.default-decoration:backdrop {
color:#999999;
background-image:@bg_image;
background-color:@bg_color;

Dancer18

@mudshark I'm not a real expert, but for me such a filename doesn't work either. Rename the file to custom.css.

Also, the whole thing only works if you have enabled this line in vivaldi:experiments:

Allow CSS modifications

Additionally, you have to define the path to custom.css in the preferences >CUSTOM USER INTERFACE MODIFICATIONS.

I created a directory VivaldiStyles within the config folder.

Pathduck

@mudshark Might've helped if you explained what the code is supposed to do?

I can't find any reference to the classes .header-bar.default-decoration or .backdrop anywhere in Vivaldi's code so that code does nothing.

luetage

@mudshark This CSS has multiple errors, in this form it couldn’t have worked before, or at least only partially. You should use a code editor with language server support to help you out there.

padding-top needs a unit (e.g. pixels)
:backdrop ????
@bg_image and @bg_color aren’t valid values
you’re missing a closing bracket at the end

Hadden89

@Dancer18 the name is probably not !important even if it is better to stick with custom.css
@mudshark I doubt this code ever worked. Probably some other code you had ~ did and this was ignored. Btw, what was supposed to do?

Dancer18

@Hadden89 said in Custom CSS in Linux:

the name is probably not !important even if it is better to stick with custom.css

Maybe. However, I renamed my custom.css to investigate it, and it didn't work with capital letters. With naming it vivaldi.css it's working. Also with VIVALDI.css.
BUT NOT with anyname.CSS (at least on Linux).

luetage

@Dancer18 On any operating system. It’s simply the wrong file extension.

mudshark

This seemingly-too-short CSS file, quoted in its entirety earlier in this thread, did exactly what it was supposed to do under an earlier (Windows) Vivaldi.

The closing bracket is there, I just missed it in the copy/paste to this post.

It is supposed to give the tabs alternating colors to make it easier to define one from another rather than have them all the same color.

Renaming to custom.css didn't help.

The path to custom.css is defined under CUSTOM UI MODIFICATIONS and is enabled under experiments.

Dancer18: You write that .css is the wrong file extension but under CUSTOM UI MODIFICATIONS it states that the file extension must be .css so what did I miss there?

You also wrote that you created a directory VivaldiStyles within the config folder.

I set path=home/rich/public and that is where I have my custom.css file. I can try moving it to the folder you use but can you tell me where the (Ubuntu) Vivaldi config folder is? I'd be happy to try moving it there!

Thanks all.

mib2berlin

@mudshark
Hi, was not work is .CSS but .css work, may this work in Windows but not in Linux.
The path is OK, I have /home/user/scripts/vivaldi_script/
as my custom.css folder.
May you check something simple like:

/**********Startpage transparent*******/

 .startpage-navigation {
    background-color: #111;
    opacity: 0.4;
    min-height: 30px !important;
}

This code make the navgation bar smaller and transparent:

If this work you know all settings and the path is working.
I cant help with the code, I mostly copy/paste code from other user and change it to my needs.
Unfortunately, I don't remember who wrote this snippet.

Cheers, mib

nomadic

@mudshark said in Custom CSS in Linux:

It is supposed to give the tabs alternating colors to make it easier to define one from another rather than have them all the same color.

Looks like I helped you in the past with that, but the CSS here isn't what I gave you. You can find the CSS to alternate the tab colors here: https://forum.vivaldi.net/post/631080

@nomadic said in New tab positions and colors:

#browser span:nth-child(odd) .tab-position .tab:not(.active) {
  background-color: red !important;
}
#browser span:nth-child(even) .tab-position .tab:not(.active) {
  background-color: blue !important;
}