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\1.0.94.2\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:
    http://codebeautify.org/css-beautify-minify
    (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
    display:none!important;

    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.