Notice: The devs are no longer actively involved in the forum, so any bug reports regarding the Stylish extension or this website should be sent to them directly at
Changing your Avatar.
The only way to currently change a forum avatar is through The email address used for your account must be one of the email addresses that is registered to your Gravatar account.

Convert an Userstyle into a greasemonkey script ?

edited November 2012 in Style Development
I have an huge Style , impossible (for me) to compress more to publish here ...

I want find a way to convert it , automatically if it is possible, into an greasemonkey .

An online tool shall be appreciate ;-)

I know , i can ask to the admin the authorization to publish it, but if it's possible i prefer to have this possibility too.


  • Not aware of any online tool, you'll have to browse for yourself. If you don't mind doing it manually, then...

    1) Upload a dummy style with the same @moz-document rules you have in the style. Switch to installing it as userscript and save the file, it's going to be your template. It'll adjust your at-document rules and prepare it for use.

    2) From the CSS style, remove at-document rule (don't forget the closing bracket at the end) until you have just the CSS code from within.

    3) Now this is very important! Do a search and replace of all backslashes, double-quotes and newlines (things you get with ENTER). Change in this order:
    from \ into \\
    from " into \"
    from [newline character] into \n

    The code ends up being on one line.

    4) Now, you copy that code which is all on one line, and paste it into the Greasemonkey template, on the var line:

    var css = "/*your code goes here*/";

    I hope I didn't forget any important character, this is from the top of my head. Good luck!
  • edited November 2012
    Here is a template you can use. Create a blank text document and add all below. Save and rename text document to your style name and give it an extension of .js and upload to Or you could create a Custombuttons button as well.
  • Hoo thanks to you .....

    Seems good (but complex...snif for an automated thing ...) and I need to test all that,

    but before i needs 3 big morning coffee
    My english is toooo bad the morning, if it's possible or it's only a problem to open my eyes.

    ps :

    - Have you some Userscript example , write with this method ?

    - What i need to remove in my original userstyle , before add it in the script and add a backslash at the end of each block and start a new block ?

    - Your explanation work with multiple "prefix url" sections in the original Userstyle ? :
    @-moz-document url-prefix(http://XXXX/one/) {
    @-moz-document url-prefix(http://XXXX/two/) {
  • edited November 2012
    If you were to post your style (like and post the link), I would put it into a Greasemonkey script and a Custombuttons button for you, which you can use for a guide to create others.
  • edited November 2012
    Srazzano , that's great !
    By this way i can try the CustomButtons too .
    Can you test that on my userstyle (which have prefix url inside and it's not too huge ) :
    Userstyles TableView+Enhancer - Dark/Grey 3.91BETA

    But if you have time , that is this one i need to convert :
    FLICKR WIDESCREEN - ALLinONE - TOTAL 1 beta (CSS in Pastbin)

    To have an idea of the style :
    Flickr WideScreen - ALLinONE - FLUID beta2

    Yes my CSS is not clean.... that's because i working on it (Flickr like "improve" its site).
    It need to be compress, but all test i have made give a too huge file .

    I use these online compressor (if you know better tools ...):
    - Online JavaScript/CSS Compression Using YUI Compressor
    - Code Beautifier : CSS Formatteur et Optimiseur
    And to clean my UserstyleS, i use sometime:

    I have error With this tools :
    Format CSS
  • Do you have Custombuttons addon installed? I made both your themes (Flickr and Userstyles) into button. I prefer the buttons because they sit in the toolbar and can be clicked to turn styles on/off with each click.
  • edited November 2012
    I can install it!
    that is this addon:
    Custom Buttons
  • edited November 2012
    Let me know when you have completed the install of Custombuttons: and I will post the buttons.
  • It's installed...
    what i needs to do now?
  • edited November 2012
    Posted three buttons (Flicker Theme, Userstyles Theme and Site Themes). Click on links below and click Install. Drag the buttons out of the Customize Toolbar Palette onto your toolbar after they have been downloaded. Right click on the button and select "Edit button...", from drop-down menu, to enter into the edit mode. The basic code is in the tab "Initialization code" section and the CSS is in the tab "Help" section. The Site Themes (all-in-one button) combines both CSS files in the tab "Help" section, if you wish to have all sites on one button. If so, you can delete or drag the other two buttons into the Customize Toolbar Palette for references. To add more site themes to the all-in-one button, simply paste css code into tab "Help" section after last entry. Restart browser after any saved changes.
  • Great and finally very simple !

    It's a long time ago i wanted to play with CustomButtons , which seems interesting and now , with your help, a see i can use them.

    - Where to post/share these Custombuttons ?
    - Have you an Update system for them , like Userstyle ?
    - Why not a solution which integrate both tools in a same place?
  • edited November 2012
    Register as a member here:
    Many buttons, requests and help from button developers.
  • edited November 2012
    Re Thanks
    Group several userstyles and enable / disable them in one click : i thinks it should be useful to use These Custombuttons when i test my styles.

    It'll interesting to add many related styles in one buttons and play with it when i try something other.
    I need to see that...

    It's one of these things that i can't do with Stylish manager .
    Move/group styles in the manager , i wish a solution in Stylish to do that easily .
  • You will receive all the help you need from the Custombuttons forum. Many knowledgeable developers more than willing to assist.
  • edited November 2012
    You can group styles with stylish if you use tags - tags are just like groups. You can sort by tags. This is my sorted Stylish in sidebar:
    246 x 216 - 73K
  • I think decembre means combining two or more related styles into one style.
  • ...
    It's one of these things that i can't do with Stylish manager .
    Move/group styles in the manager , i wish a solution in Stylish to do that easily .
    OK, i guess i misunderstood the above.

  • edited November 2012
    Yes , it's that i wanted .

    But tags are good :
    I had not understand before the use of the Tags and play with Styles Names to organize them.

    It'll be more useful too if we can have the drop down menu alway open and visible when we disable/enable styles.

    I don't like to much :
    Clik on Stylish icon, find the style , enable/disable it .... menu go away
    Re-clik icon ... etc ....

  • If you open styles in the sidebar, you can sort them by tags and you can then:
    drag styles from one tag to another and the style will be automatically tagged for that group;
    you can click on a style name and click the button Enable/Disable.
    I have a style which allows to close/open sidebar all the way either way (12px to max window width, you're welcome to use the code from there (it's at the top of the code).

    However, i also use srazzano' button(-s) for a few styles which i need to enable/disable often when testing other styles), it's very helpful (thanks again, srazzano!).
  • edited November 2012
    Off topic, but to let you know if still using Addon Manager Fix Mod for the sorters in the addon manager, I updated for the betas that will organize, in any order with spacers, the header items (item counts, restart button, sorters, util button, searchbox) and organize the category items in any order (Extentions, Themes, Plugins, etc...). Added custom icons for category items and icons for context menu and menuitems. All additions I added can be disabled via Option settings. Addon unpacks on download, so no need for unzipping or zipping, simply edit with text editor and save. Minimal css used for only the header section. Also auto detects for users that use Nasa Night Launch Theme.
  • edited April 2013
    For info , read here in Userscript forum :
    [request] usertyle convert to userscript -- SOLVED!
    "According to that big blue banner, you can install it as a userscript...

    ... / ....

    for me this buton looks different, because i have Stylish - installed and enabled.
    But thanks for suggestion.

    I have disabled Stylish, and installed script by this way .

Sign In or Register to comment.