How to move hidden extension buttons into another row?

  • Previously, there is a popup container to display all hidden extension buttons, but now it's replaced with all buttons crammed into the Address bar. I have a lot of hidden extensions & this new layout is very bad solution to display a lot of hidden buttons.

    I would like to recreate the previous method with horizontal layout, spawn at the bottom of the toggle button. Is that possible with just CSS? Or we need to do it with JavaScript? The best i can muster with my limited CSS knowledge is this:

    .toolbar-addressbar .extensions-wrapper.expanded button.actionVisibility-hidden { 
    position:absolute; top:35px right:0;

    But then all buttons end up stacking on top of each other at the corner... 😩 I'm out of idea, so anyone have any idea?

    Thanks for all the help.

  • @dude99 They have to stack on top of each other, because you are setting the same absolute positioning on each of them. You probably have to collect them with javascript and move them to another container activated by extension toggle.

  • Currently i come up with this dirty workaround:

    /* extension wrapper */
    .extensions-wrapper.expanded .actionVisibility-hidden {position:absolute; top:35px; right:0; border-radius:var(--radiusRounded); box-shadow: 0 0 0 1px var(--colorAccentBg);}
    .extensions-wrapper.expanded .actionVisibility-hidden:nth-child(2) {transform:translateX(-100%);}
    .extensions-wrapper.expanded .actionVisibility-hidden:nth-child(3) {transform:translateX(-200%);}
    .extensions-wrapper.expanded .actionVisibility-hidden:nth-child(4) {transform:translateX(-300%);}
    .extensions-wrapper.expanded .actionVisibility-hidden:nth-child(5) {transform:translateX(-400%);}
    .extensions-wrapper.expanded .actionVisibility-hidden:nth-child(6) {transform:translateX(-500%);}
    .extensions-wrapper.expanded .actionVisibility-hidden:nth-child(7) {transform:translateX(-600%);}
    .extensions-wrapper.expanded .actionVisibility-hidden:nth-child(8) {transform:translateX(-700%);}
    .extensions-wrapper.expanded .actionVisibility-hidden:nth-child(9) {transform:translateX(-800%);}
    .extensions-wrapper.expanded .actionVisibility-hidden:nth-child(10) {transform:translateX(-900%);}
    .extensions-wrapper.expanded .actionVisibility-hidden:nth-child(11) {transform:translateX(-1000%);}

    This method only work with limited hidden extension button & they need to be place at the beginning of the list, so it's not optimal solution. Anyone can come up with more elegant solution?

  • Finally, got the entire extensions wrapper move into second row!
    It's so simple that I don't know why I didn't think of it earlier:

    0_1546228804595_extensions toolbar.png

    /* extensions wrapper toolbar */
    .expanded.extensions-wrapper { position: absolute; top: var(--toolbarHeight); right: 0; background: var(--colorAccentBg); border-radius: var(--radius); max-width: 100%; overflow-x: auto;}
    1. Unchecked Settings > Address bar > Extensions > Extension Toggle to move extensions to another row.

    2. If overcrowded, a bottom scrollbar will allow u to scroll through all extension buttons.

    Happy New Year! 🤗

    More stuff at below:

  • How exactly you do this?

    I followed the instructions in the other thread about browser.html . I added a "cusrom css", inside i copy pasted the code above, and it doesn't work....

    Is the above missing something?

  • @QuantumCthulhu Open a new window, or restart the browser. Your changes will only affect a new window.

  • I already restarted.
    New window doesn't change anything.

    The above code works for you?
    This is the first mod i'm trying.
    (the buttons expand beyond the edge of my screen.... 😑 , it's not just cosmetic)

    i edited

    and added " <link rel="stylesheet" href="style/custom.css" />"
    just bellow line 6, inside head

    in /opt/vivaldi/resources/vivaldi/style
    i added "custom.css"
    In that file, i copy pasted the above, and nothing else (and i didn't forgot to save). And i restarted and tried new window.

    and it doesn't work....

  • @QuantumCthulhu If you are unsure about the code, just test something else, e.g:

    #tabs-container {background-color: pink !important}

    Then you'll know if your setup is alright.

  • @QuantumCthulhu said in How to move hidden extension buttons into another row?:

    I added a "cusrom css", inside i copy pasted the code above, and it doesn't work....

    Maybe recheck for typo?

    How I did it:

    1. Shutdown Vivaldi before edit the file, & saved:
      After edit, above file should look like this, the 7th line is the mod:
    <!DOCTYPE html>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="style/common.css" />
        <link rel="stylesheet" href="style/custom.css" />
      <body style="
        background-color: #d4d4d4;
        background-image: url('resources/vivaldi-splash-icon.svg');
        background-size: 16%;
        background-position: center;
        background-repeat: no-repeat;">
        <div id="app" />
        <script src="localeSettings-bundle.js"></script>
        <script src="background-common-bundle.js"></script>
        <script src="vendor-bundle.js"></script>
        <script src="settings-bundle.js"></script>
        <script src="urlbar-bundle.js"></script>
        <script src="components-bundle.js"></script>
        <script src="bundle.js"></script>
    1. Then, create a plain text document (new_document.txt) in this folder:

    2. Rename the file into custom.css, then add the CSS mod code inside & save the changes.

    4, Startup Vivaldi to check.

    Sorry, I can't teach u much about modding other than that, cuz I'm a newbie myself 😅

    Hope this is helpful.

  • no typo with "custom.css"
    The pink backround worked
    this mod still didn't work.

    I see weird things in your screenshot. Are you sure this mod doesn't depend on something else you did?

  • @QuantumCthulhu Oh Im so sorry, it seems other mod i have is affecting this mod. I have updated the previous CSS code.

    Thanks for the helpful advice.

  • @dude99
    lol... it still didn't work XD

  • @QuantumCthulhu Did you unchecked Settings > Address bar > Extensions > Extension Toggle? It needed to be off to work with this mod.

  • ok, now it works. Quite hacky, at least now they don't disappear beyond the screen.

  • @QuantumCthulhu Good, good. Glad it work out for u at the end. 😉

  • Code updated to optimize for window with small width, now extension buttons won't float out of window when overcrowded, instead it will show a scrollbar for scrolling through 'em!

  • If u r using my Automate Overlay Address bar CSS mod from , then u can add below code to hide the extensions bar together with address bar:

    #header:not(:hover) ~ #main .toolbar-addressbar:not(:focus-within):not(:hover) .extensions-wrapper.expanded:not(:focus-within):not(:hover) {visibility:hidden; transition-delay:1.15s !important;}
    /* rotate toggle icon on 2nd row*/
    .extensions-wrapper.expanded .toggle-extensions-group svg {rotate: 90deg;}

  • You can grouped hidden extensions button together automatically with these simple codes:
    Grouped to the left:

    .expanded.extensions-wrapper .actionVisibility-hidden {order:-1}

    to right:

    .expanded.extensions-wrapper .actionVisibility-hidden {order:2}

    You still can reorder them, but they will always stick together as a group. 👨👩👦

  • Well, all css mod in this thread are super dead, & there are no workaround to restore 'em! 😭

    So, here is my 2nd best solution, which permanently move all extension buttons to 2nd row, they will be hidden when not needed:

    .address-top .toolbar-extensions {position:absolute; top:34px; left: unset !important; right:0 !important; z-index:0; border-radius:0 0 0 var(--radius); max-width:100%; overflow-x:overlay;}
    .address-top #header:not(:hover) ~ #main .toolbar-addressbar:not(:focus-within):not(:hover) .toolbar-extensions:not(:focus-within):not(:hover) {visibility:hidden; transition-delay:.5s !important;}
    .toolbar-extensions::after {display:none;}

    Mouseover or focus (F8) on the Address bar to access the extensions buttons, else it will be hidden after half a second. This mod mainly useful for those who have too many extension & too lazy to fuss with the ext. toggle to keep the address bar tidy most of the time, basically this mod will render the ext. toggle pointless.

    (for now, until V team decided to break this mod in the future) 😱

  • @dude99 I just put this mod into my browser. I'll test it out for a while and see how I feel. Thank you for sharing.

Log in to reply

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