Vivaldi UI Customisations


  • Moderator

    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. [b]How Vivaldi UI Works[/b] 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. [b]More In-Depth[/b] 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) [b]What Does This All Means?[/b] 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 [i]common.css[/i] and add this at the beginning of the file: [code]@import "custom.css";[/code] 2. Open [i]browser.html[/i] and add this line after the first <link> tag: [code]<link rel="stylesheet" href="style/custom.css">[/code] And add all your CSS edits in a [i]custom.css[/i] 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. [b]How To Inspect With Dev Tools[/b] 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: [b]--flag-switches-begin --debug-packed-apps --silent-debugger-extension-api --flag-switches-end[/b], 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. 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. [size=5][b]Tips & Tricks Index[/b][/size] [url=https://vivaldi.net/en-US/forum/vivaldi-browser/3030-i-can-t-move-window-of-vivaldi-using-empty-tab-space#24242]Make empty tab bar space to right of tabs "grabbable" to allow moving window[/url] (by [url=https://vivaldi.net/en-US/unity/profile/15939]An_dz[/url]) [url=https://vivaldi.net/en-US/forum/all/2994-adjustable-default-font-icon-size#23849]Edit Vivaldi UI font sizes in common.css[/url] (by [url=https://vivaldi.net/en-US/unity/profile/16277]Tiamarth[/url], by An_dz two comments below) [modify path appropriate to current installation] [url=https://vivaldi.net/en-US/forum/all/3073-vivaldi-ui-customisations#24520]New tab on double click in tab bar[/url] [url=https://vivaldi.net/en-US/forum/all/3073-vivaldi-ui-customisations#24533]Modifying number of columns in Speed Dial[/url] [url=https://vivaldi.net/en-US/forum/all/2777-adding-custom-thumbs-in-speed-dial]Customise Speed Dial Thumbnails[/url] [s][url=https://vivaldi.net/en-US/forum/vivaldi-browser/3127-a-connection-between-size-of-preview-and-size-of-thumbnail#24804]Tweak to improve appearance of tab previews[/url][/s] - Useless now [url=https://vivaldi.net/en-US/forum/all/3073-vivaldi-ui-customisations?start=80#27057]Coloured selection in text boxes[/url] (e.g. address box, search box) [url=https://vivaldi.net/en-US/forum/all/3073-vivaldi-ui-customisations?start=80#27612]Mac Graphite Window Actions Buttons[/url] The first reply here contains a lot of small edits that you may find useful.



  • 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.