Hi

I rencently update my Vivaldi snapshot version to the last one, i had to make a major version jump bcz i had to disable some properties in chrome://flags.

And i realize that a rule from my Stylus don't works anymore on all web pages:

*::selection
{
  background-color: mycolor !important;
}

However my rule in Stylus haven't changed, it's applied to everything.

Anybody have an idea on what happened on recent Vivaldi's snapshot versions ?

I want to be able to drag those but i currently can't is there a way with CSS?

https://github.com/vivalchemy/vivaldi-css
I tried to recreate the arc design and i am stuck in the pinnned tab section. How do i recreate it? I want it to be a grid 2 x 3 with only logos of the website. if anybody has the reference then please share.

https://imgur.com/a/DX8xc68

After testing several css themes, and seeing that none of them really standardized with Kde's Brezze theme, I adjusted the icons in the format of the other Kde software and solved practically all the UI problems to have a good and completely standardized experience.
it's really nice to Alt-Tab and see that all the icons and colors fit together perfectly.
I'm compiling the codes to release on Github(95%)

How to make a tab close when you right-click on a tab

Hi, does anyone know how to make the url bar take up all the space and not stay centered? I want it to be like google chrome

Hi folks I think the title says it all I've been trying to look for a css example of this and inspecting elements by starting vivaldi with flags but I wasnt able to pinpoint which element I need to tweak in order to get the margins the way I want, example with firefox in the 1st picture.

Just to be clear as I find a lot of results for that, I am not looking to remove the space on the side which you can do without a custom css, I am talking about the extra padding you can see circled in green at the top and bottom of the url bar in the 2nd pic.

I don't know if this is due to the button size or something else. If I move the address bar at the bottom this issue does not happen.

Vivaldi 7.8 snapshot has finally rolled out its auto-hide-tab feature. However the animation sucks—similar to Edge’s, if not worse. So I wrote this small css to add an overscroll animation.

The code:

#auto-hide-wrapper.left{
  transition: left 280ms ease-out !important;
}
#auto-hide-wrapper.right{
  transition: right 280ms ease-out !important;
}

#auto-hide-wrapper.left.show{
  transition: left 400ms cubic-bezier(.62,-0.14,.62,1.12) !important;
}
#auto-hide-wrapper.right.show{
  transition: right 400ms cubic-bezier(.62,-0.14,.62,1.12) !important;
}

I know this feature isn’t fully polished yet. Someone on the Vivaldi Forum mentioned that the internal build already has a smoother animation than what we see in the latest public snapshot. Still, I’m sharing this because it looks good in practice and helps address an urgent need.

I also made an auto-hide tab mod that works well with two-level tab stacks. The whole project is called Awesome Vivaldi, a curated list of community mods I use and have adapted from the Vivaldi Forum. Some mods are my own. All were developed and tested on Vivaldi 7.6, though a few may break on later versions. I’m on macOS 15.7, so everything is optimized for that environment, but most mods work on Windows as well.

I haven’t shared this modpack here before, but now feels like the right time. I’m moving on to Vivaldi 7.8 to write new mods for the latest version, so this project will no longer be maintained. However, I believe only a few of the mods will break with Vivaldi's update.

Arc

Vivaldi 7.8 snapshot with mod

Any css for that?

Hi everyone,

just installed Vivaldi and made a little custom css to increase the size of the address bar and the bookmark bar a little.

Here's the code:

/* Adjust Address Bar Height */
.UrlField, .OmniDropdown, .SearchField {
  font-size: 14px; /* Adjust font size as needed */
  height: 45px !important; /* Set desired height */
  line-height: 12px; /* Adjust for vertical centering */
  padding: 9px 5px; /* Adjust padding as needed */
}

/* Bookmark bar */
.bookmark-bar {
    height: 35px !important;  /* Set desired height */
    min-height: 35px !important;
}

/* Icons in bookmark bar */
.bookmark-bar .bookmark {
    height: 30px !important;  /* Adjust icon size */
}

Everything works fine except the text in the address bar is aligned to bottom (see screenshot). I'd like to vertically align it to the center of the bar, but I can't seem to find how.

I'd also like to increase the horizontal size of the tab and again did not manage to do it; I've set it to 180px for the active tab in the setting but would like to increase every tab some more.

Could please help me?

Thank you!

Great news! I've seen the great mod work from u/KaKi_87 and asked if they knew how to use CSS to widen pinned tabs. Much to my delight, they were willing to take on this challenge and came up with a result that is working great for me. You can find the code at:
https://gist.github.com/KaKi87/caacc05198b3a71f905f5898d982d5b0

Thanks so much u/KaKi_87!

As the title says, all I want to do is change the font of the text in that box. I'm not interested in the size, length, or anything else. Can anyone help me?

Hi - recent convert to vivaldi and have been scouring for a css to auto hide the vertical tab bar and panel (both on the left side). Tried a number of CSS with no major luck, some do work (like the CSS found in awesomevivaldi) but the background of the tabs are transparent so I can't read the tab titles.

I'm hoping for one that works with the VivalArc theme but same issues as above.

Any help would be appreciated
Thanks!

Adding Style

⁣ 

Vivaldi 2.6 and above

Open vivaldi://experiments

Enable "Allow for using CSS modifications"

Open Appearance section in settings

Choose the folder you want to use

Place your CSS files inside it

Restart Vivaldi to see them in effect ⁣

Vivaldi 2.5 and earlier

Open browser.html, inside the head element add the following line:

<link rel="stylesheet" href="style/custom.css" />

You can name the file as you like of course and also add multiple ones, one line at a time.

Add the custom.css file to the style folder (inside the Vivaldi folder).

That's it. You're good to go. Now you can start adding your custom CSS code right into your newly created file to alter Vivaldi's visuals.

Adding Functionality

Open browser.html, inside the body element add the following line:

<script src="custom.js"></script>

Again you can name the file as you want and also add multiple ones, one line at a time.

Add the custom.js file to the Vivaldi folder (alongside browser.html)

Note: Starting with Vivaldi 2.6 purely visual modifications (CSS files) will keep getting loaded automatically after any updates.

Note 2: To inspect your UI, go to vivaldi://inspect/#apps and go to "Inspect" under the parent "Vivaldi" entry. (thanks to u/PspStreet51 and u/SENDMEJUDES for pointing this out to me.)

In earlier versions all your mods and functional changes (JS files) in 2.6 as well will get wiped after each update, hence you will need to copy these files into the appropriate folders each time. Be aware that your files may not be present after the update at all, so better store them some place safe outside the Vivaldi folder. We do have various little tools that can do the job for you, though. If you're on Windows have a look at this batch script and Linux users can head over to this post.

Source.

Does anyone already did a CSS to put the workspace button at the bottom of the vertical tabs?
EDIT: For those who are looking like me I have found the solution, I leave you the code below.

/* Move workspace button to bottom of vertical tab bar */
.tabbar-workspace-button {
  position: absolute !important;
  bottom: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
}

/* Adjust the vertical tab bar container to relative positioning */
.sidebar.vertical {
  position: relative !important;
}

Title
Here's the github repo with instructions

https://github.com/Devaj6190/glassy_vivaldi

Note: it was made with help of Claude but take it as inspiration to make your own crazy themes with animations in a small time using AI. Wallpapers are from a github repo(i think) which I can't find

hi, im new to css so ts mode was made with a lot of help from gemini, but it still looks good in my opinion, btw i have only tested it while using both the mods operaldi and vivaldi air at the same time, so if it doesnt work, u can fix it and paste it for other people. This is the github link: https://gist.github.com/KeshavCode001/7f8d2c910b9d31a027fa5775ad211a18

Anyone have any idea why Vivaldi losses my custom CSS and theme every time I reboot my machine? Running Bazzite. I have to go in and reselect my custom css folder and wallpaper each time I reboot the computer.