# Vivaldi notes ![Image showing Vivaldi browser before and after being personalised.](https://blog.philipnewborough.co.uk/media/a46b56f8-aa9c-4c88-bd99-5742481ce737.png "Image showing Vivaldi before and after being personalised.") I've been reading a lot of good things about the [Vivaldi web browser](https://vivaldi.com) of late, so I thought I would give it a try. After installing the browser on my Fedora system, my first impressions were not fantastic. Coming from using Firefox, I found the default appearance of Vivaldi to be somewhat garish and the user interface too busy. So, these are my notes on what I did to personalise Vivaldi. **Side note:** The number of settings made available by Vivaldi is bonkers and I was a little bit daunted when I first took a look at them. That said, I'm glad I persevered and took my time to go through them as Vivaldi offers a lot of really interesting features that I may of otherwise overlooked. Vivaldi describes itself as: > The most flexible browser. I'm beginning to think this might be true. ## Theme I'm sure many people love Vivaldi's default theme, but it's not for me. You can adjust the theme by going to **Settings -> Themes**. There are a number of preinstalled themes to choose from, or you can make your own. I opted for the "Subtle" theme and tweaked it slightly, giving it an accent colour value of `#EBEBEB`. I must say, Vivaldi's theme options are really good and I would imagine you could go pretty wild using colours and images to pimp your browser. Personally, I just wanted something that would blend in with my system's [GNOME/Adwaita](https://gnome.pages.gitlab.gnome.org/libadwaita/) theme. ## User Interface By default, Vivaldi's user interface has a lot going on, maybe not as much as Edge, but definitely more than Firefox or Chrome. I adjusted the UI with the following settings: * On the **Settings -> Appearance** page under "Window Appearance", I set the "User Interface Zoom" value to 105%. * On the **Settings -> Address Bar** page under "Address Field Options", I checked "Show Full Address". * Disabled Workspaces. Workspaces allow the user to organise tabs by activities such as work, social and hobbies etc. I don't need this feature so I disabled it via the **Settings -> Tabs** page. Disabling this feature removed the Workspaces menu button in the tab bar. * Also on the **Settings -> Tabs** page, I unchecked "Display Trash Can" and "Display Synced Tabs Button". This cleaned up the tabs bar nicely, although I may revisit the Trash Can feature at some point as it might actually come in handy. * I found this by accident, but there is a experimental feature that allows you to adjust the UI density to "Regular". You can turn this feature on by entering `vivaldi://experiments/` into the address bar. Once activated, the UI density can be adjusted on the **Settings -> Appearance** page under "Window Appearance". This setting changed the appearance of tabs to something similar to Firefox, which is nice. * On the **Settings -> Appearance** page under "Window Appearance", I adjusted the "Status Bar" value to "Status Info Overlay". This removed the permanent status bar. I may revisit the status bar at some point. * On the **Settings -> Appearance** page under "Menu", I selected "Menu Icon" for "Menu Icon Style". * On the **Settings -> Appearance** page under "Menu Customisation", I selected the "Page" value from the select menu and via the right click menu: * Disabled "Show as Subfolder" for the "[Developer Tools]" item. * Deleted the "Bookmark Page" option - I keep my own bookmarks. * Deleted the "Print" option - I never print anything. * Deleted the "Cast" option - I never cast anything. * Deleted the "Create QR Code for This Page" option - never going to use that. ### CSS for Custom UI Modifications This feature is pretty amazing; you can adjust parts of Vivaldi's UI by writing your own CSS. You can turn this feature on by entering `vivaldi://experiments/` into the address bar and checking "Allow CSS modifications". Once activated, you can set the location of a directory where your custom CSS files are located on the **Settings -> Appearance** page under "Custom UI Modifications". By using this feature, I managed to remove the minimise and maximise buttons from the browser, to suit my GNOME desktop, and tweak the the location of the close button. My CSS follows: ``` /* Edit default font and add a border around window */ #browser.linux { font-family: Inter, Cantarell, 'Noto Sans', Helvetica, system-ui, sans-serif; border: 1px solid #BBBBBB; } /* Hide minimise maximise buttons as I'm using GNOME */ button.window-maximize, button.window-minimize { display: none; } button.window-maximize:hover, button.window-minimize:hover { display: none; } /* Move the close button down a wee bit */ #browser.linux .window-buttongroup { top: 8px; } /* Remove background colour on close button and make it a bit nicer */ #browser.linux .window-buttongroup button { background-color: transparent; border-radius: 50%; width: 30px; height: 30px; padding-top: 3px; } #browser.linux .window-buttongroup button:hover { border: 1px solid rgba(0, 0, 0, 0.1); } /* Remove background colour on non active tabs */ :not(.ui-transparent-tabs).color-behind-tabs-on .tab-position .tab { background-color: transparent; } /* Increase tabs title font size */ .linux .tab-position .tab .title { font-size: 120%; } ``` There is a handy developer tool to aid with writing your CSS and finding the relevant selectors which can be found by entering `vivaldi://inspect/#apps` into the address bar. I will definitely have to explore this more at some point in the future. ## Default new tab page I've been working on my on custom start page. I've been using it for a while in Firefox, but in order for the page to appear whenever I create a new tab, I had to install a browser extension. Vivaldi is the first browser I have used that will allow me to set a custom new tab page (_and allow for setting focus on the page, instead of the address bar_) without having to install a browser extension. Good work Vivaldi! Anyway, you can achieve this by going to **Settings -> Tabs** and entering the URL under "New Tab Page". There is checkbox for "Focus Page Content on New Tab". ## Conclusion The web browser is one of the most important applications on my system and so changing my default browser is a big move. I'm not sure I'm ready to move away from Firefox just yet, but Vivaldi it's definitely worth investigating further. I think I'm going to set it as my default browser for a week and see how I get on with it. I've already encountered an issue with one of my own custom browser extensions, but I need to investigate a bit more before I can tell if it's a bug in Vivaldi or an issue with my own code (_I suspect the latter_). I may write a follow-up post at some point in the future and who knows, I might be firmly ensconced in the Vivaldi camp.