Tag Archives: plugins

Ever wanted to change the way your favourite website looked? Sick of Facebook being blue? Sick of the one part of a site you use being so small on the page while all that other stuff you never look at takes up all your window space? Want to play hilarious pranks on your friends by changing the way sites appear to them? If so, read on.

What you’ll need

To change styles on websites using Firefox, you’ll need the following:

• Firefox (duh.)
• Stylish – The Firefox extension which makes all of this possible
• Either a basic knowledge of HTML and CSS
• A basic knowledge of finding elements on a website (do you know what a div is?). I use the Firebug extension for Firefox to find which styles are on different elements I want to change.

Once you have the above prerequisites you can move onto the steps below. If you don’t know HTML or CSS and can’t be bothered learning, you can always use other people’s ready made styles.

How to restyle a website your way!

In my example, we’re going to be changing the boring blue bar on the top of Facebook.

1. Go to the website you’d like to change in Firefox.
2. Get to the page on the site with the element you’d like to change (e.g. if you’re looking to change the blue bar in facebook, login first so that you can see the blue bar).
3. Find the icon at the bottom right of your Firefox window.
4. Click on it, go to “Write New Style”, then to “For thesiteyouwanttochange.com”. Click that.
5. A new window will open which is where you can put your CSS styles. You insert them in the space between @-moz-document domain(“facebook.com”) { and } as i’ve highlighted in the screenshot below:
   
6. So basically, you find what you want to change on the site and put those styles in there. You can click the “Preview” button to see the results. If styles aren’t appearing, try using !important after them to ensure they override the website’s styles. The styles I used for my Facebook example will be at the end of this post
7. When you’re done. Click Save.
   
8. You might need to make your own images (if you’re that dedicated to your changes), for example I had to create my own Facebook coloured images so that they’d match the new coloured background:
   
9. From this point on, as long as you have Stylish enabled on your Firefox, you’ll have your new style in use instead:
   

   Click for the full image

My sample Facebook bar change code

With my styling changes, I basically went through the elements in Facebook’s top bar and changed the background colours, border colours and link colours. I also had to change the images used in things like the Facebook logo and buttons. The code I used to change the Facebook top bar’s colour was:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("facebook.com") {
#blueBar {background-color: #ff6600 !important;}
#pageLogo a {background: url('http://www.patrickcatanzariti.com/wp-content/uploads/2010/08/facebookicons.png') no-repeat -21px 0 #ff6600 !important;}
#jewelCase .jewel {border: none !important;}
.jewelToggler {background-image: url('http://www.patrickcatanzariti.com/wp-content/uploads/2010/08/facebookicons.png') !important;}
#jewelRequest:hover, #jewelRequest:focus, #jewelRequest:active, #jewelMail:hover, #jewelMail:focus, #jewelMail:active, #jewelNotif:hover, #jewelNotif:focus, #jewelNotif:active {background-color: #ff6600 !important;}
#headNavOut {background-color: #eeeeee !important; border-color: #b3b3b3 !important;}
#pageNav a {color: #aaaaaa !important;}
.uiSearchInput, #navSearch .uiTypeahead, #navSearch .uiTypeahead .wrap {border-color: #b3b3b3 !important;}
#pageNav a:hover, #pageNav a:focus, #pageNav a:active {background-color: #ccc !important;}
}

Using other people’s styles instead
You don’t need to make your own styles if you don’t want to. You can also go to http://userstyles.org/ and download styles other people have made.

Well then Mr Patrick, have you made any styles for userstyles.org yet?
Funny you should mention that. I’ve made a simplified style for Omegle (the bulky interface annoys me). You can find that here: http://userstyles.org/styles/35854.

My user page on userstyles.org is here – http://userstyles.org/users/59925, if I make any future styles, they’ll appear here

Apologies for the slightly lousy quality of my images, I was using Paint Shop Pro for the screenshots and I think the compression settings were a bit lousy…