Theming / Main UI

  • I know its just a preview, but im exited about vivaldi is made of html + css + js. So, where i can found some information about inspecting elements on the browser, editing, making my own css sheet?? I feel that some elements are unnecessary, like home, next, forward backward buttons, and the search bar (just type in the url bar) Vivaldi should have - back button - url bar - reload button - new tab - vivaldi menu Nothing more, other actions could be triggered by hotkeys or "quick commands"

  • common.css in C:\Users<youraccount>\AppData\Local\Vivaldi\Application\\resources\vivaldi\style (path depends on OS/Installation) is the file you have to change.
    Additional .css files can be specified in browser.html in resources\vivaldi\style

    common.css is minified, to make it human readable you can use beautifiers like:
    (just replace the minified code with the beautified one and continue working on that).

    As for now, there seems to be no debugging/inspection options for the UI (at least none I know about), so the basic workflow is:

    1. change something in the.css and save
    2. restart vivaldi

    Buttons in the addressbar have the class .button-addressfield
    search bar has the class .searchfield

    Elements can be hidden with the property

    To make your changes easily transferable to new (weekly) builds, you should do you changes to an additional .css file (not common.css, which will change) and reference it in browser.html</youraccount>

  • Thank You !
    Yes, I had seen the files but did not know if it was the "right" way


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