Stylish is a cool tool for Firefox which lets you add custom stylesheets to any page. What this means is that you can essentially redesign your favorite sites like Google’s search page, Remember The Milk, or even Hack Your Day if you want.It’s obviously cool to do this, but in reality using stylish for your own purpose can have all sorts of benefits, even productivity benefits. For example, if you click on the image to the top you can see that I have redesigned my Google page. I made it blend into my theme, and I also limited the results’ width to 500px. I then use a plugin called Split Browser to keep google on the left all the time. This enables me to use the space my 22″ monitor gives me, and by applying to other sites I can create all sorts of wonders! Read on to see how.
First of all, you need to install the plugin. Once that is done, you will see an icon to the bottom right in the statusbar. If you click this you can find styles for the page you are on. I suggest starting from here. You can find extremely cool ones for Gmail and Google Calendar, but once you want to get into the modifying yourself, you will need some css knowledge and preferably a stylsheet viewer for Firefox, I prefer Web Developer Toolbar,* which will let you see styling for elements you hover over. If you need some CSS guidance take a look at the CSS Tutorial by W3Schools, it’s a great recource.
Ok, so now that you’re ready, you can start modifying pages. Create a new style in stylish and start by adding site rules. this will determine the sites it applies for. Keep in mind that you will probably have to add sites with the “begins with” option. When you start writing the css you will need to add “!important” after each rule which has also been declared by the original author. This is because the author stylesheet takes precedence over the user’s. So if the author hasn’t declared a margin for an element you simply put “margin: 30px;”, however if a color property has already been set by him and you want to modify it, you need to write “color: #ff9900 !important”.
If you take a look at my screens you can see I could modify Google considerably. I replaced the logo with my own, I aligned the bottom page numbers to the left, I have a totally different font in there, and the colors are also changed noticeably. The design change for me was to make it blend into my theme. However, the alignment was very much a productivity move, as this allowed me to use the split browser extension to keep Google search open at all times and keep it still functional and looking good.
If you do this with the sites you visit often you can gain a lot of looks, and efficiency, by tailoring them to the way you work. I may be developing stuff on stylish, but I’m not releasing my code for the Google design just yet. It’s not optimized at all, and will probably only work well on my configuration. If you still need it though drop me a line in the comments, but it will probably fall apart if you try to use it.