Getting Started: Your first custom CSS mod - code3z/vivaldi_mods_collection GitHub Wiki

Prerequisites: Know how to add CSS Mods to Vivaldi, setup a custom CSS file for this tutorial

To start creating a CSS mod, you first need to open up the chromium developer tools.

Go to vivaldi://inspect#apps and click on the first "Inspect" link under Vivaldi.

This should open up a window that says DevTools - chrome-extension://.../browser.html

In the top-left of the window, select the little pointer icon. You should now be able to select parts of the browser for inspecting. Try inspecting the notes panel button. Your inspect window should now look like this, with <button data-id="notes".... highlighted.

To apply a change to the notes button, we need to select it. I don't mean select it with DevTools, because it's already selected, but select it with CSS selectors. Let's look at the selectors that are available. Right now, we'll focus on selecting via classes.

Look at the code for the button: <button data-id="notes" title="Notes" class="panelbtn uifocusstop notes" tabindex="-1" draggable="true">...</button>

There are three classes that the notes button has right now. THey are panelbtn, uifoccusstop, and notes.

To select a class, use a dot (.), like this: .panelbtn { css styles here } That code will select every element that has the class panelbtn. If you look at the other panel buttons, they all have that class. Let's try adding some css code to every element with the class panelbtn: .panelbtn { background-color: red; }

Click the "plus" sign in the styles tab as shown below:

Now, add .panelbtn as the selector, press enter, and add background-color as the property, and press enter, and add a color as the value.

But, the color does not actually change.

In this case, doubleclick on your value to edit, and add !important .panelbtn { background-color: red !important; }

This will override Vivaldi's default style, but !important should only be added when neccessary.

Now, let's apply it to only the notes button by editing the selector: .panelbtn.notes { background-color: red !important; } Finally, copy and paste your changes into your custom CSS file. In the top-right "three-dot" menu in DevTools: Dotmenu > More Tools > Changes.

In the changes tab, there is one file changed, called "inspector-stylesheet." You can doubleclick on it to see its source, where you can copy-and-paste it into your own custom.css file.

There are lots of resources online to find more CSS selectors and styles. Have fun!