userstyles-world / userstyles.world

⭐ Website to browse and share UserCSS userstyles. A modern replacement for UserStyles.org made by the userstyles community.

UserStyles.world

Free and open-source, community-driven platform for sharing and browsing userstyles, and a replacement for UserStyles.org, made by the userstyles community.

Features

Features are implemented as they are needed. Visit our public roadmap to see what we’re working on, and feel free to open an issue to request new features.

Core User functionality:

• Register, login, and logout
• Email verification, login notifications and password recovery
• OAuth login via GitHub, GitLab, and Codeberg
• Custom biography area with Markdown support
• Links to GitHub, GitLab, and Codeberg profiles

Core Userstyle functionality:

• Manual creation
• Search functionality (to be improved upon)
• Importing from USo-archive, GitHub, GitLab, Codeberg, etc.
• Permanent link to original URL that the style was imported from
• Optional source code as well as metadata mirroring
• Private or public import and mirror URLs
• Project homepages, description, notes, license, category, screenshots, etc.
• Userstyle deletion and editing of all available fields
• Style statistics in form of views, and weekly/total installs

API:

• Style index, style details, and style source code endpoints.
• OAuth support to make certain actions on the user behalf.

Documentation:

Please see docs/ folder for relevant documentation on features.

License

Source code released under the AGPL-3.0 License.

userstyles.world's Issues

OAUTH login for GitHub/GitLab/Codeberg

As I'm working on this. Just having a issue :)

Simple flow: Ensure security and possible support PKCE extension for supported services.

Do some front end to input nickname + password and than let continue the basic register flow by email verification(or not?)

Design - Use all the window for a large screen

I have one and before i make an userstyle for that,
it's possible to use all the empty place (when we use a large monitor) ?
I hate to scroll if it not necessary...

In the same idea, infos displayed can be reorganized when we use a large monitor:
As i said before in an other topic, by example for the userstyle info page:

TOP:
Tittle and user name

LEFT:
Screenshot
Detail / Description under the screenshot

RIGHT:
Notes: with a limited height (height of the left side + overflow-y: auto)

POPUP (open on a click):
Code source

Replace "Codeberg.com" with "Codeberg.org" in

The Import, Add, and Edit pages include text that reads " External images must be hosted on GitHub.com, GitLab.com, or Codeberg.com." Codeberg.com is a parked domain (available for a mere $2,995!). Based on the code, I think Codeberg.org was intended.

I believe the change is needed in views/style/import.html and views/style/create.html

• Browser: Firefox 91.0
• Screenshot:
  • 
  • 

Add short delay to goroutines before/between mirroring styles

:D

Style rich embeds and metadata

Add the functionality to add meta tags within the style/:id page for third-party services properly show up description/title/image.

Can not use github image as main screenshot

When trying to add main screenshot to my style, it says, that you can use github storage for it.
But when I trying to set following screenshot:

https://github.com/DelmorS/The-Best-Google-Logo---My-Little-Pony-MLP-Logo/blob/master/docs/images/main_page_examples.png

Textbox is turning red, and tells, that I can not use this link.

And the same goes to direct link:
https://github.com/DelmorS/The-Best-Google-Logo---My-Little-Pony-MLP-Logo/raw/master/docs/images/main_page_examples.png

Is it possible to fix it, or to add some tip for user, why it can not be used, or how to fix url

Thank you.

Duplicate: Add a verification before import

When import userstyles one by one, i think it's easy to have a duplicate....
:-)
So it's possible to have a warning if the import is yet in USw?

Save button in biography section

• Screenshot:
  

• Additional context:
  The "Edit" button in the biography section should be renamed to "Save" as that appears to be the function of the button.

Switch to JWT-based auth

Just for sakes on the Roadmap, an issue so it can be properly tracked. #21

Add options to change password

Currently when you forget your password you cannot reset/change your password.

Make all usertsyles list sortable by date /name / author etc...

As they are more usertyles coming, it should be more useful to explore ...

I can't add my github profile

• Browser: Firefox 87

• Screenshot:
  

• Additional context:
  My github username has a dash and the pattern used only accept ([a-zA-Z0-9])

The Auto Update don't update the userstyle name

As there is no versioning in userstyles.org, i have the (bad?...) habit to add it in my userstyle name....
Yes, no many user doing that, but for me it's easy like that to see if i have posted my last version without need to open its usertyle page.
Anyway, can you update the name too when there is an change in the CSS in USO ?

Example:
Youtube WideScreen (New Design Polymer) v.13 in USw
but the code show it's the v.14.

Youtube WideScreen (New Design Polymer) v.14 in USO
Here the title is good equal to the version in the CSS.

Add an install button for the "old" userstyle format

I can't install Usercss with Stylus and Waterfox Classic, du a bug on Waterfox it seems:

I posted about that in both place:
Stylus Addon + Waterfox Classic : can't install Usercss ? [Waterfox]
invalid regexp group [Stylus Addon]

So, add a way to install too with Stylish and the old userstyle formating solve that.

In an other hand , many users use the Stylish Addon and don't take care to Usercss format too.

If this function is added, it should be a way to assure a retro compatibility too and expand the usage of the site.

Style parser doesn't ignore whitespace correctly

When adding a style, this doesn't get accepted:

@name		newstyle
@namespace	somespace
@version	1.0.1

while this does:

@name newstyle
@namespace somespace
@version 1.0.1

I assume it doesn't ignore tabs correctly and just stops reading after the first one.

Thumbnail sizes

Describe the change you'd like:

Let's generate 2/3 more pictures of each screenshot.
These would be downscaled to 2/3 hardcoded dimensions, This will help for things that frequently requests screenshots, but actually don't need the full scale picture(style cards on USw, Inline search of stylus).
I was thinking about 2 dimensions for the thumbnails.

• "large", a thumbnail which should match the dimension of our current stylecard's screenshots, which we will largely use.
• "small", a thumbnail which should roughly match the dimensions of stylus's inline search preview, which Stylus can use.

To avoid too create many thumbnails, we will only generate thumbnails for the current best format, webp.

CC @vednoc @narcolepticinsomniac

How to Add userstyles or gain acces to our own userstyles ?

Sorry , was an error of me..
I can't change the label "Bug"...

But i have a question:
How i can add userstyles to your your site?
It's possible to gain access to our own userstyles displaying here?

Add User roles

User roles can and will be used for allowing various levels of access for given systems.

For example, a moderator role would be allowed to promote userstyles, or archive/ban them but not delete them entirely.

Add More Screenshots (and import all of them from USo)

I think after you finish the import section, you solve that.
But if you can adding to the edit page a form which allow more screenshots (with a caption field for each), should be great.

Account Verification to Prevent Bot Abuse

Describe the change you'd like:
Account verification to prevent bot abuse.
Additional context:
Use email verification or captcha to prevent spam or bot abuse when registering a new account.

"Duplicate style" when adding or importing 34kb stylesheet

• Browser: Latest Chrome on Windows

• Screenshot:
  

• Additional context:
  Hi! I've been trying to upload my new Notion stylesheet but get that error. I tried both adding and importing from the Archive here: https://uso.kkx.one/style/210773

Could it be the filesize? I'm inlining 98.css and also Base64 a background image so the filesize is 34kb
Thanks!

Allow BBcode and line break (at the import and for editig too)

After import, I notice that all my code formatting in BBcode and line break are lost.
They are here but in plain text.

Internal Error after Github registration/login

After registration using 3rd party login with Github I get {"data":"Internal Error."} with http response 500 error. The same happens after subsequent logins.

Account name instead of display name

I've published my first style and I noticed that the author's name displayed twice on the style's page is my account named, not my display name.
The display name is used elsewhere (in search result and on the profile page).
The account name is also part of the url of the profile page, but I assume it's normal.

edit
forgot the url
https://userstyles.world/user/procyon-b

The nav does a horizontal scroll on small devices

Describe the change you'd like: Make a hamburger menu for small devices or just show the logo without the "UserStyles.world" text.

Additional context: Tested on firefox 87.0

Note: On chrome v89.0.4 doesn't create the horizontal scroll

Implement html color-scheme meta tag and remove custom scrollbar

Describe the change you'd like:

1. Add the following to the header of the website to get theme aware browser UA styling for UI input controls such as checkboxes, dropdowns, and scrollbars.
2. The custom webkit scrollbar styling should be removed. Additional testing may need to be done to ensure this doesn't negatively effect users on Linux versions of Firefox.

<meta name="color-scheme" content="dark light">

Order of dark light means that dark is default if no theme is detected, the same as how the prefers-color-scheme CSS is currently set up.

Additional context:
https://web.dev/color-scheme/

Import styles from userstyles.org

Importing userstyles.org styles:
Someone made an archive of the content of userstyles.org, I think it would be a good idea to import it
https://github.com/33kk/uso-archive

Counters reset to 0.....

As the title said:
Seems all counters reset to 0, no?

Github registration requests personal information.

Github registration requests access to "Personal user data". Github's documentation isn't super specific about what information that is.
From the docs:

User data includes information found in your user profile, like your name, e-mail address, and location.

Is this information necessary for userstyles-world to have access to? Could it be dialed back? I would prefer not to have to trust more third parties than necessary to handle my personal information.

Screenshot of authentication page:

Seems the auto Update don't work for a scrennshots change

Tha auto update from USO work fine for CSS code.
But don't update screenshots change and Notes ( not tested for Description).

Add a way to install with Stylish addon too

It was an request i doing at the beginning of USw.
And you reply to me it was not trivial to do and maybe not so useful.
But sorry, i think, if it is possible, it should be interesting to reopen the request.

Since a long time Stylus don't want install an userstyles with Waterfox Classic.
When i try , i have always this error msg:
"Stylus a échoué à parser le usercss :
invalid regexp group:"

I report it to the Stylus team and Waterfox .... but without results at this time:
Just they said they "can fix it".... but when, i don't know.

So i can't test other usestyles into Waterfox Classic because of that.

If it is a problem for me, it can be too for others users of Waterfox Classic.

Yes, if Stylus is better than Stylish (functions and privacy),
it don't work with Waterfox Classic when we want install an userstyle from USw.
It only work when we create an new userstyles, that's all.

So, to gain more users to USw and preserve compatibility,
Add an install with Stylish (mine is a version without privacy problem)
should be great.

How to do ?:
If remember well, the userstyles.org site, for the install of userstyle which provide variables / options (not just simple CSS),
we can chose between them and after install it.
I rarely use them but that's was fine.

Can you do the same thing on USw ?
If before installation, when need a Stylish install, we can access to the config of these type of userstyles and choose them,
it should be famous.
For a simple userstyle (with no options/variables, like mine):
A direct install by Stylish too should be possible.

PS:
I have tested to copy / paste the CSS code of Userstyle with Stylus configuration inside (sorry if it is confused):
It need many works to make it work a little bit:
remove the top header, all "if" sections (but keep some and rewrite them in normal CSS format , etc....
To much work by hand.

Not receiving email verification on Tutanota

• Browser: Firefox 87.0 (64-bit)
• Additional context: Signing up using a @tutanota.com domain doesn't send the verification email (Not in spam either). Tried using Protonmail instead and it ended up in my spam.

bugs in the preview image and after the installation of the style

Hello everyone.

First of all, I want to note that when installing from this resource, sections with global rules are ignored and become inactive (and disappear from the tree of sections).

further, after installation in the style, you cannot create new sections, move them Below/Above, and when working in the current section, Stylus does not highlight the name of the active section in the left column (tree of sections).
there are also no Import and Export buttons.

all this appears or starts working if you select the entire installed style, copy it to the clipboard, create an empty new style and paste the copied one, but none of the above works when installed from the site itself.

and the Preview image on the style page looks like an incomprehensible mess.

Project branding

This project has been rewritten — we now have a proper server, database, etc. — the previous roadmap is no longer relevant. The new roadmap can be accessed on GitHub's Projects page, which is a lot nicer than a simple checklist that we had.

Since this issue received many replies about design and branding, instead of closing it I've decided to rename it to "Project branding".

502 Bad Gateway

Hi!

The page at https://userstyles.world/ gives a 502 Bad Gateway error. Is the site under maintainance?

I read a while ago it was being rewritten or something along the lines. Does that have anything to do with it? Or is it just a configuration error?

Thank you for the work in userstyles.world!

Add "change password" into account page

Describe the change you'd like:

Add a change password into account page,
The UI should be somewhat like:

Input - current password.
Input - new password.
input - reconfirm new password. (This should be a standard in our current register as well).

Additional context:

Currently to change a password, people can abuse the "Forget my password" but is super unfriendly.

Links shouldn't be case sensitive

Peek.2021-04-28.21-23.mp4

Document what source code mirroring does

Describe the change you'd like: Additional documentation for what code mirroring does would be helpful, as it may not be clear to everyone.

Additional context: It's not clear what "Mirror source code" on https://userstyles.world/import and "Mirror source code updates" on https://userstyles.world/edit/799 are supposed to do. I'm guessing it means the URL will be regularly scanned and new versions (based on @version) will be automatically included on us.w. Assuming this is the case, things I'd like to know as a user uploading styles:

• How often are updates checked? (ex: "The URL is checked approximately weekly.")
• Will any of the metadata that was included when I imported the style be updated? That is, if I change the @name, @description, @homepageURL, or @license, will the USw page be updated to match, or do I need to do it manually?
• Is my Preview URL also checked and updated?

Make Imported Userstyles auto updatable when an update come to the original source?

After i import an userstyle , it should be great if i can choose to rely it (or not) to its USO version.
If an update come on it, it self update its CSS code (and maybe the description too).

The idea is that can became difficult to maintain an usertyles through many different places i test:
I post to Usertsyles.org, Greasyfork and test here now....
:-)

Add style statistics

I think a very important part of hosting styles would be providing some kind of statistics system. I think a nice roadmap would include:

• installations per style
• views per style
• the above, but for the whole site
• the above, in the last month (or 28/30 days)
• style ratings (maybe thumbs up/down, or a star rating system)
• comments
• sorting styles by all of those metrics (and lines of code maybe)

I know most of this is still far into the future, but I wanted to hear your opinion on those ideas, as well as provide some ideas for the future.

Userstyle weekly/total install counters

We need a counter for install on USw.
But before implementing it, can you add the install infos from USO too ?
And Update it regularly if it is possible ?

Add A Reporting System

Describe the change you'd like:

A system for users to report other user styles.

Additional context:

Have a "Report" button underneath each style thumbnail or a "Report A Style" button in the header.
I've found two similar/exact styles and I wanted to report the lower viewed/installed one as it would seem likely this user copied and uploaded the same day. I've looked throughout the site and either I've missed the place or there isn't one implemented.

The Cons of this would be that you'd get false reports.

Add more userstyles

On the website there are only 8 styles, will there come more?

Menu: Add & Import

Makes more sense that both links (add and Import) appear only after login.

Add a button to preview markdown

Describe the change you'd like:
Add a button below text boxes that support markdown to preview it, so you will know how it will look before making it public.
Also maybe a button link to a markdown guide would be helpful

Problem after Import process for text formating and Edit function

For by example.
The original:
Userstyles / Greasy Fork Enhancer Dark-Grey [USO]
My import:
Userstyles / Greasy Fork Enhancer Dark-Grey [Userstyles World]

The Description Section don't keep the original text formatting (but that's good in the Notes section):
Normally it's BBcode format ...

When i want edit the userstyles:

• Problem for the screenshot field (stay red border (invalid..).
  Copy past the image link from USO don't change something.
  By example:
  https://raw.githubusercontent.com/33kk/uso-archive/flomaster/data/screenshots/56792_after.gif

It's too a problem to save a change (i wanted enable the "Mirror code updates"):
It don't want save my choice, due this invalid image (the one which is present when i imported it...)

And in this field, we can only add one screenshot.

• Description / Note support Markdown syntax:
  It's possible to support to BBcode too ?

I Have 2 Questions

I would first like to say you all did an amazing job on this project. I never knew it existed, let alone UserStyles archived. I've been using Stylus for a few years and never looked back since.

I have two questions for you,

1. Does this project with the Stylus Firefox extension? (I use Firefox Quantum if that makes a difference.)
2. Do you have a Discord server or may consider creating one? I know you don't know me and there are risks working with someone you have no clue about however I would love to help expand your community onto another platform!

I sincerely apologize for not following the format you've created however I couldn't think how to fit my content into the format.

Add a notice to install a browser extension like Stylus to be able to install styles

Describe the change you'd like:
If possible maybe check if the user doesn't have the Stylus extension installed, and replace the "Install Userstyle" button with a "Get Stylus to install this style!" button

If not, maybe a banner would be fine.

Don't save my choice, when i want enable "Mirror source code" and "style metadata" updates

Don't save my choice, when i want enable:
Mirror style metadata (only for styles from USo-archive)
Mirror source code updates
Message on the title textarera:
"Modifier la valeur pour correspondre au format demandé"
That's about an imported userstyle:
Télérama - Voir Notes (Sans Inscription)
At the import, no way to choose "Mirror Update" (just the le mention of it).

Convert into PWA

Describe the change you'd like:
Hey there!
Just found out about the site from Dark-WhatsApp, and I really like the idea!

If possible, I'd like to see an option to install the website as a PWA, that way it would be easier to handle shortcut creation without having to go on a single computer basis, plus the possibility of using it to install UserStyles to Stylus-compatible mobile browsers like Firefox.

Additional context:
As far as features, I believe aside from shortcut creation, it would be nice for the website to behave similarly to Wallpaper Hub or AppScope and implement an optional notification channel for changelogs and announcements, given that UserCSS doesn't allow links on the modified websites.

I mostly have experience with WordPress, but let me know if there's any way I can help!

Kudos