Hacking A More Tasteful MySpace

UPDATE: (10/15/07) If you’re noticing jumbled text in Firefox while using this layout, simply change "line-height: 1px" to "line-height: auto" in the body section of the CSS.

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.
  • 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.
  • 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.
  • 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:

Like this entry? You can follow me on Twitter here, subscribe via email here, or get the RSS feed if that's how you roll.

1,491 Responses:

  1. http://designmyspace.org/2008/08/hacking-myspace-layouts-updated-and-fixed-code/

    Posted the new code there. Should work in Firefox 2,3 and IE 6,7.

  2. Crystal says:

    Thanks for all your help Mike and Alex.

    ~Crystal

  3. Arman says:

    Honest to god, I love you. I tip my hat to you my friend. I’ve always been telling my friends to avoid myspace, simply because it’s an ass when it comes to designing a template for it. But you, have simplified one of the greatest obstacles in internet history.

    Thanks man.

  4. I hate myspace someimtes, I had a nightmare of a time getting things the way I wanted thanks to the lack of a DOCTYPE declaration in IE. I wanted to use [id=””] but selectors won’t work in IE without a strict DOCTYPE. Things are mostly what I want in Firefox/Opera, but IE still hates me in some areas:

    http://www.myspace.com/jeff_mccoy

  5. Alex says:

    Jeff, if you are using divs and css, never use # signs in the code for myspace, they won’t work (not in color codes either, since myspace converts those signs).

    So make sure you always work with .classhere {} instead of #idhere {}.

    Classes works just as good as ID’s, it just takes a little more time to write “class” than “id” ;) So use class.

    Remember… no # signs in your code. If you have those, it will mess up. Took me a while to figure out why my stuff messed up.

  6. Reinhard says:

    Thank you for the insight, will try to use it on my myspace layout too.

    One question, could anyone tell me why there are two different margins filled with background color in the header, etc. pics? Wouldn´t it be sufficient two have both margins the same size?

    kind regards, Reinhard

  7. Thank you so much for sharing your code. It save me a trip back to the worst of web tinkering circa 1999.

    After a lot of cursing and swearing about the lame myspace code, i could (thanks to you) in a small amout of time put up a more or less decent page:
    http://www.myspace.com/bricolage108

    Just had to tweak a couple of things:
    Replace images (of course).
    Adjust “masthead” size and position to use on myspace music pages (extra red bar in header).
    Apply Mike Rundle image replacement on “nametext”
    (text-indent: -9000px;)
    Use footer table 800px hack suggested in a comment above.

  8. Jesse says:

    Please help! IE working great, but Firefox is having issues with table alignment.

    http://www.myspace.com/frequencytestpage

    Any help would be greatly appreciated!

  9. what up mike dont really know u but how do u get more profiles views

  10. reiko says:

    mike, you’re the man! a thousand thanks for providing this help!

    first time i signed up for myspace i gave up after 30 minutes since it was just not possible to setup a cool page. second time i nearly did the same but then found your webpage…

  11. thanks for the tips. they’re very helpful

  12. Nick says:

    just finished tidying this one up–sort of. thanks for the great starter template, really helped turn this myspace page into something pretty (minus the ugly code). the only issue I can’t seem to resolve is the massive space between the content and the footer, which I’m assuming is coming from the margin I used to make room for the masthead. any thoughts on that, anyone?

    http://myspace.com/theNHSM

  13. Tim says:

    Is anyone else having problems with their friend comments post dates? They are posted but appear invisible because the text, and the background are both black.

  14. Noelle says:

    You just saved me many hours of myspace hell, thanks!!!

  15. Chris says:

    Thanks for the info. I’m out of touch with the whole social networking phenomenon. I’d been reluctant to associate myself with such an amateurish fad, but you helped turn this horrendous yet potentially useful resource into something more fun and interesting.

  16. ok you know to much..lol…i have a huge favor i have day after day night after night been tryn to figure these codes out on myspace and its literally driving me freaking crazy .unlike others i have created my page from scratch .have to do everything the hard way of course.if u have time i would love to give u access to my edit page and im sure it would take u five min to do what i have spent hundreds of hrs on losing my mind.can u help me ?please
    completely on my knees begging,
    shelly lefevre
    p.s.sorry 4 the abrev. im a text whore…lol

  17. Nate says:

    Thank you for the code and templates and everything. I managed to alter it a bit and create my own myspace page!

    http://www.myspace.com/nathanielholt

  18. Tom says:

    Alexander! The link to your designmyspace.org is not working! What’s happening? I need that code today! HELP!

  19. Michelle D says:

    So, I have gone a very long time dealing with the amazing look of myspace. I have always settled for premade layouts. But let’s be honest. I didnt really want people to know ‘about me’, considering all my friends already know me -.-

    So I hated the extra boxes, for one.

    Anyways, I finally started looking into CSS. I knew the basics of HTML and found a few decent tutorials. So, I made an AMAZING layout for myspace. I had put a good 10 hours into learning A LOT of stuff, and to be honest, I feel that I am ready to go and make my own website about nothing.

    So, here I go, prancing over to myspace. I already had all of the codes to hide my boxes in and I inserted my beautiful, neat little code and.

    NOTHING.

    I wanted to die. I had spent 3 straight hours on that thing only to find that I will probably spend the rest of this week trying to edit it into what myspace thinks CSS is.

    But this blog will make it tons and tons easier. And I will definantly be back to read it again ^.^

  20. Justin says:

    I would have to agree on some level that Myspace is hard to understand at first; especially if you’re new at it. I mean for people that have had there profile up for years can clearly comprehend the other world known as Myspace. It doesn’t matter how old you are, or where you are from.

    Most likely, everyone has a Myspace, or is at least considering creating themselves one. When Myspace was first created, it was just another thing like Yahoo, AOL, or MSN. However, the technology has grown since, and programs have more to offer, for people to really show there individuality on there OWN page. This is what makes Myspace an even better place to seek out talent, or even to shoe off your! I would have to say that yeah most sites have a lot to offer, with new layouts, graphics, and such.

    However, when creating your own Myspace or using a layout that just doesn’t seem to scream your personality makes it difficult. That’s why there are sites that will personally design your layout, graphics and such.

    Maybe you want a Myspace for your company to advertise or to just get the people involved. Perhaps you are a singer or have a band that wants to have an idealistic Myspace so people can understand you and your music. Or maybe you just want a Myspace for yourself, to show your own talent to your friends and new friends to be. Sites like Sketchfirm.com offer just that. They want to convey your personality right to your Myspace homepage!

  21. Sacha says:

    Thanks a lot, very fun reading and you are saving me a lot of time with this. I was getting all upset. Especially the lack # and the /**/ comment thing, when I figured that out I was like, (HELL NO!) what?

    best regards, ;)

  22. Chris says:

    First of all, great tutorial Mike,
    Second, I was wondering if there was any way to create a border for your design? right now all i can do with it is make it a color. Is there a way to add a picture or create some dimensions? I’d really appreciate anybody’s help. Thank you.

  23. Thank you. Thank you. Thank you. I have spent hours looking for someone that can shed some light on upgrading these pages and kept finding the horrible useless sites you mentioned. I only wish I had found this sooner. Thanks SOOO much.

  24. Marco says:

    Hi Mike,

    It looks like you can’t use this brilliant work anymore :(

    I’ve had your code running on my profile for a very long time (http://www.myspace.com/marcovhv) but now that I wanted to create a new profile for someone I realized that MySpace is stuffing Profile 2.0 down everyone’s throat. There is no way (anymore) to get an 1.0 profile in which you can use your excellent code.

    Sucks. BAD.

  25. Shim says:

    Thanks Mike!

    anyone knows how to control comments and General Info text color?

    cheers

  26. paula says:

    Hi Mike,
    Yes I totally agree with you that myspace 1.0 really sucks… who uses tables anymore lol.
    Did you know that you can hide the sections like interests, schools, details, blogs, etc?
    You can view a sample here: http://www.myspace.com/paulavpweb

    Now there is myspace 2.0 and I found out that you can now place all your css in a seperate css section. I haven’t tested much of it out yet.

  27. James says:

    Why waste time fighting MySpace’s code, hide everything except friends and comments and start with a clean slate to do as you wish. It’s less work and you gain total control by implementing your own divs…

    http://www.myspace.com/67211644

  28. Tom says:

    I just looked at my myspace page for the first time in at least a few weeks and discovered that the text in the General Info box on the left is all now microscopic. I haven’t chhanged any of my code and Mike’s page is doing the same thing. What the hell gives? How do I fix it? Here is my page:

    http://www.myspace/thesouthshore3

    Please let me know, if you can.

    Thanks!

  29. Mike says:

    Wow, amazing article really well written tons of content. Thank you, thank you, thank you for putting so much time into making sense of CSS that seems to be written by 5 year olds. You have inspired my latest post and I’m currently linking to you in my Blog-roll. I really appreciate your willingness to share your discoveries in hopes of saving others time. I know you have saved me a lot of time. :D

  30. For those of you finding tiny text on your profile….

    I found the same thing on mine. The fix listed at the very top of the page didn’t do it for me.

    The fix says to change:
    “line-height: 1px” to “line-height: auto”

    But I also had to change:
    “font-size: 1px” to “font-size: auto”

    So try BOTH of those, and see if it helps…

  31. THis is the dirtiest piece of code i have ever seen;

    you should be well ashamed, Mike D.

    But thank you very much, your sense of humour is a beacon to us all.

  32. Chris says:

    Mike, there’s nothing I can say that hasn’t been said 1481 times before me, except THANK YOU THANK YOU THANK YOU. YOU ARE TRULY A DESIGN GOD AND HAVE SAVED ME HOURS OF FRUSTRATION AND PINTS OF BLOOD. Sorry, I hate typing in caps but I needed the volume turned up.

    Tried adding you on MySpace, but you’re not accepting bands as friends. I know it’s lame, but in music promotions, it is a necessary evil, as you mentioned.

    Thanks again, you make me look like teh n00b i iz.

  33. Meg says:

    Mike, THANK YOU! I’m customizing a myspace for my friend’s band, and I think you may have just made my journey through myspace a little less painful. I read the article through, so now it’s time to dive in and get into the gritty stuff. Let’s hope for success!

  34. TIm says:

    Hey I seem like the only one but when I paste the code into the ‘About Me’ there is no change at all on my profile? Is there anything else I need to do.

    Thank you!

  35. Really nice write up, obviously since your original post there have been many changes to myspace, but the underline concepts are still sadly the same.

    Excellent!

  36. Dawn says:

    Can’t remember if I ever said thanks.
    But, thanks!
    (Still using your code for my myspace!)

    Happy Holidays.

  37. Stefan says:

    Things seem to have become a little better with profile 2.0 for myspace. unfortunately, there aren’t any tutorials like yours out there. :(

    anyways, thanks for your help on this mess! ;)

  38. adriaan says:

    Hey man, thanks a lot for the guide, it was very helpful! I’m still tweaking some minor things but for the rest I’m happy with the look:

    http://www.myspace.com/pektop

  39. Ayunema says:

    What a challenge indeed. I’m really late in the game, but jumping into this for the first time was really daunting, and enraging.

    This has given me a little extra hope that this job’ll be done… Eventually.

    The ” Billion” was an excellent touch. Bravo.

  40. We need an update of this tutorial :)

  41. Mike D. says:

    James: The update is “what the hell are you still doing on MySpace?”

Shared
The Ocean in 185 Lines of Javascript:

Mesmerizing. Try tweaking some of the variables in the “sea” section of the code.

“"Design had been a vertical stripe in the chain of events in a product’s delivery; at Apple, it became a long horizontal stripe, where design is part of every conversation.””
Why I Just Asked My Students To Put Their Laptops Away:

A great essay about how toxic everyday distractions can be.

Humanity's deep future:

A group of researchers at the Future of Humanity Institute talk about where our race may be going and how artificial intelligence could save or kill us all.

Steve Jobs speaks about the future at the International Design Conference in 1983:

31 years later, it’s safe to say this is one of the most prescient speeches about technology ever delivered. Jobs covers wireless networking, tablets, Google StreetView, Siri, and the App Store (among other things) many years before their proliferation. A fantastic listen.

How to travel around the world for a year:

Great advice for when you finally find the time.

LiveSurface:

A fantastic app for prototyping your design work onto real world objects like billboards, book covers, and coffee cups. This seems like just as great of a tool for people learning design as it does for experts.

50 problems in 50 days:

One man’s attempt to solve 50 problems in 50 days using only great design. Some good startup ideas in here…

How to Do Philosophy:

If you’ve ever suspected that most classical philosophy is a colossal waste of time, Paul Graham tells you why you’re probably right.

TIME: Why Medical Bills Are Killing Us:

Stephen Brill follows the money to uncover the pinnacle of corruption that is the U.S. Health Care system. A must-read article if there ever was one.

DIY Dot Org:

A beautifully designed site full of fun and challenging DIY projects. I could spend months on here.

The Steve Jobs Video Archive:

A collection of over 250 Steve Jobs videos in biographical order

Self-portraits from an artist under the influence of 48 different psychoactive drug combos.

Water Wigs are pretty amazing.

David Pogue proposes to his girlfriend by creating a fake movie trailer about them and then getting a theater to play it before a real movie. Beautiful and totally awesome.