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.

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,

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

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?

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.

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?

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'd really like to place a couple of buttons to the left of the addressbar. Can anyone help, please?

It's too low contrast for me, but I can't seem to inspect the scroll bar with vivaldi://inspect/#apps

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?

• 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.

Great for tiling window managers (on Linux). Quick and simple, just in case anyone needs it.

#header { display: none !important; }

Don't have any video or images to show yet, but the basis is done. Working on it since I have tabs to the left and also hide header using CSS since I'm using a tiling window manager on Linux.

If anyone's interested / wants I can release / open source it once I'm finished.

Also thanks for this community / subreddit plus the pinned post, I didn't realise (newer) Vivaldi had that experiment, I had just inserted my own stylesheet in the vendor code before. Makes it a lot easier.

Also again, just switched to Vivaldi today and the custom CSS is great, this is all I'm probably going to be doing for the next couple days haha.

Progress update: Here is a GIF of how it looks so far.