{"id":172,"date":"2006-04-18T08:55:48","date_gmt":"2006-04-18T16:55:48","guid":{"rendered":""},"modified":"2016-05-25T23:34:33","modified_gmt":"2016-05-26T06:34:33","slug":"hacking-myspace-layouts","status":"publish","type":"post","link":"https:\/\/mikeindustries.com\/blog\/archive\/2006\/04\/hacking-myspace-layouts","title":{"rendered":"Hacking A More Tasteful MySpace"},"content":{"rendered":"
UPDATE:<\/strong> (10\/15\/07) If you’re noticing jumbled text in Firefox while using this layout, simply change \"line-height: 1px\"<\/code> to \"line-height: auto\"<\/code> in the body<\/code> section of the CSS.<\/div>\n

\"\"<\/a>A guide to creating a more tasteful MySpace layout. Sample images and CSS are included at the bottom. End product: myspace.com\/mikeindustries<\/a><\/span>The social phenomenon<\/a> that is MySpace<\/a> is one I don’t fully understand, and yet, one I must fully respect. In fact, with over 50 million unique users, it is something everybody<\/em> must respect. Any website which rolls up that amount of usership is doing something very, very<\/em> right, and no matter what your thoughts on it as a vehicle for your own expression are, you must give it its full due for what it is to seemingly everyone else.<\/p>\n

Several weeks ago, I finally signed up for an account, and within seconds I was instantly put-off by what had been created for me: a hastily-designed “profile page” with uninspired colors, misaligned tables, and a mish-mash of extraneous cruft and design elements which made this feel more like a halfway house than a “home”. Now, granted, I am a designer by trade so my tolerance for this stuff is orders of magnitude lower than most of the population, but clearly, this was not a place I even felt comfortable having my name on.<\/p>\n

So with the default home page this underwhelming, what is a MySpacer to do? Customize, of course. One of MySpace’s greatest features is its ability to let you skin your own home page. Unfortunately, 99% of the customizations I’ve seen are chalkboard-screechingly awful, but what could a MySpace home page look like if some actual design thought went into it? That is the question I sought to answer.<\/p>\n

But first — as Keith Robinson<\/a> asked me when I first showed him what I was doing — “Ummm, why?” The answer is twofold. First, I love a design challenge. Second, we’ve been building a lot of new social components into Newsvine<\/a> over the past several weeks and I wanted a good reference point for what is already done well online and what could be improved.<\/p>\n

So without further ado, on with the surgery…
\n<\/p>\n

Sizing up the beast<\/h3>\n

The first thing I did was search Google for sites which specialized in MySpace customizations. Turns out MySpace customization is a cottage industry unto itself. Unfortunately, the first twenty sites I found produced nothing but crap. Granted, perhaps it is crap that people want, but I wanted to do better. There were mostly instructions on how to tile Ricky Martin backgrounds behind your Christina Aguilera autoplay music player, but nothing close to the brilliant piece of work Keegan Jones threw together<\/a> a few months ago.<\/p>\n

The problem with Keegan’s hack, however, is twofold: a) it violates MySpace’s Terms of Use by blocking advertisements, and b) it produces essentially a static, non-functional page by replacing all of MySpace’s code with your own.<\/p>\n

What we really want to do here is simply decrappify our home page as much as we can without violating the Terms of Use and replace all evil design elements with a cleaner, more professional look. We also want to maintain MySpace’s actual HTML so our page is functional and not just a facade hiding our grotesque underbelly.<\/p>\n

Enter the dragon<\/h3>\n

Like a biologist over a petri dish, I pulled out my copy of XyleScope<\/a> and began observing the organisms at play within the MySpace profile page. How difficult was this going to be? Was everything coded semantically? Did the company provide enough hooks in the form of CSS classes and IDs for users to easily style most elements on the page? Was anything “off-limits”? Over the next several hours, I slowly identified every element on the page by its programmatic hook. The good news was that a lot could be done here. The bad news was that the CSS was going to be ugly, ugly, ugly.<\/p>\n

If Dave Shea<\/a> built the CSS Zen Garden<\/a>, this was going to be the CSS Weed Patch; a block of code so semantically twisted that it would turn Joe Clark<\/a> straight.<\/p>\n

It was upon thinking of this analogy, however, that I really started to get psyched about this project. After all, it doesn’t take a genius to make perfect code dance<\/a>. But it would be a real accomplishment to make a pig do the pachanga<\/a>.<\/p>\n

Step One – Learning the r001z<\/h4>\n

There are certain things you can’t do on MySpace. Autoplaying “Maneater” is perfectly ok apparently, but these things are not:<\/p>\n