My custom CSS for Vivaldi, inspired by Opera
Screenshots:
Configuration steps:
- Download the CSS file
- Type vivaldi://experiments in the URL bar and check Allow CSS modifications
- Open Vivaldi Settings
- Appearance > CUSTOM UI MODIFICATIONS and select the folder in which you downloaded the CSS.
- Appearance > User Interface Density > Regular
- Appearance > Status Bar > Hide Status Bar
- Themes > New Theme... and follow the screenshots below:
Colors:
Background (my recommendations):
https://unsplash.com/photos/an-aerial-view-of-a-boat-in-the-water-IFH0EvwEeZ0 (my current background image)
https://abhishekkumarsahu.gumroad.com/l/driftwall (choose free version)
https://github.com/JustAdumbPrsn/Zen-Nebula/releases/tag/v3.1
Settings:
Icons (optional):
You can replace the default icons with mine from this repository.
- Tabs > Tab Bar Position > Left
- Tabs > Tab Stacking > Accordion (only if you are using tab stacking)
- Tabs > WORKSPACES > check Enable Workspaces and Show Workspaces in Tab Bar
- Panel > Panel Position > Right Side
- Panel > Panel Options > check Floating Panel
- Bookmarks > BOOKMARK BAR > uncheck Show Bookmark Bar
- Rightclick tab stacking > Edit... > Choose any color to use design from CSS (only if you are using tab stacking), repeat for every tab stacking
- Rightclick web app > Floating Panel > uncheck This panel, repeat for every web app you are using
- Rightclick tab bar > Customize Toolbar... > Move toolbar buttons according to screenshot (optional):
- Restart Vivaldi
- Enjoy your new CSS
My recommendations:
Command chains:
- Hide tab bar and panel with web apps with one button
- You can also set it as mouse gesture
- Copy URL address with one button
- You can find more command chains guides here: https://forum.vivaldi.net/topic/63828/command-chain-recipes
Extension Arc Peek:
https://chromewebstore.google.com/detail/arc-peek-link-preview/cemmifilbjnnfldldefdakgljjloajhb