Monday, February 27, 2012

A little STYLISH (and a little revision)

TEACHER'S NOTES... Some SIMPLE, easy to follow instructions for adding a little STYLISH to your pages. Now With Added Illustrations!

Some folks (particularly those on MySpace) have commented that they love THE IDEA of customizing their pages using STYLISH, but they're a bit nervous about taking the plunge.

To them I say, "Don't worry! You can't break it!"

When you pimp your pages by having a Stylish plug-in handle all the Stylesheet Cascading, you are NOT affecting the real pages themselves, so you CAN'T mess them up. What you are doing is changing the way your Mozilla-based internet browser SHOWS you the pages. Only YOU see the pages THAT way on YOUR browser. You can switch the styling on and off at any time.

Some sites (like this very Blogger) allow you to apply CSS styling to the pages FOR REAL.You can actually REDESIGN them completely, so that other people can see the changes as well.

But MySpace, Facebook and Google+ give you a fixed layout and that's it. In order to change anything to suit YOU, you have to 'hack' the way that your browser interprets the page. Stylish can be seen as a sort of "offline" CSS editor.


1) First install the STYLISH plug-in on your browser. The easiest way to do this is to go to your "TOOLS" menu and click on "ADD-ONS". The "ADD-ONS MANAGER" screen will open. Click on the "GET ADD-ONS" icon. This will connect you to Mozilla's own Add-Ons site. Search for STYLISH and you will see a screen like this:-

2) Click on that big green "ADD TO FIREFOX" button! You will probably be asked to restart Firefox (that's so that it can refresh the extensions registry).

3) Now you have STYLISH installed on your Firefox! If you customize your tool bars, you can put a shortcut somewhere where you can find it easily (you sometimes need to be able to switch it on and off ). Look at the screenshot above, you can see that I've put all my "developer" tools in a neat row at the top. Stylish is the third from the right.

4) Well you have the capability of running scripts on your pages... Now all you need are the scripts themselves! Go to USERSTYLES.ORG. This is where they all live!

5) That's the page for my own MINTY BLUE MINIMALISM script for MySpace. But if you start from the Userstyles homepage and then search for what you want, you will probably find something for the pages YOU want to stylize. There are scripts for MySpace, Facebook, Tumblr and lots of other sites. But remember - do check to see when the scripts were last updated because, as we know, a script written for the MySpace homepage two or three years ago would NOT work on the homepage now!

6) If you come across a style that you like, then click on (yet another) big green button to add it to your browser. Refresh The Fox. When you land on the page(s) that are affected by that script, then the Stylish icon on your toolbar will change from 'greeked' grey to glorious colour! You will see the script listed on the User Styles section of your Add-On Manager.

7) Now me, I've got a FEW different Stylish projects on the go...

Although I haven't YET got to the point where I've published them ALL on, I will probably have posted the code for these 'works in progress' on my blog. I WANT folks to try them out for me!

8) If you want to try one of MY styles (and customize it to suit YOU of course), you need to copy the script from one of these blogs...

9) ...and then paste it into a "WRITE NEW STYLE" window on your Add-Ons Manager.

10) Save it under a suitably zany and memorable name! The 'new' manager screen is COLO[U]R CODED just like a proper grown-up HTML editor (Hoorah!), so it's REALLY easy to see what the different parts of the script mean.

11) The Add-Ons Manager is also the place where you decide which scripts are turned on and which aren't. Things can get messy (especially on MySpace) if you open a page and you have two conflicting scripts operating on it at the same time. Each of your saved scripts has a DISABLE/ENABLE button. Only enable the ones that you want to automatically run when you land on a page.

So that's got YOU started in the wonderful world of PAGE STYLING! Once you have a script or two on your browser, you can change them to you heart's content by experimenting with the colours, background images, fonts, sizes of boxes and so on and so forth. I repeat - YOU CAN'T "BREAK" ANYTHING BY EXPERIMENTING. If you keep a text file back-up of any scripts that you install, you can always restore them to an earlier state. Or you can turn them off altogether and the pages will again appear the way the (ahem!) designers intended.

No comments:

Post a Comment