Category Archives: Websites

Customizing the Vivaldi browser Bookmark Toolbar, part 2

Last time I posted about customizing the Vivaldi browser, which the developers claim is simple and one of their objectives, I wondered if I would be able to push my toolbar icons closer together, like they are in Chrome. And the answer is Yes! Although there are a lot of steps, in a nutshell, one simply has to add a “custom.css” file to the application folder and a Vivaldi file. And again and again each time Vivaldi issues an upgrade (once every few months, it seems).

By the way, if you “know” css, then you can certainly investigate a lot more things to customize. However, this example focuses on the space between the icons in the Bookmark Toolbar.

First, create a css file. Simply open some sort of text application (i.e., Notepad or TextPad) and save the file as custom.css (be sure to save it as “All Files” file type or you will end up with “custom.css.txt”) in the location “C:\Users\[your_user_name]\AppData\Local\Vivaldi”.

Paste the following into the new css file:

.bookmark-bar button {
 padding:0 1px;
}

I like my icons close together, but you can experiment with making the padding a bit wider than 1 pixel (the default padding width is 6 pixels). Save and close the file, and now you have a backup of your custom stylesheet. Always leave a copy in this location, or you will lose it with each upgrade. That being said, now copy the custom.css file to “C:\Users\[your_user_name]\AppData\Local\Vivaldi\Application\[current_version]\resources\vivaldi\style”.

Navigate up one folder level to “C:\Users\[your_user_name]\AppData\Local\Vivaldi\Application\[current_version]\resources\vivaldi\” and open the file “browser.html”. Don’t just double-click on it, however, or you will end up viewing it in your browser! Instead, right-click and choose to open (or edit) it with the same text application you used to create your css file. Alternatively, you could select to open this file from the text application, navigating to the same location.

The opened file will look like this:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8" />
 <title>Vivaldi</title>
 <link rel="stylesheet" href="style/common.css" />
 </head>
 <body>
 <div id="app" />
 <script src="localeSettings-bundle.js"></script>
 <script src="vendor-bundle.js"></script>
 <script src="settings-bundle.js"></script>
 <script src="urlbar-bundle.js"></script>
 <script src="components-bundle.js"></script>
 <script src="common-bundle.js"></script>
 <script src="bundle.js"></script>
 </body>
</html>

Make a copy of the line “<link rel=”stylesheet” href=”style/common.css” />” and paste it right under itself.

 <head>
 <meta charset="UTF-8" />
 <title>Vivaldi</title>
 <link rel="stylesheet" href="style/common.css" />
 <link rel="stylesheet" href="style/common.css" />
 </head>

In the second line (very important!), replace the word “common” with “custom”. Now the file will look like this:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8" />
 <title>Vivaldi</title>
 <link rel="stylesheet" href="style/common.css" />
 <link rel="stylesheet" href="style/custom.css" />
 </head>
 <body>
 <div id="app" />
 <script src="localeSettings-bundle.js"></script>
 <script src="vendor-bundle.js"></script>
 <script src="settings-bundle.js"></script>
 <script src="urlbar-bundle.js"></script>
 <script src="components-bundle.js"></script>
 <script src="common-bundle.js"></script>
 <script src="bundle.js"></script>
 </body>
</html>

Save that file, and (re)open Vivaldi. There you go! From

Vivaldi default bookmarks toolbar icon width

to Custom Vivaldi Bookmark Toolbar

 

Customizing the Vivaldi browser Bookmark Toolbar, part 1

I’ve been using Vivaldi as my primary browser for a few weeks now, after using it as an alternative, and there is no going back. I really like it. I have more or less adapted to the differences between it and Firefox (bookmarks, mostly), and have installed the few extensions from Chrome I can’t live without (FB Purity), and voila, I’m set up.

However, there was one thing that bothered me that I could not find an easy workaround for: the distance between the icons on the bookmarks toolbar.  I live off that toolbar, but here is how far apart the icons are by default:

Vivaldi default bookmarks toolbar icon width

Here is what my Chrome bookmark toolbar looks like:

Firefox default bookmarks toolbar icons

So after a few weeks, I knew I could not work with the icons that spread apart. They all couldn’t fit onto the toolbar, and I really didn’t want any overflowing to where I couldn’t see them (okay, my OCD is showing here). Vivaldi is supposed to be so customizable, so I thought, well, let’s see! Was I able to do it? Stay tuned! Part 2 coming up.