Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

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

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! :)

Share your favourite custom styling rules (CSS) for websites! linustechtips.com/topic/1288887-share-your-favourite-custom-styling-rules-...

____________________________________________________________________________________________________________________________________

 

 

____________________________________________________________________________________________________________________________________

pythonmegapixel

into tech, public transport and architecture // amateur programmer // youtuber // beginner photographer

Thanks for reading all this by the way!

By the way, my desktop is a docked laptop. Get over it, No seriously, I have an exterrnal monitor, keyboard, mouse, headset, ethernet and cooling fans all connected. Using it feels no different to a desktop, it works for several hours if the power goes out, and disconnecting just a few cables gives me something I can take on the go. There's enough power for all games I play and it even copes with basic (and some not-so-basic) video editing. Give it a go - you might just love it.

Link to post
Share on other sites

aka Newspaper-like site.

As simple as it can get but I am hating JavaScript with passion.

Could use ids instead of classes but I guess it works so no need to.

 

Spoiler

a {
	color: #000000;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

body {
	background-color: #edf2f5;
	color: #000000;
	width: 90%;
	padding-top: 0;
	padding-bottom: 70px;
	margin: auto;
	text-align: center;
	font-family: sans-serif;
	line-height: 30px;
}

.button {
	background-color: #000000;
	color: #ffffff !important;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	font-size: 20px;
}

.footer {
	background-color: #edf2f5;
	color: #000000;
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	text-align: right;
	font-size: 10px;
}

.header {
	background-color: #edf2f5;
	color: #000000;
	width: 70%;
	max-width: 800px;
	margin: 40px auto;
	clear: both;
	text-align: left;
}

.info {
	background-color: #e34140;
	color: #ffffff;
	width: 100%;
	padding: 5px 0;
	font-size: 18px;
}

.ImageMap {
	width: 100%;
	height: 100%;
}

.ImageService {
	width: 100%;
	height: 100%;
	max-width: 400px;
	max-height: 300px;
}

.module {
	background-color: #ffffff;
	color: #000000;
	width: 70%;
	max-width: 800px;
	padding: 20px 0px;
	margin: 40px auto;
	clear: both;
	text-align: center;
	box-shadow: rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px, rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px;
}

.titlebox {
	background-color: #edf2f5;
	color: #000000;
	width: 100%;
	height: 50px;
	padding-top: 20px;
	text-align: center;
	font-size: 20px;
}

@media screen and (max-width: 600px) {
	.module {
		width: 100%;
	}

	.header {
		width: 100%;
	}
}

 

 

I do not require glory, only results.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×