Vivaldi Vh Versions Save

CSS modification for Vivaldi Browser that grants webpages the full browser window height. Inspired by Arc Browser.

v1.4.1

4 months ago

Don't miss future releases of Vivaldi VH by subscribing to the Release Notes feed using the Vivaldi Feed Reader!

Version: 1.4.1
Target Vivaldi Browser versions: 6.5

Fixes:

  • Vivaldi VH now properly checks whether the panel is enabled.
    • As a reminder: When the tab bar and the panel are both hidden, Vivaldi VH will disable itself. Otherwise, the majority of the Pillar would simply be empty.
  • Search bar styles now only apply to search bars in the address bar and the status bar.
    • This fixes cases of wrongly styled search bars in the panel and on the new tab page.

Update instructions:

  1. Locate the folder that contains your current Vivaldi VH .css file.
    • If you do not remember the folder, open the Vivaldi Browser settings, navigate to Appearance and note the folder set under Custom UI Modifications.
  2. Download the Vivaldi VH .css file of this release and overwrite the current file in your folder.
  3. Restart Vivaldi Browser.
First time installation instructions - Vivaldi VH:
  1. Download the vivaldi-vh.css file and place it in a folder of your choice.
  2. Inside Vivaldi Browser, navigate to the URL vivaldi://experiments.
  3. Tick the box for Allow CSS modifications.
  4. Open the settings and navigate to Appearance.
  5. Under Custom UI Modifications, click Select Folder and select the folder that contains the downloaded vivaldi-vh.css file.
  6. Navigate to Tabs and set Tab Bar Position to Left or Right.
  7. Close and restart Vivaldi Browser. Vivaldi VH will now be activated.

Keep in mind that Vivaldi VH will disable itself when it detects invalid settings. View the README for more information.

First time installation instructions - Vivaldi VH VivalArc Edition:
  1. Follow the configuration steps for VivalArc. Take note of the folder you selected in Settings > Appearance > Custom UI MOD.
  2. Download the vivaldi-vh-vivalarc.css file and place it in the folder you selected in the previous step.
  3. Close and restart Vivaldi Browser. Vivaldi VH VivalArc Edition will now be activated.

Keep in mind that Vivaldi VH will disable itself when it detects invalid settings. View the README for more information.

v1.4.0

4 months ago

Promo image for Vivaldi VH release v1.4.0

This release introduces the heavily requested ability to forego the tab bar in favor of the Window panel. When you disable the tab bar, the panel will be automatically positioned in its place inside the Pillar.

v1.4.0 also introduces several other changes to make Vivaldi VH more flexible. Most notably, you can now set the title bar to span the entire window width, ensuring that the window buttons are always where you expect them to be.

This version also marks the first release of a second edition of Vivaldi VH: The VivalArc Edition! This is a slightly modified edition of Vivaldi VH that is designed to be used in combination with VivalArc, a CSS modification by tovi for Vivaldi Browser that aims to mimic the aesthetics of Arc Browser. Check it out here: https://arc.tovi.fun

Don't miss future releases of Vivaldi VH by subscribing to the Release Notes feed using the Vivaldi Feed Reader!

Version: 1.4.0
Target Vivaldi Browser versions: 6.5

Changes:

  • The presence of the tab bar is no longer mandatory to activate Vivaldi VH if the panel is present. When the tab bar is missing, the panel will take its place inside the Pillar.
  • The presence of the address bar is no longer mandatory to activate Vivaldi VH.
  • The Command Chain Flag vvh-enable-titlebar-full-width is now available, which grows the title bar to take up the entire width of the browser window.
  • The Command Chain Utilities vvh-toggle-on and vvh-toggle-off are now available, which receive a special icon and hide themselves depending on the current activation state of Vivaldi VH.
  • At the top of the vivaldi-vh.css file, custom CSS properties are now exposed for the following settings:
    • minimum width of the Pillar
    • width of toolbar components that extend on focus (e.g. the address field)
  • The VivalArc Edition of Vivaldi VH is now available. This is an alternative distribution of Vivaldi VH designed to be compatible with the VivalArc CSS modification.

Fixes:

  • When page tiling is enabled, webpages will no longer have excessive padding.
  • Fixed the layout of the extensions toolbar component inside the panel.

Click here to view the full changelog.

Update instructions:

  1. Locate the folder that contains your current version of the Vivaldi VH .css file.
    • If you do not remember the folder, open the Vivaldi Browser settings, navigate to Appearance and note the folder set under Custom UI Modifications.
  2. Download the Vivaldi VH .css file of this release and overwrite the current file in your folder.
  3. Restart Vivaldi Browser.
Vivaldi VH - First time installation instructions:
  1. Download the vivaldi-vh.css file and place it in a folder of your choice.
  2. Inside Vivaldi Browser, navigate to the URL vivaldi://experiments.
  3. Tick the box for Allow CSS modifications.
  4. Open the settings and navigate to Appearance.
  5. Under Custom UI Modifications, click Select Folder and select the folder that contains the downloaded vivaldi-vh.css file.
  6. Navigate to Tabs and set Tab Bar Position to Left or Right.
  7. Close and restart Vivaldi Browser. Vivaldi VH will now be activated.

Keep in mind that Vivaldi VH will disable itself when it detects invalid settings. View the README for more information.

Vivaldi VH VivalArc Edition - First time installation instructions:
  1. Follow the configuration steps for VivalArc. Take note of the folder you selected in Settings > Appearance > Custom UI MOD.
  2. Download the vivaldi-vh-vivalarc.css file and place it in the folder you selected in the previous step.
  3. Close and restart Vivaldi Browser. Vivaldi VH VivalArc Edition will now be activated.

Keep in mind that Vivaldi VH will disable itself when it detects invalid settings. View the README for more information.

v1.3.1

7 months ago

Don't miss future releases of Vivaldi VH by subscribing to the Release Notes feed using the Vivaldi Feed Reader!

Version: 1.3.1
Target Vivaldi Browser versions: 6.2

Changes:

  • The size of the URL obfuscation warning has been slightly adjusted.

Fixes:

  • When the address field and the search field extend on focus, they will no longer be covered by the panel while they retract.
  • When "Show Title Bar" or "Use Native Window" is enabled, the Workspaces toolbar component will now grow correctly inside the address bar and status bar.
  • Removed an erroneous padding in the address field toolbar when "Use Native Window" is enabled.
  • Fixed an issue that caused the minimum width of the search bar to be larger than expected.
  • Fixed an issue that would cause a blurry colored outline to appear below the address bar.

Click here to view the full changelog.

Update instructions:

  1. Locate the folder that contains your current version of the vivaldi-vh.css file.
    • If you do not remember the folder, open the Vivaldi Browser settings, navigate to Appearance and note the folder set under Custom UI Modifications.
  2. Download the vivaldi-vh.css file of this release and overwrite the current file in your folder.
  3. Restart Vivaldi Browser.
First time installation instructions:
  1. Download the vivaldi-vh.css file and place it in a folder of your choice.
  2. Inside Vivaldi Browser, navigate to the URL vivaldi://experiments.
  3. Tick the box for Allow CSS modifications.
  4. Open the settings and navigate to Appearance.
  5. Under Custom UI Modifications, click Select Folder and select the folder that contains the downloaded vivaldi-vh.css file.
  6. Navigate to Tabs and set Tab Bar Position to Left or Right.
  7. Close and restart Vivaldi Browser. Vivaldi VH will now be activated.

Keep in mind that Vivaldi VH will disable itself when it detects invalid settings. View the README for more information.

v1.3.0

7 months ago

demo-1

This release changes some default behaviors of Vivaldi VH, enables resizing of the search field and fixes a lot of bugs, some of which have been longstanding.

The biggest change in v1.3.0 is that the panel is no longer incorporated into the Pillar by default, in order to harmonize better with default settings on a new browser profile. Rest assured that this can be reverted using a newly added Command Chain Flag. More information on why this change was made can be found in the full changelog.

Don't miss future releases of Vivaldi VH by subscribing to the Release Notes feed using the Vivaldi Feed Reader!

Version: 1.3.0
Target Vivaldi Browser versions: 6.2

Changes:

  • The panel is no longer incorporated into the Pillar by default.
  • The Command Chain Flag vvh-enable-panel-in-pillar is now available, which restores the previous panel behaviour.
  • The search field can now be resized, and will no longer extend on focus by default.
  • Borders have been added, some of which were erroneously missing, to distinguish different parts of the UI, such as the address bar and bookmarks bar.

Fixes:

  • Fixed the margins on the Mail Search toolbar component.
  • The selection indicator on the current tab is no longer invisible. Thanks ppgm for reporting this!
  • When the menu button is located in the address bar and the chosen Menu Icon Style is "Menu Icon", it will no longer take up more space than necessary.
  • Cleaned up margins of the menu button in the address bar.
  • Fixed cases of visual artifacts on a transparent tab bar.
  • Fixed a case where the panel wouldn't cover the address bar correctly.
  • Fixed cases where an address field or search field inside the panel would disappear if clicked on.

Known Issues:

  • When the panel does not touch the left or right window edge, panel resizing will behave weirdly, but still be fully functional.
  • When the panel does not touch the left or right window edge, the "Add Web Panel" popup will be slightly misplaced, but still fully functional.

Update instructions:

  1. Locate the folder that contains your current version of the vivaldi-vh.css file.
    • If you do not remember the folder, open the Vivaldi Browser settings, navigate to Appearance and note the folder set under Custom UI Modifications.
  2. Download the vivaldi-vh.css file of this release and overwrite the current file in your folder.
  3. Restart Vivaldi Browser.
First time installation instructions:
  1. Download the vivaldi-vh.css file and place it in a folder of your choice.
  2. Inside Vivaldi Browser, navigate to the URL vivaldi://experiments.
  3. Tick the box for Allow CSS modifications.
  4. Open the settings and navigate to Appearance.
  5. Under Custom UI Modifications, click Select Folder and select the folder that contains the downloaded vivaldi-vh.css file.
  6. Navigate to Tabs and set Tab Bar Position to Left or Right.
  7. Close and restart Vivaldi Browser. Vivaldi VH will now be activated.

Keep in mind that Vivaldi VH will disable itself when it detects invalid settings. View the README for more information.

v1.2.2

8 months ago

vivaldi-vh-v1 2 2_promo

This release fixes some issues that came up with the recently released Vivaldi Browser version 6.2.

Don't miss future releases of Vivaldi VH by subscribing to the Release Notes feed using the Vivaldi Feed Reader!

Version: 1.2.2
Target Vivaldi Browser versions: 6.2

Fixes:

  • When the title bar is disabled, the menu button in the address bar will no longer break out of its designated space.
  • When the title bar is enabled, the address bar will now have the correct background.

Update instructions:

  1. Locate the folder that contains your current version of the vivaldi-vh.css file.
    • If you do not remember the folder, open the Vivaldi Browser settings, navigate to Appearance and note the folder set under Custom UI Modifications.
  2. Download the vivaldi-vh.css file of this release and overwrite the current file in your folder.
  3. Restart Vivaldi Browser.
First time installation instructions:
  1. Download the vivaldi-vh.css file and place it inside a folder of your choice.
  2. Inside Vivaldi Browser, navigate to the URL vivaldi://experiments.
  3. Tick the box for Allow CSS modifications.
  4. Open the settings and navigate to Appearance.
  5. Under Custom UI Modifications, click Select Folder and select the folder that contains the downloaded vivaldi-vh.css file.
  6. Navigate to Tabs and set Tab Bar Position to Left or Right.
  7. Close and restart Vivaldi Browser. Vivaldi VH will now be activated.

Keep in mind that Vivaldi VH will disable itself when it detects invalid settings. View the README for more information.

v1.2.1

1 year ago

Vivaldi VH will now consider the "Use Native Window" setting when applying styles to the address bar.

Don't miss future releases of Vivaldi VH by subscribing to the Release Notes feed using the Vivaldi Feed Reader!

Version: 1.2.1
Target Vivaldi Browser versions: 5.7, 6.0

Fixes:

  • When the title bar is not shown, Vivaldi VH will no longer reserve unnecessary space for window buttons when "Use Native Window" is enabled.
  • When the title bar is not shown, toolbar components inside the address bar may grow their click area when "Use Native Window" is enabled, since the address bar no longer acts as a draggable region.

Update instructions:

  1. Locate the folder that contains your current version of the vivaldi-vh.css file.
    • If you do not remember the folder, open the Vivaldi Browser settings, navigate to Appearance and note the folder set under Custom UI Modifications.
  2. Download the vivaldi-vh.css file of this release and overwrite the current file in your folder.
  3. Restart Vivaldi Browser.
First time installation instructions:
  1. Download the vivaldi-vh.css file and place it inside a folder of your choice.
  2. Inside Vivaldi Browser, navigate to the URL vivaldi://experiments.
  3. Tick the box for Allow CSS modifications.
  4. Open the settings and navigate to Appearance.
  5. Under Custom UI Modifications, click Select Folder and select the folder that contains the downloaded vivaldi-vh.css file.
  6. Navigate to Tabs and set Tab Bar Position to Left or Right.
  7. Close and restart Vivaldi Browser. Vivaldi VH will now be activated.

Keep in mind that Vivaldi VH will disable itself when it detects invalid settings. View the README for more information.

v1.2.0

1 year ago

vivaldivh_promo_v1 2 0

With this version of Vivaldi VH, the title bar is no longer required to activate the Pillar layout. Additionally, you can now use toolbar linebreaks for more control over how toolbar components spread across the address bar and status bar.

Don't miss future releases of Vivaldi VH by subscribing to the Release Notes feed using the Vivaldi Feed Reader!

Version: 1.2.0
Target Vivaldi Browser versions: 5.7, 6.0

Changes:

  • Vivaldi VH no longer requires the title bar to be shown.
  • Toolbar linebreaks are now available. Click here for a setup guide.
  • Command Chain Flags, Command Chain Utilities and flexible spaces are now highlighted in the toolbar editor.
  • Command Chain Flags and Command Chain Utilities now remain hidden when Vivaldi VH is disabled due to invalid settings.
  • When addressbar-universal-flex-grow or statusbar-universal-flex-grow is disabled, components of the respective toolbar are now initially justified to the left instead of centered.

Click here to view the full changelog.

Update instructions:

  1. Locate the folder that contains your current version of the vivaldi-vh.css file.
    • If you do not remember the folder, open the Vivaldi Browser settings, navigate to Appearance and note the folder set under Custom UI Modifications.
  2. Download the vivaldi-vh.css file of this release and overwrite the current file in your folder.
  3. Restart Vivaldi Browser.
First time installation instructions:
  1. Download the vivaldi-vh.css file and place it inside a folder of your choice.
  2. Inside Vivaldi Browser, navigate to vivaldi://experiments.
  3. Tick the box for Allow CSS modifications.
  4. Open the settings and navigate to Appearance.
  5. Under Custom UI Modifications, click Select Folder and select the folder that contains the downloaded vivaldi-vh.css file.
  6. Navigate to Tabs and set Tab Bar Position to Left or Right.
  7. Close and restart Vivaldi Browser. Vivaldi VH will now be activated.

Keep in mind that Vivaldi VH will disable itself when it detects invalid settings. View the README for more information.

v1.1.0

1 year ago

Version: 1.1.0
Target Vivaldi Browser versions: 5.7, 5.8

Changes:

  • The button that toggles hidden extensions is now always to the right of the extensions grid.
  • Command Chain Flags for inverting the position of the hidden extensions toggle are now available.
  • The logic that calculates the width of an extending input field has been improved to take additional browser settings into account.
  • The title bar height and address box row height have been changed to 25px and 34px respectively.

Click here to view the full changelog with additional thoughts behind specific changes.

Fixes:

  • The height of title bar elements will no longer change in unintended ways when changing the user interface zoom setting.
  • The default browser notification will no longer disrupt the UI layout.
  • Fixed a case where the webpage would gain an unintended margin on specific browser settings.

Update instructions:

  1. Locate the folder that contains your current version of the vivaldi-vh.css file.
  2. Download the vivaldi-vh.css file of this release and overwrite the current file in your folder.
  3. Restart Vivaldi Browser.
First time installation instructions:
  1. Download the vivaldi-vh.css file and place it inside a folder of your choice.
  2. Inside Vivaldi Browser, navigate to vivaldi://experiments.
  3. Tick the box for Allow CSS modifications.
  4. Open the settings and navigate to Appearance.
  5. Under Custom UI Modifications, click Select Folder and select the folder that contains the downloaded vivaldi-vh.css file.
  6. Navigate to Tabs and set Tab Bar Position to Left or Right.
  7. If you're on Vivaldi Browser 5.8 or newer: Navigate to Appearance and under Window Appearance, tick the box for Show Title Bar.
  8. Close and restart Vivaldi Browser. Vivaldi VH will now be activated.

Keep in mind that Vivaldi VH will disable itself when it detects invalid settings. View the README for more information.

v1.0.0

1 year ago

Announcing the first release of Vivaldi VH!

Screenshot that shows the UI of Vivaldi Browser with the Vivaldi VH mod applied

Vivaldi VH is a CSS modification for Vivaldi Browser that grants your webpages the entire vertical space of the browser window by moving the rest of the UI into a separate column.

Version: 1.0.0 Target Vivaldi Browser versions: 5.7, 5.8

Installation instructions:

  1. Download the vivaldi-vh.css file and place it inside a folder of your choice.
  2. Inside Vivaldi Browser, navigate to vivaldi://experiments.
  3. Tick the box for Allow CSS modifications.
  4. Open the settings and navigate to Appearance.
  5. Under Custom UI Modifications, click Select Folder and select the folder that contains the downloaded vivaldi-vh.css file.
  6. Navigate to Tabs and set Tab Bar Position to Left or Right.
  7. If you're on Vivaldi Browser 5.8 or newer: Navigate to Appearance and under Window Appearance, tick the box for Show Title Bar.
  8. Close and restart Vivaldi Browser. Vivaldi VH will now be activated.

Keep in mind that Vivaldi VH will disable itself when it detects invalid settings. View the README for more information.