Remove menu button



  • Is there a way I can remove the menu button pictured below or Justmove it next to the trash button so that the tab listings are not offset by it, Was looking though common.css but could not find anything. Thanks. [img]http://i.imgur.com/l6chZAf.png[/img]



  • You can view the horizontal menu bar instead.



  • Well you can hide it with:

    button.vivaldi {
        display: none !important;
    }
    
    

    In general, I don't really recommend /moving/ elements of the UI, because depending the Vivaldi window's state, it may not be consistent. But, yes, you can move it.

    [attachment=1587]Screenshotfrom2015-08-21140001.png[/attachment]

    I also wouldn't really recommend directly editing CSS in the common.css file. Here's a quick guide for doing this, though:

    1. Open directory %localappdata%\Vivaldi\Application\1.0.249.12\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:
    
    

    .win .vivaldi {
    left: 91% !important;
    z-index: 50 !important;
    }

    .vivaldi {
    position: relative !important;
    top: 5px !important;
    }

    You may need to change the dimensions to fit your monitor.
    Vivaldi will need to be restarted after changes are made to these files.
    
    Also, An_dz started a thread about customizing the Vivaldi UI [over here.](https://vivaldi.net/en-US/forum/all/3073-vivaldi-ui-customisations) If you're interested in further modification.
    
    **Edit:** If you know how to, you can start Vivaldi with the command –remote-debugging-port=2015 and then use the web inspector tools to inspect Vivaldi's UI. Connect to localhost:2015 in your address bar and find "browser.html"
    Attachments:
    ![](https://forum.vivaldi.net/uploads/attachments/16277/Screenshotfrom2015-08-21140001.png)


  • Thankyou for the quick, helpful reply. How can I remove the container / empty space thats still there and also where do I connect from to get remote debugging to work, nothing new has appered in inspect element and I read throught the custimization guide but it didnt say much about this. Heres the launch options i'm using just to be sure: C:\Users\User\AppData\Local\Vivaldi\Application\vivaldi.exe –remote-debugging-port=2015

    Thankyou!



  • You're welcome :)

    @Swervz:

    How can I remove the container / empty space thats still there

    #tabs-container.top {
        margin-left: -1.8%;
    }
    
    

    For me, -2% brings the tabs right up against the edge of my monitor. -1.8% gives me a visual blank space still, so that there's still some padding. Just my personal preference.

    @Swervz:

    ]where do I connect from to get remote debugging to work

    In Vivaldi's address bar, type```
    localhost:2015

    Then, in the list of items you can inspect, find the one labeled```
    Vivaldi chrome-extension://%random-string-of-letters%/browser.html
    

    From there you can inspect the Vivaldi UI.

    [attachment=1588]Screnshot_from_21-08-2015_.png[/attachment]
    Attachments:



  • Thanks that worked great, Finally a browser more customizable than firefox!

    If i may ask one last thing How do I stop this background from showing in the tab favicon container:

    #tabs .tab.active .tab-header .favicon {
    background-color: #fff;
    box-shadow: 0 0 0 1px #fff inset;
    }
    I tried putting that in my custom css with the lines commented out but it didnt work, Do I just remove #tabs .tab.active .tab-header .favicon{background-color:#fff; from common.css



  • I'm not 100% sure what you're trying to do, but I think you're asking how to remove the background colour from the favicons in tabs. If so, this should work:

    #tabs .tab .tab-header .favicon {
        background-color: transparent !important;
        box-shadow: none !important;
    }
    
    

    You need to include the !important qualifier in the custom.css in order to overwrite the common.css - and commenting out lines in the custom.css won't affect the common.css. So in order to toggle something in the common.css, you need to specify the element and the property, and then tell it to do the opposite of what it's doing.

    It's displaying a background colour by default, the above code removes the background colour entirely. Some favicons don't have transparent backgrounds in the image themselves, so doing this won't change anything about them.

    Edit: If you use the dark UI, this customization makes it look a lot better. Hardly noticeable in the light UI theme, though.


Log in to reply
 

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