Hacking A More Tasteful MySpace

A guide to creating a more tasteful MySpace layout. Sample images and CSS are included at the bottom. End product: myspace.com/mikeindustriesThe social phenomenon that is MySpace 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 must respect. Any website which rolls up that amount of usership is doing something very, very 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.

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.

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.

But first — as Keith Robinson 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 over the past several weeks and I wanted a good reference point for what is already done well online and what could be improved.

So without further ado, on with the surgery…



Sizing up the beast

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 few months ago.

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.

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.

Enter the dragon

Like a biologist over a petri dish, I pulled out my copy of XyleScope 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.

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

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. But it would be a real accomplishment to make a pig do the pachanga.

Step One – Learning the r001z

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

Using the # sign anywhere in your CSS. This is to avoid you messing with ID’ed elements, but its brute force removal also precludes you from properly specifying hex values. Instead, you must do things like color: FFFFFF or color: white . Note also that because the pound sign is missing, you cannot use shorthand like color: FFF .

or . Note also that because the pound sign is missing, you cannot use shorthand like . Specifying style rules for iframes. Apparently, this is to keep you from hiding MySpace’s banner ad, although it’s easy to do this anyway without touching the iframe. Don’t do it though unless you want your profile deleted.

Placing comments in your CSS file. If you mark up your CSS file with standard ( /*whatever*/ ) CSS comments, they will get stripped. Other styles of commenting “kind of” work, like double brackets ( [[whatever]] ) but they end up messing up the CSS code in some browsers. Interestingly though, downlevel-revealed (but not downlevel-hidden) IE conditional comments work just fine. We’ll use these in our hack in fact.

) CSS comments, they will get stripped. Other styles of commenting “kind of” work, like double brackets ( ) but they end up messing up the CSS code in some browsers. Interestingly though, downlevel-revealed (but not downlevel-hidden) IE conditional comments work just fine. We’ll use these in our hack in fact. Using shorthand for border styles. If you try something like border: 1px solid FF0000 , it will not work in Firefox. Interesting, it seems to work if you use a keyword like red instead, so this probably has something to do with the hex issue mentioned above. The unfortunate workaround is to always specify your borders in longhand.

, it will not work in Firefox. Interesting, it seems to work if you use a keyword like instead, so this probably has something to do with the hex issue mentioned above. The unfortunate workaround is to always specify your borders in longhand. Putting CSS anywhere but right smack dab in the middle of the content. You’d think it would be easy for the MySpace crew to let you specify your style rules in the head element where they belong, but nope, you have to stuff them into the “About Me” module which sits in the middle of the HTML. The result is an unavoidable FOBUC (or “Flash Of Butt-Ugly Content”) before your style rules kick in, but oh well. Such is life in the ghetto.

Step Two – Visualizing The Finished Product

As I saw it, there were mainly four things I could do here: a) clean up all of the margins, padding, spacing, alignment, type, and color issues, b) create a new background image and associated design theme, c) make a branded header, and d) add some extras with the magic of CSS.

I felt a Wicked Worn theme a la Cameron Moll would be pretty killer, so I mocked it up in Photoshop using various weathering techniques until it looked sufficiently unlike any other page I’d seen on MySpace. I then planned out how each piece of the design could be shoehorned into the Weed Patch with the most convoluted of coding schemes.

Step Three – Getting the ducklings in a row

The third order of business was to create CSS entries for everything I needed to style and group them into logical categories so I didn’t have to jump all over the place during the decrappification process. In a normal web design workflow, you have something like this:



.modules {

background-color: #fff;

padding: 15px;

}

.modules p {

color: #aaa;

line-height: 150%;

}



In MySpace’s world, it’s more like this:



table table table table td, table table table table tbody td {

background-color: transparent !important;

padding: 15px !important;

}

table table table table td font, table table table table tbody td font {

color: aaaaaa !important;

line-height: 150% !important;

}



That’s right. Almost everything you can do during the customization process relies on styling various nesting levels and hoping they don’t affect other areas of the page which may be similarly nested. In many cases, you have to go back and override the conflicting nests by specifying additional, more specific rules. And to top things off, the elements on the page which are “properly” classed are given names like lightbluetext8 and orangetext15 . These are the sorts of things that give Steve Champeon heart attacks.

By the time your CSS is properly grouped though, you’re all ready to start customizing.

Step Four – Cleaning Up The Mess

Explaining all of the style rules associated with the general janitorial work performed here would take weeks, so since I’m providing my CSS file, just go ahead and examine them there if you’re interested. Everything is clearly commented and explained so you don’t have to go through the same long process I did.

Step Five – Injecting The Design

There are only four images used in the Mike Industries MySpace design layout. The first is the background image: an aged piece of parchment, centered horizontally and tiled vertically in a seamless manner.

The second is the branded header. This header unfortunately only works in non-IE browsers for the stupidest of all possible reasons: there is no doctype provided on any MySpace pages. This doctype problem was probably the single biggest stumbling point in the entire project. There were certain really weird things happening in IE at every turn and I had no idea what was going on. The branded header is positioned absolutely with a width of 100% and for some reason in IE, it was inheriting the width of the table it was in, despite the fact that the table was not even positioned relatively at all. Such weirdness! I was beside myself for hours, until I finally noticed the lack of a doctype . These are things you just don’t think about when you write good code. By the way, if anyone can figure out a way around the IE doctype problem, let me know and I’ll post it. Specifically a way to get the branded header to show in IE. Until then, we have a graceful workaround below. Thanks to a negative margin solution by Daniel Stout, the branded header now works in PC IE!

The third image is the “Contacting Mike D.” table. We’ve gone ahead and replaced MySpace’s default ugly GIF buttons with a background image that sits behind the now transparent button set. I first saw this on Ryan Sims’ MySpace page but have since seen it elsewhere as well.

The final image is my name: “Mike D.”. This was accomplished using a brand new image replacement technique I’m unveiling today: MIMSIR or “Mike Industries My Space Image Replacement”. The technique essentially takes a block level element (a span, in this case, with a display: block property), sets a static height, applies a background image with custom rendered text, turns the browser text the same color as the background, and shrinks it down to 1 pixel (effectively hiding it). The technique is intentionally gritty because this is a gritty place.

Step Six – Coddling IE

Since Internet Explorer (even version 7) is such a pile, we make a few quick hacks in our css to basically chew its food for it and rub its tummy to keep it from puking all over the place. There are two things IE can’t handle about our hacks: a) our newly aligned and nicely padded tables, and b) our branded header. Both are likely due to IE’s rendering behavior in the absence of a doctype and both will be handled by a downlevel IE conditional comment at the end of our CSS code. To hide the fact that the table spacing isn’t quite right, we apply a new background image that is the same color as the tables and turn off the borders. This effectively hides the boundaries of the tables altogether and looks just fine. To get around the branded header issue, we simply don’t show the header and slide the rest of the content up to eliminate the void. Thanks to Daniel’s header solution above, and my own ridiculously hacky solution for getting the tables to align perfectly, we’re now 100% IE compliant! Not sure I’m proud of that, but ok. If you’ve ever set a “strong” tag to display:block and given it a width, you’ll know the extent of this ridiculousness.

Step Seven (The Final Step!) – Add CSS Extras

When I first created my MySpace profile page, I was given one “friend”. Some guy named “Tom” who apparently started MySpace and can now buy and sell my entire family with what he makes in one day. Well done Tom, and I’m happy you’re my friend, but having one friend who isn’t even really my friend is kind of lame, no? Especially when there’s a big headline on my page that says “Mike D. has 1 friends.” How am I going to be one of the l33t d00dz on teh intarweb with only one friend?

Most people would take the obvious step and send e-mails to all of their friends asking them to join their buddy list, but why do that when you have the power of CSS generated content! Using this simple CSS rule, I was able to increase my friend count from “1” to “1 billion” in about ten seconds:



.redbtext:after {

content: " billion";

}



This is really great when you’re just getting off the ground, but it also scales very well. Now that I have 29 meatspace “friends”, my MySpace count shows “29 billion”… a number surely no CSS-ignorant friend-whore can top.

As one last cherry on this project, I thought I’d throw in another bit of CSS generated content. There’s a line at the top of everyone’s profile that says “_____ is in your extended network”. I could never really figure out what that means since everyone in the entire MySpace population appears to be in my “extended network” so I thought I’d at least make it sound a little more dramatic with the exclamation “OMFG!” before it. This can be accomplished with the following CSS rule:



.blacktext12:before {

content: "OMFG! ";

}



Final thoughts

So there you have it. How to hack your way to a more tasteful MySpace profile. Hopefully, my many hours of weeding will save you from having to fully examine the bowels of this beast. I’m providing my CSS file, fully commented, along with image files to use as templates for your own profiles. I do ask that you don’t use my exact theme but hopefully I’m providing you enough so that a few minutes in Photoshop is all you need to produce something you’re proud of.

Additionally, I will say this: after working this thing into a tasteful state, I find myself actually quite taken with it. Many MySpace outsiders knock the service because its garish appearance and overall clunkiness overshadow anything good that may be underneath. But imagine what a service like this could be with a professional makeover. Get a company like Adaptive Path or a few Bryan Velosos in there and you could open up a whole new world of user enjoyment and customization.

I’ve heard people say that the reason MySpace is so successful is because of its garishness, but I don’t buy that for a second. The freedom to be garish is certainly an advantage, but I hold that between garishness and beauty, most people will pick beauty for themselves if given the choice.

This theory will be tested as we roll more social elements and customization into Newsvine in the coming weeks.

Until then, however, you can have yourself a more tasteful looking MySpace page. Here are the sample images and CSS file to get you started: