Built in Support for UserStyles / UserCSS

LonM

Add functionality such as that offered by the "stylus" and similar extensions. Allow custom stylesheets to be injected to certain webpages.

Related android request: https://forum.vivaldi.net/topic/50655/custom-css-userstyles-for-websites-on-android

LonM

chrome already has userscript support. A userscript has the following preamble:

// ==UserScript==
// @name         Name
// @namespace    lonm.name
// @version      1.0.0
// @description  stuff
// @author       lonm
// @match        *://vivaldi.*/*
// ==/UserScript==

code goes here

For userstyles I would suggest the same as documented here:

/* UserStyle
@name         Name
@namespace    lonm.name
@version      1.0.0
@description  stuff
@author       lonm
/UserStyle */

The only issue is figuring out a wildcard for url pattern matching, because the */ is already used to end comments in css. Most other userstyles use @document patterns as described here

LonM

It could be nice to integrate with userstyles.org, as that seems to be a resource lots of people like to use.

Hadden89

@lonm Could you post a sample of css embedded in a js userscript?
I always forget if/how can be done ^^,

LonM

@hadden89 Here is one that changes how the vivaldi blogs admin page look when in a web panel: https://github.com/LonMcGregor/CustomStyles/blob/master/vivaldiblogs.user.js

Interestingly, if I click the "raw" button, I get a prompt about installing it not being allowed... I guess vivaldi recognises it as a user.js, but only allows installation on the vivaldi://extensions page in dev mode.

QuHno

@lonm said in Built in Support for Userstyles:

I guess vivaldi recognises it as a user.js, but only allows installation on the vivaldi://extensions page in dev mode.

With one of the latest versions there was a change in the underlying Chromium code and since then both, extensions not from the chrome store and user.js need to be installed in dev mode.
No way around it as long as Vivaldi does not have its own store.

[personal opinion]
The chromium code was changed for "security reasons" - which would make sense if Google would finally get around and check extensions and the updates thoroughly on every update, which they don't. There is always a chance for malicious extensions in the chrome store as could be seen lately with the "MEGA" extension and previously with extensions like "Better History" and a whole lot of others.
[/personal opinion]

Hadden89

@quhno It seems they check after the updates or user reports. Which is quite "pointless", risky and sad.
Any update should be first pushed to g-servers and analyzed - and only then delivered to the users. Of course this won't ever cover "non evil ads platforms", as G is one of them, after all.

metafaniel

I'm an active user of ReStyle extension. I use it on many websites mainly to install dark themes. It would be a great idea to have a global dark theme for all pages (if that's achievable in the first place).

Paul451

This is a superset of lots of small requests that people have made. It also replaces a lot of single-purpose extensions that people end up downloading, in some cases to modify the layout of a single site.

People can change the way a page displays by modifying the elements with the dev-tools. You can permanently change the way it displays using custom style-sheets, Ghostmonkey, etc. But a dummy like me doesn't understand any of that. So I end up trying to find an extension that does the job, but even when they exist, they rarely work the way I want, or they did but are no longer supported.

I'd like to be able to modify the properties of elements on a page or site, such as font-type/font-size/width/location/gutters/padding/visibility/background/etc in a way that is understandable to me. A GUI, drag'n'drop, click'n'edit mode which does all the steps of creating a custom stylesheet for that page or site.

And obviously, it has to be able to be applied to a domain, subdomain, specific page, etc, that the user wants. Throw in the ability to share those custom stylesheets with other people, because why not.

Judging by the dev-tools, and the extensions available, including element blockers (like uBlock's cosmetic filters), this is something that the browser can do, it's just "hidden" from muggles like me.

I understand it's a "dangerous" tool, but it would be so incredibly useful.

LonM

@Paul451 Is this the same kind of request as https://forum.vivaldi.net/topic/24156/built-in-support-for-userstyles ?

Paul451

@LonM
It's the GUI, "user friendly" part I'm interested in. It's clear the functionality is already there, but it's only available by understanding CSS coding or by running extensions that do a single thing. (Such as Custom Page Zoom.)
I've seen an extension that makes changing pages fairly user-friendly, but doesn't save the change to a CSS (or user-style?). It's intended for a single demonstration.
I've also seen extensions that are intended for devs, they do save the changes for a site or page, but require the same coding as the page itself.
It's frustrating that the pieces all seem to be there, they just need to be connected to an interface that makes it useful for idiots like me.

LonM

@Paul451 OK. I understand more now.

interpixels

This would be such a fantastic feature to have. I know there are several extensions in the Chrome store, but I just want to avoid installing any extensions, due to security concerns.

BoozeOperator

@Paul451 said in Built in Support for UserStyles / UserCSS:

People can change the way a page displays by modifying the elements with the dev-tools.
(...)
I understand it's a "dangerous" tool, but it would be so incredibly useful.

I still think that Paul451's and my own request should be seen as unrelated to user-defined CSS, albeit rated as duplicate of this one. I cannot agree.

We want to add functionality to the development tools.

BoozeOperator

Just to push up the topic.

I want my request https://forum.vivaldi.net/topic/107875/persist-modifications-in-the-html-source-per-url re-transferred to the request-forum, as it is not referring to User-defined CSS, NOR TO ad-blocker features.

Make changes effectuated via the development tools permanent.

Or show me, where a previous poster in this thread has mentioned it.