…or how to fix horrible myspace pages

There is a handy little extension for FireFox called Stylish. In a nutshell, it allows you to specify your own CSS rules for a given domain (web page) and provides you with a quick easy way to turn that customized style sheet on and off. Since there are oh so many terribly customized myspace pages out there that are hardly readable, I thought I would write a little tutorial on how to use Stylish to fix them. I'll assume you are already a FireFox user, if not, click the link and get it. The next thing you'll need to do is install the extension. Click here and install it as you would any other extension. Once you have the extension installed and you have re-started your browser, you'll notice a new little icon down in your status bar. Now the next step is to get yourself to myspace and click on your stylish status bar icon to bring up the menu and select 'Create Style for myspace.com…'. This will then present you with the following add style dialog. Here we will place the custom CSS code that will force all bad layouts back to a more default state so they can actually be read. So, now we add the following CSS code that I borrowed from Transient Savant. He had written this to sanitize myspace by using FireFox's built in Chrome. Its a great solution, I just had happened to stumble upon Stylish and liked the idea of being able to easily turn the customized CSS on and off rather than always on through the Chrome. Copy and paste the following in between the curly braces { } in your Add Style dialog for Stylish.

body, body * { background: #fff !important; color: #000 !important; border-color: #ccc !important; } body * a { color: blue !important; } object, embed, iframe, marquee, blink { display:none !important; visibility: collapse !important; } img { max-width: 300px !important; } input { z-index: 1000 !important; } body table tbody tr td table tbody tr td.text table tbody tr td table tbody tr td div a, body table tbody tr td table tbody tr td.text table tbody tr td table tbody tr td b a { display: none !important; } .contactTable a img { visibility:visible !important; } body * { filter:alpha(opacity=100) !important; -moz-opacity:1 !important; opacity:1 !important; -khtml-opacity:1 !important; } #header { height: auto !important; }

Now give the style a name up top, like 'myspace', and click 'save'. And thats it. Now when you are browsing myspace and you click on your Stylish icon in your status bar, at the bottom will be a line item on your menu for myspace indicating you have a customized style sheet for this webpage (or domain). By clicking on that you can turn something like this, into something you can actually read. And of course, by clicking on it again you can turn it back off. I think its a great way to manage customized style sheets for myspace and any where else on the web. If you are CSS savvy, you can write yourself all kinds of rules to override what ever it is you don't like on the web. Or you can check out the Stylish webpage and download userstyles written and submitted by other users. I hope you've enjoyed this little tutorial. Please leave your comments here on impovements or praise as you see fit. Thanks for reading.