Hacking A More Tasteful MySpace
"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: FFFFFForcolor: white. Note also that because the pound sign is missing, you cannot use shorthand likecolor: 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 likeredinstead, 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
headelement 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 Thanks to a negative margin solution by Daniel Stout, the branded header now works in PC IE!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.
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 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.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.
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:
Only time I will say this, but you are a god amongst teenagers.
Thanks for being my friend Mike. It wouldn’t be the same without you…nevermind, it would just be all hot girls on my friend list then.
You’ve proven that the audacity with which the place is coded can be overcome to produce something that is appealing. And yes, with some top names in the project it could be a better designed and coded place. But there is still the problem that half the time you can’t access parts of the site because the servers are choking.
So half the problem is solved… but it’s a half that probably about 50 of the 50 million users are capable of solving. And the other half? We can only hope the vast sums of ad revenue that they are making will go into better hardware.
I’m still not a fan. I’m impressed, but not a fan. However, MySpace, as you said, still demands and deserves full respect, which I give. But I see it as an “evil,” even if it is quite necessary to have a profile these days.
This is amazing work. You know what you have done? You have finally got everyone’s snooty web designer friends to join MySpace instead of staging protests in the name of good taste.
Sadly enough this sort of CSS work is very similar to what you would be doing if you were dealing with any sort of 90s-era behemoth of a CMS. It’s completely unreadable, unmaintainable CSS where every selector is like a little prayer.
Hours spent rebuilding a MySpace profile for no real reason other than ‘the challenge?”
It’s this type of “Love of the Game” that keeps us loyal readers coming back to your blog time and time again…
Well done. I ended up getting frustrated with mine and just throwing everything into the top left of the page, and leaving a few handy links. I read the best description of Myspace in someone’s Slashdot comment recently (paraphrased): “Myspace is like a nightclub with crappy decor & crappy music, but it’s where everyone else is so you end up there.”
(myspace.com/quisdotcc)
OMG LOL THAT’S SO DOPE LOL WTF!!11one!!11!!
Ahem. Sorry about that. MySpace makes my brain go a little strange.
Shame they can’t get the basics right. You would have thought in today’s internet that if you were going to allow people to customise something you’d make it easy, not prevent them (as far as possible) from using stylesheets. I can’t help but wonder if that’s costing them in bandwidth usage …
U R 5O onethreethreeseven!!one!11!!!!one!1!!
Sorry.
Dude, I was going to try to do this exact same thing about two weeks ago… But I lasted about 30 minutes before I thought, “This is such crap,” and went back to making Blinksale better. I’m very impressed though. Very very impressed.
This is the main reason that I signed up for MySpace and then deleted my profile about 2 days later. It’s ugly (nice work on the redesign) and I don’t have the time to put into making something sexy like Mike has done.
Kudos for having the patience to execute this ardous task. I still don’t know why you did it…but that’s probably because I just don’t GET MySpace. My brother is on it and has something like 150 friends. Maybe I just don’t have the number of friends to make it worth it. I have a blog. I have flickr. Do I really need those to occur in the same place?
Aside from just dropping the # from your colors, you could also go the long route and specify your colors in rgb() notation.
Hi Mike!
Nice work on your space! I, like you decided a few days ago to make a myspace, and yours is excellent, nice work.
That write-up was hilarious. I’m still laughing. Or in MySpace speak:
ROFLOL!!!!11
Mike, I’m pretty sure you’re going to start an internet craze with this blog post.
Now you’ve done it. Prepare for a non-stop slew of questions regarding my myspace profile. How do I sell a pixel at a time of my profile? How do I turn a paperclip into a house? Remember you brought this on yourself!
Thank god there’s a coder in the world brave enough to take on so many teenagers - and to have a well-written, well-explained description of what’s going on! (I was getting tired of finding only “Pimp my MySpace” sites out there!)
Well done again and again and again…
Your friend CoachA looks hot and you get to help her with a camera … hmmm. Never mind that marraige of 7 years she refers to.
Thirty one sounds so young to me … I’m getting worried about myself.
Interesting crap … pun intended.
Hehe… well, let me tell you, my brother (Tim Benzinger) actually designs MySpaces for companies and record labels…
Here’s his most recent MySpace work: http://myspace.com/thebled
You are limited with customization.. but you can always manage to work your way around them ;-). And by the way, we have been in contact with MySpace, we given permission to do what we pleased.. as long as the ad remains.
Hope you like :-) Wait till you see the MySpace Tim is working on now for his personal account (wow).
Thanks Mike.
I will say that while this does address the horrible default profile there are still way too many uability and design problems with MySpace that this can’t address.
As far as your recommendation of Veloso or Adaptive Path. Well, Brian is kind of out because he works for Facebook and, sheesh man, let’s keep it in the neighborhood. Blue Flavor would LOVE to help MySpace out.
;0)
You freakin’ rock. I recently joined MySpace to see what all the hub bub was about and had a similar reaction to yours… Now I have no excuse not to have a nice MySpace page… other than my 3 of spades to your ace of diamonds, guru-wise. Of course, I’m not exactly itching to be a MySpace junky, either - but bravo, man. That must have been a real pain in the heiny.
And once they add one more nesting table, the whole thing comes crashing to a halt. Sad, that.
MIMIR
Never waste an opportunity for a cheap and questionably-relevant backronym.
Hah, um.. I don’t think the world would want more of me. ^_^; Then, everything would be black and infested with “o_O;” Do you want that?! Would any sane person want that?! o_O;
* cough *
By the way, I don’t think there is a designer position at MySpace… nor do I think they care about it. But we already knew that. Stating the obvious I guess.
Oh yeah.. go Facebook!
“Brian Benzinger writes:
Hehe… well, let me tell you, my brother (Tim Benzinger) actually designs MySpaces for companies and record labels…
Here’s his most recent MySpace work: [here delete url to lousy music site]”
The whole site is broken when someone comments up some pictures it appears. He might want to add something to control overflow like that from breaking his “wonderful” design.
Music hurts my ears … well that music anyway :-)
Haha, I’m willing to admit I joined MySpace over a year ago. But I just recently hacked their 1998 style layout.
I spent way too much time on it so there are some IE bugs that I didn’t care to fix.
Also for colors you can use RGB instead of HEX (IE color: rgb(212,81,81); )
One thing I did different was I covered up everything from MySpace and handcoded my info in. Only thing I left was the comments of course. I also put the comment form on the home page rather than having to click a link to comment.
FYI: Be prepared to turn off comments here, you are going to get hit with a ton of myspace pedestrian traffic and they are going to leave stupid worthless comments, I saw it happen to thebignoob when keegan posted his layout.
“WHAT IS MIKE INDUSTRIES
Holy freaking crap.
I knew you were a great web designer, but to take on MySpace like this … it has to be somewhat equivalent to climbing Everest or something.
I might just have to give MySpace a second chance now. I dislike it for it’s apparent addictiveness, and as you’ve said garish appearance, but it seems I only have 1 good reason now.
Kudos for the hours of work you put in here, but, more importantly, kudos for the hilarious writeup that had me laughing out loud and garnering weird looks from my coworkers.
Amazing, absolutely amazing. I’m always impressed when someone takes archaic code and makes it beautiful, but smashing the system from inside… it goes beyond impressive.
I made some feable attempts to clean up the design but didn’t make much progress (I’m lacking nice Apple toys like XyleScope). I also found the extended network box useless, so I used
to hide it. Great work, and thanks for the cheat codes!
You have finally got everyone’s snooty web designer friends to join MySpace instead of staging protests in the name of good taste.
screw that, i frigging love myspace. its’ trh same thing as watching cartoons with four bowls of cap’n crunch.
mike, kudos for doing what i’ve avoided for ages. i simply couldn’t tolerate the idea of dealing with all that trashy code. i’ve tried several tiems, but just closed the window down because i really don’t care what myspace looks like.
Actually Bryan there is a designer position at MySpace… I used to be it! The only thing is, Tom doesn’t want the site to be redesigned. While I was there I not only worked on a new design, but also at removing all the tables from the site. Needless to say, that never actually happened while I was still there, since it still hasn’t happened.
Actually Bryan there is a designer position at MySpace… I used to be it! The only thing is, Tom doesn’t want the site to be redesigned. While I was there I not only worked on a new design, but also at removing all the tables from the site. Needless to say, that never actually happened while I was still there, since it still hasn’t happened.
Mike,
Nice job on the profile.
Is the CSS supposed to be filled w/extra spaces? (or is this something to do w/opening it on a PC instead of a mac?).
I wasn’t sure with whether or not that was intentional, i mean you never know with myspace….
good work though!
Thank you for alieviating my pain. I created an account about a week ago but was so horrified at the way it looked I almost deleted it. (much like aol, I couldn’t figure out how to cancel…)
You were right about the whole 2 minutes and done thing. If anyone cares here is my slight modification.
Props Mike!
I kind of want to pat you on the back for this, and I kind of want to punch you in the shoulder. Maybe both at once.
Beautiful job, Mike. I had to do something similar for a little viral marketing I took part in last year, but at some point they went through and changed some stuff around and some of my code got replaced with .r{}. Yeah, I don’t know either.
Either way, I know exactly what you went through. MySpace is like the internet from 1999.
Wish I could conceal my ignorance by editing my comment, but alas…
Here is the link yet again to my “Davidson Inspired” somewhat modified profile…okay so I only really modified the header, but it’s a dang sweet header!
i am a loser…
Steven Ametjan:
I’m glad to know that they at least had a designer position. But you’re right, it goes back to the problem of convincing the higher-ups about the importance of correctly designing and coding sites.
Thankfully we were able to get Mark to accept standards early on.
Hacking MySpace is a freakin’ challenge. You can’t use ID’s for hooks — all the hash marks are automatically translated into periods, rendering them useless — and there aren’t too many classes explicitly named and/or appropriately placed.
My MySpace layout doesn’t look as slick as Mike’s, but it shows you can get some level of control by using CSS descendant selectors. And a lot of experimenting.
Splendid work sir. I had the same idea a while ago, but after realizing that the concept of “classes” and “id”s were nowhere to be found in the source, I went down the path of nesting like you.
How you didn’t go insane is beyond me. After deducing 4 levels of nested tables my mind turned mushy and I began to spew monosyllabic words.
So I was wondering what it would take to write a greasemonkey script to make myspace pages less offensive. Then I realized someone probably had, so I Googled greasemonkey myspace that led to:
http://userscripts.org/scripts/source/997.user.js
Not bad!
I took one look at the template system and hid in the corner crying like a little schoolgirl. Mike thanks for giving me the corage (and knoledge) to give it another shot.
It will be unfortunate when myspace add’s a well placed TABLE to its document template and causes all your hard CSS nesting work to dissepear in an instant!
I’m so friending you — you better not diss me.
Mad props to you Mike. I think my mind would hae turned to puddy after looking at so many nested tables. I’ve avoided my space since it was such a horror show, but now you given me a way to make it pretty.
mike, you rock dude!
I’ve been on myspace for a while, since several friends of mine wanted me to join. but as the resident web designer of the group, I’m always complaining about the rampant problems and blatant disregard for “web standards,” and they merely respond with a glassy-eyed stare…
but with this… I will make my point in a mighty way. ;)
i never really “got” myspace either so i never did anything with it after signing up yrs ago. but your writeup compelled me to pretty it up and your example made it a breeze! thanks!
http://www.myspace.com/tae710
Wow, thanks. I finally care what my profile looks like. I figured there was a way to do what you did, but I’d be damned if I had the time to do it myself. Thanks a million for the cheat docs. I’ve added you as a friend, btw.
Now, if you could just design a MySpace without the inane and pointless social networking.
MySpace 2.0: BlankPage.
Amazing work on the design - funny writeup too. Mucho kudos.
Tom is *not* my friend. ;)
Oh. My. God. I laughed so hard at the “1 billion friends” and “OMFG” bits. My wife thinks I’m nucking futs.
On the plus side, I, too, have been exploring MySpace. I’ve bookmarked this so I can create something less fresh, but even more my own than my current page (which was also hacked to hell).
Thank you. If I actually cared enough about my page over there (I do have a very good excuse for even signing up, but nevermind that), I would spend the time to clean it up. Great job on this, by the way. Should I decide to change my mind in the future (mercurial beast that I am), I will be back here to take advantage of all the hard work you’ve done.
*pats Mr. Mike on the shoulder*
XINERGY
That is exceptionally hot. Thank you for doing your part to make Myspace less annoying.
thanks for the add.. hit me back with a comment jake
oh wait wrong site. :-\
Wow, great to see what can be done. I took a minimalist approach on mine ( http://www.myspace.com/earreverends ) - stripping the whole profile design down to a minimal set of colors and blocks helped a lot (IMO), and was relatively quick to implement. Though, seeing your profile makes me want to do another round on mine…
One thing to say about My Space is that the web, as a popular medium, is fundamentally about people’s crap. The last few years (and web 2.0) has seen a lot of social sites and tools that, by design, rein in that crap and organize / decorate it in a sanitized fashion.
And, My Space is a nice relief to that, and IMHO, a continuation of the web’s core appeal.
Great work as always Mike.
I’ve had friends bugging me for a while to join the myspace beast and this may have pushed me over the edge. I’m not sure if that’s a good thing or a bad thing…
Very nice, but I still think http://www.myspace.com/xenologics, a friend of a friend (and another UW alum) is the best example of myspace wrangling I’ve seen, yet.
Nicely done. I passionately hate MySpace because of how unreadable and messy it is. As a college student, I prefer Facebook which is extremely clean and simple.
One of my favorite bands has a terrible myspace site that you can bairly read http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=9159474
You shouldn’t have submitted to the MySpace peer pressure… My NewsCorp demographic gold Space.
Also, Braveheart is not a good movie.
Sorry
Looks hella cool man, I got to try it out!
Thanks,
oh thank you Mike!!!
MySpace has got to be one of the UGLIEST things on the net.
Sure, my webpage ain’t exactly roses, but you’ve at least shown me not all myspace pages need to be pink with grotesque tiled backgrounds!!!
Another one bites the dust. :)
You’ve seem to have brought out the people who swore they would never be on myspace…before giving in for the css hack challenge. Last year I went the “toss out the tables and ads, start fresh” approach to a myspace layout. Tim Benzinger is the first one I know of who showed an example, but he didn’t give such a detailed write up.
Hell, why not have a (zen garden like) myspace layout contest? Smack some design sense into that place.
<clearThroat>
whoot! ROFLOL!!! whoot!
</clearThroat>
That is a bold statement, one that makes me laugh.
Thanks for the hacking, I appreciate it. If you see a chicken asking to be your friend that is me?
Seems to have stopped working properly already! (Unless it is just temporary). The margin that is pushing the content down for the header is now aslo pushing the ad down so that the header partially overlaps the ad and there is too much whitespace below the header.
Mike, you will now begin receiving floods of “can you customize my profile for free” messages. From MySpace hacker to MySpace hacker: ignore them.
This seems like a futile endeavor. You will never make MySpace an aesthetically pleasing place for anyone but a limited number of people who value such things as aesthetics or beauty. This does nothing to solve the millions of amateur rock stars and porno goddesses who see fit to decorate their pages in the finest of 1990s rejects — Huge animated Gifs, obnoxious music, eye-searing tiled backgrounds… The list goes on and on.
QUOTE FROM ABOVE: Seems to have stopped working properly already! The margin that is pushing the content down for the header is now also pushing the ad down so that the header partially overlaps the ad and there is too much whitespace below the header.
Know how to fix this? Thanks!
Sorry… working on some tweaks to make this more rock solid. I have a feeling something very minor changed in the MySpace code today that only affects this layout because of how I’m accomplishing it. I did manage to tweak the CSS to fix the spacing problem and the new file is live (just re-download and replace), but I’m working on some other stuff which gets around the IE problem as well, so that should be posted tonight.
mike, you rule. that fixed the height issue, but now the title image is off-center… check mine to see.
“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. “
ROFLMAO, wow. I even had to paste that to a few people that never read the article. They were confused, but still, I laughed.
I didn’t see a warning or discalimer, is it alright if I use your links for the background imag etc?
http://www.myspace.com/69801881
Wow.
Who cares if he didn’t give a disclaimer?
You should just hate the fact that your Myspace isn’t original to your own thoughts and creations..
I wen through this a year ago when I first started on the damned thing, and eventually went the static page route. At one point I’d replaced my entire profile with a 1000×650 Mac OS X “desktop”, complete with top menu bar that had all the Myspace links (even the Spotlight icon was linked to “Search”). In order to make this work without using # signs, I had to completely rewrite image mapping in CSS and then adapt it for Myspace. I had a pretty sick profile for a while, but eventually removed it all because it was taking too much functionality out of my page — that is, I write too much crap on there as it is. It was definitely visual and not practical for content.
Alas, tons of fun though. Love what you’ve done with your page.
http://www.bbzspace.com is a guy named Mark who runs the BBZ profile editing group on Myspace, and I completely swear by his stuff. His coding comes up with a few interesting tricks while staying inside the legal lines, and it’s about as clean as you’ll get on a place like this. I initially used his profile generator, then expounded on my own. Have a look.
MySpace: the mullet of the net. Just because everyone does it doesn’t mean you have to ;)
Wowza, that looks REALLY nice. Has a slightly worn look to it. I’m put off a lot of the time browsing through MySpace, as it’s really harsh on my senses and a lot of the pages look the same even tho they’re owned by different people. This, is dirty, and stands out nicely!
Whilst these CSS hacks are elegant, they’re not perfect.
IE6, XP SP2.
Open a new browser window, maximise it. Hit Alt+D, paste in http://www.myspace.com/mikeindustries , hit Enter. Page loads.
Double click on top bar to ‘restore’ it from its maximised state to windowed state, and OOPS! the main banner goes all wonky, at least on this widescreen laptop, the way that IE works with the width and alignment values, and the way that the CSS is using them, makes the banner go horribly off-centre.
It fixes itself though, after you restore/maximise/restore/maximise a couple of times it suddenly realises and all is well. I’ve managed to replicate this problem a couple of times, but not in exactly the same way (the first time, the banner shuffled left and began in negative pixel space on the left of the viewport, subsequent attempts have made the banner shuffle to the right and go off the right hand side of the screen).
The only flaw in an otherwise-very-nicely-done myspace profile. ;)
Do you think the musician profiles have different rules than the regular profiles? I tried putting your CSS in verbatim and editing the images, but I have some spacing problems at the top.
http://www.myspace.com/donmak
Thanks!
DM
Let me be the be the 76th person to tell you how brilliant this work is - great job. I too just recently joined MySpace; I got caught up in the idea of being able to be friends (albeit fake internet friends) with some of my favorite bands. I was immediately put off, however, by the bad default layout and the horrendous layouts most others had. I can’t wait to play around with what you’ve put together. Thanks for sharing it!
Todd - Check out populicio.us. With 420+ new del.icio.us bookmarks in the last 24 hours (not to mention 75 comments in that amount of time), I’d say people probably read the article. The numbers speak for themselves.
todd: to answer your question…440 people subscribe to Mike’s feed according to my Bloglines count (I’m sure that probably 5-10 times that many people read his site). Don’t be a moron.
Todd has site envy.
The point is that mike is a CSS Ninja and he has just climbed up the Eifel tower and invited us all to join him.
As Homestar would say “BAAAAALETED!”
love this little nugget
.redbtext:after {
content: ” billion”;
}
http://www.myspace.com/selftitledstudio
Matt & Shane: Thanks… i just deleted that guy’s comment. First troll we’ve had in well over 20,000 page views to this page though. Not a bad ratio. Man, I *never* delete comments either… oh well.
Unbelievable work, Mike. I implemeted the style, with my color changes, to my MySpace this morning. The one thing holding me back from joining MySpace was the look of the profile pages, and you made the fact that I broke down and joined a few days ago worth the while.
When can I add Maneater to my Newsvine page? That would be hawt.
I’ve been trying to work this with minor success for a while now, just by starting with a profile builder and going from there. But this is brilliant!
I tried to paste the css into the About Me panel and it gave me an error that said: Javascript is not allowed. Do not use HTML/CSS to cover MySpace advertisements.
I didn’t change any of the CSS, I just copy and pasted it in there. The style changes work in the “Edit My Profile”, but not when I go back to my profile page. Am I doing something wrong?
Dave: That’s not an error. It’s just the standard message telling you not to use Javascript or cover up ads.
Awesome work Mike! Thank God someone finally had the patience to sit down and go through it all. I’ve just been adding more paint to the old burned up crack house behind the quick mart to make it look pretty, not knowing what else to do with the ugliness. But now I actually have a reason to “do something” with MySpace instead of just yell at it. The ghetto thanks you.
I’d send you a box of condoms to help with the amount of MySpace whores that will inevitably end up here wanting to ask you to pimp there space for them, but there isn’t enough condoms in the world. Or at least not that I can get for free.
In other words:
OMFG!!@!!! U LIEK TOTALLY RAWK!!!22111!@@@! CAN I B UR FRND!112??!@@
Your not kidding, those designs are UGLY. Thanks for taking the charge!
Thanks for the quick response–it’s good to know that it’s not an error.
One more question (I promise!): How do I get the changes to “stick”? I add the CSS, submit it, and when I click on “Home” to go back to my homepage it just stays as the default design. The only way I even see my layout in the new style is if I click “View My Profile” while editing “About Me”, but then it doesn’t stick after that.
I’m obviously a MySpace n00b; your post on hacking the MySpace design convinced me to check it out. Thanks!
okay, so this is bugging me. no matter what i change on there, the ‘header’ is now bumped to the left - but it still looks correct on your page. the only differences i make in your css are that i change the jpgs to gifs.
and Dave above me, you have to be sure to fully ’submit’ your changes. the first time you sumbit it is simply a preview…
shane: What I ended up doing was simply moving the image to the right 1 pixel in photoshop
Alternatively in the CSS you could change the “margin-left: -425px;” to -424, but I haven’t tried that
Great stuff. I’ll be sure to use this.
Only odd thing. When I open your style sheet on a PC with TopStyle Pro, every character is double spaced. So words l o o k l i k e t h i s. Opening the file in dreamweaver is fine though.
Thanks again.
hey
is it possible to change the width somewhere to fit a band site… it seems to be a bit too wide.
thanks
Do you mean the background?
Of course, you can, it’s just an image.