Even clearer UI



  • I would like to suggest the following: Ability to decide what buttons appear - i.e. show/hide [b]Home Button[/b], [b]Rewind[/b], [b]Fast Forward[/b], [b]Open a new tab[/b], [b]Trash[/b], [b]Status Bar[/b] (when the [b]Status Bar[/b] is disabled, there should be a [b]Popup bar[/b] that appears when the cursor is hovering an URL, therefore displaying the URL in the [b]Popup bar[/b]) Ability to move and rearrange buttons, for example, being able to move the [b]Menu[/b] button on places like the far right on the address bar, next to the extensions, mimicking the layout of FireFox, but not for cosmetic purposes, but for practical purposes such as after being moved, it causes tabs to move to the far left, leaving more space for them. I've created a mockup with MS Paint to describe what I have in mind. [img]http://s25.postimg.org/3t5rk41bx/image.png[/img]



  • You can do all of that via some custom css (but you cannot currently do it from the UI). In the css I've included in the guide below, I separated the classes for each button so that you can hide them individually. But all of the navigation buttons are in the same div, so you can hide them all with this:

    .button-toolbar {
    	display: none !important;
    }
    
    
    1. Windows: open directory %localappdata%\Vivaldi\Application\1.0.249.12\resources\vivaldi\style
      ā€“- Linux: open directory /opt/vivaldi-snapshot/resources/vivaldi/style/
    2. Open "common.css"
    3. At the very top of the file, add:```
      @import "custom.css";
    5) Paste this code into the file:
    
    

    /* Hides the new tab button */

    .button-tabbar.newtab {
    display: none !important;
    }

    /* Hides the trash bin */

    .button-tabbar.toggle-trash {
    display: none !important;
    }

    /* Hides the back button */

    .button-toolbar.back {
    display: none !important;
    }

    /* Hides the forward button */

    .button-toolbar.back {
    display: none !important;
    }

    /* Hides the rewind button */

    .button-toolbar.rewind {
    display: none !important;
    }

    /* Hides the next button */

    .button-toolbar.next {
    display: none !important;
    }

    /* Hides the refresh button */

    .button-toolbar.reload {
    display: none !important;
    }

    /* Hides the home button */

    .button-toolbar.home {
    display: none !important;
    }

    Vivaldi will need to be restarted after changes are made to these files.
    
    And the Vivaldi menu button can be moved to the right side of the UI via settings > appearance > Window Controls Position > Left Side. Of course, if you don't use the native window frame, then doing this on Windows would look very out of place.
    
    For information on moving the menu without moving the window controls, see [this thread.](https://vivaldi.net/forum/vivaldi-browser/4560-remove-menu-button#33395)
    
    And see [this post](https://vivaldi.net/forum/all/3073-vivaldi-ui-customisations?start=100#28369) for information on how to still see the url information of links when the status bar is disabled.


  • Thanks, Tiamarth for clearing this out, I may try doing it, but at this point I will wait out and see what the developers' take on Vivaldi will be in the near future.


Log in to reply
 

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