Tutorial Beginning Stylish [Chrome Preferred]

Satan · 03-06-2016, 12:56 AM

As I only work with Chrome, this will be oriented around Chrome, but the same general concepts will work for Firefox.

Introduction:

Throughout this thread, I'll be guiding you into creating your first userstyle.

Some knowledge is highly preferred to have beforehand, but not entirely necessary.
This should be simple and easy if you have knowledge of the following:

CSS
HTML
Developer Tools In Chrome

Perhaps some of you will complain I'm spoonfeeding it, but those who will can get over themselves, not everyone learns the same way, and it's not like you can do exactly what I show over and over for every site.
This guide assumes you already have Stylish installed, if you don't, you can find the appropriate version for your browser here

First things first:

This will be exceptionally basic. The first thing we will learn to do is to change a background image on a website.

In the upper righthand corner of your browser, you should find a button that has a large, white S on it. This is the Stylish extension's button. Click on it on the page you would like to create a Style for, and then click the following highlighted portion:

This will open the extension's page to write a new userstyle.

You should be greeted with a page that looks similar to this one:

Ensure the "Applies to" is set to the domain you want to use the style on, and create a name, in the box in the upper left corner.

Next, we'll go back to our webpage and open the developer tools sidebar.

We'll use this to find which element is contributing to the background image.

For Sinister.ly, it's fairly straightforward, the <body>'s style contains the main background image.
This can however vary between sites, as some sites have the background you think is just body in a content tag.

Since we now have the content we want to change, we'll hop back over to our style page, and start our modification.

Before we actually do the modification, you need to understand the format.

Every modification to the style starts with the element you are changing, in this case it is body.
This is your selector.

Code:
body

After that, we use a Left Brace. ( { ) This starts the declaration

Code:
body {

Then, the property we are modifying is added. Note to follow it with a colon ( : )

Code:
body {background-image:

After the property is defined, we have to set the value, in this case to a URL.

Code:
body {background-image:url("urlhere")

Now that you have your declaration and property and it's value set, we need to close that declaration with a semi-colon ( ; ).
After which, as we aren't modifying anything else, we will close the selector with a Right Brace ( } )

Code:
body {background-image:url("urlhere");}

Typical CSS is not in this layout, but it works either way.

Say we are using an actual image, which I am for this example.

It goes in the part that says urlhere. Example:

Code:
body {background-image:url("http://tsixe.com/bck.jpg");}

Now that our style is finished, we need to click the save button in the top right, below your name box.

Saving will also update any pages you have open to the new style, which is very handy if you are changing values so you don't have to continually refresh.

Difference between the original, and our modification.

And there you have it, your first userstyle. If there's enough interest, I'll make tutorials on the rest of the stuff I know how to do with this.

Thanks for reading. Any criticism or concerns, let me know.