CSS modifications – experimental feature
-
Since no one has posted about the semi-official support on the modding board so far, I'd like to write down some thoughts.
In the latest snapshot (2.6.1560.4) a new feature has been introduced, which loads custom css files automatically from the file system. To enable visit
vivaldi://experiments/
, tick "allow for using css modifications", then go tovivaldi://settings/appearance/
and choose a folder to load from.In comparison to our current setup, the CSS is being imported from the file system for every instance of a new Vivaldi window. We can directly edit a single instance by opening the devtools for the UI, switching to the sources tab and selecting the file.
Changes we make are instant, but to save those changes we have to right click the tab for the file and pick "Save as…" – then they become permanent.
While I applaud the devs for the effort, personally I won't switch to the new approach yet. There is no possibility to load custom javascript files, which means people who run both would still need to import the extra files on every upgrade. Additionally there is no sync, which I'd really like to see. The custom CSS files are handled like the custom pictures for speed dials currently – loaded from outside and not really integrated… Anyway, for users who are only interested in a few quick CSS modifications, the new setup is perfect. Moreover it's far easier to start out like this for new modders, which shouldn't be underestimated.
Please share your own thoughts.
-
@luetage I'll also wait for js support before switch to it.
On test version with only css everything seems to be place. -
I would also like to see support for loading custom page actions, otherwise I still have to import extra files on every upgrade...
-
@valiowk That's a good point, I load custom page actions too and change the Vivaldi background in
browser.html
additionally. Since it's just a single command to trigger the execution of the bash script on every upgrade, I favor my current setup too. -
@luetage I built a structure that can turn on or off mods. Just one click after every update. I'm sure I'll still use it some time until vivaldi supports the js mod or when it's better than what I'm using.
Allowing js can lead to security issues in vivaldi, so it is quite difficult for vivaldi developers. Although I say that, I still hope to have it
-
@luetage
Thanks for this info, I don't follow snapshots and this is news to me, pleasant one too.
It shows that devs care about making it easy to customize the browser.On the other hand as you've said, it's half way there, editing browser.html is pretty comfy, in fact it's so rarely changed file that for huge majority of times it boils down to simple overwrite. Whether we do it for css+js or just for js injection doesn't really change the number of steps. And everyone would agree we can't really customize ui without js (freely moving buttons springs to mind).
I would be very happy if bundle files would get split and deobfuscated in the future, but at this time I don't think too much focus should be on customization, but on degoogling and extreme privacy/security settings/options/features. The state of the browser market is such that no single browser has full dominance with tech savy enthusiasts, and I'd argue securing that part of the user base would guarantee the best evangelists for years to come, whose opinions trickle down to various forums/blogs to social networks and to end users.
-
@raed said in CSS modifications – experimental feature:
Could youy share it?
@raed I wrote it for a long time but it was only about 70% complete. There's still a lot of work to do to get a complete version. I am quite lazy to complete it so sorry I cannot share a version that I have not yet felt really perfect. Maybe I will finish it someday or maybe never.
-
@tam710562 Lool, the suspension will kill us ^^
By the way, the setup looks similar to the collection of mods, which was around for a few years. I just forgot the name of it apparently… -
@luetage said in CSS modifications – experimental feature:
By the way, the setup looks similar to the collection of mods, which was around for a few years. I just forgot the name of it apparently…
It is VivaldiHooks. It was my inspiration even though I had never used it because it was outupdate when I knew it
-
@tam710562 Yeah, exactly. How are you loading the mods into settings, are you using react?
-
-
This worked perfectly for me. I have a few modifications in custom.css, which I store in my Vivaldi folder. The changes were applied on updating, without any need to copy/paste them to common.css.
Specs: AMD A10-6800K, 8 Gb on Win 10 64-bit 1809 build 17763.504 • Snapshot 2.6.1566.6 (64-bit)
-
This is not working for me.
Can anyone provide a hint as to what I am doing wrong?
At vivaldi://experiments/, I ticked "Allow for using CSS modifications."
Then in Settings > Appearance under CUSTOM UI MODIFICATIONS I selected a folder on my Mac and inside that folder, created a file called
style.css
havingbody { background-color: yellow; }
for testing. Then quit Vivaldi and re-opened it and don't see any change. Does the css file have to have a specific name?
-
@srikat You can’t see the background color change of body. Try something else.
-
@srikat said in CSS modifications – experimental feature:
Does the css file have to have a specific name?
No. You can have mods in several different files if you wish.
-
Got it. It is working fine (the CSS is being overridden).
Had to click on Inspect after going to
vivaldi://inspect/#apps
. -
@luetage
OMG, thank you so much, I've still been manually adding it again every update like a pleb, I wish I found this sooner. -
@xium You’re welcome, but this has been part of the official guide for a long time. I’m surprised you found the topic at all. See https://forum.vivaldi.net/post/10549