While userscripts are very powerful, many tweaks don't need that kind of power and can be written in a simpler, less error-prone way if you just write CSS directly.

That's where Stylus comes in. Rather than running custom JavaScript, it applies custom CSS. (And, as a bonus, it's available for Firefox, Chrome, and Opera 15+)

(Solutions for other platforms that are confirmed to not have gained "overzealous analytics" like Stylish did are welcome.)

Here's a comparison:

Userscripts (Greasemonkey, Tampermonkey):
+ Can do anything
+ You tell the browser exactly how you want things done
- Users must reload the page for changes to take effect
- Easy to write a bad script which makes the site load or react sluggishly
- Any given script may be written in a way which violates FiMFiction's policy on AJAX use.
- There's no way for the browser to auto-recognize a malicious script (eg. password thief)
- Have to write your own interface if you want people to be able to configure it without editing code
- Only runs when you first load the page so your tweaks may not apply to stuff like comment pages.
- More likely to give you a brief flash of un-modified content while the page loads (Even if you're just applying CSS, the browser doesn't know that and errs on the side of caution)

Userstyles (Stylus)
- Can only change things CSS can change (colors, images, fonts, on-hover behaviour, showing/hiding things, and very primitive adding of new content)
+ You tell the browser what you want done and the browser has some leeway to optimize how it's accomplished.
+ Users can turn styles on and off without reloading the page.
+ Defines rules that automatically get re-applied as the page contents change, so handling comment pages is automatic.
+ Very limited potential for evil and userstyles.org does extra safety checks so the only things you have to worry about are things like the up- and down-vote buttons getting swapped.
+ Can't do AJAX (users need not worry about being banned for installing the wrong style)
+ Userstyles.org makes it easy to offer a customization GUI for styles they host. (example)

To put it in more familiar terms, userscripts are plugins (programs) while userstyles are skins/themes.

Can I have some examples of what styles can do here?

Sure.

* FiMFiction.net Background Recolorizer (I wrote this based on yrfoxtaur's Recolorizer.)
* Fimfiction restyled black (Inelegant but it does what it says)
* FIM Fic Dark Theme (Elegant but only works on Chrome. Screenshot incorrect because of that.)
* FiMFiction.net - Collapse Bulky UI Elements (My version of Remove Obnoxious Items by waterpear)
* FiMFiction.net - Restore Old Logo (can also remove it entirely)
* FiMFiction.net - Recolor Chapter Notes & Footer (My version of FiMFiction.net - Recolor Chapter Notes & Footer by Selbi)
* Remove "Mark All Favorites Read" (A little safety feature by Cast-Iron Caryatid)
* Fimfiction.net - No dark toolbar (Prevent the chapter toolbar from sticking to the top of the screen)
* FiMFiction.net - Hide Notification Popups
* FiMFiction.net - Custom User Toolbar Color
* FiMFiction.net - Custom Banner Image

Of course, while it's great on the technical side of things, userstyles.org isn't exactly pretty so you'll probably want to reskin it. (Here's the one I use.)

OK, how do I do it?

If you're writing scripts that modify the appearance of the site, chances are you're already using CSS and the main thing you need to learn is how to control which pages the style will be applied to.

If you're writing body.style.backgroundImage or $('#title').css('display', 'none');, then you'll need to get used to CSS syntax, but you've already got the basic idea of how a page's appearance is defined.

For comparison, here's how those two lines could look in CSS:

body {
background-image: url('http://www.whatever.com/foo.png') !important;
}

#title { display: none !important; }

Note:
* CSS doesn't see any difference between one space, multiple spaces, one newline, multiple newlines, or a mix of them.
* Those !important bits are necessary to ensure that your style overrides the site's style.

For a simple introduction to CSS, I'd suggest the W3Schools or HTML Dog tutorials.

Once you feel comfortable with that, the Stylish wiki has guides on what you need to know when you're writing userstyles rather than writing your own site. (Stuff like controlling which pages your style applies to and making sure that your rules take precedence over the ones the site defines.)

Finally, you really should use either userstyles.org or OpenUserCSS for sharing your styles. There are several very good reasons:

1. Extensions can notify users of updates to styles installed from a proper style host
2. Userstyles.org does security checks to make it incredibly difficult to write a style more malicious than just a mean-spirited prank.
3. The "New/Edit Style" form on Userstyles.org makes it easy to build a customization GUI. (example)
4. Easy screenshot hosting. (And, while it doesn't always work properly, the site offers to generate one for you)
5. People can find your style by searching for it.

2342165
Where do the extra emotes fall on the list?

Doesn't work for me. I don't know why.
Edit: Okay, I think it works, though slightly wonky the first time.

2342369

If it involves creating new buttons like the emote scripts do, then you need a userscript because CSS is only for controlling the appearance of existing elements, not for defining new behaviour. (Each button counts as a new "behaviour" as far as CSS is concerned. Hence why I talk about userstyles being themes/skins as opposed to programs.)

(There is one small exception to that "existing elements" bit though. CSS can be used to insert small bits of static content before or after things, like inserting commas so you can redefine a bulleted list as a comma-separated list.)

That's why CSS that's been through the Userscripts.org checker is safer. It can't define new behaviours and "spy on the password field and then send it to this other site" is a new behaviour.

2342387

Mind going into detail? I can probably explain what's going on and, if it's still a problem, how to fix it.

2342726
It disappeared the first time for some reason
Also, I don't know if this is a website or computer problem, but for a short time period the website couldn't detect that I already installed Stylish, and refused to give me an "install" button.

2342792

Which browser are you using? I've never seen that problem on Firefox but I have noticed the odd hiccup on Chrome. (Usually I'm too impatient at having to leave my comfy Firefox so I just click the "install Stylish" link and OK a re-install which seems to force it to wise up.)

2342165

* FIM Fic Dark Theme (Elegant but only works on Chrome for some reason. Screenshot incorrect because of that.)

It bears noting that if you're creating styles for use with Stylish, Stylish for Firefox and Stylish for Chrome apply styles in different contexts, resulting in different specificity. It's been a while since I looked up the exact details, so I'm not going to potentially make a fool of myself by getting too deep into it, but the gist of it is, Stylish for Firefox applies the styles at a level that will not override page styles. If you need to change a style attribute which the page already has set, Stylish for Firefox requires you to force it with the !important specificity override.

In order to do this, you simply add !important immediately before the semicolon in each attribute.

body { background-color: #0007FFF; }

—becomes—

body { background-color: #0007FFF !important; }

Chrome, on the other hand, applies styles at the same specificity level as the page's styles, so they will either override or not depending on their selector specificity.

Edit: To be clear, this is likely simply a result of how each browser handles extensions. Technically, Stylish for Firefox is doing it 'right', since the spec orders specificity as browser < user < author, though this is obviously intended for overarching user styles that serve the same purpose as browser styles (Eg. Setting the default fonts, etc). Stylish for Chrome, however, likely cannot do this due to the limited permissions which Chrome extensions have, and simply inserts the styles into the page DOM after the page styles.

2343765

Ahh. That'd make sense. I use Firefox as my primary development target and Stylish for Chrome had to support a huge library of styles from the days when Firefox was the only target so I've never had a complaint about Chrome compatibility and, as such, never needed to discover that Chrome is more forgiving.

Maybe I'll look into it and offer the author a Firefox-compatible version when I have some more time to spare.

2342883
yeah, it was chrome. it works now, though

2342165 The FIM Fic Dark Theme userstyle works on my browser, and I'm using Firefox.

2352290

On mine, I have to manually add !important to each rule before it'll take effect and the preview generator on Userstyles.org appears to have the same problem.

2352330 Okay, I checked and apparently it only works for me when I have !important added on to it. Good to know.

2352351

It's basically as Cast-Iron Caryatid explained.

Firefox follows the standards, which means that you have the choice of assigning things a lower priority than site-provided styles (setting new browser defaults, basically) and have to use !important when you want to override the site.

Chrome doesn't give extensions enough power to do that, so styles are applied with the same priority as the site's stuff (But since they come later in the list, they often override it anyway. The rules are a bit complicated to explain.).

That means that styles that are only tested on Chrome may break on things which follow the standards properly.

Eh, might as well sticky this.

*poke*

I've updated the initial post to point people at Stylus rather than Stylish and I mentioned OpenUserCSS, though I still think it's too incomplete and style-over-substance to use it myself.

6497271
Thanks. I went ahead and changed the title to be a bit more generic and restickied it.

While userscripts.org is associated with Stylish, recommends it, and I think is owned by the same company, Stylus is still integrated with it, so I think we're still fine with some links there, as long as people know not to use Stylish.

It sounds like Stylus has more functionality then Stylish did, too, judging by the FAQ. It has more up to date code checking, and supports "usercss styles", which can be hosted anywhere.

--arcum42

6497271
OpenUserCSS seems to be dead, and Stylish is rather error prone, (and slow) these days.

GreasyFork supports uploading of userstyles, though. Just need a specially formatted comment at the beginning, like so:

/* ==UserStyle== 
@name Pin Comments Form to window 
@author 
@YR Foxtaur 
@description Pin the Fimfiction comments form to the bottom of the window 
@version 1.1 
@namespace https://greasyfork.org/en/users/703495 
@license CC-BY 4.0
 ==/UserStyle== */