Myspace Profiling

So as un-hip as it sounds, I signed up with Myspace a few months ago, mostly to see what all the hype was about. I liked the idea, but the implementation was nothing short of terrible. In Ashley’s perfect world, there would be a properly marked-up site with a navigation system that you could figure out without consulting the FAQ. There’d be an API so that developers could create applications around the system, and create extended functionality. Most importantly of all, there’d be a way for you to edit your profile page so that it doesn’t look boring, blue, and oh-so tabulated.

Almost every Myspace page you see is different (Take Rupert Murdoch’s for instance.) Most of them are horrible. The point is that there’s the ability and motivation to change the layout of a profile page to suit your tastes. The difficult part is finding out how to do it. There’s no official documentation available, and Googling turns up lots of pages selling template designs. I decided to dig a little deeper, because I love this kind of stuff.

As one would expect, you can style a page using CSS. As one might not expect, there’s no official functionality to include a stylesheet of your own. You have to resort to embedding the style in the actual body of the page. When you type up a “blurb” about yourself, there’s very relaxed validation which lets you enter almost anything: including a <style> declaration. I was suprised to find that all the browsers I tested actually render a stylesheet embedded in the blurb, even though it was slapped in halfway through the content. It’s not the nicest approach at all, but it’s better than nothing.

After a few hours fiddling, not much seemed to be working. On top of that, there were almost no classes on any of the page elements, and those that did exist were generally no use. I gave up on the profile pizza (a name I came up with, because everything’s just thrown into the mix) and tried another approach.

Looking through Google to see if anyone else had had any success, I found that Mike Davidson had some luck with myspace layouts. he wrote an article which explains two important issues with designing themes for Myspace.

• For starters, Myspace strips out the hash character (#) from your style information. This is presumably to stop you fooling with strategic Myspace propaganda, such as ads. It also strips Javascript and references to the ad “iframe.” Unless you know this, designing a style can be frustrating verging on insane. The consequences of this are twofold.
  1. Firstly, you can’t style elements by ID.#foo{} //Won't work
  2. Secondly, hexadecimal colours won’t work.
     • .foo{color:#FFF;} //Hex encoding (using the # sign) will Fail
     • .foo{color:rgb(255,255,255);} //Encoding colours as RGB will work
     • .foo{color:white;} //Using simple colour names will work
• The second important tip is to be as specific as you can, and hope it works. For example, to select one particular table, you can choose table form table{} and as long as there’s only the one table in a form in a table on the page, that’s the only one your style will be applied to. It’s not pleasant at all, but it works in the most rudimentary sense of the word.

With this in mind I set out to hack the damnable default profile to pieces. Dealing with such shoddy markup as Myspace, you’re going to need all the help you can get. A tool which you simply shouldn’t do without is the Web Developer Extension for Firefox, from Chris Pederick. It lets you edit CSS in real time, to see if it works or not — A god send considering how often myspace stops working.

After combing through the page source, consulting the DOM inspector in Firefox, and generally a lot of trial-and-error, I managed to get a semi-okay Myspace profile going. It’s quite possibly not my best work ever — it’s quite shocking, actually — but I like it. Mostly because it’s a disgusting pink colour.

You can check out my Firefox render of my Myspace layout (what a mouthful.) You can also visit my Myspace profile, and add me as a friend, because I know deep down you are all closet Myspacers. My style is also available for you to use freely, although you might like to change the images — and possibly the colours.

If you don’t, never have, and never will use Myspace, that’s okay. I’m probably not going to either. My experiment was all in good fun, and at least now I have a page through which people can get in contact with me. There’s so many people on there I know from school, and various other places; even if it is a fantastically bad implementation, it’s a fantastically good idea.