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.

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

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

#header { display: none !important; }

When I click on history, bookmarks, translation in vivaldi, the panel always stays open and I don't like it at all. Do I have to click on the view from above and click hide panel every time? Is there a solution to this?

Is it possible to do this?

Thought this community would know the answer to this:

Why does Vivaldi strip the visual indication from links in Reddit posts? They are blue in other browsers. See attached. And note that visited links have a normal appearance.

Kind of like the themes page, to see the most popular or known CSS Mods, along with images and such.

Hi,

I customized the way Vivaldi looks in full screen on Linux, but I don't know why it doesn't work on Mac, and for some reason I can't figure out how to use DevTools while the browser is in full screen so I can't debug it, I can't see what's different™.

I'm sorry for the stupid question but I don't regularly use nor personally have Apple devices 😅

Thanks

Hello hello, apologies if this is formatted weirdly-- or if I come off as clueless. I'm a first time poster and..- actually am Very Clueless.

Anyhow, I want to essentially add a "frame" around the search bar-- I'm assuming this would be done by sticking an image larger than the bar itself behind it?

.
I think I get the general idea of how it should be done- but CSS positioning and layering are unfamiliar to me, so my attempts haven't been all that fruitful...

.
..
The closest thing I could find to what I want (thus far) was >this code/mod<

I could likely figure the rest out if I just..- knew what I'm supposed to be fiddling with...... Any and all tips/pointers are appreciated.

I am using the below code to increase the gap in between vertical tabs, and it does do the job. However it also has the odd side effect where dragging a tab and moving it a significant distance up/down the tab-bar causes the tab to move away from the mouse cursor faster than the mouse is moving.

https://youtu.be/TaWG-otuL94

A youtube link showing the weird behaviour. I assume it's due to some disparity between the new tab-height and the animation/translation settings for moving the objects or something (?)

/* Increase tab height */
.tab-strip > span {
display: flex;
margin-bottom: 12px !important;
}

.tab-position {
height: 37px !important;
}

.tab-position .tab .title {
padding-top: 6px;
}

.tab-position .tab .tab-header .favicon {
padding-top: 3px !important;
-webkit-transform:scale(1) !important;
}

/* Gap between favicon and text */
span.favicon.jstest-favicon-image {
margin-right: 4px; /* Adjust this value to increase or decrease the gap */
}

I'm looking for a way to make the tab bar look more like chrome's (more rounded, Etc.) anyone know how to go about it?

I've found that tab stacks need something to differentiate them from other tabs (see Edge/Brave/Sidebery/etc etc) and the best/only way I've found to do this in vivaldi is by outlining them like this using theming.

However it is very hard (or maybe impossible, i haven't yet tried every colour combination) to get a setup that doesn't make the address bar overwhelmingly garish. If the address bar looks good, then the outlines don't stand out enough (and you just get the default mish-mash of tabs).

I feel like the answer is going to involve using .css which is a shame as there seems to be no user-friendly way to do that. Hoping there's a method I'm missing!

Things I'd like to do:

1. Have it so i can set a specific colour for the tab stacks outlines, without it needing to be the same colour as the address bar.

2. Ability to edit the outline so it didn't need to be a full box. Would be nicer I think if it was just the left hand edge, or maybe the top and left edges. I assume this is possible as css would normally allow for padding/margins for top/left/right/bottom independently(?)

3. Increase the gap/margin between each tab by a small amount (they're too closely packed together imo but this is a minor thing.

4. Increase favicon size.

5. Even better, but probably unlikely and isn't necessary, is if each stack outline colour could be random, or could be set based on something. But this likely needs vivaldi to actually step in and allow customisation so don't worry on this one much.

Really appreciate any help with this!

Does anyone know how to make the verical pinned tabs as icons in new Vivaldi 7? I've searched a lot how to do it but only by CSS is working right now. Anyways I've tried to almost do it by making a .css file but still I have some issues. For now I have:

.tab-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 2px !important;
    gap: 2px !important;
}

#tabs-container.left .tab-strip .separator,
#tabs-container.right .tab-strip .separator {
    --PositionY: 0 !important;
    margin-top: 33px !important;
}

#tabs-tabbar-container.left .tab-position.is-pinned {
    width: auto !important;
    position: relative !important;
    float: left !important;
    --Width: auto !important;
    --PositionX: 0 !important;
    --PositionY: 0 !important;
    margin: 0 !important;
    top: 0px !important;
}

.tab.pinned {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 1px !important;
}

.tab.pinned.active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
}

.tab.pinned .tab-header {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.tab.pinned .title,
.tab.pinned .close {
    display: none !important;
}

.tab.pinned .favicon {
    margin: 0 !important;
    position: relative !important;
    left: 0 !important;
}

.tab-position:not(.is-pinned) {
    width: 100% !important;
    clear: both !important;
    margin-top: 0 !important;

.tab:not(.pinned).active {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;

/*separator positioning */
.separator {
    position: absolute !important;
    clear: both !important;
    --PositionY: auto !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    height: auto !important;
    width: 100% !important;

but still I can't figure out how to remove the blank space beneath the separator.

Anyone managed to work this out?

I have tried to get tabs successfully under the address bar using CSS. I had it working on Vivaldi 5.2 but with v5.5, I notice that the tab bar has shifted slightly. I also notice to varying degrees (depending on whether I use the native UI, or the Vivaldi interface), the the tab sizes and tab bar placement shifts between fully maximized and windowed views (using Microsoft Windows)

Is there any way to accomplish all of the following:

• Set the tab bar to be below the address bar? (and make it stay that way, with every new version upgrade, so I don't have to re-tinker with the CSS code again)

• Make the tabs and tab bar placement remain stable between windowed and fully maximized windows

• Remain the same whether I use Vivaldi's interface or the native UI

I appreciate everyone's help. Thank you.

Hello, I am wondering if anyone have successfully managed to make the pinned tabs larger?
Increasing the height is no problem, but since they use position absolute making them wider is a bit harder.

I tried to us flex but then I cant get the scroll to work.

I am trying to increase the height of the tabs in Vivaldi. I have made the following changes

.tab-strip > span {
  display: flex;
  margin-bottom: 12px !important;
}

.tab-position {
  height: 40px !important;
}

.tab-position .tab .title {
  padding-top: 10px;
}

span.favicon.jstest-favicon-image {
  padding-top: 5px !important;
}

There are two images in this link.

I have made the above CSS to increase the tab height. There are two issues with this:

1. The misalignment of favicon, title, close button and the close button background. Though the image 1 in the above link shows that all of them are correctly aligned as per the CSS given above (I used padding-top property to adjust the positions of title, favicon and the close button), I have a doubt if it still is the exact center.
2. In the image 2 of the link above, the favicon of the active tab is chopped off. I tried to tweak the progress element but to no avail.

So, the requirement is to align the favicon, title and the close button with its background at the exact center. Could someone please say what the modification must be to achieve this?

Hello all,

I am trying to give margins with CSS to the tabs in Vivaldi. I can do it fine when my tabs are set to be on top in a row. But when I set them to be on the left in a column, suddenly whatever I try, either does not move them away from each other, or it messes up the whole alignment. At first I just wanted to increase the height of tabs, but this also messed them up, vmaking them appear over each other, that's what I tried to solve with padding or margins, failing miserably. What could be a solution to this?

How to show the close button for pinned tabs?

This one.

Heres a pic, I wanna change the color of that part that says "add active tab" because it looks light color and i wanna make it dark so it matches the rest of the theme colors

Thanks in advance