Become and Internet Guru, How to Change the Look of Any Website

I stumbled another great firefox plugin recently called stylish.It let’s you change the look of any website including google, yahoo, gmail…anything.

Sample gmail skinned:

You can download full styles, or create your own and upload them for others to use. It’s a lot of fun.

Start be grabbing the Stylish Firefox extension

After you install it, you can go to userstyles.org to grab styles. There are user styles for all the major websites. Warning though, if you use a skin that is heavy with graphics, it will slow the site down. The gmail example above is really slow.

If you want to style your own website, rather someone else’s website, go to Tools > add-ons in the Firefox menu and click on Options for the stylish add-on

By clicking on Options you will open up the editor. Click on Write to start a new website. In this example I choose Activerain.com. I chose activerain because 1. it is a blank canvas with not a lot of styling, and 2. there is a new activerain customizer which is pretty cool.The activerain customizer is built by danko web design, and they did a great job!

It is really simple to change main html tags like body, a, table, etc… but if you really want to customize it, you have to get the CSS stylesheet. To get the stylesheet from any website, do a View Source and look for a link tag in the head. if this is not making any sense, simply do a search for “stylesheet” and you should find it. Open that link in your browser and you should see the styles.

There will be a lot of styles, so you might want to grab another firefox extension called the web developer toolbar, which will allow you to mouseover different locations on the website and see what the style id or class is.

Here is activerain.com after I styled it

Some things to note about styling other websites.

1. html tags with class are identified with a period in the stylsheet. Example: .main_header
2. html tags with id’s are identified with a # in the stylsheet. Example: #main_header
3. you need to add “!important” after any line in the stylesheet to override the original CSS
4. to overide only one site, you must include @-moz-document domain(”activerain.com”) {}. All additional styles must go into the brackets or else every website that has the same class and id’s will change.
5. here is a link to a CSS tutorial if you need to learn more about styles

ShareThis