Vivaldi UI Customisations


  • Moderator

    ATTENTION: This tutorial is old and outdated, it's not recommended to follow it nowadays, it's content is useful for knowledge and historical reasons.


    I've been helping a lot of folks on customising their Vivaldi UI, I believe it would be good to have a central discussion place where we can discuss, show our discoveries and ask for help. This first post will serve as an index for all the important tips and tricks.

    How Vivaldi UI Works

    Vivaldi UI works exactly like a website, it's structured with HTML, styled with CSS and has JavaScript to run functions and modify the first two.

    More In-Depth

    Going more specific, Vivaldi UI HTML is empty, all elements are added by the JS. There are a lot of elements that simply does not exist until you request them, the advantage here is to not waste resources for stuff that would be hidden most of the time, it's also good to add the element where it's easier to show it where it needs to be.

    The files that compose the Vivaldi UI are easily accessible under /$VivaldiInstallDir$/resources/vivaldi/
    On Mac they are under: /Applications/Vivaldi.app/Contents/Versions/$last version$/Vivaldi Framework.framework/Resources/vivaldi/ (Thanks greybeard for the info)

    What Does This All Mean?

    This means that messing with the HTML file is 'useless', it contains nothing worth editing. The magic is all inside the JS and the real customisation is in the CSS. Editing the JS is not really worth if you plan giant stuff, it may all be broken on a new release, you may break the whole browser and there's no easy way on merging your edits.

    The CSS on the other hand is easy to maintain, easy to work with and you can modify the positions of everything without the need of JS. It's worth noting that the JS adds a lot of classes depending on state, preferences and OS. For example, the body has a class with the OS name and one with the window state, like maximized, normal (restored) or fullscreen.

    If you want to edit the CSS there are two ways:

    1) Open common.css and add this at the beginning of the file:

    @import "custom.css";
    

    2) Open browser.html and add this line after the first <link> tag:

    <link rel="stylesheet" href="style/custom.css">
    

    And add all your CSS edits in a custom.css file. This way you can just copy your old custom file and add this above line again and you'll always keep the original common file intact.

    How To Inspect With Dev Tools

    You can use the Developer Tools to inspect the Vivaldi UI and do live edits on it. To do so you'll have to run Vivaldi with this command line: --debug-packed-apps --silent-debugger-extension-api, once you run Vivaldi you should be able to right click anywhere in the UI and choose Inspect.

    On Windows you can right-click a shortcut and open its properties to add these flags.

    If you are familiar with Dragonfly you'll soon think about shooting yourself after some minutes of Chrome Dev Tools, but that's all we got.

    Tips & Tricks Index



  • If anyone else comes to this thread because of an old bookmark or link, they should go to the (now locked) https://forum.vivaldi.net/topic/10629/vivaldi-ui-customisations

    The thread was previously moved from the "All Platforms" subforum to the "Third Party & Extensions" and extensions subforum, before the forum software switchover. Somehow a copy of it with just the first post, seems to have gotten revived here due to a glitch during the export from the old forum's database.

    I imagine the other threads that were similarly moved by mods to other subforums at various points prior to the switchover may likewise have first-post-only copies in their original subforums now.

    This copy of the thread should likewise be locked.

    Perhaps a 301 redirect could be set to the location with the full thread, if the forum UI provides mods with a convenient field for that. Just deleting this copy would break any bookmarks or links, since this forum software does not seem to attempt to automatically do a redirect for erroneous URLs based on URL slugs -- in this case "vivaldi-ui-customisations" -- the way some CMSes like WordPress do to avoid 404s for moved content. Anyway, even if it did do such automatic redirects, that wouldn't be good unless the software enforced unique slugs in URLs; otherwise some new post with the same title could catch automatic redirects that should be to the old thread.


Log in to reply
 

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