{
    "title": "Vivaldi notes",
    "slug": "vivaldi-notes",
    "excerpt": "I've been reading a lot of good things about the Vivaldi web browser of late, so I thought I would give it a try. These are my notes on what I did to personalise Vivaldi.",
    "body": "![Image showing Vivaldi browser before and after being personalised.](https://corenominal.com/uploads/blog/media/a46b56f8-aa9c-4c88-bd99-5742481ce737.png \"Image showing Vivaldi before and after being personalised.\")\n\nI'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.\n\n**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:\n\n> The most flexible browser.\n\nI'm beginning to think this might be true.\n\n## Theme\n\nI'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`.\n\nI 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.\n\n## User Interface\n\nBy 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:\n\n* On the **Settings -> Appearance** page under \"Window Appearance\", I set the \"User Interface Zoom\" value to 105%.\n* On the **Settings -> Address Bar** page under \"Address Field Options\", I checked \"Show Full Address\".\n* 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.\n* 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.\n* 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.\n* 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.\n* On the **Settings -> Appearance** page under \"Menu\", I selected \"Menu Icon\" for \"Menu Icon Style\".\n* On the **Settings -> Appearance** page under \"Menu Customisation\", I selected the \"Page\" value from the select menu and via the right click menu:\n  * Disabled \"Show as Subfolder\" for the \"[Developer Tools]\" item.\n  * Deleted the \"Bookmark Page\" option - I keep my own bookmarks.\n  * Deleted the \"Print\" option - I never print anything.\n  * Deleted the \"Cast\" option - I never cast anything.\n  * Deleted the \"Create QR Code for This Page\" option - never going to use that.\n\n### CSS for Custom UI Modifications\n\nThis 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:\n\n```\n/* Edit default font and add a border around window */\n#browser.linux {\n  font-family: Inter, Cantarell, 'Noto Sans', Helvetica, system-ui, sans-serif;\n  border: 1px solid #BBBBBB;\n}\n\n/* Hide minimise maximise buttons as I'm using GNOME */\nbutton.window-maximize,\nbutton.window-minimize {\n  display: none;\n}\nbutton.window-maximize:hover,\nbutton.window-minimize:hover {\n  display: none;\n}\n\n/* Move the close button down a wee bit */\n#browser.linux .window-buttongroup {\n    top: 8px;\n}\n/* Remove background colour on close button and make it a bit nicer */\n#browser.linux .window-buttongroup button {\n  background-color: transparent;\n  border-radius: 50%;\n  width: 30px;\n  height: 30px;\n  padding-top: 3px;\n}\n#browser.linux .window-buttongroup button:hover {\n  border: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n/* Remove background colour on non active tabs */\n:not(.ui-transparent-tabs).color-behind-tabs-on .tab-position .tab {\n  background-color: transparent;\n}\n\n/* Increase tabs title font size */\n.linux .tab-position .tab .title {\n    font-size: 120%;\n}\n```\n\nThere 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.\n\n## Default new tab page\n\nI'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\".\n\n## Conclusion\n\nThe 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.",
    "tags": [],
    "published_at": "2024-09-26 18:08:21",
    "url": "https://corenominal.com/blog/posts/vivaldi-notes",
    "featured_image": "https://corenominal.com/media/og-481b2b0e-5cd6-424b-8c44-acdffc2f917f.png"
}