Vivaldi Browser

vivaldi browser

Reassigning Ctrl + P for Quick Tab Switching

By default, Ctrl + P in Vivaldi is set to the print command. To repurpose it for switching tabs, follow these steps:

  • Open Vivaldi and navigate to Settings -> Keyboard
  • In the Window section:
    • Find the Print option and remove the Ctrl + P shortcut.
    • Find Quick Commands and assign Ctrl + P to it.

Once configured, you can use Ctrl + P to quickly access open tabs via Quick Commands.

Customizing Vivaldi’s Interface with CSS and JavaScript

Vivaldi allows users to modify its user interface by editing HTML, CSS, and JavaScript files. Below are the steps to add custom styles and scripts.

Locate the Vivaldi window.html File

Remember to disable the auto update of Vivaldi to prevent your customizations from being overwritten.

To apply custom modifications, you need to edit the window.html file located in Vivaldi’s installation directory. The typical file path is:

<YOURVIVALDIDIRECTORY>\Application\<VERSION>\resources\vivaldi

For example, on Windows:

C:\Users\my_user_name\AppData\Local\Vivaldi\Application\6.9.3447.54\resources\vivaldi\

on Ubuntu:

/opt/vivaldi/resources/vivaldi/

Create a folder named for-vivaldi in the vivaldi directory. Create custom.css and custom.js files in this folder.

Backup and Edit window.html

  • Backup the window.html file before making any changes. For example, copy and paste it.
  • Open window.html in a text editor.
  • edit it to look like this

Inspect and Modify Vivaldi’s UI

To inspect the Vivaldi user interface and identify elements for customization:

  • Enter vivaldi://inspect/#apps into the address bar, press enter.
  • Click inspect of Vivaldi window.html to begin inspecting UI elements.

Add a Restart Button to the Toolbar

To create a restart button in the toolbar:

  • Set vivaldi://restart as the homepage.
  • If you don’t have it, add a Home button to the toolbar via Menu -> View -> Customize Toolbar
  • In your custom.css, add the following code to style the restart button:
custom.css
button.ToolbarButton-Button[title*="Homepage (Alt+Home)"] svg path {
  d: path(
    "M9 12l-4.463 4.969-4.537-4.969h3c0-4.97 4.03-9 9-9 2.395 0 4.565.942 6.179 2.468l-2.004 2.231c-1.081-1.05-2.553-1.699-4.175-1.699-3.309 0-6 2.691-6 6h3zm10.463-4.969l-4.463 4.969h3c0 3.309-2.691 6-6 6-1.623 0-3.094-.65-4.175-1.699l-2.004 2.231c1.613 1.526 3.784 2.468 6.179 2.468 4.97 0 9-4.03 9-9h3l-4.537-4.969z"
  );
  transform: scale(0.9) !important;
  transform-origin: 157% 154% !important;
}

Make the (left)TabBar auto hide

Set the Tab Bar to the left and drag to adjust its width to the minimum.

You can use custom.css and custom.js from this repo

Restart Vivaldi to apply your customizations. You should now see an arrow button above the Workspaces button, which allows you to toggle the auto-hide feature.

If your vivaldi updated, all those custom file will be overwritten. So, you need to backup and reapply them.

UI
Do not shoot this.