Share your favourite custom styling rules / stylesheets (CSS) for websites you use!

[pythonmegapixel]

This thread is meant to run indefinitely (if the idea catches on) and will be a place for members to share custom stylesheets that they have created for websites that they use. Custom stylesheets are a great way to enhance your experience on the web; often I find myself wanting a specific thing but I don't know how best to accomplish it, and wish that there was a place for people to share this kind of thing - so here it is!

 

 

What's a custom stylesheet?

The stylesheets of a website you use (written in CSS) determines the formatting, layout, colouring etc. of the web page you are viewing. It also controls some more subtle things, such as how the scrolling works, rollover animations and so on.

 

A custom stylesheet allows you to override these rules and effectively make sites look however you like, while still basically functioning the same. For example, you could:

• add a night theme to a sight which doesn't already have it
• change colour combinations (for example, if you have poor eyesight or colourblindness and find a site difficult to use)
• disable or customise animations

the possibilities are almost limitless!

 

How do I use them?

One of the most popular browser extensions for this purpose is Stylus (download link for Firefox & derivatives; Google Chrome & Chromium-based browsers) and that's what I personally use. Once you have it installed, visit the site you want to apply a custom stylesheet to, click on the extension, and, under "Write style for", select the site's domain name. This will open a text editor where you can enter the styling rules you want, or paste them from this thread, and select save.

 

Other suitable extensions are undoubtedly available as well - please refer to their documentation/tutorials if you are unsure on how to use them.

 

How do I write them?

A tutorial on this is beyond the scope of this thread, but you have to learn CSS. A good tutorial is the one from w3schools, available here.

It won't take you long to get a basic grasp, and then you should be able to essentially pick it up as you go along. In any case to work out what elements you want to style, you'll probably want to use your browser's DOM inspector tool (usually accessed by pressing F12)

 

Other information

My aim here is to create a thread that could run for a long time and become an index of sorts of custom stylesheets. So to avoid it being locked by moderation, please make sure everything you post - including the site you are styling - is compliant with forum rules (so please don't style PornHub, pirate torrent-sharing sites etc).

 

Also, please use the Code tags.

 

Thanks for participating!