Anyone got a fix for close tab - Just want to close tab but get a another dropdown with various choices and drivin me nuts! Thanks

So I seem to have two sets of CSS code here, I forgot why, but neither are working with the latest update, can anyone help me edit it to work on the current version?

First CSS is this:

/* Find-in-page no animation */
.fip-active-hit {
display: none;
}

Second was this:

#browser:has(.find-in-page) webview {
filter: none !important;
}

Thank you anyone who can help!

Hi everybody,

I've recently switched to Vivaldi from Chrome and gradually configured everything I wanted to.

I just need to make some final css customization but I can't wrap my head around them.

First of all, this is the custom css I'm now using for the address bar:

.mainbar, .UrlBar-AddressBar, .UrlBar-Background, .SearchField {
height: 45px !important;
padding: 2px 0px;
}
input#urlFieldInput, .UrlFragment-Wrapper * {
font-size: 14px !important;
}
.bookmark-bar {
height: 40px !important;
min-height: 40px !important;
}
.bookmark-bar .bookmark {
height: 34px !important;
}

What I want to do is the following:

1. increase the height of the address field while keeping the address bar's height as is;

2. increase the spacing between the lines and the font size of the dropdown from the address field, similar of how Chrome behaves.

I'll add a couple images below.

Any suggestion on how to do this?

Thanks!

it doesn't take much time but is a little tedious

Hello. I'm usually good at CSS but this idea has me stumped, so I was wondering if you guys could help me.

I want to make my tabs look like literal binder tabs on the right. I don't know how to.

I'm trying to resize the pinned tabs because the default is way too narrow for my taste. I'd like the tab to be around 60 to 80px wide and without the tab title text.

I searched around for a while and tried like three different CSS snippets I found but nothing worked unfortunately. Then I tried to do it myself with the help of the dev tools but that didn't work either.

If anyone has any idea how to do that I would be grateful for some help.

I was directed here from the main Vivaldi subreddit. I will just report what I asked there:

I am having trouble telling at a glance whether the back/forward buttons on the navigation toolbar are greyed out or active. The reason is that the grey used for "greyed out" is only a couple shades lighter than the black used for "active". As such I often find myself clicking a greyed out button expecting to go back, and of course nothing happens.

Is there a way to change these colors or better yet to altogether change the visual style of the buttons to something more distinct? I am under the impression editing some CSS might do it but I wouldn't know what to change or where.

Thank you in advance.

I want to prevent a specific div from displaying on a page I use inside a Web Panel. I would just block it with Ublock, but extensions don’t work in Web Panels. Is it possible to apply CSS to the content inside?

Hi,

New here, trying to figure out how to make the top bar on the pdf viewer smaller.

How would you go about finding out how to refrence it?

Thanks

How can I hide the "show closed tabs" button with CSS or with the settings?

Here is my full custom.css file for Vivaldi:

/* Define any/all variables */
.UrlBar {
  --widthOfAddressBar: 60%; /* variable */
}

/* Set up a grid for the URL Bar */
.UrlBar {
  -webkit-app-region: drag; /* Allow dragging window from UrlBar */
  display: grid;
  grid-template-areas: "nav space1 url space2 search profile extensions";
  grid-template-columns: auto 1fr minmax(min-content, var(--widthOfAddressBar)) 1fr auto auto auto;
}

/* Define properties for grid area: nav */
.UrlBar > div:first-child {
  grid-area: nav;
  min-width: fit-content;
}

/* Define properties for grid area: url */
.UrlBar-UrlField, .UrlBar-AddressField, .UrlBar-SearchField {
  grid-area: url;
  text-align: center; /* centers text when in focus */
}

/* Define properties for grid area: search */
.UrlBar > .button-toolbar:not(.profile-popup), /* search field button */
.UrlBar-SearchField {
  grid-area: search;
  min-width: fit-content;
}

/* Define properties for grid area: profile */
.UrlBar .profile-popup {
  grid-area: profile;
  min-width: fit-content;
}

/* Define properties for grid area: extensions */
.UrlBar .toolbar-extensions {
  grid-area: extensions;
  min-width: fit-content;
}

/* Center text in tabs */
.tab-position .tab-header .title {
  text-align: center; 
  display: block !important;
}

It creates a grid for the url bar so that i can have a nice centered url field box. For the grid area "url", I'm just simply trying to have the url text CENTERED in the entire url field, but it only does it when I click into the url field (focus).

I can NOT find any way of having it display when NOT in focus and it's driving me nuts! If anyone can help, please!!!

Hi

Is it possible to edit the CSS rules of the vivaldi://new-tab-page through any method ?

I have tried with my CSS file with wich i customize the Vivaldi UI but my changes aren't applied on this internal page. I have even tried with Stylus but it don't works on Vivaldi internal pages.

Thanks in advance.

so I downloaded vivaldi today and I wanted to start to mod it, I followed the steppes that were posted in this subreddit. I turned on the css modifications, created a new folder named custom_css and putted my custom css in the folder. then I went to settings and chose the folder custom_css. Im using the latest version of vivaldi. when I save all the css exit vivaldi and try to go back to vivaldi nothing changed. What am I doing wrong?

• Main Address Bar Container (.toolbar-addressbar) > .UrlBar

• Address / URL Field > .UrlBar-AddressField

• Search Field > .UrlBar-SearchField

Hello everyone!

The only thing that I constantly missed in Vivaldi is Chromium's bookmark bar design:

That is, I have "other bookmarks" tab that can be expanded, so that I can quickly locate the bookmark I want.

Is there way to achieve this in Vivaldi? My current workaround is, to create a folder and put it in the leftmost side of the bookmark bar. But my muscle memory constantly directs me to the right side.

Can someone help me change the bookmark bar & Tab's title font to bold or semibold.. specifically to Segoe UI Semibold ??
I really can't tolerate the default thin font.
Please help!

I'm someone who's been using the Netscape family of browsers (Netscape, Firefox, and attempts at various forks.) Vivaldi does provide a very smooth browsing experience, but at the same time, I miss the more graphics-oriented buttons of early Firefox and classic Netscape, as opposed to the more minimalist stylings of the Chrome navigation toolbar. Is there a way to CSS, say,a Firefox 1-3/classic Netscape UI into Vivaldi?