How to apply blur and translucent effect to address bar and bookmarks bar using custom CSS?

[Adish]

Hi everyone,

I've been able to successfully apply a blur and translucent effect to the tabs bar in Vivaldi using custom CSS, As mentioned here but I'm wondering if there's a way to do the same for the address bar and bookmarks bar.

Any help or advice would be greatly appreciated.

Thanks,
Adish

[Pathduck]

@Adish
For more guidance on how to mod Vivaldi please read the following helpful topics:
Guide - Modding Vivaldi
Inspecting the Vivaldi UI with DevTools

[Adish]

@dude99 Sir, it would be great if you consider creating a mod for this as well.

Thanks and Regards !

[dude99]

@Adish Sorry I can't made anymore Vivaldi CSS mod for foreseeing future because I don't have access to the latest stable Vivaldi, not until I can afford to upgrade my PC to that can run the latest Vivaldi.

Thus, pls follow @Pathduck suggested link learn to use the inspecting tool to pick the correct elements' selector & apply the transparent & blur effects. You probably will be inspecting for .mainbar and .bookmark-bar.default plus all of their child elements.

Once you found all the element you want to turn transparent, you just need to apply background: none !important; (ONLY add !important to overwrite default code if it doesn't work without it) to element you wanted to be transparent; then add blur effect with filter: blur(1px); (higher value = more blurry).

This should get you started, with just the under layer of both mainbar & bookmarkbar turn transparent. But then you also need to eliminate their child elements' background colors too...

.main, .bookmark-bar.default {
background: none !important; filter: blur(1px);
}

<mainbar child element , bookmarkbar child element> {background: none;}

if you are really lazy, then try this super overpower code to include all the child element that is not in hover, focus, or active state:

.main *:not(:hover, :focus-within, .active), .bookmark-bar.default *:not(:hover, :focus-within, .active) {
background: none !important;
}

---

background references:
https://www.w3schools.com/cssref/css3_pr_background.php
https://www.w3schools.com/css/css_background_image.asp
https://www.w3schools.com/css/css_background_shorthand.asp

blur references:
https://www.w3schools.com/cssref/css3_pr_filter.php

---

You probably should also study the Vivaldi default CSS (common.CSS file) to learn other pseudo properties related to tabs and bookmarks, like:
:hover = when mouseover
:focus-within = have focus
.active = tab is active

That's all for now, I hope it's not too much info to deter you from DIY modding... Again, sorry i can't build the CSS mod for you cuz I can't really sure it will work properly without testing it repeatedly with the latest Vivaldi.

---

To other CSS wizard & modder that read this, pls correct my mistake if you found something written is wrong or missing, for i have no access to the latest changes to Vivaldi common.CSS file. Many thanks in advance.

[Adish]

@dude99 Thanks a lot !

Tried it , but it didn't work as intended, instead it blurred the icons and names of bookmarks while it has to make the background transparent and blurred.

I am new to CSS and thus have zero-knowledge about how it works, so what should I do?

[Pathduck]

@Adish Have you read the docs?
https://forum.vivaldi.net/topic/10549/modding-vivaldi
https://forum.vivaldi.net/topic/16684/inspecting-the-vivaldi-ui-with-devtools

You need to set the backdrop-filter of the bookmark-bar class:
backdrop-filter: var(--backgroundBlur);

This will use the theme blur value. Otherwise use a specific value.
https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

You'll need to set the background of the button elements (bookmarks) to transparent as well, as they have explicit colour set.

[dude99]

@Adish Whoops! Sorry, it seems I'm getting pretty rusty with CSS after hiatus for a very long time. LOL

Pls do what @Pathduck suggested, the correct syntax should be backdrop-filter: blur(), not filter: blur() because you only want to blur the background, not the entire element.

ref:
https://www.w3schools.com/cssref/css3_pr_backdrop-filter.php
https://css-tricks.com/almanac/properties/b/backdrop-filter/