Creating and using custom.css on NixOS

nahianadnan1234

As i am on NixOS, Here things works differently than other distros. Someone Add the NixOS tag to here vivaldi forum.

Vivaldi	7.0.3495.6 (Stable channel) stable (64-bit) 
Revision	63217596240dd9d59679a479643371d34e73b5b9
OS	Linux
JavaScript	V8 13.0.245.18
User Agent	Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36
Command Line	/nix/store/q0nxwn0cc0r4rd8mw4gyk4gdvgfns1kx-vivaldi-7.0.3495.6/bin/.vivaldi-wrapped --ozone-platform=wayland --use-gl=angle --use-angle=gl --ignore-gpu-blacklist --enable-gpu-rasterization --enable-features=VaapiVideoDecodeLinuxGL,VaapiVideoEncoder,RawDraw,CanvasOopRasterization,UseOzonePlatform --enable-gpu-rasterization --enable-zero-copy --enable-hardware-overlays --enable-native-gpu-memory-buffers --enable-webrtc-pipewire-capturer --ozone-platform-hint=auto --enable-features=WaylandWindowDecorations --flag-switches-begin --flag-switches-end --save-page-as-mhtml
Executable Path	/nix/store/q0nxwn0cc0r4rd8mw4gyk4gdvgfns1kx-vivaldi-7.0.3495.6/opt/vivaldi/vivaldi
Profile Path	/home/Linux-DADDY/.config/vivaldi/Default

As you can see i just have the symlink on vivaldi's path. I can go to /nix/store/q0nxwn0cc0r4rd8mw4gyk4gdvgfns1kx-vivaldi-7.0.3495.6/opt/vivaldi/ but i can not change something in it, as it is just read only file. So can i just put the css file in .config/vivaldi?

Pathduck

@nahianadnan1234 said in Creating and using custom.css on NixOS:

So can i just put the css file in .config/vivaldi?

Yes. But maybe somewhere more logical like ~/documents/vivaldi/mods or ~/.config/vivaldi-mods - it's up to you.

nahianadnan1234

@Pathduck said in Creating and using custom.css on NixOS:

Yes.

Yeah, It is working. Now i want to do it with the NixWAY. As i followed this guide This nice guide.

Open vivaldi://experiments
Enable “Allow for using CSS modifications”.
Open Appearance section in settings.
Under “Custom UI Modifications” choose the folder you want to use.

Now can you tell me what vivaldi use for commandLineArgs for Custom UI Modifications?

    #Vivaldi
    (vivaldi.override {
      proprietaryCodecs = true;
      enableWidevine = true;
      # isSnapshot = true;
      # kerberosSupport = true;
      commandLineArgs = [
        # Vivaldi support forum, "https://forum.vivaldi.net/post/756473"
        "--ozone-platform=wayland"
        "--use-gl=angle "
        "--use-angle=gl "

        "--ignore-gpu-blacklist "
        "--enable-gpu-rasterization "
        "--enable-features=VaapiVideoDecodeLinuxGL,VaapiVideoEncoder,RawDraw,CanvasOopRasterization,UseOzonePlatform "
        "--enable-gpu-rasterization "
        "--enable-zero-copy "
        "--enable-hardware-overlays "
        "--enable-native-gpu-memory-buffers "
        "--enable-webrtc-pipewire-capturer "
      ];
    })

As you can i do have some commandLineArgs i want to have that too as well with the

Open vivaldi://experiments
Enable “Allow for using CSS modifications”.

So then i can have the vivaldi with the Nix WAY.

Pathduck

@nahianadnan1234 There is no command line. It's just an option.

Follow the guide and it works, NixOS or not.

I hope you are not copying the full custom.css, in that case you're doing it wrong. And the file you create does not even have to be named that.

nahianadnan1234

@Pathduck said in Creating and using custom.css on NixOS:

There is no command line. It's just an option.

How does this work when there's no option? It should have one command to run when enable it from GUI.

@Pathduck said in Creating and using custom.css on NixOS:

I hope you are not copying the full custom.css, in that case you're doing it wrong. And the file you create does not even have to be named that.

Also i didn't copied that at all, i just followed the guide. By the way i do have the css file here /etc/nixos/Home_Manager/Desktop_Package_Configs/Browsers/Vivaldi/vivaldi-custom-css/copythis.css. I am using it as this with this css file

/* Added Lines */

#header {
  display: none;
}

.window-buttongroup {
  display: none !important;
}
.linux #tabs-container:not(.none).top {
  padding-right: 10px;
}

#browser.normal #header,
#browser.normal #header .vivaldi,
#browser.normal #header .window-buttongroup button {
  height: 30px !important;
}

/* End lines */

But again i think i would make it better in the Nix WAY.

nahianadnan1234

@nahianadnan1234 said in Creating and using custom.css on NixOS:

But again i think i would make it better in the Nix WAY.

And I really did. Here is the code if someone is interested.

{
  home.file."Custom_CSS" = {
    executable = false;
    target = ".config/vivaldi/Vivaldi_Mod/Custom.css"; # Change it to your own directory.
    text = ''
      /* Added Lines */

      #header {
        display: none;
      }

      .window-buttongroup {
        display: none !important;
      }
      .linux #tabs-container:not(.none).top {
        padding-right: 10px;
      }

      #browser.normal #header,
      #browser.normal #header .vivaldi,
      #browser.normal #header .window-buttongroup button {
        height: 30px !important;
      }

      /* End lines */
    '';
  };
}