Discussions » Greasy Fork Feedback

[Beta] User CSS support

§
Posted: 2019-11-02

[Beta] User CSS support

Greasy Fork now supports User CSS as defined here for use with Stylus. Go here to post User CSS.

Currently User CSS entries will not be listed in search results. This will change in the future.

§
Posted: 2019-11-06

That's cool. Can we import a usercss from Github and set up the webhook?

§
Posted: 2019-11-09
Edited: 2019-11-09

Where is the button/ link in the menu to post a new script using "User CSS" ?: https://greasyfork.org/fr/script_versions/new?language=css

I only find this one: https://greasyfork.org/fr/script_versions/new

Re edit, i see it now: It's the "Post a style" entry! ;-)

§
Posted: 2019-11-09

This new function don't need Stylus?

§
Posted: 2019-11-10

@eight said: That's cool. Can we import a usercss from Github and set up the webhook?

Not yet, soon.

@decembre said: This new function don't need Stylus?

You'd need to have Stylus or something else to install it for now. I intend on making the user styles available in .user.js format too.

§
Posted: 2019-11-10
Edited: 2019-11-11

@JasonBarnabe a dit :

@decembre said: This new function don't need Stylus?

You'd need to have Stylus or something else to install it for now. I intend on making the user styles available in .user.js format too.

Hoho, that's should be great! All in one place : The Good Old Time.... Userstyles.org became too boring...

PS: Have you some test links?

§
Posted: 2019-11-11
Edited: 2019-11-11

I find one userscript example: Popurls Classic Black Style 2019

It use as it as // @resource: // @resource linkscss https://greasyfork.org/scripts/14798-popurls-classic-link-colors-stylesheet/code/popurls%20classic%20link%20colors%20stylesheet.js?version=95986

Re-Edit It seems this resource is not formatted correctly : "Automated delete due to script containing JavaScript syntax errors" "...

But maybe, to bypass Stylus use, the idea of @resource (from greasyfork) and // @grant GMgetResourceText // @grant GMaddStyle could be an idea ?

q1k
§
Posted: 2019-11-11

Hmm, maybe our userstyles with customizable options could be automatically turned into userscript settings so it can be toggled from the script manager instead of having to reinstall the whole thing.

§
Posted: 2019-11-12

@JasonBarnabe said:

@eight said: That's cool. Can we import a usercss from Github and set up the webhook?

Not yet, soon.

Should work now.

§
Posted: 2019-11-17

There is now a JS/CSS switch in the sidebar in script lists.

§
Posted: 2019-11-19

I don't know if it is a good way to promote them. Maybe, Can you add the swither in the script list sort panel: .script-list-sort

Should be better for discover these User CSS: They are few yet and they don't appear in the "normal script list.

The idea is to show them with the other and add to them a different style/Icon. Actually, they have not an identifier "User CSS" to make a difference with the others.

An other problem with search: For test i created: Flickr WideScreen - BigONE v.107 - TEST UserCSS style

If i do a search, i can't see it....

§
Posted: 2019-11-20

It's intentionally not listed unless you pick the CSS option as most people will not know how to install it. This may change once I can generate user JS from the CSS.

§
Posted: 2019-11-21

Thanks , but near the install button, a note explain they need use Stylus, so ....

§
Posted: 2019-12-19

User CSS are now also available in user JS format. Please test this out and let me know of anything that needs to be fixed/improved. Once I get confirmation that it's good, I will allow user CSS to show in the main search results.

§
Posted: 2019-12-19
Edited: 2019-12-19

I tested : Flickr WideScreen Dark and Grey - BigONE v.111 - TEST UserCSS style + JS It work as Usertyles with Stylish and Stylus.

From Greasyfork: I can install it as Usertyles with Stylus But as Userscript it dont work.

Test on Firefox Quantum and Chrome With Greasyfork and Tampermonkey

§
Posted: 2019-12-19

Yeah it's really messing up on parsing that one. I'll look into it.

§
Posted: 2019-12-19
Edited: 2019-12-19

Thanks and sorry : Yes it's very big and many comments inside and it's in 3 parts... But if it pass your process, it should be a good test for the others. ;-)

I tested (only the userscript option) too: Dark My Nintendo Same problem.... This one use "variable" from stylus.

§
Posted: 2019-12-20

I think I've fixed the Flickr one:

  • The emojis were messing up the parser
  • There were unnecessary global blocks that were just comments. These have been removed.
  • Backslashes in the CSS were not properly escaped.
§
Posted: 2019-12-20

I don't think this is going to support non-default preprocessor or var for now.

§
Posted: 2019-12-20

Good Job! It should be a perfect solution: Userstyles and Userscript ALL in ONE place...

Seems ok in general. Style is fast (no delay, like sometime when we use style in an userscript)

For my case: There are some errors in the aspect: I don't know why or understand yet...

Maybe the order of rules make something wrong (3 userstyles in one). Or some are "!important;" missing or need ???? By example at this page: 171 - Portraits to remember The top bar need to be moved top and its background changed... After a quick inspect, it seems the rule exist but it need or miss the "!important;"

I need too some time to test my script under Firefox / Waterfox / Chrome:

I am old school, Waterfox "Classic" 56.3 i my default browser with old Stylish and Greasemonkey 3. In Firefox Quantum / Chrome, i am not familiar with their dev tools (i prefer my old Firebug + FirePath with their bugs, so practical for CSS).

About: "There were unnecessary global blocks that were just comments. These have been removed." "Backslashes in the CSS were not properly escaped." Have you some example?

§
Posted: 2019-12-20
Edited: 2019-12-20

@JasonBarnabe said:

  • There were unnecessary global blocks that were just comments. These have been removed.

Cases like:

@-moz-document domain(example.com) {
}
/* Some comment */
@-moz-document domain(example2.com) {
}

It would do include * so that it could insert that comment. Now it understands it doesn't have to include comments like this.

  • Backslashes in the CSS were not properly escaped.

Things like:

blockquote{
  quotes: "\201C" "\201D";
}

Need to have their backslashes turned into \\ when used in a JS variable.

§
Posted: 2019-12-20

Thanks.

§
Posted: 2019-12-20

@JasonBarnabe said: I don't think this is going to support non-default preprocessor or var for now.

This is done - the user JS install buttons are unavailable in this scenario.

§
Posted: 2019-12-20

User CSS which is convertible to user JS now shows up in search results for JS.

§
Posted: 2019-12-21
Edited: 2019-12-21

The User CSS not appear in our profile without select CSS: Can we have them in it without selecting this (all userscripts in profile) ?

My test appear twice in the script list:

But i thinking 111 was just update of 107 with a new name...

§
Posted: 2019-12-24
Edited: 2019-12-24

@JasonBarnabe написал: Greasy Fork now supports User CSS as defined here for use with Stylus. Go here to post User CSS.

Currently User CSS entries will not be listed in search results. This will change in the future. How can I use this feature in Google Chrome? Tampermonkey doesn't support "@", Violentmonkey doesn't complain, but the basic example doesn't work and Greasymonkey doesn't exist in Chrome shop

§
Posted: 2019-12-24

@difabor said: How can I use this feature in Google Chrome?

https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en

You can do a "Mozilla Format" export, that's what Greasy Fork is expecting.

§
Posted: 2019-12-24

Dear Mr. Jason Barnabe, trying to adjust CSS to Tampermonkey, I came to some idea, but I need your help. The idea is follows: Let define some variable, that will contain CSS code as a text:

var my_css = '/* ==UserStyle==\n\ @name Example UserCSS style\n\ @namespace github.com/openstyles/stylus\n\ @version 1.0.0\n\ @license unlicense\n\ ==/UserStyle== */\n\ \n\ @-moz-document domain("example.com") {\n\ a {\n\ color: red;\n\ }\n\ }\n\'

Now I need to pass this variable my_css to some function or something like function, that will interpret this text as CSS code. I understand, that this is not so comfortable, as your fork, but because Greasymonkey doesn't exist in Chrome shop and I can't use it in Google Chrome, it can be acceptably. Moreover, it allows to vary the styles. The example below will explain what I mean:

var colors = ["red", "green", "blue", "yellow", "#0ff"]; var rand = Date.now()%5; var color = colors[rand]; Now, in the previous example, instead of ' ... color: red;\n\ ...' // I will write: '...color: ' + color+';\n...' So, each time, when this site will be loaded, the different color will be used But I don't know how to activate this text variable to interpret it as CSS code... :(

§
Posted: 2019-12-24

You won't be able to post such a thing as CSS. You're just writing JS at this point.

But this is how you add CSS to a document:

  let styleNode = document.createElement("style");
  styleNode.appendChild(document.createTextNode(css));
  (document.querySelector("head") || document.documentElement).appendChild(styleNode);
§
Posted: 2019-12-24

@JasonBarnabe написал: You won't be able to post such a thing as CSS. You're just writing JS at this point.

But this is how you add CSS to a document:

  let styleNode = document.createElement("style");
  styleNode.appendChild(document.createTextNode(css));
  (document.querySelector("head") || document.documentElement).appendChild(styleNode);

I didn't understand - there is no possibility to pass the variable, containing the css code to JS in order to to activate the CSS code? I wrote the follows:

// ==UserScript== // @name trystyle1 // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match http://mignews.com/ // @grant none // ==/UserScript==

var css = '@-moz-document domain("mignews.com") {\n'+ 'body {\n'+ 'background-color: red;\n'+ '}\n'+ '}';

let styleNode = document.createElement("style"); styleNode.appendChild(document.createTextNode(css)); (document.querySelector("head") || document.documentElement).appendChild(styleNode); And this indeed doesn't work :( :'( It is indeed impossible to activate css code from JS?

§
Posted: 2019-12-24

Adding CSS from JS has always been possible. It's just not what we're talking about in this discussion. This discussion is about giving Greasy Fork the CSS and letting it generate the JS for you.

§
Posted: 2019-12-24

@JasonBarnabe написал: Adding CSS from JS has always been possible. It's just not what we're talking about in this discussion. This discussion is about giving Greasy Fork the CSS and letting it generate the JS for you.

Thank you. Where can I ask you regarding my question - how to add CSS from JS in case when there is no Greasymonkey in Google Chrome?

§
Posted: 2019-12-27

@decembre said: The User CSS not appear in our profile without select CSS: Can we have them in it without selecting this (all userscripts in profile) ?

User lists now by default includes both JS and CSS.

§
Posted: 2019-12-28
Edited: 2019-12-28

@JasonBarnabe a dit :

@decembre said: The User CSS not appear in our profile without select CSS: Can we have them in it without selecting this (all userscripts in profile) ?

User lists now by default includes both JS and CSS.

Thanks! Can you add something in the code to make a difference between UserCSS and JS only like an "data-script-usercss" ? So it can be styled.

PS: Thanks for infos in : Conversion of user CSS to user JS

§
Posted: 2019-12-31

@decembre said: Can you add something in the code to make a difference between UserCSS and JS only like an "data-script-usercss" ? So it can be styled.

I've added data-script-language and data-css-available-as-js to the script listings.

§
Posted: 2019-12-31

@JasonBarnabe a dit :

@decembre said: Can you add something in the code to make a difference between UserCSS and JS only like an "data-script-usercss" ? So it can be styled.

I've added data-script-language and data-css-available-as-js to the script listings.

Thanks i go to see that.... ;-)

§
Posted: 2019-12-31

Here a quick test for adding Icons: Without my Userstyles (Userstyles / Greasy Fork Enhancer Dark-Grey): https://i.imgur.com/97W6Szo.png With my Userstyle: https://i.imgur.com/JvqpBgR.png

q1k
§
Posted: 2020-01-04

what about userstyles with configurable settings?

§
Posted: 2020-01-04

@q1k said: what about userstyles with configurable settings?

You should be able to post them, but they are not convertible to user JS.

q1k
§
Posted: 2020-01-06

@JasonBarnabe said:

@q1k said: what about userstyles with configurable settings?

You should be able to post them, but they are not convertible to user JS.

But how can I post them, userstyles org has seperate sections for the options. How do I merge that? Is there an example?

q1k
§
Posted: 2020-01-09

How can I make the settings into a single file. The way uso does it, is by using placeholders and then based on that we have the settings. There is no such option here on greasyfork. If I'm going to put a userstyle, it's just going to be a normal one without any user customizing... no color picker, no custom text, or anything of the sort.. https://greasyfork.org/en/forum/uploads/editor/ns/50fc5ubsyr7m.png

wOxxOmMod
§
Posted: 2020-01-09

As the linked UserCSS documentation shows at its beginning, the config UI for @var is shown inside Stylus extension.

§
Posted: 2020-01-10

You can install style form userstyle.org to xStyle extension and then easily export it to user.css and it will have all customize settings. https://imgur.com/a/MFPNjkG That can save some time for moving your styles to greasyfork.

§
Posted: 2020-01-21
Edited: 2020-01-21

Why on my usercss test script the code is not beautified ? Flickr WideScreen Dark and Grey - BigONE v.111 - TEST UserCSS style + JS Flickr WideScreen - BigONE v.107 - TEST UserCSS style

But for this one, its code is beauified: Reddit Old Redesigned Dark

Tested with and without scripts on waterfox

Ps: This post should be not stay pined at the top, as it's a new feature of Greasyfork?

§
Posted: 2020-01-21

I think when script is too big, code prettifier is not loaded. Probably to make web page run smoother.

§
Posted: 2020-01-21

@Pabli a dit : I think when script is too big, code prettifier is not loaded. Probably to make web page run smoother.

Yes, that could be the reason. Thanks!

§
Posted: 2020-01-22

That is correct. Above 500KB, there is no highlighting to prevent the page from hanging.

§
Posted: 2020-01-22

Thanks!

§
Posted: 2020-03-05

so... userstyles website copy? :D

btw, just make userstyles category for search

§
Posted: 2020-03-31

Can you add a preview shot in scripts/userCSS listings ? It can help because some users seems need it to retain this new function....

§
Posted: 2020-04-07

It's possible to have the edit script page with a specific form just for the CSS ?

Like that it should be more practical to selecting it with a crtl+a ,for updating an Old CSS by delete it totality and replace by the new one.

I think about after trying to update : Flickr WideScreen - BigONE v.120 - TEST UserCSS style

The CSS is huge, the selection of the CSS part was not easy and i make an error which provide a no functional script.... Now i understand the problem and i correct it, but ....

§
Posted: 2020-04-07

Not really sure what issue you're having. If you've got an updated version you want to post, you can also upload the file.

§
Posted: 2020-04-07
Edited: 2020-04-07

Thanks. Yes i can upload it. I was not very clear.

I wanted 2 forms :

One with the /* ==UserStyle== @name
@namespace
@version
@author
@description @license
==/UserStyle== */

And another with the our CSS...

Anyway i can live with only one submit form ... ;-)

Ps: Can you add the ability to include an userscript too ?

By example my UserCSS should be better with some javascripts tweaks. Yes i can notice them with a link in the description. But it should be great if i can include them directly after the UserCSS (in another forms?) .

Post reply

Sign in to post a reply.