Vivaldi notes

Image showing Vivaldi browser before and after being personalised.

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

css firefox gnome vivaldi

Comments

New Comment

If you have a comment you'd like to share, feel free to leave it below. I moderate all comments before they are published. Markdown is enabled. See syntax for help.

I'll never share your email with anyone else.

Blog

I mostly try to write non-opinionated posts about web development and Linux - reminders about how to complete tasks and get stuff done etc.

For short-form posts, see my status page.

Folksonomy

I like tag all content on my site. See below for all tags used within my blog posts.

Blogroll

A list of blogs by others that I read, aka a blogroll.

Subscribe

Click the link below to subscribe to my Blog feed in your favourite news reader client:

RSS feed

Philip Newborough and a donkey enjoying a beer.

About

My name is and I’m a full stack web developer living and working in Lincoln, England. This website (philipnewborough.co.uk) serves as my personal homepage. When I’m not working with tech, I love to ride bicycles with my wife and friends.