Moving Buttons Right or Address Bar Left

  • @luetage An edit from before ... I saw no change with this. My bookmarks button is before the home button as you can see from the code. It shows no space between them with this margin or any other number for that instance.

  • @Deranox

    .tab-header .favicon, .tab-header .close {
    	display: block !important;
    .tab-header .close {
    	order: 1 !important;
    	margin-right: 5px;

    This will make the close button permanently visible on the right side of each tab.

    Concerning the space between the buttons I can only say that I tested it and the code works. You probably have an error in there somewhere.

  • @luetage Thank you, it worked! Can space be added between the address bar and the search bar somehow ? Another thing now that I think about it is spacing in the address bar for the addresses. A little more space between them and a bigger font wouldn't be such a bad idea as it's so tiny by default it's hard to read sometimes.

  • input.url.vivaldi-addressfield, input.searchfield-input.vivaldi-searchfield {
    	font-size: 14px;
    	letter-spacing: 1px;
    .iconmenu-container.searchfield {
    	margin-left: 10px;

    Have I earned a medal yet?

  • @luetage If I could I would give you one 😛 Thank you so much! I was thinking why don't we split this up into different topics for better search or can people find it easily anyway ?

    Btw about the space between addresses, I meant that this = is wider. The space under each link. Is that what this does because I'm seeing no change.

    Also, is there a way to show just typed history and bookmarks instead of the whole history ?

    Oh and are these changes saved upon an update ? Or should I backup the custom.css file ?

  • Nope, that's not it. This changes the font size and spacing between the link in the address bar. I want to change the font and space between the links themselves as a list in the address list itself.

  • Nah, don't spam the forum board with your personal requests when they are already dealt with. Most of them are rather obscure and it's likely only you will ever use them -- also they are easy to recreate if need be.

    Show just typed history and bookmarks... Disable autocomplete in settings? idk

    I still have no idea what you mean with space between addresses (this = is wider?). In any case you can remove letter-spacing from above code since this was meant to address it, and is clearly not what you want.

    edit: you mean the typed history dropdown?
    try .omni-clickable {margin-bottom: 5px}

  • @luetage That I did. This is what I meant. Though not that much space.


    Edit : Yes! This is exactly what I meant.

  • Is there a way to separate tab corner rounding from the rest of the UI ? I want just the tabs rounder, not the other UI elements.

  • Yeah, disable corner round by editing your theme, then use this code --
    .tab-strip .tab {border-radius: 8px 8px 0px 0px !important}

  • @luetage Btw can tabs be made thinner and longer ... like Firefox's ?

  • @luetage Did you not see my next reply or did I bore you with my requests ? 😃 Can tabs be made thinner and longer like Firefox's ?

  • It's too complex for me. Making the tabs wider is no issue, but the newtab button makes problems and the tabs don't resize when they hit full width of the strip. Try it yourself, I posted instructions for inspecting with dev-tools. It's time you spread your wings young one 😃

  • @luetage This is like an IT specialist telling a baby to start coding. Because that's basically the skill gap between us, my young jedi. If you who has knowledge of these things on some level (whatever that may be) can't pull it off, how's a baby like me going to do it ? I guess I'll ask around. Thanks for letting me know though!

    P.S The guys that made Vivaldi Hooks is rudely avoiding my questions about a separate download tab button and a history button. Whenever I asked he told me to use an extension or just use shortcuts. If using shortcuts was the method, why did he make a bookmarks button in the first place ?

  • I'm not a specialist, just fooling around. I mean I've made a website before, and several themes for other sites, but it's all self taught and I still know very little. Point is especially css isn't complex and can't be considered coding/programming in the traditional sense. It's easy to pick up the very basics and put them to use. Since you have a very specific idea about what you want from the look of your browser, and aren't satisfied with the standard mods that are provided by others here, it would make sense for you to try it.

    Vivaldi's updates can break the modifications from time to time too, do you really want to be dependent on others to fix it for you?

    And don't get me wrong, I'm happy to help, so long as I am able that is.

  • @luetage Aww shucks, thanks ❤ I can't go into coding for one good reason - I suck at math and at some point or another, that's required on some level.

    On the matter of CSS modding though. Can the tab bar and bookmarks bar be united into one color without the top most menu bar color being touched? Like it is in FF. I'm using the Subtle theme with an accent color of #f6f6f6

  • @Deranox

    This request is a much easier proposition than adjusting the tab size. For the tab bar(container) and bookmarks bar use this

    .color-behind-tabs-on #tabs-container,
    .color-behind-tabs-on .bookmark-bar  {
        background-color: var(--colorAccentBg) !important;

  • @sjudenim I want to do the opposite. The tabs color to match the bookmark and bookmark color. This is what happened 0_1494354284197_b8f11b47-630c-4162-bdb3-d6ba063d8f73.png

    I want the whole bookmark bar and the bookmarks to be white like the tabs.

    Btw why are pictures taken with capture always so dim ?

  • @Deranox

    Ok. So you want to match the address bar then (not tab bar) and that uses background colour (not accent). So try this

    .color-behind-tabs-on .bookmark-bar  {
        background-color: var(--colorBg) !important;

    You'll also notice that there is a dividing line, to remove that

    .address-top .toolbar-addressbar:after,
    .address-top .toolbar-mailbar:after {
        height: 0 !important;

  • @sjudenim This time it worked, BUT a small problem still remains - the bookmarks themselves are another color, namely a bit more dim(grayer) than the rest. Any idea on how to fix that ?


Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.