Customize Tab Text Style in Vivaldi

Vivaldi is a powerful and highly customizable web browser, offering a wide range of features to adjust the user interface to your liking. One of the most flexible ways to customize Vivaldi’s UI layout is through the use of custom CSS. In this article, we’ll show you how to make some common UI adjustments in Vivaldi using CSS, such as:

• Changing the default font
• Adding a border around the browser window
• Moving the close button slightly
• Increasing the font size of tab titles

Let’s dive into how you can customize the UI layout in Vivaldi using the following CSS code.

---

Steps to Customize the UI Layout in Vivaldi

1. Locate the Custom CSS File in Vivaldi

Before adding any custom CSS, you need to ensure that the browser supports custom stylesheets.

1. Open Vivaldi and navigate to the settings:
   • Click on the Vivaldi menu (the Vivaldi logo in the top-left corner) and select Settings (or press Ctrl + F12).
2. Enable Custom UI Modifications:
   • In the Settings menu, navigate to the Appearance section.
   • Scroll down to find the Enable Custom UI Modifications toggle and make sure it’s turned ON.
3. Access the Custom CSS File:
   • Now, you need to access the Custom folder where you can add your CSS file. This folder is typically located at:
     • Windows: C:\Users\<YourUsername>\AppData\Local\Vivaldi\User Data\Default\Themes
     • Linux: ~/.config/vivaldi/Default/Themes
     • Mac: /Users/<YourUsername>/Library/Application Support/Vivaldi/Default/Themes
4. Create or Edit the Custom CSS File:
   • In the Themes folder, create a new CSS file (e.g., custom.css) or edit an existing one.

---

2. Add Your Custom CSS

Once you’ve located or created your custom.css file, you can add the following CSS code to customize your Vivaldi browser’s UI.

Change the Default Font and Add a Border Around the Window

You can customize the font of your Vivaldi browser and add a subtle border around the browser window. The following code changes the default font family and adds a light border:

/* 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;
}

• font-family: This line changes the font to a modern, readable set of fonts. You can modify this to any font you prefer (if available on your system).
• border: This adds a thin 1px border around the browser window with a light gray color.

Move the Close Button Down a Little

You might want to tweak the positioning of the close button. This code moves the close button group (minimize, maximize, close) down by 10px:

/* Move the close button down a bit to vertically center it in gnome */
#browser.linux .window-buttongroup {
    top: 10px;
}

• top: 10px: This line moves the close button slightly lower, making the button group a bit more centered if that’s your preference. You can adjust the top value to move it higher or lower.

Increase the Tabs Title Font Size

To make the tabs more legible, you can increase the font size of the tab titles. This code changes the font size of the tab titles to 120% of the original size:

/* Increase tabs title font size */
.linux .tab-position .tab .title {
    font-size: 120%;
}

• font-size: 120%: This increases the tab title font size by 20%. You can modify the percentage to your desired size (e.g., 130% for larger font).

---

3. Apply the CSS Customizations

Once you’ve added the CSS code to the custom.css file:

1. Save the file and close it.
2. Restart Vivaldi to apply the changes. You should immediately see the new font, the border around the browser, the adjusted close button position, and the larger tab titles.

---

4. Additional Customizations

Feel free to experiment with other UI elements and properties. Here are some ideas for further customization:

• Change the background color of the address bar:

    #browser.linux .omnibox {
        background-color: #f0f0f0;
    }
  

• Change tab background color on hover:

    .tab-position .tab:hover {
        background-color: #e0e0e0;
    }
  

• Adjust tab height:

    .tab-position .tab {
        height: 40px;
    }
  

---

5. Troubleshooting

If you don’t see your changes take effect, here are a few troubleshooting tips:

• Double-check the CSS syntax: Even a small mistake in the CSS can prevent the customizations from being applied.
• Ensure the correct file path: Make sure that the custom.css file is saved in the correct Themes directory.
• Restart Vivaldi: Always restart the browser after making changes to the custom CSS.
• Clear Vivaldi’s cache: If changes still aren’t showing, try clearing the browser’s cache to ensure the new styles are applied.

---

Final words

Customizing the UI layout of the Vivaldi browser with CSS is a fun and straightforward way to personalize your browsing experience. By editing the custom.css file, you can change the fonts, adjust UI element positions, and make other small tweaks to suit your preferences. With the flexibility Vivaldi offers, the possibilities for customization are nearly endless, allowing you to create a unique and optimized interface.

Now, go ahead and experiment with your own custom CSS to make Vivaldi truly your own!