This is a personal project that I decided to share. I wanted to be able to see the window background image more often, and voila. I hope you enjoy it, and more so I hope it inspires you to create your own customizations. If you do, please share them with the community!
In short, to enable modifications in Vivaldi and install these styles:
- clone this repo
- visit the vivaldi://experiments and enable "Allow CSS modifications"
- open Settings and navigate to the newly added Appearance > Custom UI Modifications field and point to the cloned repo
- restart Vivaldi
If you're curious how to start modding Vivaldi, check out the Vivaldi forums and this awesome post for more information.
Also, this link will allow you to open DevTools for the browser UI: vivaldi://inspect/#apps
This design was created while using Vivaldi on Windows with the Gradient theme; though all default themes and multiple custom themes have also been tested.
The initial design only accounted for the following settings:
- Address Bar Position: Top
- Tab Bar Position: Left
- Bookmark Bar Position: Bottom
- Status Bar: Showing
- Panels Position: Left
- expanded the styles to account for (I think) all ui layouts.
- tested on Windows and Linux
- added styles to the window controls (minimize,maximize,close) for Windows and Linux (set colors)
- converted styles to SASS for maintenance enjoyment
If you find any issues with ui layouts or themes, and feel so inclined, please feel free to create an issue on the GitHub repo. Screenshots are highly encouraged!
I also made a codepen that shows off some themes just cause.