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!
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.
Great article, incredibly easy to read and follow. Ive got my page up check it out below.
http://myspace.com/lawsy9
beautiful
Great job, looks very clean and professional.
I’ve been playing around with tweaking Myspace for a while and finally came up with one I like, but it involves placing my design on top of the default Myspace page. I just wanted more flexibility than the default gives you. It allows for some great band designs, too.
I intend to develop one of those online “layout” applications, but one that doesn’t suck, and lets people do these “overlay” type designs. Yeah, one of these days. :)
Regarding the use of the pound sign…Pound signs in ColdFusion (with which MySpace is written) designate variable output:
Regarding the Firefox border longhand issue…I’ve notice that the Firefox 1.5 JavaScript console throws an error on many shorthand borders though it displays them fine.
This is great, definitely gonna save some cash on Rogaine, since I didn’t have to pull out all my hair trying to get something decent looking. I had started my own trials and errors at getting myspace tamed, for friends that wanted something nicer, but then I stumbled onto your blog. Now I can move on to other things.
Thanks…
Mr. Davidson, you’re a wonderful man. Your CSS + notes gave me enough of a start to figure out how to make a non-crappy profile. Mine is not too exciting at the moment, but it’s much, much better than it was.
Thanks too much!
Thanks, buddy… the title of my myspace page reads “My grudgingly constructed my space page” and I owe it all to you!
This will silence my friends who live and die by myspace.. //shudder
Well played Mike!
I was using your method, or a similar one, up until a few months ago when the pure messiness of it annoyed me into making an overlay. Wish I had some older screenshots, but I guess it’s too late for that now…
I like overlays much more than the default profiles, and duplicating the original features is pretty trivial: http://myspace.com/samryan
What font did you use on the header?
I’d like to use this to make my own MySpace page (set up so as to access the pages of friends that use it) look a little nicer, even if I don’t end up doing anything with it. Unfortunately, when I try to open the text/css files, I get nothing but two odd characters: þÿ.
Is the file corrupted, perhaps? I am in Linux, but Linux can read files made in Windows just fine; the only problem that crops up normally is caused by how the two systems handle line feeds.
Any suggestions?
Mike, I can not agree with more! Most of the pages on MySpace not only look terrible, but are impossible to read due to the hyperkinetic color/texture vomit beneath their info. Kudos to you!!
good work Mike, very impressed. Not a big fan of myspace but being forced to use it these days by friends. Thanks for making it easier for us. (My page needs a bit more but it’s getting there, this css is a minefield!)
Something to consider is that unless there’s an official redesign campaign, it’s impossible to fix the horrid code the site is based on. There are probably at least a couple million customised layouts now, so modifying the HTML would result in a lot of angry users.
Yet another example of why one should always do things well from the beginning, rather than having to correct them later.
Doesn’t your hack also violate ToS, because you removed the ad that is normally between your default picture and your blog listings?
David: Not sure what you’re talking about. This hack doesn’t remove any ads and I’m not even aware of an ad that goes between your picture and your blog listings. In fact, your picture and your blog listings are on opposite sides of the page, no?
Mike — just add me to the list of impressed readers who has successfully implemented your hard work. Well done, sir.
My … er … space on Myspace
You’re right. It’s only your page when you’re logged in and on your home page. Guess I’m used to that view, and not the normal view. Feel free to delete my other, erroneous comment.
Thanks a lot for cracking this stuff and explaining everything very clearly,
Kids are gonna wreck some design havoc on their spaces very soon.
Your hard work motivated me to learn what the hell CSS is anyways (I had seen the term in passing and did not really care before now).
Using Appleworks Paint and Photobucket — and of course your invaluable service work for netizens everywhere — I was able to hack together a decent looking Space in under three hours.
Word. Great work on all of your design work too.
B-
thanks Mike!
ahh i am another one of the few so far that have posted to say something along the lines of, “man i started doing this once, and gave up half an hour into it”
good job!
FABULOUS piece of work.
Nice nice nice…
I’ve tried to add some css at http://myspace.com/3stripe to tame those huge images that people seem to love adding to your comments:
tbody img {max-width: 100%;}
This doesn’t play nice in all browsers though, wonder if there’s a better way to do it?
Mike, I have a feeling that you will live to regret ever mixing with the users of MySpace. Its like accidentally making a bunch of new friends at a party, only to find out that you can’t get rid of them later!
Personally, I don’t understand MySpace at all. The users all seem to speak in some weird language and make these short comments on each others pages, which truely seem to serve no practical purpose. It must be my age.
Mike, while I haven’t gotten around to customizing it yet, I must be one of the very few teens actually using your template, it seems like all of the others have yet to stumble upon this treasure. Keep up the good work.
oh, and out of boredom, I added everyone who used your template and left a comment here.
Even if you are not using Myspace, there is stuff to be learned here.
Good stuff Mike.
fun stuff tho I cant get the body text to be anything othr than black. any suggestions?
Jordan said: “Yet another example of why one should always do things well from the beginning, rather than having to correct them later.”
I disagree Jordan. From a business person’s standpoint it would make more sense to get the product out there, warts and all. Had they waited to build a logical OOP and standards compliant application, Tom and his partners might have missed their grand window of opportunity to get users.
Then, MySpace would have fallen into the cemetary of beautiful standards-compliant applications that nobody uses. (And believe me … there are TONS of them out there.)
A shovel is a shovel. Whether it’s pretty or not doesn’t really matter. What matters is that it gets the job done.
-dm
… and let me add ….
I wouldn’t be surprised if they aren’t already working on a redesign or V2.0 of MySpace. Sure it will be a 12-18 month pain in the ass eventually getting everyone migrated over … possibly on a voluntary basis at first with a hard deadline for moving over to 2.0 … but it could happen.
Right now the inmates are running the asylum … and while it continues to grow like mad, nothing is wrong with that.
-dm
http://www.myspace.com/kiyoshi
look at this one
This is great! So glad someone wrote all this up!
The only problem I’ve found in editing MySpace (http://myspace.com/ksdavies) is in changing the font family of links. I’ve got the code right, but it does nothing. I’m guessing there’s some other place this should be, although the other font changes work there.
I’ll second Josh’s comment. I thought a few times about analyzing what could and could not be done with a MySpace profile, but never got around to it. I’m glad you got to it before I did though. You’ve provided more insight into that dreadful code than Alton Brown does about the science of cooking. My…uhh…space is the result of a about an hour of tinkering with one of those awful pre-existing templates. Thanks!
Quick update: If anyone (especially Linux people) were having trouble opening my text files, the problem was that they were saved out with UTF-16 encoding. I’ve changed the encoding to a standard UTF-8 so they should be fine now. If they worked fine for you earlier, there is no need to upgrade.
Wow. You sure have a lot of time on your hands for a CEO of a hot web company. Or, I guess you just use your time wisely. Eiether way, If every page on Myspace was half as nice as yours then I wouldn’t mind spending a little more time there.
What will happen to your nice Myspace page whenever someone decides to add a 600px wide image in your comments or if someone adds a auto run video that plays some anoying music video?
http://www.myspace.com/shueytexas
Thanks!
Hi Mike:
Thanks a whole lot for this hack.
I signed up with Myspace a couple of months ago, and had planned on customizing my profile, but took one look and gave up.
There was just too much crap to try to deal with.
I’ll be implementing your hack when I get off work, and hunt down some images to use.
I wonder what this will do for accessibility?
I use a screen reader, and the normal Myspace really wreaks havoc with that.
Inspiring, I downloaded your example CSS and had a workable theme going in about an hour and a half.
Just giving you the heads up that the “withnotes” version is still encoded in UTF-16. The “without notes” version is in 8. My win xp machine was really having a hard time interpreting the early version, showing lots of spacing between each character in Homesite.
Mike –
WOW! Great work man! Giving hope to a once hopeless MySpace!
MySpace is the slowest, hardest-to-use, most counter-intuitive site with 60 million users ever! Thanks for sharing your code – maybe now, I’ll actually MySpace a bit, instead of wanting to run like hell away from the nightmarish ugliness. AnalogPanda
You are completely amazing. How you could sit through that code… boggles the mind. Your stomach (and eyes) must be made of steel.
oops… the link in my comment above should be to my MySpace page – now I feel like I’m just spamming you :( myspace.com/analogpanda
One question… The CSS lacks a semicolin at the end of the last item for each rule… I never knew this was okay to do (perhaps it’s a product of using XyleScope?), I suppose it could shave off a tiny bit of file size, but it mostly seems like a habit that could lead to troubles. I’m wondering what everyone else thinks…
Thanks again for slaying the hideous beast and posting your code!
you are pretty much my hero. thank you, thank you, thank you.
Hey Mike,
I really like this layout that you have, and thanks for putting it out there! I applied all the coding to my page, and changed the names and banner, but the only thing is that it looks great on Firefox, but looks like IE doesn’t want to play nice…I followed your instrucstions and everything!
http://www.myspace.com/MarlonT
Stumbled upon your blog on del.icio.us…thank you for giving us skeptical myspace users with an eye for design an alternative than those gawdy “customization” pages all over the net.
The entry made me laugh, the comments made me giggle and the prospect of having almost as much control over my MySpace profile as I do over a blank .html file makes me giddy. Thanks very much. =)
Mike,
Has anyone posted an image along with their comment onto your page yet? The alignment of my layout was all messed up until i deleted all posts with images. Ultimately the images inflated the size of the comments box. I noticed that your profile still looks nice and tidy and that all of the comments residing on the page are just text. So, have you come across this problem yet…or is this a ticking timebomb that is yet unknown for ya’???
The alignment of my layout was all messed up until i deleted all posts with images.
Just delete the comment.
I too think I may have peed my pants when I read OMFG Mike D is in your extended network. Hahaha. Many, many kudos to you Mike, you have actually created a profile page on the site that can be read.
In other words, OMFG!1111 YOU ROXXORS1!11!!
Well unfortunately you can’t just delete the image and leave the rest of the comment be. It’s either delete the whole image or nothing at all. A few problems arise because of this. 1.) You can’t control what your friends write or place in their posts; nor can you control how wide it is; 2.) By deleting all posts that have images in them you run the risk of offending people who think you are just deleting their posts; 3.) It is not a solution to have to maintain your comments list just to keep the layout of the site in order. Mike (and everyone else here who cares about their myspace profile page) doesn’t want to have to upkeep his page like a Zen Garden (no pun intended).
The obvious solution would be to allow images in comments, but not have them break the layout or the site. Can this be done? I don’t know.
nick and others:
As to the question of ginormous images uploaded to the comments section –
Number one, I have no problem deleting stuff like that and in fact, banishing that person from my friends list for being such a tool.
Number two, I just hacked in a little piece of code to limit the width of images that go in there. It’s a two parter… one for the regular section of the CSS, and one for the non-IE section of the CSS at the end. It goes like this:
Regular Section –
table tr td table tr td.text table tr td.text table tr td table tr td img {
width: 75px !important;
}
Non-IE section –
table tr td table tr td.text table tr td.text table tr td table tr td img {
max-width: 250px !important;
width: auto !important;
height: auto !important;
}
In IE, it has a slight side effect of making other images in the right column 75px, but the stock ones already are anyway.
Wow.
That about sums it up. I got so fed up in the past with trying to organize and style every rediculously nested element that I made everything black. Have to say, what you’ve done is simply amazing.
Mike you are a CSS-Archaeologist! Where others stop, you keep on digging through nested table after nested table until you discover what is the Golden Rule of Myspace! Hats off, my friend!
The sad thing is that all of this would be unnecessary if they had just included a customization panel that would allow you to change all of this dynamically rather than hacking it through the “About” panel with a bunch of CSS.
nick, you could always try this:
http://www.picgames.com/forum/myspace-layout-editor.php
First of all, I am your debt, Mike, for helping me get rid of the nast on my page. The time and effort you put into this is amazing and most appreciated.
However, I’m having trouble changing the main font for the body of the modules. I have these lines in my .css:
But the color and font-size change seem to be ignored when viewing my page. BTW, I’ve only viewed the page in the latest versions of Camino and Safari on my Mac. Any ideas?
Mr. the Snake on MySpace
Snake,
For the headers of each module you have to change the color/size properties for the following elements:
.whitetext12
.blacktext12
.btext
.orangetext15
i believe those are all the headers. yes it is ridonkulous that they couldn’t just give them all a class of say… “module-header”?
for the text in the comments box i think i set: table table table { color: whatever;}
Oh and also don’t forget:
.redtext
.redbtext
Those are some more of the headers. .redbtext taking care of the number of friends you have.
Thanks for the explanation, nick. I see that those change the headlines at the top of each module, but I was trying to change the text in the module, i.e. the text entered as your interests, about me, schools, networking, etc. I was hoping I could do that with the .text tag, but any changes I make to that don’t seem to have an effect on the page.
For now, I just added a little HTML in the actual text fields to increase what I could, but I can’t change the font size for the text in the schools or networking modules.
Mike! The little people are in your debt…
…I had to sit there looking at my friend’s code for her layout just to figure out which points to which (I don’t think mySpace provides this). But you have helped cleared some things out for me, and I have to thank you for this tid-bit!
This is a great site, by the way. Very user-friendly. I think I’ve bookmarked you before too, but lost the link at one time or another.
On with the editing…
Amazing! I’ve been wanting to do some simple *tasteful* customization to my band’s MySpace profile for years but haven’t had the time to dig down into it’s horrible code. Thank God for Mike! I’m going to go dive into the CSS file now….
thanks for the useful info
Excellent guide. It’s pretty ridiculous how difficult crafting a myspace customization is.
hi mike- simply amazing. i’m glad ppl like you are still out there sharing….
one problem i am having tho is actually accessing the css file you provide in the download… it’s not there? only a jpg image… and i get an invalid error mssg when trying to look at at least that…
is the zip file busted? any advice? would love to implement this… thanx!
s
Mike I think you are the best your are also so smart Why can’t all guys be like you.You speak your mind your are someone who understands peoples problems and help them with them. It’s great the way you you’re still out here doing your own thing!!!!!!! bye got to go Autumn!!!
I’m having trouble using the piece of code that prevents images of a certain size from being posted, can someone help me out with that? It seems to work in IE (!?) but not in Firefox, where do I put that line of code? Thanks!
Number two, I just hacked in a little piece of code to limit the width of images that go in there. It’s a two parter… one for the regular section of the CSS, and one for the non-IE section of the CSS at the end. It goes like this:
Regular Section –
table tr td table tr td.text table tr td.text table tr td table tr td img {
width: 75px !important;
}
Non-IE section –
table tr td table tr td.text table tr td.text table tr td table tr td img {
max-width: 250px !important;
width: auto !important;
height: auto !important;
}
I think this one takes the cake – check it out here:
http://www.myspace.com/timbenzinger
nm, got it! thanks mike!
ahh – never mind my post about a broken css link – the issue was on my end!
s
This is great, Mike. Very well done.
I understand CSS reasonably well, but was unable to have this tag show up on my page. I added it in the ‘About Me’ section like this:
.redbtext:after {
content: ” billion”;
}
Any suggestions?
Thanks in advance, and once again, very nice work.
I just noticed that the tags didn’t show up in the post. I did include them on my About Me page.
Just wanted to clarify.
Ahhh, I just figured it out. The code ONLY works in Firefox. I tried your page and mine in IE and it doesn’t display the OMFG! or BILLION text.
Any solutions for this?
Cheers-
amazing. simply amazing!
this could be used as a basis for a kick-ass myspace profile layout generator (i can imagine the generator allowing one to change the colours, borders, fonts, backgrounds etc; and i envision it paired with an app that could dynamically generate images with text with the desired font for the things like the “contact me” section). do you have any interest in trying to make one? and if not, would you allow someone else to make one, with an appropriate licence?
in any case, hats off to you for this remarkable accomplishment. (i’m still shaking my head over the lack of a DOCTYPE!!)
I noticed that the “1” Billion isn’t working on your page as well as others too.
(Editor’s Note: Don’t use IE. It is harmful to your health.)
I agree with you Chandler & Mike. IE is bad for your health, but unfortunately….roughly 80% of all Americans use IE to browse the internet, and for MySpace as well.
Therefore, the VAST majority of viewers don’t see the two scripts…it would be nice to create one that works in both.
Any thoughts/ideas?
Great work Mike. I’ve had a mySpace account for over a year and done nothing with it because I thought it was ugly, nor did I have the time to fix it. Your template, some quick image creation, and now I only hang my head 1/2-way in shame for being a social sheep. Kudos!
And on a somewhat related topic, here’s a mySpace hack I’ve been *dying* for…
Would there be a way using CSS to force the system to drop the “s” in the possessive noun instances of my name?
For ex…
The correct way = “James’ Blurbs”
The mySpace way = “James’s Blurbs”
My mySpace site reads like an illiterate 8-year old, and there doesn’t seem to be anything I can do about it.
Sigh.
–James
http://www.myspace.com/houseojames
Great stuff. I wonder how to replace all the text in each headings with an image.
i cant get the header_myspace to work. i double checked everything and its seems to be right. any one have clue why this might happen?
tha billion thing isnt working do u just put it in like a html code??..if so its not working…can someone help me??
great article , will be great help for myspace customization
this beats the heck out of the dumb “pimpmyspace.com” and other sites that I’ve seen. do you have any more work that dumb people like me (who are addicted to myspace but can’t figure out codes) can use? i’d love something a lot like it, but since i’m a girl, i’d rather do differently…
what would really be cool (and marketable) is if you could make a wysiwyg site for people to make their own webpages!
how do i get rid of those myspace ads on top of my profile
Trying to remove the ads on the top of your MySpace profile as actually a violation of their Terms of Service you agreed to when you signed up, and they can (and often do) cancel your account for doing that.
I orignally wanted to know to what extent you could customize a myspace page, but now realize the possibilites are limitless. I’ve realized I can also create customized forms and buttons, cursors and images (with filters). You can add as many “” tables as you wish. You can also target just about any table, image, or text in order to customize it. You can break myspace till it actually resembles something designer friendly.
-Thanx.
-K!ng.
http://www.myspace.com/kngzero
dude i love this, thanks for making it! I still can’t get my tables to line up nice and neatly like yours though. am i doing something wrong?
Jesus. Thank you so much. I considered man-handling the myspace code, but after looking at the page source, I began trembling in fear. No longer will I be the last person on the planet to hack their myspace page in the most hideous and disgusting way possible!
Again: Thank you.
I’ve made some animated gifs, now how do I upload them as my profile picture? I know how to put them everywhere else, just not under the title of my band.
I’ve followed the header .masthead instuctions but its just not showing in myspace. All i see on top of the profile is a huge blank space where the image is supposed to be. This is wat i have in my About Me section:
.masthead {
width: 850px;
height: 100px;
position: absolute;
margin-left: -425px;
left: 50%;
top: 162px;
background-image: url(http://zhin.byethost.com/zhin/header.jpg);
}
body table {
margin-top:104px;
}
very helpfull……
nvm i got it working…
Hi.. thanks for this article thing, it helped me alot.
mainly i just sifted throuh it and pieced the bits i wanted in with my original CSS code on myspace.
i have one problem though
on my profile your .masthead header works fine.
however while putting one onto my girlfriends profile everything worked fine except that the image didn’t appear, it’s thre when i preview it but not when i or anyone else views the actual profile.
here is her profile http://www.myspace.com/romantic_kisses
the margin and everything is there, just no image.
it’s really annoying at the moment.
i would appreciate it alot if you could look into this for me..
i have limited CSS knowledge, i was thinking perhaps it is layered behind her background. but i don’t know.
thankyou and please get back to me.
I’m definitely out of place here, as I’m not a graphics or web designer by any means. However, I truly thank you for what you’ve done with Myspace. I’ve been on this site for awhile now, and just never had the stomach to change the horrendously generic look that comes with it. Everytime I went to a customization site, it was a bunch of glittery images and extra garbage that was ironically worse than the default layout.
So last night a friend of mine gives me this flash player to put on my profile and I go ahead to update it. Then I remembered seeing the CSS Zen Garden awhile back and wondered if there was anything like that for Myspace. That’s when I came across your site, and after reading everything, I’ve finally got the courage to attempt doing about this craptastic page I’ve got. Maybe then I can get some fake Myspace friends!
Thanks again, and definitely continue to create more great works like these.
Naturally…I just knew I’d run into a problem. For all of you who really understand this:
I made the necessary url and color changes that I wanted to put in my profile, and everything seemed fine. The preview in Myspace was completely trashed though, with paragaraphs squashed together and really misaligned tables. I took a leap of faith and saved the changes anyway. The layout worked, but all of the tables that are on the left side are pushed completely to the left, and the same thing is happening to the tables on the right. Which leaves me with a huge gap of wasted space in the center of the page. I thought I might have done something wrong, so I removed the custom code and went to the default layout, but even that is messed up. I’m using Firefox 1.5.0.2 and that’s how it appears. IE 6.0.blah.blah doesn’t have the wasted middle space, but instead has everything shifted to the left of the page and extends the tables on the right side all the way to the margin.
Does anyone have any clue as to what would be causing this? Even when I used Mike’s untouched code, everything is still messed up. Any advice would be helpful. Thanks!
HI – Loving your work!.
Can any one shed any light on how to change the color of the main text.
Eg.
1) The comments text that your ‘friends’ leave.
2) The music + films you like
3) The “About Me” bit
I can change everything else I need to but not the main text colour!
I’ve looked through the ‘withnotes’ CSS & tried everything I can see, but it doesn’t work….
Any suggestions?
Thanks
This is what i was looking for. I do css dev work where I work at and I have tweaked my myspace the best i could. This gives me a better insight as I am an aspiring designer and also to create kick ass css code.
Thanks for posting this.
Excellent work Mr. Davidson, I’m one of the many who was compelled to do something like this:
http://www.myspace.com/jerbau
FYI: I only add women to my list… haha (If it’s not that obvious)
Mike, you do know that ‘#’ isn’t the pound-sign, right? Otherwist, great!
Cheers
(Editor’s Note: It’s not the British pound sign, but it’s the shorthand for “pound”, meaning weight, in the U.S.)
I began reading this, keen and interested in improving my myspace account. ^^ Looking at the scrollbar to the right, and not knowing that there were comments on the side I almost left thinking the tutorial was too long.
But I’m glad I read till the end. I shall implement some of the discoveries you’ve made on my myspace account. Thanks heaps.
I also love how the numbers are the backgrounds.
Sorry to constantly annoy people here. I created another site to test the code on, and it actually is the pictures that’s messing everything up. Exactly where do I place the code that’s listed here to constrain the images placed in comments?
Mike,
Great idea, love it. Just reading through the comments and saw a few people posting other MySpace examples. I came accross a pretty interesting design about a week ago. myspace.com/godsgirls. This is more than likely NSFW so visit at your own risk.
In response to the post above by Freddy:
“Mike, you do know that ‘#’ isn’t the pound-sign, right? Otherwist, great!”
The “#” is actually called the pound-sign. Peep the link: What Is The # Called?
Thanks Again,
Jake
that is cool
I didn’t have the luxury of the time you did – It took me about 3 hours to fix my patient up, all told. In fact, I’ve only just left the theatre after having sown the casualty back-up. Consequently, it’s rather sickening to have just read your post!
Understand however, the operation I conducted was more analogous of one carried out in a theater of war. Consequently, with that haste comes a lack of regard for the finer ethics and boundaries:…
… Perform a quick rudimentary x-ray of my patient and you will quickly find where I left most of the tools of my butchery… still within the chest cavity (your honour).
In my defense however… the patient is alive and out of the warzone.
I will no doubt perform a clean-up operation at some point but I don’t guarantee to remove the fiddly bits of bog roll I used to stem the loss of blood.
You’ll still be my friend wonch’ya?!
ROFL
… in fact, I’ve just looked at it in Firefox and can only say that if you do too, you’ll be wondering why I needed even 3 hrs! :D
God bless IE, RARRRR!
I figured it out, and my site’s up and running. Thanks again for the great code. I’ve got one minor problem to figure out with the [Names]’s friend space. For some reason, the ” ‘s friend space ” has dropped down a line and is separate from my name. I’ll keep working on this and learn some CSS while I’m at it.
mike, they changed the code on listing your friends, so the ‘span’ tag only wraps your name, unfortunately it drops the rest of the text one line below.
Mike D.’s Friend Space
Mike,
When I attempted to add you to my friends, I clicked the link only to be redirected to my inbox. Is this your idea of a sick joke? If so haha. Kinda funny but none the less decreasing functionality, which from reading your article is against your design parameters.
(Editor’s Note: No idea what you’re talking about. Must be MySpace weirdness.)
Hello Mike D… and Thanks for everything
the 1 “billion” friends isn’t working
but today I just noticed that
Mike D.
‘s Friend Space (this line is dropped down below the Mike D)
Mike D. has 80 friends.
Maybe it was always this way and I just noticed today…
Is there a fix or something just to live with?
Ok, you’re right, myspace does strange things from time to time. It worked when I tried it this time. Thank you sir.
Hello… just installed your CSS, awesome work. By the way I noticed the same problem Chandler has written about, the ‘s Friend Space” being dropped down below the name. Seems to be a text that is not contained in the orangetext15 span class, if anybody knows how to fix the problem…
see here http://www.myspace.com/christofunk
Hey I have a question for you – I noticed this on your page and when I “borrowed” your code. Right above where it says “Mike D has 80 Billion friends”, the Mike D.’s Friend Space is on two separate lines with two different styles… Shouldnt that be like the rest of the headings?
Boy, I’m dumb. I waded through most of the messages, and didnt see any of them about this. And yet there is one right above mine. Disregard.
Thanks for the heads-up, enofds. And now begins the game of dealing with little ridiculous changes in MySpace’s HTML. I don’t think I’ll deal with this one because I’m not sure it’s even dealable, but I could change my mind.
it’s OK now… title of the box says “XXX’s Friend Space” in one style…
Looks like you fixed the mention error with the (‘s friends) line being a line lower… Fixed at least on your page
now I also notice on my page it says this to view my groups:
View All&bnsp;Chandler’s Groups
is there something I missed or messed up or again MySpace dong their magic?
thanks
u rule
any hints on how to make the masthead clickable?
Mike, first off I have to tell you that you’re an internet hero! You inspire me to try new stuff, and I appreciate all the stuff you offer to the community. Newsvine is also a daily reader for me, so thanks again.
I took the files you posted and came up with this:
http://www.myspace.com/danalmasy
I came across this today:
http://www.myspace.com/custombandspaces
Do you have any idea how to make something like this, or change the code on the band pages? I can’t see to figure out how to insert code because it’s a different layout.
I appreciate all of you work. Thanks a lot.
Dan,
I had the same questions about the music myspace accounts. All of Mike’s code works perfectly if you insert it into the “BIO” section of the band profile. You basically go to edit profile then “band details” post all of Mike’s code into that section and it all works great. The one problem you run into is the masthead is up too high. If you look at any artist page you see there is a second navigation bar below the standard myspace navigation bar at the top. To solve this problem simply copy and paste this code over the current masthead code Mike wrote:
.masthead {width: 850px; height: 100px; position: absolute; margin-left: -425px; left: 50%; top: 182px; background-image: url(https://mikeindustries.com/myspace/header_myspace.jpg);}
This will pust the mashead down enough to uncover the myspace music navigation bar. (don’t forget to change the url for your header!)
Otherwise you are set. Everything else looks great and works with this code. Hope this helps!
Jake
Any reason the image resize code for the comment section isn’t working for me?
Any help would be sweet!
Jake
I was wondering if maybe you could help me make my extended network banner clickable, I tried the clickable thumbnail way but it ends up misaligned with other browsers like IE. (I had it working perfectly for firefox)
the code below just gives me a non clickable banner.
(i broke the code with spaces in the tags)
table table table td {vertical-align:top ! important;}
span.blacktext12 {
visibility:visible !important;
background-color:transparent;
background-image:url(“http://www.????.com/435×75 image.jpg”);
background-repeat:no-repeat;
background-position:center center;
font-size:0px; letter-spacing:-0.5px;
width:435px; height:75px; display:block !important; }
span.blacktext12 img {display:none;}
is there any way to make the banner itself actually clickable, so i can link my friends to a url of my choice?
please help, im tired of crappy code :(
sorry to double post here but i thought this is worth mentioning for my fellow Firefox users.
if your have the “noscript” extention and ever tried to click say “edit profile” you get redirected to a seemingly random profile and clicking other things in myspace would do other similar things like this. eventually i noticed it stoped doing that when i had NoScript set to temporarily allow MySpace (all the URLs that pop up while on your home page)
so if you have buggy problems like these try temporarily allowing myspace scripts and you should be fine.
Wow, I’m going to have to play with this. Thanks for getting the ball rolling! Your page looks great. Now I have to figure out how to accomodate the embedded music player that comes with each band page….
Wow! Thank so much for the info! It has been very interesting and fun to manipulate my profile.
I just have a question about the:
.redbtext:after {
content: ” billion”;
}
I did not use ALL the info you put out, but I don’t know how to add this code to what I have already. Say I just opened my account, and this BILLION friends this is the ONLY thing I want to change on my whole page, how would I manage that?
Hey, Mike, I’m glad to have read this. You’re quite an idol to me, and from what it looks like, to so many others as well. I will check your website often for new things.
And thanks for the friends thing!
Very cool. You should also check out ifbyphone’s Voplace, a new social network all by voice. It’s easy to set up an account on the website at http://ifbyphone.com. I find it much easier to use than the web based social networks like My Space, and you can access it from anywhere with any telephone.
Mike,
I am soo computer illiterate. Can you please explain to me how I put my header and my name into the places you have programmed for the design?
Do I cut and paste it into the code somewhere?
UrggH!
Mike, you just saved me from tearing out what’s left of my hair…
Bless you.
Mike,
I noticed that the “OMFG!” doesnt work in IE… I’m sure you knew this, just wondering if there was a work-around.
Thanks,
http://www.myspace.com/56975194
Hello!
Kudos Mike!
I really got excited about customizing my MySpace profile after reading this article, but I guess I overestimated my skills…
It is a complete disaster.
http://www.myspace.com/captainspeaking
All I did was to copy the CSS code and change the URLs, I guess the mistake is somewhere in between, or some step I missed.
If anyone could enlighten me, I would appreciate…
Thanks!
Sorry for the repost, but I fixed the table alignment problem, but I still can’t figure out why the background doesn’t stay on the center…
Hey! You have a really nice page! i just got into CSS recently so I’m a real beginner.
The masthead… I just don’t get it. It looks totally fine on your page, but when I try to put my own in, it just won’t. I realize other people already asked this, but it’s really starting to irritate me. I played with the css for about 3 hours before I finally gave up.
Could someone help me out?
Thanks
Oh crap, I just figured it out now in about 4 seconds….
I HATE it when that happens. What a waste of three hours.
Care to share, Andrew? If I copy/paste the CSS from the mikeindustries myspace page, without changing a thing, the masthead still doesn’t show up for me.
I am getting a 1-pixel drift (left) in IE for the masthead… is anyone else? Is there a fix for this? Thanks.
Is there any way to use a secondary background image in place of the colored region on either side of the center image?
Thanks,
http://www.myspace.com/56975194
Oh wow! This is genius.
Forgive me for my impatience, but does anyone know what happened to my background?
http://www.myspace.com/captainspeaking
I’ve copied and recopied the entire code, to no avail. I have no clue what happened, and I’ve been trying to tweak the code for the last hour, but no luck.
Thanks
Isaac, try replacing
background-position-y:center
with
background-position: top center;
… for the body style
Wow Mike this is stunning. I’ve been searching all over the web to find a decent MySpace layout and I finally found you. I’m planning to create free MySpace layouts for my blog readers and you’ve just made things a lot easier for me. Thanks a bunch mate.
I’ve featured you here: http://www.digitalsurgery.net/archives/2006/05/14/dissecting-myspace/ I hope you don’t mind! :)
a few questions regarding my page…
is there a way to make the left column narrower while making the right column wider?
in the comments box, can the portion that shows friends names and icons be made smaller? it doesnt need to be as wide as it is right now.
and ive set a max width on images… is tehre a way to have the height change accordingly?
thanks much
Wow!!!
It worked!
Thanks a million Leo!
No problem… but all thanks goes to mix master Mike :-)
Indeed. Thanks a billion Mike!
=)
Thanks for putting in the time on the layout and sharing it. I haven’t really settled on a theme, but now my page looks way better! :)
Hey there, I was wondering if you could perhaps shed some light on a bit of CSS trouble I’m having.
I want to streamline my MySpace profile so that the box that says “Mercedes is in your Extended Network” is GONE, and the “Mercedes’ blurbs” box sits at the top of the page instead. And I don’t want it to say “Mercedes’ blurbs” either (‘cos ‘blurb’ sounds like something you do after drinking too much cheap tequila).
I’d also like to delete select, space-wasting headlines (“About me”) without having to resort to unreliable font tricks like setting the text color to background and making the font size really small.
I would also like to change the order in which the sections are presented (for instance, I might want to put “who I’d like to meet” at the top of the table instead of “about me”)
There’s just too much unnecessary crap that MySpace inserts in there by default and I was wondering if perhaps you could shed some light on this CSS conundrum.
Thanks,
Mercedes
Mercedes: I know this is not a complete solution–because it only works in Firefox (and maybe some other compliant browsers, but not IE)
To get rid of Blurbs, add this to your styles:
td.text>span:first-child {display:none;}
I didn’t do much testing, so I am not sure if this breaks anything else. I may look into it a bit more later… to see if I can find a browser-wide solution.
to those who are having trouble changing the color of the body text, i went to one of those other myspace customizers and it spat out this line of css:
td, table, tr, span, li, p, div, textarea, DIV {color:FFFFFF;}
this code works in firefox and IE. i don’t know which tags are actually changing the color, so i left the whole line in there to be safe.
Thanks so much Mike!
I was hoping someone could help me out with a small problem though…
In the MySpace URL box on the left, the text remains black. Problem is, my background is very dark gray and text is light gray, so you can’t see my URL. I went through the CSS with a fine-tooth comb and can’t figure out how to turn the URL text the same color as the rest of my text. My page is here:
http://www.myspace.com/brooke_l_n
ALSO, while I’m here, can anyone help me to center my Friends Space and comments sections? I had inserted some code that centered it just fine before, but then I added a custom Friends Space which allows me to display more than 8 friends. After that, I couldn’t get those sections to be centered anymore. Any suggestions?
Thanks.
Silly me! Just after I posted the above, I took stAllio’s suggestion, plugged that code in and it worked to fix the problem with my URL box.
Thanks!
I have a question about the profile Pic. I noticed that the default pic on the profile page has a specific ID. I am not really well versed in CSS, but would like to replace the IMG tag with my own html? Like say an OBJECT tag, that would make my profile pic an animation, even if only on my profile page?
i need to get on this site!!
hi, can you tell me how to simply make my whole myspace page wider for bigger screens?
i won’t to go on myspace please because there’s nothing wrong on it
Thanks for the tutorial/tips/etc =) I wanted to revamp my profile page, as quite a few of my friends were now actively using MySpace, but I didn’t have the patience to pull through the mess that is MySpace again.
hi mike
could you please tell me how you get your name at the top of your profile to be in a different, really big font??
would be great if you could help!
thanks
:]
Thanks, the example file was a great help. One question, is there anyway to change the default ‘s on various headers to just an ‘ for names ending an s.
Hey, I loved all the help…I’m just getting into CSS I mean JUST I don’t completely understand it all yet….Could you tell me what I need to delete from ur code to make the javacript objects or whatever it is that won’t play? I have a stickam on there and it won’t play since I used ur code….Thanx for all the help.
Hi
Could someone tell me why my page is looking like this at the moment?
http://www.myspace.com/homecounties
I restored everything to default before entering the code.\
Thank you
edit:
I use osx and camino as my default browser – I just checked in Safari and the spacing is slightly different (but still incorrect) however mikes default page displays correctly.
Just wanted to let you know I used you code and was able to do a design that I think you’d appreciate. Even got the blog to match, sort of. But I’m trying to explore that tab system that noob had but haven’t had time to make it work correctly. had problems targeting the IDs of the navigation so I might need to make my own imagemap later when I have time. I think Firefox Developers edition really helped me out in stuff like getting relative coordinates, identifying tables, etc. I recommend everyone get it if you plan to do some of this stuff.
Heres my page: http://www.myspace.com/namsterdamus
Also I started a post in my regular design group. I’ll keep you posted on how they progress with their ideas.
i so agree on the fact that myspace has by far one of the most ugliest site designs and a shoddy interface. overall experience on the site is so much effort and time consuming.
But hats off to them on its popularity, they are doing an awesme job on the purpose and not the product. which in everyway is working for them at the moment. but one has to wonder how long before someone comes up with a myspace thats a user friendly one? and how long does it take for people to migrate? on the web as we’d like to believe is there such a thing called loyalty on a free service? it didnt take the world long to move from hotmail to gmail now did it.
I just have to mention, by reading comments and viewing links, that most other MySpace customizers don’t/can’t make their layout cross-compliant… which in turn, their layout looks like crap through ‘other’ browsers. On the other hand, like you, I test my designs/code with all the most popular browsers out there and I’m not satisfied until it looks roughly the same throughout.
So, my hat tips to you Mike. You are one of the few coders/designers that has taken the time to do things right and your source code will hopefully travel through MySpace like wild fire. I hope to see less of the pre-fab junk on there. As it’s been said before, I just wish everyone would lay off the mega-gifs and videos. I curse at them everytime MySpace acts up. I’m kind of interested in Googling odd parts of your code and see how many MySpacers have used your layout. I’m sure there are a great number and it would also be interesting to see how they further customized it.
As for me… I do like the layout, but I’ve got a few new projects on the go. I don’t have the patience as you do though. I just covered the ‘stock’ layout with custom DIVs, I just like the creative freedom that way. I guess by resorting to cover ups, it’s sort of like soaking up dog piss with newspaper. I must say though, that poor MySpace Tom. With that ugly hardcoding, it must have him running ragged while MySpace is always seemingly blowing fuses. I’ll bet he wishes he had done things different right from the very beginning. lol
Best Regards
Well, homecounties, your current layout definitely shows problems… It’s bad via IE, but it’s in big time shambles via Firefox. Best bet… revert to the stock layout and reload Mike’s codes again. Something has apparently went South there and the tables are scattered in all directions. :(
hey before I try it and screw everything up. what happens when you apply this code to band webpages?
I’ve been working at the masthead without any hope. Could one of the people who’ve figured it out after having the same difficulty please comment on what they did to get it to display? Please?!!!
Yeah what about band myspace profiles?
@Looking for some Masthead:
It looks like you have some crazy stuff going on with code. Why is it all broken up? put it all in one set of tags. I think myspace is butchering your code… the masthead code isn’t even showing up. Are you using quotes in the code?
The masthead code doesn’t work anymore, but i figured out a “quick fix” in about 15 minutes.
If you just create a new DIV layer in the “about me” section with the correct w/h/position/etc. for your image you can get it to work.
You can use the code below, just remove the *’s
the div tag didn’t show up. Here’s a link to a css file…
http://www.isaymeow.net/masthead.css
what do you mean that “The masthead code doesn’t work anymore” ?
Mike: thanks for the layout, it’s incredible.
Everyone: I threw Mike’s layout up on my site, but I’ve ran into a slight problem with it — it renders perfectly on Firefox, but on Internet Explorer there appears to be too much space in the center, off-centering the columns. Take a look at:
http://www.myspace.com/skinnyirishbastard
Any suggestions?
Thanks.
Got mine up here – http://www.myspace.com/alexandercurtis , thanks Mike.
Anyone know if there is a way to round the corners of myspace tables?
Rock on. Nice work.
I am in a band and I would like to make a banner with a link on it so if someone clicks on the banner it would bring them to our profile…could you help me…is it possible??
Does anyone know how to get rid of the 1-pixel masthead drift that is seen in IE? Does anyone know what I am talking about ?? When viewing a profile in IE, then slowly resizing the window, the masthead background image will not move completely in-sync with the background… causing a 1-pixel misalignment every now and then.
I dont know if THIS is what ur talking about, but when I made my profile my masthead was FAR too close to the left so instead of leaving the code as is… I changed the size, cause it was far too large and instead of leaving it Left: 50% like I think it WAS… I had to little by little adjust the percentage, and it ended up being centered at 6.5% so this is what my “Masthead code looks like”
.masthead {width: 700px; height: 100px; position: absolute; margin-center: -425px; left: 6.5%; top: 162px; {then it goes on with my Image URL}
Jessie… thanks for the suggestion, but that doesn’t really work. You should look at your profile in firefox and internet explorer on a computer that displays a higher resolution than 1024×768… your profile gets pretty messed up at those higher resolutions.
anyone else know what I am talking about?
(read two posts up)
I hope you dont mind me saying that your thoughts on this topic are quite preposterous and horrendous! How can you say such things? Do you not have any ethics?! Anyway, have nice night.
Uhhh, I don’t mind, no… but what on earth are you talking about?
Yeah I also hacked my myspace page a while back. I mostly used Keegan Jones code in my css. But instead of covering the whole page with a div tag I covered up everything except the comments and the banner. Where Keegan place an image I placed a flash document. This would give me the links I needed. It also allowed me to make a sharpie marker write my last name. I then was able to make my comments scrolling. The only problem to be faced was to get rid of my top 8, which was hidden by the div tag. But now that my comments were scrollin they appeared in the scroll frame. I found some code on the net that was ment to customize your top 8 and tweaked it to hide my top 8. Finally I used a div style tag to give my scroll frame a cusom background. I think it looks pretty good, but doesn’t look as good as yours.
Hi Mike!
First I have to thank you so much for posting this information. I just could not find any other layouts there were ‘me’ and I LOVE this as a beginning layout!
My trouble is – I added some other things to the page and in the process I somehow messed thing up. Take a look – HERE and you will see that my FRIENDS and COMMENTS boxes have been moved into strange locations.
Any tips on how to fix this without going insane? Should I just start over LOL?
I will understand if you are too busy to reply – but I was hoping someone on here may be able to help! AGAIN – THANKS!
Teresa
PS: The addy is: http://www.myspace.com/50156057
I think you should delete that teddy bear comment and get rid of that slide show. Before I actually take a look at the css on your page you should get rid of those two things. Large pics seem to mess up the alignments. If that doesn’t work tell me and I’ll take a look at the css in your page.
I just deleted them again to give it a try and it worked this time!
That solves that problem! Thanks for the suggestion!
Blessings,
Teresa
I don’t know… I’ve stripped out the banner coding in my profile and have yet to be deleted. I also know hundreds of users who do the same and have never been deleted as well… and their profiles have thousands of hits as well as friends…. so I think that assumption of their T.O.S. is a bunch of hype?!
Anyone know whot to make your comments table stretch across both columns?
And where do people get those long questionnaires that they post in their profiles?
Also, if anyone knows how to change that ‘online now’ image I’d appreciate it.
this isn’t a myspace help page alexander curtis…there are plenty of pages on the internet that tell you how to do both those things. freakin google search it why dont you.
Wow. Thats so cool
Erm, the ccs that can alter the friends, is that the exact code coz’ it dont work 4 me ((im a n00b)but shitty sites dont help)
can ye post the code again or w.e and which bit in profile its gotta go in?
=/
tom
I think it’s about time for me to shed some light on why myspace is so popular and such a piece of trash at the very same time. I have been using myspace to keep in touch with my high school friends; yes I still am in high school. It has been as blessing learning ahead of time when certain meetings were for activities, much easier than a telephone call. All your friends are in one place. I do think myspace is totally retarded for what a lot of people use myspace for. The uses of myspace really have four categories that I can see, and those are: keeping in touch with friends, finding new friends, advertising, and finding people to have sex with (this mostly includes pedophiles). I think the first and third are completely all right and the second usually leads to the fourth.
So now that I have examined the uses of myspace I also need to look at why myspace sucks so much. Now for about a week I had one of those ugly looking profiles that most teens had. You know three songs, six or seven videos, alpha tables, a background with the same color as the text and pictures that are so large they force you to scroll for five minutes to piece together what the picture looks like because its too damn big for you to see it all at once. Eventually I think the web designer in me wanted to scream in agony, but after seeing so many hideous profiles I think most teenagers are use to ugly profiles. I see them all the time; in fact once I read a profile that made my eyes burn for about five minutes. It was like staring at the sun. Here the beauty is: http://myspace.com/16411485
So like I said I eventually realized just how ugly my profile was and decided to change it. Now I was not as good at CSS as Mike Davidson of course so I instead turned to what I knew best: flash animation. I decided to completely destroy everything on my myspace and replace it with flash. “But how?” I said. First I found Keegan Jones’s beautiful hack. Like Mike said there were only two problems with this hack: it covers the banner, and is static. So all I had to do was overcome these problems. How to now cover the banner ad? How about moving the div down to not cover the banner ad. That works! I had already solved the second problem when I decided on using flash. Flash can have external links!
Within a couple of days of flash design I had my new myspace page running. The actual CSS was much simpler than anyone else’s myspace. All it did was basically disable myspaces gay formatting. Many people ask why the default myspace page looks to retarded. Such a rich company and that’s all they can think of. Well you have to remember myspace wasn’t always popular. Whenever you create a new account it uses the same layout for your page as it did when myspace was first starting out. They never built in a way for them to change all their users profiles at once. And they never will. Why? Because the problem fixed itself when people learned how to change the style of their layouts.
Eventually though a new website will be start (my the creator of myspace or someone else) that is much more functional and has the same services as myspace, but until then we are stuck with the web designers nightmare. By the way here my profile: http://myspace.com/73357272
Mike M, nice manifesto, but your profile doesn’t scale well. It doesn’t fit a 1280 (or lower) pixel horizontal display… making it cumbersome for 90% of internet users to navigate.
+
Theres a layout grabber here: http://www.myprofilesupport.com/myspace-generators/layout-grabber.html
which ‘steals’ users layout code.. goodluck using it :)
I understand your frustration. Right now, it looks like I may be accepting an offer from myspace. Cleaning up their markup and making them realize the benefits of standardized markup and the consequent savings in bandwidth cost is a major initiative I want to take on.
Please understand that myspace is still a very small company ( ~240, very little has changed w/ Murdoch’s purchase besides a new campus we will have in Beverly Hills ) dealing with challenges that the employees and any potential employee have never dealt with. I can guarantee you though that the focus is to stay profitable by continuing to improve the user experience.
And I also guarantee that I will continue to monitor blogs such as this.
~PJ
I’ve been having a problem with my MySpace account…it seems to be miscalculating the number of friends I have. Suffering from OCD this problem has been driving me crazy far too long…and to the point where i’ve deleted all my friends…YET, i’m still listed as having 8 friends that do not exist (this is the current state, please use the URL to view for yourself). I would just like the number to be correct, can you help or point me in the right direction so that this might be fixed? Also, the MySpace “help” page suggests that the number will update itself “soon”…apparently “soon” is more than a couple of years…
Hope you can help,
A MySpace Fan
Wow. Serious props on figuring out that convoluted layout.
Here’s what I did to my band’s myspace with it.
Thanks again.
HOW CAN I ADD MORE FRIENDS TO MY TOP 8…HAVE MORE THAN 8??? SOME PPL HAVE UP TP 20 OR MORE…
how do you create a band profile on myspace? I can only create a personal one.
to pete: At the http://www.myspace.com home page, click “Music” in the navbar along the top, then in the music section, the link on the far right is the Artist Signup link.
Brilliant. Thank you so much.
And yes, I cant imagine how nice myspace would be if it were properly hooked like CSS Zen Garden or the like … since its so popular and obviously making money (the ads make that obvious) you would think they would take a second to actually learn some web skills or hire someone that can …
Excellent work! Thanks for doing this, you saved lots of people lots of headaches! Everything is so clean from the layout to the code itself…you sir, are the man.
Here’s what I did…
thanks for the excellent layout code Mike!
Here’s what I put together…
http://myspace.com/etaixyhpsa
Oh the joys of hiding their layout with divs.
You, my good man, are an honest-to-god legend. I’d previously divved over their crap, but this is a nicer solution =)
I had a bit of trouble with your direct copy n paste script. Straight into ‘About Me’, with all my old code removed, but my site is ‘wider’ than it should be. Yours displays fine, but the individual boxes on mine are out of line.
slight problem with the masterhead…but cool tutorial..learned a lot from it.
i want to know how you put the layout in ur myspace so people can get the layouts you make
plz help me!!!!
Can anyone who found a fix for the issues with a left-ward shift in the boxes please help me?
baronlsn [at] gmail
Wow, this really did make me want to acutally start using my myspace that i made last year. It makes myspace so much better. But also, the “XX billion friends” thing doesnt show up in IE. Only firefox. Just wanting to let you know how awesome this all is. Thanks alot.
http://www.myspace.com/reynoldsj
ok, can someone PLEASE help me….
The layout on my page is all messed up, I posted about this earlier and was told to reset/delete everything and paste the code again.
I have done this multiple times in various browsers and it still does not work.
I have disabled html in comments and deleted any already existing pictures.
I created a music myspace page and the same code worked perfectly so there must be something nasty floating around in my profile but I cannot find it.
Mike, or someone similarly skilled, can you please look through my code and help if you get the chance.
Thanks
myspace.com/homecounties
This is an amazing hack…Thanks for posting and making it available.
It’s distressing to think how many kids will grow up thinking MySpace CSS is correct. (Assuming that one considers webdesign to be important…actually, I do.) It’s like an old Steve Martin joke about how he likes to “talk wrong” around children, so that in school they’ll raise their hands to go to the bathroom and say “May I mambo dogface to the banana patch?”
i need to know if thier are links or some how to hack or get in to My space because some school dont let people get into my space i need it ergent email me thank you
What is the code for making your own header below the myspace advertisements. On your sample site it says”your header here”
Thanks
I already emailed this to Mike, but if anyone else would like to take a stab at it I’m sure he wouldn’t mind unless he wants all the credit…
Rounded Corners with CSS
There’s a few non-image based solutions posted, some that include javascript/CSS/DOM, just CSS, etc, but I won’t post the whole link here. Might be quite snazzy if someone could put a quick hack into say, his existing CSS file (which is so greatfully supplied on this page ;-]), with some additional instructions if it’s possible.
In any case, I’m sure the myspace community is more than thankful for your existing contributions!
I’m not asking for someone to fix my page but I am interested in learning how singer Sophie B. Hawkins (http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendID=11684282) got her comments to appear at the bottom and to be so wide.
Hey Mike,
What a great thing you have done for all of the world!!! I love the classic clean look that you have given us to emulate. I work for a comedian and I recently found layout generators and spiced up his MySpace page. I was looking at the code in your CSS, and I’d like to thank you for the comments.
My question is, do you know what the table code is for each box that MySpace has created? The way I have the background image on our page it is centered with the top. I’d like to push all of the tables that are on the right to “float” or become right aligned. If I knew what the table code was for each box that MySpace uses I could acomplish that.
Is there anyone out there that is familiar enough with MySpace that would know this? We are using a “Band” profile, so I am not sure if there are drastic changes in the code. I’d love to change the size of the comments section too so that it aligns left and maybe puts the comments in two colums with word wrap. If anyone can figure that out, it would be fantasic.
Take care and thanks again for the time you took to do all of the work,
Don
Director of Marketing and Promotion
http://www.bmarley.com
Thanks for the tutorial Mike. If you fellas have time please check out my Myspace page, its a work in progress.
Send me some feedback please
I cleaned up my girlfriend’s MySpace page (I don’t have one, yet) and here is what I came up with using Mike’s work and some other stuff:
http://www.myspace.com/asyana
Feedback is very welcome…
I just can’t understand (yet) why the tables are larger on IE than they are on Firefox. It looks definitely better in Firefox…
If I feel like it, I will make the NOTEs more detailed, because I had a helluva (but fun) time figuring out the color for the text (like the “z” fix).
Thank you Mike!
gìo_
thank you. i was looking for a cleaner way to change my layout.
http://myspace.com/doloveira
check me out.
peace.
I just started using your CSS template last night and was planning on tweaking it to my own style today, when lo-and-behold, I see that it is no longer working!
Yours was the first classy look I had ever seen, and your mapping out all the CSS was so essential. Thanks for sharing, even if it only lasted a a day.
Same problem’o here, its bullshit if they block this, Who is with me on this?
Its working now, Check out my page
I can’t believe people are hassling you for help — that layout is idiot proof. You are a giant among men.
See my adaptation of it here
I can’t believe people are hassling you for help — that layout is idiot proof. You are a giant among men.
See my adaptation of it here
It’s working again!
=)
Everybody: Please don’t post here if MySpace isn’t loading for you for some reason. It has nothing to do with CSS. If you aren’t used to MySpace acting strangely from time to time, you don’t use MySpace very often.
“If you aren’t used to MySpace acting strangely from time to time, you don’t use MySpace very often.”
That would be a good thing wouldn’t it?
Also, I found another site with very cool stuff that just works off of CSS code(no images, JS), in case anyone could find a way to integrate some of these effects too!
http://www.stunicholls.myby.co.uk/
is it possible to make my extended network banner a link
yeah jenni…
i think thats tha code
There are MySpace layout tweaks that allow you to hide the “details” box, the extended network box, and so on.
Unfortunately, they don’t seem to work with your code.
I’m happy to note that you can hide the “extended network” box as noted in Stephen’s comment, but is there a way to do the same for the “details” box?
He hid the extended network text by using this:
table tr td.text table tr td .blacktext12 { display: none; }
Since, as far as I can tell, .lightbluetext8 refers to the details and interests box, shouldn’t doing the same thing with it that he did with blacktext12 get rid of the details/interests?
When I use it, however, it just gets rid of the interests box.
Do you know if there’s a way to get rid of the details box, or, alternatively, to replace it with an image?
I wrote about this exact same problem in my article at http://www.wackomenace.co.uk/metablog/2006/05/myspace_is_not_pimpable_enough
Customisation seems like one of the biggest problems with MySpace – there seems to be no proper customisation field as you say, forcing you to use the “About Me” box. Plus, some of the CSS rules are *dirty*!
Can’t they just reorganise the whole customisation system and allow proper CSS in the proper head section of the HTML while also marking up the page HTML to allow more freedom?
i like MikeIndustries’ CSS Hack for MySpace.
it’s nice, clean and his generosity is appreciated by all.
i just want to know how to hide the “MySpace URL” box with this CSS hack.
i’ve tried the various “Hide MySpace URL” hacks, and it does hide it….BUT it still draws the table with blank content.
i would prefer:
– no table, and a completely ‘invisible’ Myspace URL box
– if it has to draw a table, with blank content, then i would like to place an image in there as a placeholder or even a banner advert….but i can’t figure it out !
:(
.q
This is the code I referenced earlier..
http://paste.css-standards.org/1126.
The question regarding Mike’s Layout + nifty in a pastebin. I’m trying to figure a way to merge the two…
Please do not post requests to fix your MySpace layouts here. Thanks… The Management. :)
How Do i Fill in the Header? I looked at this web page and others and I cant seem to find the answer
Where do I go to ask questions ? Because I’m stumped about on thing..Even though I can’t figure out the code..Hey thats really cool the little preview down there and btw I really love the layout..I changed it for my own taste. I would proved the profile But I don’t wish to spam. I have provided my email address. So if you wish to contact me I’ll elaborate on my problem. If you wish for me to contact you let me know what or how to get in touch with you..Once again I really like the layout.
Is there a secret to getting animated GIFs to work as your profile picture on MySpace?
The picture is animated if I post it anywhere, as well as on photobucket, but when I try to upload it from my computer it does not animate.
I appreciate any help…
i want to go on myspacee douchebag(=
unblock it from Schuyler Colfax Middle Schooll… like now !
(Editor’s Note: Thanks. Let me get right on that. In the meantime, how about you go do some ABCs?)
What the previous person fails to realise is that they are, in fact, rather stupid.
WORK IN PROGRESS
Rounded Corners in your myspace profile
Is the ability to customize MySpace a side effect rather than by intention? It seems to me as if some users just realized that because they could post HTML they could hack the design. As much as I still hate the layout, and all the autoplaying junk it forces on you, I have conceded defeat and signed up because you cannot doubt its success.
Anyway, I just wanted to share the code I used to remove the useless “extended network” box. Naturally it does not work on IE, but that is no reason for anyone else to suffer.
br+table[id=”Table1″] { display: none; }
Michael.
I’ve basically read every comment on here and I love this myspace layout hack.
One thing that i couldnt find the answer to was: the fix for the “billion friends” for IE. i know it works with firefox but is there any fix for it to show on IE?
Thanks for the help.
Mo
Does anyone know how to sneak html code into the “extended network” box?
Alright, I have really enjoyed taking a couple of your ideas and CSS and putting them on my myspace page…THANKS!
But I have not found ANYWHERE, what I really want to do to my myspace profile…
I actually want the simple, myspace layout, BUT instead of light blues, dark blues and oranges…how about purples and pinks??? (Kind of a girly-girl) I tried stealing the actual “original” myspace code, but couldn’t get all the codes….I want my whole page just like the original, but change the colors….think you could help?
Amazing. I put special text into the textbox of this entry with the *express* purpose of keeping people from continuing to post hopeless requests for help on their MySpace layouts and yet, the requests have not only continued but increased.
it appears the levels of literacy on MySpace are lower than I thought.
Whoever emailed me, send me another message. I can’t reply to comment-notifier.
Fantastic write-up. I took one look at the embedded CSS for Myspace about 6 months and ago and immediately opted for the pre-made layouts. The way things are done are thoroughly disgusting and should be fixed, especially which such a large fanbase. I made my own simple layout after about 2 hours of trolling through the CSS, but I barely scratched the surface of course.
My one question is this before I begin completely overhauling my page. Does anyone have any idea on how to automatically scale-down images both horizontally AND vertically. I’ve managed to half-way find a way to do it, but it distorts images and doesn’t give a true “to-scale” look. I’m sick of people posting extremely large images, which manages to throw off the centering of my page.
Nice work Mike, this has made my own page much more aesthetically pleasing!
I’m not sure the negative margin solution works properly as the header_myspace image is out of line on mine in IE. I can alter the margin-left: -425px value to -424px which seems to fix it in IE but breaks it in firefox.
I tried to add this into the IE conditional bit to no avail, but theres a high probability I’ve gone wrong seeing as I have no experience in css at all. But any help from anyone would be greatly appreciated, sorry if people bugging you for help is slowly wearing away your sanity…
Thanks!
Mike, Thanks for saving me from the myspace page-style monotony! I’m lovin’ my new look!
Alignment issues due to large pics (in the comments section) can be remedied by adding the following code. Remove the “*” in the style tags to enable this code.
td.text td.text table table td img {max-width:260px; width:auto;}
td.text td.text table table table td a img {width:100px;}
td.text td.text table table table td div img {width:80px;}
td.text td.text table table td div img {width:80px;}
* html td.text td.text table table td img {width:260px;}
* html td.text td.text table table td a img {width:90px;}
* html td.text td.text table table td div img {width:80px;}
Many thanks to http://www.modmyprofile.com/
Hmmm, Looks like the blog stripped the style beginning and end tags. Add those to the code above and you’re all set. Please excuse my ignorance in relation to code jargon, I’m just stumbling through this.
Michael, you mentioned that the code you posted does not work in IE, but in my comment from April 18, I posted a hack to hide the extended network box that works in almost all browsers.
Hey Shawn,
I appreciate that the help. That is similar to what I had somewhat concocted with my own tinkering. The issue that I’m having is with the following line:
* html td.text td.text table table td a img {width:260px;}
I would like to change it to:
* html td.text td.text table table td a img {width:260px;}
I would like to account for the fact that most picture comments are hyperlinks to photobucket or similar. The problem here is that people’s pictures are also hyperlinks. So when I adjust this value to 260, the people’s pictures are blown up!
Any ideas on a hack around this?
Nice job Mike. Trying to reverse-engineer MySpace CSS styles would have taken me weeks to figure out. I’m glad someone was brave and skilled enough to take this on.
Thanks Again,
Jesse
Thank you so much, I had tried to do this on my own and ended up with crazy code like “table[bg-color*=”00ffcc”][width=”435″] {stuff;}” and basically things that normally make me cry. Granted, it worked, but was completely unreadable, plus it didn’t play well across browsers.
Thank you! Thank you! Thank you! Although not a professional designer, I too cringed at the traditional MySpace Layout, thank you for your help…
Thank you for upholding standards, compliance and aesthetics via MySpace. I’ll do my best to addon some additional script to try and block image comments that overflow and eff up the layout.
Is there an easy way to apply my main myspace page settings to the blog section? I’ve tried a couple different CSS variations, but it just doesn’t seem to come out right.
How did you get the comments to have numbers as the background? On this page, I mean.
for some reason i am getting a wicked wierd pop up whenever i go to my profile?? is anyone else getting this?? is it because of the code?? , is there a modification to the code i need to know about ,
http://www.myspace.com/cosmicfuzz
Nice Job, Mike.
You can get rid of the “extended network thing” (in Firefox only as far as I’m aware), by adding this line of CSS:
table[id=”Table1″][width=”435″]
{ display: none; }
For IE users, you could just cover it with a sign telling them to get Firefox.
I know it’s been said ad infinitum but, thank you so much.
hey this is awesome. i don’t know what i’m doing wrong, but for some reason I can’t get the “contacting” table changed. anyone have and tags I can use or tips?
thanks
Leo, thanks for the Blurb fix… unfortunately it also ended up nixxing my name image and messed up the spacing between commentor’s images and their comments. (In Safari) :(
Jaclyn, you know… i noticed that a while back… sorry I didn’t post it on these boards… but yeah, in FF it got rid of more than just the ‘blurbs’ top level headers. so sawwy:-/
It’s all good!
If you find a better way to do it, please let us know. I want to get rid of it because I can’t even figure out what “blurbs” are, or why there’s a field for them in the first place…ahhhh, MySpace.
Hi My names is tamilla and im really interested in Css and html in general but being self thought pretty much everything about computers, i get lost in long explanations and complicated instructions..is there any website which breaks down CSS codes and gives explanations for them..thanks
love this page… gave me a start on my myspace… hated the dull look of the default and now I have inspiration to do so much more…
One nore did any one come up with a way to minimize the use of people signing the guestbook with images far beyond your design specifications?
Hey Mike,
Excellent tutorial. I particularly liked your “masthead” code, and i ended up taking it a tad further and realised that you could actually customise any node that exists in the html tree structure using css (meaning i could cut the unneccesary stuff out of the rendering view, but still retain a “comments” box) I guess in that respect, the whole exercise was a learning experience.
Nice advice on Xyle Scope as well. I dig it.
Ben.
(www.myspace.com/harrypotter2k5)
Is it possible if you can show me how to upload more than 4 songs on my music page??
http://www.jeroenwijering.com
Hey matt try adding this MP3 player to your myspace site, you’ll need to rent space on a server to store your mp3s, or you can try File Den . Really simple to use, Read the Forums for more info, or email me if you are stuck, I can try to point you in the right direction. But do note that asking for help here can piss people off (mike).
Hey Mike!,
Good work, Will try out the code for our band profile. Have avoided myspace till now because we couldn’t stand the default design or the ad header. I don’t know what’s worse –the cheesey ‘U of Phoenix’ ad or the smileys.
FWIW, I have been told (anyone correct me if I’ m wrong) by some people that myspace takes a pretty dim view of the account holder futzing with their ads and they kick you off.
Now we live in mortal fear that ‘our space’ is going to have this great (we hope) page ruined by the whirling, flashing thingie on top and there’s nothing we can do.
The ad blockers I tried stopzilla, squsi, and adblock all work. In fact, your page looks better without the ‘highly relevant and targeted’ ad from H&R Block (seriously). Guess it makes sense to block Block.
Will try your code first thing. Thanks
Anybody have any idea why the borders show up so differently in IE than they do in firefox? For example, check out http://www.myspace.com/scopeproductions in firefox (how i’d like it to look), then check the borders in IE on the same page.
Its inexplicable, and driving me nuts.
Hit me up at andrewjstone (at) gmail.com if you have any ideas or fixes… thanks.
PS… this layout is the coolest i’ve seen that doesn’t just cover the whole mess up and render it useless.
This was too easy, Mike. Thanks for sharing this info with us.
Though I really do appreciate what you have done with myspace on the battlefront dude, this comment is for all the dudes that posted back, whining and complaining about how the simple tags didnt work.
He went to the freakin trouble of pasting you code to the site, the least you boys and girls can do, is learn some basic css from an online tutorial to make him feel like he isnt completely being used.
To those that contribute to dude, congrats your smart. Also this post does not apply to mentally challenged people of the world.
Thanks for trying to make these guys lives easier dude. Your a god send. Ill stick to playing with generic code for my site because I like ghetto. I use a little Css, but I just rather expend efforts on a real web page.
Til next time..
Johnny J. (A.K.A. AwEsTrIkE)
Sidenote- Ill let you guys know my new site, when I have it completed, preferably soon.
Awesome… thanks
Thanks Johnny J.
Good disclaimer as well. :)
No problem, although I will say half to 90 percent of the people on myspace suffer from some kind of mental disease, they have proven themselves capable of cutting and pasting. I personally was taught how to cut in paste in second grade on a really shabby Apple. When I say apple I mean apple, not macintosh. None the less I give sympathy to the fact, not everybody was as “super” as me. I am far from an expert at web design, but anything I dont know I make an attempt at learning the language before I engage in the conversation.
As far as I am concerned the internet is the new language. English, spanish, esperanto, german, russian- all do not apply here. Color codes and tags are the only thing that matters. Any site can be translated- but only if the core language of the page is written in correct Netlish.
So in summary I apoligize for ranting, but I am tired of great computer tacticians being used by less than par computer users. It hurts inside. Thats why I post these, is for the evolution in the right direction of all future Netericans everywhere.
Mike,
Can you help me with my MySpace layout?
I’ve blatantly copied all of your code and graphics bit by bit, but I’m still having troubles.
Mike Hortobagyi at MySpace
(Editor’s Note: You are officially the stupidest person to post a message here. Congratulations.)
Thanks a bunch for doing this. Wanted something clean and tidy, and you provided. Thanks a lot, appreciate the work. Feel free to check it out.
hey i just made myspace for my band but i dont know how to customize i cant use HTML or i dont know were tu paste a code. Cuould u help me out.
tnx
For better or worse, this comment thread seems to have aggregated a community, that may even have reached the threshold to become self-sustaining. And, it further appears that one of the things people want to do here is look for help from other community members on their layouts. Of course, this is Mike’s space, and if he doesn’t want that here, we shouldn’t do it.
I wonder if there is any practical way to move this community to a more appropriate venue without breaking it.
Just a thought,
-Steve
Here’s the thing: There are 50 million people on MySpace. At least 10 million of them could use help on their profile. If they all posted personal pleas for layout advice here, the place would be an asylum. Not to mention, I get an e-mail every time someone comments.
So yeah, I’m happy to talk about MySpace here. I’m not so happy to solve HTML questions for even a thousand people. Understandable, I hope. :)
Not to mention, at 374 comments, not many would even bother to read everything that’s already been said. So there are obviously just a lot of people skimming the article, doing some cutting-and-pasting and then asking a bunch of questions. This just isn’t the ideal format for a support forum.
I have novel idea. It kinda fits into the Myspace community theme. Heck ill even put it up there for personal sh*ts and giggles and to relieve dude from stress a little bit.
–Starting a myspace group for this, yes there is such a thing. Wait a minute…..
….Done, there is a group for it now…
http://groups.myspace.com/csscafe
The only way this so-called community can survive off of this page, is if everybody uses the forum, to post their stuff.
As for Mike, post on there if you want or dont, but that should relieve some of your stress. But it sounds like a better solution than having 5,000 post on your page. When myspace can handle it for you.
This is the product after tweaking with your codings.
Just thought I’d let you know :)
Thank you!
Mike that is an amazing layout! As for the comments here about myspace being crappy and what not. They recently recoded in ASP.net. The site is faster now, and they reduced their loads and made their server farms smaller. The “crappy” part is only the peoples profiles and how they tweak/mod them. I run a myspace customization site, and we provide good quality layouts, and codes. Unlike most of the “pimp sites” out own site is even standards valid and accessible. Check it out if you wish – Myspace Layouts
Excellent article I hope to put this to use immediately… one question though. Is there a program such as Xylescope available for Windows XP users? I’ve been wanting a program like that for years and was saddened to find out it was Mac only. :(
Mike,
Brilliant work. The best layout I’ve seen for myspace. I’m using it now.
I went about it just a little bit different. Check it out and let me know what you think.
Pedro’s Myspace
Pedro, while your space looks pretty, it is not standard (images for everything), not dynamic (adding friends/comments won’t show up automatically).
I think the point of Mike’s Method was to fully integrate better design into the myspace way of content creation and usability.
Again, your space is pretty, but at the expense of the myspace mojo ;-)
good job.
Leo,
I totally hear you. I agree with you that it is not standard. I was going to keep the default text and just populate the normal way and incorporate the design that way, but I figured myspace is so haggard with its code and look so I just wiped it clean and put in my own way.
I will be getting the comment section up soon, I just have not tackeled that part yet. The viewing all friends part, I have not set up the link for that yet either, but will be done very soon. I set it up so that I can update friends/content very easy.
All in all, I was just trying something different to be honest. It was fun to do and not only that it was fun digging in the CSS and mark-up to try to get it to work across all browsers.
Yeah, I see what you are saying… there are a few people going the div-overlay route:
http://myspace.com/hyalineeston
http://myspace.com/d0401
thebignoob
they look nice
Does anyone know how to resize JUST the comment area? I just want a larger comment area, while keeping the other tables’ sizes the same. Is there any possible CSS selector sequence to do that??
Thanks a lot
Phil
working on:
http://myspace.com/themonkerydesign
I am still going with the ghetto fab feel mixed with a totally revamped outlook on the page. I wanted to make mine look good regardless of resolution, which I am not entirely great at yet.
http://www.myspace.com/jc_johnson
But it aint your everyday myspace page. I will be cleaning it up a bit soon. Let me know if you like it.
Big King: Are you sure the ASP.net conversion is anywhere close to done? In hovering over the top nav, every single section except “Browse” still leads to Cold Fusion generated pages. And even the Browse feature seems super slow to me.
Brian G.: Unfortunately I am not aware of a PC equivalent to XyleScope. Time to get a MacBook maybe? :)
Pedro: Yeah, standard div overlays have been around for awhile now, as Leo said.
Mike,
Wow, tremendous article!! Spent a happy afternoon playing with all the code you so generously provided.
Here is my new mySpace page:
Thanks for all the groundwork you did. I actually like my page now.
Jamey
Sorry for the double post:
http://www.myspace.com/jameydavis
thanks,
Jamey
how do i get rid of the bottom table with all the myspace links in it? Id rather just have the footer at the bottom of the page
Amazing that these requests keep coming in despite the pre-populated text in the comment box here. I’m thinking about closing comments because some people apparently just can’t read.
WTFLOLOMFGBBQ!!111!one!
Nice going, Mike. This is now a myspace message board. Just wait until the myspace webcam chicks show up…
forgot password
forgot mypassword
Carla: How unfortunate. Let me retrieve that for you. Look for a smallish wooden box, wrapped in purple velvet, on your doorstep tomorrow morning. Inside, you will find a parchment. Unwrap the parchment. On it you will see your password.
Lazaro: Unfortunately, I cannot help you. Perhaps you can use your sister Carla’s account instead?
I wrote a real time layout editor using parts of Mike’s code here:
http://myspacepg.com
I’m taking suggestions on what features to add.
I made a test profile that shows my efforts. Although none of the MIH stuff is in there, it should help those who want this type of layout/style on their site. I also posted it in the myspace CSS group that’s been created in honor of Mike’s hard work.
http://www.myspace.com/testroundbox
I put the code in there without any of the >’s but I trust one should be able to decipher where they’d go.
Forgot to include a plug for Alessandro Fulciniti’s hard work. I simply modified his code just a little to fit into myspace.
Dope. We love rounded corners. But you may want to check your page in Firefox and other non-IE browsers… it’s jumpin all over the place.
I’m confused about how to insert my own image into the space instead of your code. Yours seems to start with a url. Do I have to have a web site first? How do I load my own ?
Mike, yeah I guess it helps to read your article all the way through first too see your opinions on everything. Seems I took more of the Keegan approach which you did touch up on. Either way, it was still fun. Have a good one.
Finally, I can have a myspace page that doesn’t make everyone’s eyes bleed ;p Now I wonder if I will get any work work done or any sleep for a while…. Something fun to do!!!
And one more thing: I like reading these informative comments / articles and I would like to continue to do so. Please head Mike’s advice and don’t ask for any more help on your profiles. Get a book. Read it. Google knows all. Do some research and figure it out on your own! It’s the only way to make that knowledge somewhat stick :)
I remade my Myspace editor using Mike’s code. Here it is:
JX Myspace Editor.
Every change you make shows up instantly on the page.
the comment before wasn’t anything to fix or help me with mine own… but to get a basic idea on how it works… so i can run with my own creativity… i just need the concept of making it with no boundaries… and then turning around and making it totally my own.. with photoshop and such..
=] youre a god
Its not finished yet but it no longer makes the eyes bleed ;p Thanks for this, we owe you :)
Vic’s New MySpace
Awesome! I used your CSS as a base for my profile … I wanted a slightly different look, though, so parts a different. Take a look:
cH: Connor’s MySpace
Does anyone have suggestions for how I could improve it even more?
@ Connor
Too bad your page is set to private.
@Gilbert: It’s not actually private. The problem seems to be that MySpace doesn’t allow members younger than 18 to make their profiles truly public. The only options are ‘friends only’ and ‘anyone under 18 on MySpace’.
I’ve uploaded an exact copy to my server…
An exact copy of Connor’s MySpace
Myspace is the schoolyard of the internet.
I recently discovered myspace(yeah I’m a late bloomer) and found it “happening” with all the youth jammed onto unseen blocked highways of self expression and attention seeking. While I am learning the nuances of navigation and setting up my page, with the help of a friend(hannah, the ninja girl), I have soon discovered it’s about how many friends and comments you can get. Myspace.com hit on a chord with these kids, I don’t know if they’re geniuses or just plain lucky. I’m thinking of buying stock in myspace. It is rocking cyberspace, where other companies are scratching their heads trying to figure what happened, this company is rocking and rolling.
Myspace is built on friendship. Now how simple is that? You don’t even have to be a good friend, or a real friend all you have to do is call me your friend and let me call you my friend and suddenly we’re connected! Easiest way to make friends in the world. They can see right away if you’re the kind of person they may want to hang out with. They get to read about you and listen to the song or video you have selected. They’ll still be your friend even if you’re a nerd, because they want you on their list and they want you adding comments, it’s all about numbers, just like the big people world. You can be anyone and that’s what makes it so fun. It’s for everyone and anyone. Though I think it may be mostly younger people, I know some older folks that are getting in the groove and having a blast. It’s fun.
Now some people getting downright dirty or creepy but isn’t that how some people are? Just don’t be their friend if you don’t like them. How elementary is that? If you say the “f” word on your profile then I’m not going to be your friend, so there. If I say the “J” word then you can talk bad about me behind my back and call me a closed minded hypocrite, because myspace is the SCHOOLYARD OF THE INTERNET and schoolyards are not pretty places.
It’s been some time since I’ve been to school, but now I can hang pictures in my locker(my pics page), swoon over a star and maybe even talk to him. I can be like Marsha Brady and actually have my favorite singer show up at my house! I can talk to my friends and make cliques, I can try to be the most popular by getting the most friends and the most people talking to me. I can play the coolest music, post the coolest pictures of myself and talk about me all day. What’s better than that?
Now all we need is a cyberProm. I wonder if anyone will ask me to go?
the css I’ve found most helpful, has been:
.class {visibility: hidden;
display: none}
I’ve changed my layout a few times… I keep wavering, between supporting IE or just letting the stupid little child die. Right now, I am keeping the css really really simple…. oh, also; you can place the css tags in the general intrest section, it loads before “about me”
I saw a writ eup on your solution to the myspace issue in Print Magazine. Nice work and nice work! My friends and I teach web/graphic design and were just discussing this last week. Thanks for sharing your hard work.
-Ted
Love the code but I’m having problems with the text colour. I want to make it white but it doesn’t seem to work =(
http://www.myspace.com/jenniesaunders
Kinda crazy…I went on Nelly Furtado’s myspace page and she used your coding also. I can tell because your default template is still there. Check it for yourself:
http://www.myspace.com/nellyfurtado
Anyway, thanks so much for helping to create tasteful myspace pages :)
Hi all, just wondering if anyone could give me some advice on banners… I’d like to make one for my band that people could copy and paste the codes for into their own Myspace profiles, allowing THEIR friends to link to our profile…
Thanks in advance ;-)
Christopher
HOW CAN I ADD MORE THAN 4 songs to my band profile?
Indeed.
A fundamental change is MySpace default setup is what’s needed. And integration with existing market leaders in respective categories (Flickr, webmail accounts linked to the profile itself so that MySpace mail is not seperate from email, customization of other items, etc)
There’s lots of room for improvement.
I saw a writ eup on your solution to the myspace issue in Print Magazine. Nice work and nice work!
Love the code but I’m having problems with the text colour. I want to make it white but it doesn’t seem to work…
Just after I posted the above, I took stAllio’s suggestion, plugged that code in and it worked to fix the problem with my URL box.
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.
Mike,
Holy cow man, thank you so much, I’ve been looking for a way to hide my band page’s ugly reddish color myspace music navagation bar for a month, and your code with the header, hides it!
I just have to say, you’re amazing. I love you.. woah… I’m way too happy
Thanks for the awesome article. Hope to cruise through your example and see what i can pick up/learn… sucks self teaching ones self but it gets one by
inspirational
try to hack without footprints in the snow
You are absolutely brilliant and I applaud you for taking the time to attack this monster also known as Myspace. Your css files helped me immensely on my Myspace, so I’m not ashamed to have my name on it!
If you would take my word, as appreciative as many people are, I think it may be best for you to disallow comments on this post as the majority of people cannot read, nor do they bother to. The repeat of stupid questions is becoming sick.
Here’s a screenshot of the (more girly) layout I managed with your help.
You are by no doubt my new hero.
Your a coding expert…. Mike FTW !
Seriously though, thanks alot for your work on that one, been looking to spice up my myspace for while, but havent been bothered to figure out how i can edit everything…… Youve done all the hard work (most which i wouldnt have had a clue how to do)
Also, great writing really great blog post.
I really do appreciate you. It’s nice to see people who also get headaches from stuff like bad code. Much love, brother.
Great work…Although i didn’t use your layout. But i think your layout is one of the cleanest looking ones, (while still sticking to myspace rules/cross browser compatibility)….as well as one of the easiest to manipulate…..anyhow cheers man, it’s people that share information willingly, and take time out of their everyday lives to help others that makes the internet a great place…Take care ,
J.T.
on another note, this blog layout/design etc. is awesome the script to change the theme is nice!! also…you should add up xgl/compiz/’nux ,
and make it 11 things to be thankful for!
Thank you for wading through the morass of myspace code so I don’t have to. Here’s what I did with your css: http://www.myspace.com/jenburgess
Thanks again!
Here are a few examples of what I’ve been doing for friends and stuff:
myspace.com/18661232 (fun and colorful)
myspace.com/6561481 (promotional)
myspace.com/leoport (mine, div-overlay method, very experimental)
I’d love to hear what you guys think.
how could i upload more than 4 songs on my bands music myspace?
Leo
great work.
I love what you did here on this one myspace.com/6561481
Great tips thanks a ton
Thanks Shuki.
…it was a rough weekend for myspace. That “power-outage” ended up reverted profiles back to the default because, somehow, it removed most of the “Interests & Personality” entries/code in the profile (even Mike’s profile has reverted to myspace-default-layout-hell).
I think they are working on recovering the deleted info, but I went ahead and republished the code. So, now, the other two should show up.
Gawd. Now that MySpace is customizable, it has stole my soul.
Thanks a lot Mike ;-)
Leo
I was wondering about how the power outage would or did change some of the profiles. It seemed funnny that mike’s was the old default but now it makes sense.
Thanks for the framework to help make my MySpace profile so much better! Unfortunately I was doing alot of my editing during the period of MySpace downtime and lost some of my work. Nearly everything is back to normal now though, thanks to my browser’s cache. :(
Nevertheless, you rock.
BTW, I think MySpace is using ASP.net fully now, despite all of the ColdFusion-looking URLs. For example, I recieved the nefarious “Server Error in ‘/’ Application” all over the place during the recent downtime along with several error pages that reference files like “/Modules/Splash/Pages/Index.aspx” and so on. They just have some clever server-side magic to keep the old URLs around, AFAIK.
“Mike D. writes:
Carla: How unfortunate. Let me retrieve that for you. Look for a smallish wooden box, wrapped in purple velvet, on your doorstep tomorrow morning. Inside, you will find a parchment. Unwrap the parchment. On it you will see your password.
Lazaro: Unfortunately, I cannot help you. Perhaps you can use your sister Carla’s account instead?
# July 12, 2006 12:14 AM”
I almost spit my coffee on the monitor laughing so hard.
I think I love you.
P.S. How do I clean coffee off the monitor? ….. KIDDING!
well I think I read all the comments and I don’t think this has been addressed, but 400-some-odd replies tend to blend together after a while.
Is there a way to link the masthead image with the banner ad so it will stay centered when pages aren’t viewed in maximized windows?
You should create a gallery of Myspace sites that use your code!
I was reading the CSS file that is annotated with notes but I didn’t find the explainations very descriptive. Is there a different file available that more deeply parses the functions of each of modules?
Hey Mike…thank you so much for doing this site…I agreed with you on the simple default code, and have been trying for weeks to try to figure out how the heck to change this. It makes it hard for me since I am still in school learning web design/computer graphics, but I knew I wanted something different. I’ve figured how to add new tables to your profile and if anyone would like that code, I would be glad to give the info. Thanks again for taking on this amazingly difficult task. You’re a god in my eyes! And to anyone who wants to do something different to their profile.
They deleted my account. Somebody told me it was because I lied about how many friends I had. Whats the deal?
Hey Lisa, I would love to see that code! Does it let you choose which column it goes in? I’m trying to figure out how to move the “About me” section to below the contact table so maybe I’ll be able to figure it out with some good tasteful code.
Cheers
Thank you so much!!! I recently set up my MySpace account and had seen what others had done with their sites and so figured that the site must be fairly easy to change…. heh. When I saw the source code my eyes about popped outa my head and rolled into the corner to cry. I only found your article in my last search before digging into it myself (and I wouldn’t have done nearly as good a job as you have finding all the little nuances). I’m off to work at it! :-D
Michael…..
Just email me @ rogue2299@yahoo.com. The code does let you place the table wherever you would like (in the interest section, about me section, etc.), however I have been looking for a way to put it on the bottom underneath companies….if you have an idea on how to do this…please let me know…the extra table does look very nice, and you can of course change your properties the way you want it too.
Lisa
Good job. :]
You are-Da-Man….With da-master plan.
Nicely done thanks
1st to Leo, you have a very clean page, atleast when I look at it in firefox. I dont even bother with ie. I will end up having a pop up box telling people to download firefox or die.
Secondly to everybody, Hi how ya doin. Just thought I would say Hi, hows the weather. Ok now I am just being a smart pumpkin.
– Just wanted to say though I have never asked for any help, you have a lot of cool stuff to read on this comments blog, and while I would be smart to keep this to myself. Mike you should make this comment blog alone into a book. It would be a new york times best seller. Let it go for like 200 more comments, and publish it. Anyway nice seeing you all again, I figured I would post because I have been gone for a while. Have fun all.
This WHOLE blog was greatly enjoyable to read.
I find that many blogs drop off at the first paragraph or so.
Your tactics of wrestling with myspace’s many faults just to attempt an aesthetically pleasing page is extremely relatable.
I found myself fumbling for excuses when my parents asked what was causing all the ‘teehee’ing from the library.
No, mom and dad, I’m not talking to a pedophile.
Laura
MySpace – the bane of my online existence. Well done with the hack. As a designer, there was really only one way to go in my mind – make the myspace page completely overwhelmed with multiple animated .gifs and overlapping audio files. And yet, I’ve been unable to pull this off yet.
At least now I’ll be able to ditch that option.
I found you in PRINT Mag. by the way.
I thought this would apply greatly to this man. While Mike may not go down in any history books, he has inspired a portion of the myspace generation.
In this words of Dwight D. Eisenhower
“Leadership: The art of getting someone else to do something you want done because he wants to do it.”
Keep doing it guy, because while there are many people that will do this. There will also be people that try different avenues. Keep in mind the smarter of the myspace world is in your hands. Change the world, myspace isnt neccesarily your means, but it is an avenue to that means. Take social connectivity, take the love of art, take the love of people wanting to be completely and totally connected with no bounds to a place where it needs to be. With no boundaries and no sense of circumstance. I want to see you be the man, the one that makes a difference in how people think about being civalized.
Or I am overthinking it, and you should just rock on.
BAM. and easy to implement (lunchbreak about half hour total), trying to get pics together and dealing with an issue from my host). will get home and waste even more time tweaking it.
# to you, maybe we’ll meet one day.
I took the simple DIV overlay method and modified it a little bit more.
Let me know what you guys think.
Well kyle, other than the fact that the people you adore look like a bunch of freaks when they get in bed. (That is not a bad thing.) I think you used a whole lot of great ideas. Superb, Yes Indeed, Superb.
Is anybody else getting an error during the unpacking on MAC OS X Tiger? I even tried in the terminal with no luck.
I just wanted to download again to make a new profile page! Thanks Mike for this.
I have no experience with web design, but I am starting school for it this fall, and I have been teaching myself as much as possible. I did my best with this layout, and it is definately still in progress, but if anyone could give me some input, I would appreciate your opinion.
Here is the site I have been working on since I read this:
http://www.myspace.com/shawnalynn6284
And here is my page I had before I read this:
http://www.myspace.com/shawnalynnrocks
Thanks!!
i’m just wondering how to make my commments go underneith my “who i’d like to meet.” pan all the way to each side of my profile.
Thanks
Gavin
Mike…just a quick note to say thanks. You have made our page on myspace pretty…well, maybe pretty isn’t the right word…maybe cool. :-) Anyway, hope has been brought-en.
http://www.myspace.com/splinterwear
Also, limiting the size of comment pics in the code also helped keep it from getting squirrely when someone decides to put a ginormous pic of themselves in spandex singing into a microphone.
Thanks again…
Cheers,
Josh
Thank you so much for the excellent tutorial. Keep doing what you’re doing. It’s appreciated.
Hi Mike,
Just wanted to echo what everyone else is saying here: Thanks for this brilliant framework! I hadn’t given myspace a second thought because I just hadn’t seen any good looking pages, but after I read this blog, I HAD to make one myself. After a fair amount of tweakage, I’ve arrived here:
http://www.myspace.com/linesandwaves
Thanks for your help, and i will definitely be spreading the word!
Take a look at my URL. THis isn’t my default profile, but something I designed. I happened to read this and realized how long ago it must have been written.
@cody
ohh lookie there, another div overlay. This is not a div overlay scene dude. and get rid of that crappy itunes theme. j/k……..well not really.
Hey gilbert, while I understand your frustration with people using overlays- thats another option for designing ones page. If he wants to show off his work, let him. It myspace, not brain surgery.
Ill put it this way, by you saying that about overlays your acting like myspace. Like them setting these god awful coding rules that we have to follow to pull a nugget of beauty out of a page. I thought when I started posting on here, that the people were about throwing myspace’s rules in their face.
I use overlays sometimes, and css customization other times. I think both are sound options. I personally like combining the two. But if you walked into everybodies house, and every house looked exactly the same, or just a derivative of the same design, wouldnt that get a bit annoying- just a thought.
Forgive me, it was just one of my drunken rants. But i wasnt kidding about the itunes theme
stop ripping yourself off with itunes. Try http://www.ALLOFMP3.com
Fantastic piece of work Mike! Many thanks.
It seems there was an alignment issue with the header that was fixed, however I’m having exactly the same problem as Nick mentioned on # June 20, 2006 09:06 AM, as follows…
Has anybody else expereicned this too?
Mike – thank you so much. You have taken the leg work out of what was going to be a daunting and rather unpleasant job.
I added you on MySpace.
Gilbert, anything mac doesnt sit right with me, so I totally understand. I prefer limewire, LOL. Drunken rants can produce great results, such as novels, scientific experiments that include keys & kites, myspace layouts made out of pure div codes, the bible, and so on.
Since the title of this article does have the word hack in it, I have an idea that would fix all of the problems with web design. Is there a worm we could design that would obliterate all traces of Internet Explorer, and silently install firefox on all computers worldwide without hurting peoples computers? Its an idea, and we have alot of minds here to pull it off.
Thanks so much for the work you did! Like many others here, I once tried to reverse-engineer the Myspace DOM but gave up. This let me clean up my profile a lot. :)
http://www.myspace.com/nicwaller
hey mike,
you rule on a million different levels for coding all of this, it is awesome!
i am using your code and trying to edit it to customize it for myself, but i have one problem…
i know i will get banned or deleted i guess for posting this, but it’s driving me nuts, so im gonna post it anyway.
the “contactable section” table is slightly less wide than the rest of the tables above and below it. does anyone here know the fix to it?
I have read almost every comment here and looked at almost every example other people have done, and it seems all of theirs are exactly even.
I haven’t seen any questions about this either, so im sending out an sos (cue the police)
sorry for being a lame jackass, its just driving me nuts.
thanks much and again, great job on doing this mike, it’s making alot of web alot etter looking!
nevermind, padding.
thanks for not deleting my comment.
you rule!
Wow, I’ve been trying to do this for weeks. Good job and very in-depth!
Oh! Thank you, thank you! I wanted to figure this stuff out, and I knew it would be a huge hassle. I can’t wait to play with your hacks and come up with a myspace page that doesn’t make my eyes bleed.
Thank you for making this easier – I had actually set out to do this all myself. What a task that was going to be, I see now!
PS: ♥
Mike, you are a legend! You have helped me turn an ugly as sin page into a pretty one – you are a diamond sir…
http://www.myspace.com/jamspazz
Marvellous.
I hope you get lots of business from this work you did – really very cool.
Well done!
Cheers dude I’m in pain… I’m laughing so much this is supa!
I just wanted to write and say thanks. I hate the canned myspace formats and now have been able to branch out and “find myspace.”
http://www.myspace.com/94632225
I love the funny comments you have written in response. The instructions at the top of this page along with the css files were very easy to follow and i had a good laugh at the same time as improving myspace. The hack about the daft giant pictures is the best.
I thought blogs were lame until I read this post. Well done and I like how you put myspace in such a good perspective. Its huge, they did more than a few things right .. unfortunately not with css.
My space is still lame .. but its getting there.
Oh btw – you might want to edit your post, myspace has grown from 50 million users to at the very least, 118 billion. It must be true, I read it on your myspace. lol.
pura vida de costa rica.
Hi! Just wanted to say thanks for the CSS for my space. I changed it a bit putting in my graphics and it came out super!! You are so right about how bad myspace themes usually are! I really don’t care much for myspace (which is why i made the space for my dog instead of for me – just wanted to try out your css!). Anyway thanks again. Oh you can see the result here: http://www.myspace.com/102564440
Thanks for the valuable info. I only dabble in web development and your guide saved me a lot of research time. I still haven’t found time completely cleaned my own profile up, but knowing how to do so is the key. Now, do I really want to do a DIV or not? ;)
You know what’s crazy? I spent all of yesterday adapting Mike’s awesome CSS code to our movie’s MySpace.
It looks perfect in Safari and IE, but is all messed up in Firefox! That doesn’t make any sense.
http://www.myspace.com/reddoors
Any one have any thoughts?
Michael, mine is just the opposite…mine looks great in safari and firefox, but IE is messed up. LOL..just the different servers. You can take one website on firefox, and compare it to IE and notice all the little differences. I’m not sure why that is, but it is weird.
Lisa,
Isn’t that the funniest thing. I could care less about IE, and would prefer that the Fox crowd demo be checking out our page.
It’s so goofy seeing as how everyone else posting here has had great FF results.
The hilarity of the internetz!
Great tutorial; I hope I have a chance to play around with it sometime soon. Hope I can figure out how to make my corresponding blog there look nice, too.
Hey Mike, I just wanted to thank you for taking the time to create this tutorial. And you’re halarious, so the whole time I was reading , I was lmao. Anyways, thx again and be safe. :)
In case you feel like seeing what I’ve done w/ my page, here’s the link:
http://www.myspace.com/webqueen
—Natasha
The Question of the ages is “WHY MYSPACE?”
It’s simple really, myspace is ..a cell phone…
Think about it…
It is a cell phone.. BUT it’s the Ultimate cell phone, customization, free, communication.
Anything you are interested in is there. You can join any club you want.
As far as pedophiles are concerned… they are everywhere. Some people are dumbasses…
I’m not just talking about the kids, but thier parents too..
Hello!!! …check your kids….
It’s not Myspace that gets them…it’s the fact that the parents don’t check and see what’s going on.
Now I saw that and know what I’m talking about because I have 6 kids. I built their pages. I can check them whenever I want.
Why…because I never set the presedent that childen are intitled to privacy… Sounds messed up to young people, but look at it this way. It’s my job to make sure my children are safe. period. that is what I do. They get messages, I rarely read them. Very rarely, well the older kids anyway… I keep track of where they go and who they are with. Yea I know kids lie.. So do I, but like I said I’m doing my job… so far my kids are safe. That is not myspace’c responceability. If something happens it’s not on the company. It’s on us… All of us…
Myspace is fun…it really is… can’t sleep? get on line and talk to someone in the Uk or Japan…
Need advice? Drop a bulletin
Want to learn something new?… It’s on there just ask.
I see alot of bashing about my space.
I say this about it… I’m not going to bash your opinion. Your intitled..
But I’ll tell you like I tell the rest of the worldwide cencorship…
~Don’t turn on the song, or the movie. Don’t read the book or go to the web page.~
Follow that simple piece of advice, and then it’s not your problem.
~H
Ps..Yea I know I can’t spell worth crap.. got a LD…
Great tutorial, got me started on my way to something at least decent looking. I used a commentors masthead div trick to get that working, but the contact table does the same. Styles on Mikes source look good, but pasting the code in does nothing to make the image appear.
Mike, in a word, THANKS! Like many others I tried this myself, but wow, you did a much better job. Within minutes of creating the images I needed, I had a respectable MySpace profile design (at least I think it’s respectable).
I finally finshed with my page on MySpace…
http://www.myspace.com/corrina5
I haven’t seen it through IE yet but after reading these comments, I’m a little scared!
As for the problem with people posting huge photos and what not in the comment area- I completely disabled HTML in my comments so they are not able to put anything but text there. Problem solved. :-)
Thanks again for going through the work the rest of us really didn’t want to- and for figuring out things we never would have. Well, most of us wouldn’t have.
Thanks Mike, the example file was a great help.
Hey can I get some help on my myspa…
Just kidding! Awesome article. Forgive me, though, I’m CSS illiterate. I mean, like a drunk golfer, I can hack the course on weekends, preferably in front of some old-timers who don’t move so fast, but I’m just one of those “Queer Eye for the Straight Site” kinda guys who dug Myspace for BOTH its garishness and the ability to market to bazillions of people at once.
Now you guys might rule the online world, but I rule the offline world, particularly bedrooms…that’s as much as I’ll explain but trust your overactive imaginations this one time. No, really, it’s ok this time.
Some of the bedrooms I’ve seen were a panapoly of lemon-lime, red, pink zig-zag up-down, posters socks and whatever else wasn’t tied down or at the bottom of the trash can that day. YET… YET… something about each has been, almost without exception, COZY. It’s not the site…it’s the PERSON that makes the site.
Now let’s not go to extremes here and say that even a cool person with an Elephant-Man site won’t make the site appealing, but c’mon, I’m talking about the reality of people coolly falling somewhere in between.
I thought your Mike site was awesome…crisp and clean and so orderly, just like the G-d of all right-wingers likes his world, right? But it made me feel that I couldnt sit on the couch and sprawl out like I like to for fear of muddying up the cushions.
Are ya gettin’ it yet?
I hope I’m wrong, but your article reminded me of guys who had all their pencils in a row and the moment they’d turn away, I’d push a pencil out of line at about a 10 degree angle. And “boom” went the dynamite! These guys just couldn’t deal with disorderly and did you know, if you whip out any book on “The Enneagram” and neatly thumb over to the section titled, “Type 1: The Perfectionist”, you’ll find that this person has a super-obsessive driving need to be perfect in order to be able to express his/her anger.
WOW! Say that again? This is gettin’ deep.
Well, there’ll be no quiz, just use what you can. I may be a messenger of [can’t say], but even He can’t save me from time’s jaws.
Ok, enough silliness. Your article was thoroughly enjoyable. I originally came here seeking a way to make the “Extended Network” section CLICKABLE. I thought it would entail the usual entering of the generator codes for a background of choice, but then putting some kind of totally transparent image over it that a href’d to a site of my choice.
Still don’t know how, but I heard you loudly and clearly and I don’t dare ask for help. Not one iota. I will not ask for help on how to make the Extended Network box area linkable. BUT, if you happen to send me an answer anyways, I promise not to rub the hypocrisy in your face. We’ll just call it something simple like “a change of heart.”
(but that is not a request!)
;-) Bye again, and thanks!
Sam
ps. “Posted by” link at bottom of comment page is missing space tween name and “on”…
Very, very nice. I’ve seen firsthand that Tom (or whoever he hired) sucks at coding HTML and CSS, but you’ve provided us with hope that it is hackable. Thanks for all your info!
You are awesome! I still need to tweek my layout, but I’ve enjoyed browsing all the nice looking layouts that people have done based on your template! I want to friend them all! (although, why should I? I already have 40 Billion friends! )
I’m no frickin genius (what movie is that from?) but I agree that the generic MySpace layout blows hard. I’ve made weak attempts at trying to redo mine and at least take out some of the crap I don’t like. I self-taught myself HTML back in the day (throught the marvels of “Cut-and-paste” and “View Page Source”) but I don’t think I’m up to learning too much about this CSS stuff (though I certainly have the interest).
I’ll have to try your code out on another profile and see what I can learn from it. Thanks for posting it!
Sweet I was post 500! And I put the wrong URL in for myself. What a ‘tard I am.
Here’s just another one who want’s to say thanks for this CSS file. Without having known anything about HTML or CSS one week ago I’ve now managed to create quite a decent profile page. Would never have been possible for me without this blog…
Just another random person what wants to say thanks for taking the time to do this! I started down this path once, and was shocked and appalled at the code I encounted. I lost interest and forgot about it, so glad you didn’t.
Thanks Mike, great code. I’m no whiz at css, but I worked it in about 30 mins without ANY problems. Still trying to get it to work for the Music pages, but that’s what experimentation is for.
Then I decided to read all of the posts. I plodded through all 503 posts in an all nighter. Good lord people are stupid:
Password requests, how to hide ads, how to upload more than four songs, how to make animated gifs, what’s a pixel, do you know who my real mommy is…
Classic.
I absolutely hated the extended network banner, and like you I noticed that everyone else was on my extended network–no point having that there. However, the CSS code you provided gave it a little kick. I just put it into my profile, a friend checking out my page has just seen it and is already asking how I did that. All that credit is yours, and so is my thanks. So… Thanks!!!
This is the first CSS tutorial that I laughed repeatedly at. Thanks for the enlightnment and CSS reference!
Hey,
Nice one, the best part is the time it saves you trying to guess all the CSS tags used! Thanks.
Wow! Great Guide!!!
Time to rip my MySpace up!! :D
Wow, thank you so much for your tutorial! It is amazing that you took the time to figure out which of their elements did what. Thanks for doing all the hard work for us!
Um.. yea, your myspace page doesn’t look anywhere NEAR as good as someone with a DIV overlay, or someone with a Flash profile.
(which is possible despite myspace’s attempt to filter flash links, simply place a clear div at a higher z index with the link embeded over the flash)
So while I appreciate your effort to explain many customizing options, there are MANY VERY NICE profiles out there on myspace
Don’t judge all of myspace profiles by the idiots that you’ve seen… I mean how many idiots do you see daily in RL? Does that mean everyone is an idiot?
Thanks to myspace being so easy to use, even an idiot that barely functions in RL can have a myspace page
To: ParentalAdvisoryGirl
Before striking down the obviously clean and simplistic layout mike and his team have created, you should have a look at our own page.
So while it is true that there are nice profiles on MySpace, Mike’s being one of them, YOURS is very clearly not. Here’s a few hints:
Research: Compression and graphical artifacts
Reaserch: Proper transparency usage
Look up some color theory. Pink+Black != appealing
The whole fake counter wasn’t funny 10 years ago and it’s not now.
Most of your group links…don’t work.
There’s plenty more I could say about your particular page, but bottom line is that you are in NO place to criticize.
My apologies, I mean to say YOUR own page, not our own.
To Jedi:
Hon, she did not say her page is great. She said that there are a few other nice looking designs out there. I’ve seen several too.
It’s just that Mike’s design is the most functional out of them all.
Jedi –
You are RIGHT ON!!! I couldn’t have said it better. Since following this thread I have looked at every myspace page that was posted using some variation of Mike’s css. And most were so very much better than the standard pimped layouts. But this pink/black thing … tsk tsk tsk … ok well you said it much better than I could, Jedi (Flower says “if you can’t say something nice don’t say nuffin at all” ). Anyway I think Mike’s css is great and I learned a lot from it (and I wasn’t really in the market for learning LOL) so I’m very thankful!!
Keep it up Mike! and Jedi, tell us how you really feel hehehehe :)
Jan (for mazin – the high maintenance porkie-yorkie)
http://www.myspace.com/102564440
(why oh why does my dog have a myspace???)
don’t delete this!..your so awsome! tell me how to change my name..i’ma blonde :(
Brilliant – a quick and elegant makeover (found your article via MetaFilter). Many many thanks!
Just wanted to say thanks for this. Without this, I’m positive I would have spent days trying to wrangle myspace into something decent and eventually failed. See, I don’t know css, and I’m not good at code of any kind. Thankfully, I came upon this article, and now I was finally able to focus on the photoshop end of things, get the look I wanted and you know the rest of the story.
Either way, here’s the end result: thanks for the help. You rock:
http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=282118
I’LL DO MY BEST TO PERSONALIZE WHAT YOU HAVE PROVIDED. I HATE TO PLAGIARIZE, BUT IT WAS JUST WHAT I WAS LOOKING FOR! THANKS SO MUCH.
PEACE!
TOFER
Hi Mike, just like many others I wanted to say a big thank you for doing such a great job and then sharing the wealth with everyone else. Before I found your article I going mad battling with CSS trying to keep everything tidy and aligned :)
Just wanted to add to that I also had problems with the .masthead code and my banner not showing up straight away. I couldn’t find anyone else that had posted a resolution when they’d had the problem so I thought I’d share what I found – namely that it was complete user error! :) I had cut and pasted the code from Mike’s HTML rather than downloading the zip file. I consequently missed the vital extra DIV entry which needs to inserted at the beginning of the code in the About Me box. Doh! If you download Mike’s zip file you won’t have this problem because it’s all in there!
cheers,
Alex
Thanks so much for a HUGE leg up to those of us who dont know enough to start from scratch on our own.
I understand that we can’t post for help with this css , but is there a forum or a link/email where we can post questions? b/c this isn’t easy
OMG, that was simple, turns out that when I click on “preview page” it looks completely different. I just have to save changes so i can an accurate way on whats the page going to look like
Hi Mr. Mike,
I just wanted to thank you for the great tutorial. I modified it a bit for myself, and just thought you might like to know that I was able to change the “extended network” to fit in with your format. (thought this may not really be considered a big accomplishment anymore) I think I may have found a way to make it clickable, and if it works out I’ll let you know. In the meantime, it’s at http://www.myspace.com/peonproductions.
To my dearest Jedi..
As was pointed out, I in no way implied MY site was all that fantastic. In fact in my about me (which you obviously looked at since you checked my group links) I clearly state that I am a beginner at DIV overlays and in no way a pro-coder or designer.
However, I am LEARNING from people with fantastic layouts..
I am sorry you don’t like my page, but as it the 2nd DIV overlay I have done so far I can see my own improvement and am happy with my current page at this current time.
I’m glad that you felt the need to rip apart my profile tho… just makes me all warm and tingly inside.
Thank you tho for pointing that out about my group links, I had not noticed that and apparently none of my friends had either…
It came from coding the profile in word and copying and pasting the code into myspace..
For some reason it turned my ” into unknown characters…
That was however your only constructive critism..
Pink and Black, happen to be my favorite colors, and as NO ONE has the same taste.. we will have to agree to disagree on that…
And if I compressed my image anymore I wouldn’t have kept the sharp angles on the vector of the bar.
I need to learn image slicing, but I didn’t think I was quite ready for that yet, so I will be trying it on my next DIV…
I am LEARNING…
My only point was that all Mike managaed to do was change some colors… he is still using the default myspace layout… making his page more palatable but still UNORIGINAL
I was in no way attacking your fearless leader.. I was only pointing out that what he has provided here is BASIC!!!!
And that his judgement of the myspace world was short sited and unkind to those who have OUTSTANDING pages…
I could provide you link after link of pages that I aspire to eventually be able to design as well as, but that seems pretty pointless.
As I have now fixed my group links why don’t you visit DIV space…
ParentalAdvisoryGirl: As others have pointed out, you’re somehow missing the point entirely.
At the risk of starting a flame war, PA Girl, you began tearing apart Mike’s page without having an ounce of design experience. I was pointing out that you have no right to criticize without demonstrating any expertise on the subject. Sure, everyone has their own opinion, but there are certain design standards and practices that developers adhere to. Mike didn’t set out to re-order and redesign the myspace layout. He very specifically went to edit the EXISTING css stylsheet to change backgrounds, text colors, borders, etc…
You, however, chose to metaphorically cover up the mess with a div instead of making the existing code look better. The brilliance of mySpace is that it gives users this kind of flexibility. Unfortunately, it’s also its downfall. The fact is that a good developer, familiar with programming and design, has little reason to use mySpace, leaving most mySpace users at best, novices.
Even the back-end was created by amateurs who had no right in creating a web page, let alone a social networking site. The ColdFusion is sub-par, customer service is non-existant and their user policies are rarely enforced, but I digress.
Back to the subject at hand. You’ve compressed your images too much. You have artifacts around your text, making it difficult to read. Your favorite foods might be Asparagus and Vanilla ice cream, but that does not mean you should be serving them together (i.e. Pink and Black). Mike wasn’t out to do anything original, except to decipher the craptastic CSS used by the system. To clarify, Mike isn’t my ‘fearless leader’ but his work at cracking said code is certainly admirable and you seem to be the only person who hasn’t either tried to put it to use or at least appreciate the effort.
All sarcasm aside, it’s good that you want to learn, but criticism from an unexperienced user is not going to result in happy comments. Here’s a few more tips for you:
When you post your opinion, you have to expect a difference of opinion and linking to your page is going to lead to people visiting and expressing their own opinion. I’m really not a bad guy, but nothing rubs me the wrong way more than when someone blabbers on about a topic they know nothing of, to the point of berating those that do.
Mike, have you been following this at all? lol!
I would like to point out that you can also use RGB numbers for colors.
Such as color: rgb(48, 51, 28)
I use topstyle for my css and html so its fairly easy to do. Currently I am using a div layout for myspace. I think I am gonna have to try this one since its a pain to constantly manually update the page.
http://www.myspace.com/waxingartistic
I love you
yo yo yo! what is goin on peeps!
just stoping bye to show some luv
how can i hack into my boyfriend myspace accout! please help me please…help me out my email is…………..sowetandready@{hidden}
how can i hack into my boyfriend myspace accout! please help me please…help me out my email is…………..sowetandready@{hidden}
how can i hack into my boyfriend myspace accout! please help me please…help me out my email is…………..sowetandready@{hidden}
Dear tisha,
Asking three times isn’t going to fix the situation any faster. I know your love life is frustrating right now, but trust me, when your boyfriend gets his driver’s license in a couple of years, things are going to get even worse. Hacking into his MySpace account is only a temporary fix. I recommend kicking him to the curb instead and finding yourself a boy who is ready for someone as “sowetandready” as yourself.
Things to look for:
1. If he opens the door for you, he was probably raised with a proper respect for girls.
2. Never underestimate the importance of good penmanship. Make sure his cursive looks nice and he uses a #2 pencil in class.
3. Does his lunch pail contain milk or boxed juice? Milk is essential for the growing of healthy bones and the last thing you want as you move together into your golden years is for osteoporosis (sorry about the big word) to limit your active lives together.
Anyway, those are my words of advice. Best of luck and don’t forget to drink that milk. That’s one to grow on…
You should start a group, a self-help group (but … um… yanno the ‘selves’ in the ‘group’ of the self-help group aren’t actually self-helping, but that’s a minor technicality) for those with myspace problems, both technical AND bf (or bff… myspace decoder ring says bf=boyfriend while bff=best friend 4evah).
Everyone can stand up (or *cyber stand up*) and say, “hi, my name’s ____, and i’m a myspace-aholic” or whatever droll thing they like “i can’t get coldplay’s song to play so my ex-biaotch knows she hurted me bad” or whatever OTHER droll thing.
Oh… wait… I’m dangerously close to being one of those people (i.e. “hi, my name’s sue, and i’m enjoying feeling mildly superior to myspace geeks”… argh low bar!
Anyhooooooo… still laughing after all these comments… and the TRULY sad and amusing thing is… I’ll keep returning every 100 comments or so to giggle.
Keep on rocking the myspace free world!
Your wit and cleverness crack me up! “MIMSIR” and “L33T d00dz” had me rolling. Thanks for the laughs!
this website is full of shit fuck you mike i thought you was a real person that could help me out!!!! so fuck you!!!!!
FUCK YOU MIKE
U
C
K
Y
O
U
M
I
K
E
That’s very creative TISHA! I like how you did the letters all vertically and stuff! Very kewl!
You no wuht wood be the bomb? If every line made up like a word to a poem or sumthing. I’m thinking sumthing like this:
Frustrated
Unstable
Children
Keep
Yelling
Ostentatiously:
“Underaged
MySpace
Imbeciles
Know
Everything.”
Wow — I just started trying to work over my myspace page this week, and after wading through about 100 sites of “MySpace codes” that were all the same stuff copied by a gazillion opportunists, it was refreshing to read intelligent, original commentary and wisdom on such a pervasive phenomenon as MySpace profile enhancement. My page (http://www.myspace.com/LGBTees) is thus far the beneficiary of one of the MySpace layout generators plus original graphics, but this article gives me a big leg up on tweaking and embellishing that code! Thanks tons!
I agree wholey wih your comment about disliking Myspace due to it’s uglyness. I’ve never been a huge fan but I have one because a few people I know are on it.
Anyway, I found your tutorial interesting and I hope to use it as a basis for my employer’s new Myspace layout. With all new graphics of course.
I WAS going to ask for help from any of the readers (not you Mike)….but based on your note in the comments…. decided NOT! Thank you for your code. For a newbie it was challenging figuring out what was what and what did what. Basically happy with my end result. Anyone reading this who would like to know what my problem is … please message me @ myspace and you have my sincerest thanks too.
Thanks again Mike. I’m happier with what I now have than what I did have.
With due respect to Mike’s wishes of NOT converting this into a MYSPACE tech support board IS there anywhere else on the web where people can discuss his CSS tweaks???
Thanks in advance.
http://www.myspace.com/kilabeat
Thanks christine and DJ. It’s not even that I mind people talking about CSS and hacks and what not. Talk away. It’s more just the mindless “Dood, iz there any way I kan hide the ad?” or “can you hack into my akount” or “how doo I chanj the red colored text to black?” I get SO many of those messages on here and every time someone leaves a comment, I get e-mailed.
Wow. Talk abot a detailed post. Thank you very much for this. This explained the nesting of styles pretty well for me.
Great work Mike D!
I modified your hack that limits the sizes of images in the comments section so that it will work with music myspace accounts.
/* Limit the width of pictures in FRIENDS COMMENTS (and FRIENDS SPACE) */
/* Non-CSS2 compliant browsers */
table td.text table table table table a img {width:90px !important;} /* pix in friend space */
table td.text table table img {width:75px !important;} /* pix in friend comments */
/* CSS2 compliant browsers */
table td.text table table table table td[width=”25%”] a img {width:90px !important;} /* pix in friend space */
table td.text table table td[width=”150″] a img {width:75px !important;} /* pix in friend comments – left side */
table td.text table table td[width=”260″] img {width:260px !important;} /* pix in friend comments – right side */
NOTES (for the geeks):
(1) Rather than categorize browsers as IE and non-IE types, I prefer to categorize browsers as those that are CSS2-compliant and those that are not. The method of placing non-compliant code in blocks may not work as intended for three reasons:
(a) Some browsers such as Opera identify themselves as IE and will act on blocks although they are in fact capable of executing CSS2 code.
(b) Likewise, I understand that IE7 beta is CSS2 compliant, but since it is IE it will execute blocks.
(c) Some browsers need instead of and (that is, downlevel-hidden vs. downlevel-revealed comments). Unfortunately, myspace.com strips or alters these comment-like constructions.
(2) As a lucky side effect (rare for myspace.com!) of the non-compliant code, code must be written for the compliant browsers to differentiate between the pictures on the left side of the comment box and those on the right side. You can specify different sizes for both. Since the pictures on the right side are not always inside of a link, you will note the absence of the “a” selectors in the CSS code.
(3) An unlucky side effect of the non-compliant code is that the max-width declaration cannot be used in the compliant section. A fixed width must be used instead. This will stretch small pictures as well as shrinking the large ones. I chose 260 pixels since that is the intended width of the table cell.
MY BAD!!!
In my previous post I forgot to check that the angle brackets appeared properly, ie, <![if IE]> and <![endif]>
Great work Mike D!
I modified your hack that limits the sizes of images in the comments section so that it will work with music myspace accounts.
/* Limit the width of pictures in FRIENDS COMMENTS (and FRIENDS SPACE) */
/* Non-CSS2 compliant browsers */
table td.text table table table table a img {width:90px !important;} /* pix in friend space */
table td.text table table img {width:75px !important;} /* pix in friend comments */
/* CSS2 compliant browsers */
table td.text table table table table td[width=”25%”] a img {width:90px !important;} /* pix in friend space */
table td.text table table td[width=”150″] a img {width:75px !important;} /* pix in friend comments – left side */
table td.text table table td[width=”260″] img {width:260px !important;} /* pix in friend comments – right side */
NOTES (for the geeks):
(1) Rather than categorize browsers as IE and non-IE types, I prefer to categorize browsers as those that are CSS2-compliant and those that are not. The method of placing non-compliant code in <![if IE]> <![endif]> blocks may not work as intended for three reasons:
(a) Some browsers such as Opera identify themselves as IE and will act on <![if IE]> <![endif]> blocks although they are in fact capable of executing CSS2 code.
(b) Likewise, I understand that IE7 beta is CSS2 compliant, but since it is IE it will execute <![if IE]> <![endif]> blocks.
(c) Some browsers need <!–![if IE]> and <![endif]–> instead of <![if IE]> and <![endif]> (that is, downlevel-hidden vs. downlevel-revealed comments). Unfortunately, myspace.com strips or alters these comment-like constructions.
(2) As a lucky side effect (rare for myspace.com!) of the non-compliant code, code must be written for the compliant browsers to differentiate between the pictures on the left side of the comment box and those on the right side. You can specify different sizes for both. Since the pictures on the right side are not always inside of a link, you will note the absence of the “a” selectors in the CSS code.
(3) An unlucky side effect of the non-compliant code is that the max-width declaration cannot be used in the compliant section. A fixed width must be used instead. This will stretch small pictures as well as shrinking the large ones. I chose 260 pixels since that is the intended width of the table cell.
Ok,
i read that u get alot of these comments but i REALLY need ur help. all my info and friends are on one profile for my myspace, except that my email that i used for myspace is old and theres no way to get into it if i forgot my password. i have eail myspace at least 15 times. and yet they will not give me the answer i wanted.
i wanted to know is there anyway i myself or u can hack into my account and change my password to dotted1????
hey man u may be very busy with all this stuff but someone decided to really fuck with me and now its just getting old plus this page i just gave u is really fucked and someone chose my name just because that person is a bitch
I’ve been fooling around with mine for a bit and decided ultimately I’d rather just have one big hot linked image and the comments. Anyway, nice work here. You have no idea how many profiles I see with the same style as this. Kudos.
i need help hacking a myspace BACKK.
someone got into a friends myspace, and they are doing very unruley thing on her myspace.
does anyone know how i can get it back!?
please e-mail me ASAP
im beggin you!
hey! thanks a lot for the css help! check out my band’s myspace for the results, I’m rather pleased with the outcome!! thanks again!! -keil
Thanks so much for the CSS tips on how to get my MySpace page looking halfway decent. :-)
You can see it at:
http://www.myspace.com/debbieohi
Thanks again!
Hey thanks for the layout! I used it for our company to clean up the page a bit, what a difference!
Check it out at http://www.myspace.com/dliveo
Thanks for the tips Mike. I have successfully done my personal page:
http://www.myspace.com/kd360
but when I tried to create a similar effect for a firends band on a band page it just will not work. Any thought guys and gals?
ok this has got nothing to do with that other place what i’m tryin to do is figure out how to pull pics off a digital cam that ive allready deletteed can this be done ive pulled them from the devise thinkin they were on my computer well there not any help wood be wonderful
i have a feeling i’m getting in over my head, but i like order & the tables in my layout REALLY irritate me by not lining up. that’s all i was trying to figure out how to do, but your layout looks so damn good i think i’m gonna start over with your code. just gotta get my colors right. wish me luck!
I can not remember my myspace password and its been a whole day with out me getting on it i will seriously go nuts if i cant figure out my password how can i get it back??
I can not remember my myspace password and its been a whole day with out me getting on it how can i get it back
You are A hero. A Few months ago I started a myspace for my band. But i Gave up on it quite quick because everything looked like Crap. With some minor mods to you file and Some new Textures Tittles and such I finaly got something i like. Thank you For Saving My Crap myspace.
Ok, technically, I’m asking for a code, not myspace help. What code do u add to make a space, the equivalent of enter, on ur profile?
So Wat, you are probably asking about either the
good luck.
OMFG I’m in your Extended Network!
I seriously took a minute to laugh at that. I love your sense of humor, thank you for improving teen society.
IMPORTANT: BEFORE YOU COMMENT — Realize that any comments asking for help on their MySpace layouts will be deleted immediately.
Thank you SOOOOOOOOO much for the download and the tips! Thanks also to those who have answered questions above; they helped me a ton as well.
I’ve used the modifications to spiff up my band Musicspace page:
http://www.myspace.com/urbantapestry
Debbie
The completist in me has to ask… in your delvings into the hellish underworld that is MySpace, did you discover whether it’s possible to apply the sorts of FrankenSpace improvements that have rendered your excellent demo visually palatable to the ‘My Pics’, ‘My Video’ etc pages? You may have decided ‘enough already’ by the time your main page rose from the slab… but the illusion is horribly shattered when the ‘blue goo’ returns on clicking to any of these subsections.
If anyone else is more familiar with how/where changes can be applied to these, pipe up (I’m guessing I’m not the only one with a musician client who has discovered the Awful Truth and wants in…)
I just want to know who was responsible for inserting a few non-breaking-spaces before some of the whitetext12’s because that is so annoying. You basically have no choice but to center those… or be annoyed. P.S. The comment preview below is awesome!
If I’ve learned anything from wading through 569 posts, it’s this:
Society as a whole looks awfully bleak if the children using MySpace ever grow up.
God forbid they learn how to use the alphabet to create words and then take those words to make sensible sentences. I can visualize future generations reverting to hieroglyphics as the means of the written language.
Mike and other contributors- Thanks for the knowledge. Great to see people actively doing things to make the world a prettier place.
Best,
Dave
I saw this some time back when there were not so many posts and I used it and it worked great. I was more less looking for a nice way to remove that stupid banner ad until I could get around to sawing the head off the guy who made the screaming little smiley faces that you hover over by mistake now & again in the middle of the night with the sound as loud as it can go. “BLAST”. anyway after a while of messing around I finally removed the banner ad thank god. So today I used your code with that code and some cover ups here & there and it looks pretty sweet. It dosen’t even look like a myspace page. Anyway, just wanted to thank you for the code & say maybe we can share notes sometime, I have come up with some stuff that works pretty nice with yours. I’ll send ya an add request & thanks again for writing this, your the man!
after reading the whole thing, all i can say is wow. ur damn right about that stupid css code they put on it. i mean its very hard to modify the codes simply because you have to guess what kind of combination would work on what part of the profile. i like your idea of rebuilding it. it certainly is a challenge but most people, especially teenagers, wouldn’t dare to try it unless they are highly skilled in css programing. by the way, your myspace profile looks awesome without the ads. thanks for the code, i’ll look into it in my spare times.
ps sorry i didnt want to include my email address and my url. couldnt leave it blank :(
For years I boycotted myspace, I really hated the layout so much that i ignored the power of myspace. But you gotta respect it… its so funny how people are so addicted to it.
As i got started to do my layout, i didnt understand how to customize it… anyways thanks for the tutorial….
I think the reason why people are so addicted to this site is because of the number of members. Now since there are over 100 million users (..not necessarily unique users..), you have the ability to search for friends and family, network with others sharing the same views, opinions, likes, dislikes and a whole array of other different things..Also adding the ability to personalize..through pre-made template or template that is made by that myspace user..it makes people feel “powerful”, and “..in control..” of their page. The fact that you can leave comments, rate, show pictures, add as a friend are other features that have added to MySpace’s success rate..for every one person that joins..five more people are waiting in line to join as well..hit f5 or whatever ‘refresh’ is on your browser and watch myspace jump hundreds, thousands of users in a second–crazy..
In the end there will be MySpace as a large player in the Internet Networking relm of the internet..but like everything else when competition arrises, the power changes hands if the competition has better features to offer..
Hey Mike. Well after ****ing around with DIV overlays for a while I decided to see what I could yield with your code. I have to say it is wonderful as usual. I still like div overlays but will keep my main page clean by using the base code you provided. Opera still has a hard time with the flash player I added. Also Internet Explorer is being stupid as usual, but alas I do not care. My page is meant for Firefox users which make up the more intelligent people on myspace or in web design in general.
I did some tweaking and cleaned up a few problems I had when I started with your code. I asked no questions, and looked at no tips if that makes anybody laugh. But I will say to everybody I love you all for being cool enough to care about what your page looks like.
I have had three additional offers for sex since I started using your code over what I usually get per month. So I endorse Mikes quality product. If you use Mikes design code you will get more sex. Love ya’ll, talk to you later.
For the most part the customization of MySpace layouts is played out now. The thing that’s really crap in MySpace is their damned blogging code, and no one is fixing that. It doesn’t have a calendar, you can’t subscribe to your own blog, and it doesn’t even have navigation tools worth a damn to go through your own entries. I think I might try to hack something out to fix that myself.
Just wanted to say thanks for the great code. It is and you are appreciated.
I admire what you were able to do with myspace. I came up with the following selector to control image sizes in the comment section:
td[width=”260″] img{
max-width:260px;
}
It works perfect in fire fox but for some reason not IE7 I was wondering if any one might have any idea why?
Much thanks to you, Mike! For allowing us the opportunity to do something good with our MySpace Sites. I was able to make a more tasteful memorial site for my sister and I owe it to your magnificent mind!
Thanks so much for the tutorial & code! I used it to beef up this (new) profile. The colors may be scary to some, but there are no polka dots, pinstripes, flaming skulls, rainbows, or glittery things. :)
My suspicion is that it goes something like this … they screwed it up by giving everyone Tom as a default friend, which of course joins the “real” friend networks of anyone that doesn’t bother removing him. So even if you ditch him, if just one person in your “real” network hasn’t, you’re still linked through them to him and by extension to everyone else, making it a complete waste of time.
Mike — this is WONDERFUL. Thank you so much!
I just wanted to say THANK YOU! for this blog. I have some middling skills with sylesheets and CSS and was about to try to disect what is going on so I could customize my page. Thankfully you did it already, and did a much better job than I would have.
The only thing I have noticed, and maybe I missed it, is the style for the text in comments and blog titles. I have changed all the colors and no matter what, those stay black. Eventually I will find it. ;)
Thanks again!
maynne myspace is the best n i hope u all get that in ur head…. u meet new people n everything…..n if u r stupid n decide to go to their house not knowin` who it is then thats ur fault…so kids who get raped from that shit …..r stupid dumb and retarded……n dass wussup….
Hello all, and espcially you Mike. I’m back to see if anyone has tweaked the MI MS code for the band pages. What line of css handles the default player on the MS band pages? I would love to move it around. Anyone have an answer on that?
Love and such – Lord Metal Afro
No useful comment, except a gratutious: THANK YOU! THANK YOU!
You saved me from design hell. Before I treated my Myspace page like an ignored property due for demolition due to it’s layout nastiness.
Thank you. That is all.
hey!
first of all and most importantly, thanks for very helpful tutorial on editing myspace!
i only read some of the comments so apologies if these were already covered:
– those with music accounts should offset the “header_myspace.jpg” banner some more as it sits on top of the music links bar, in “.masthead (…) top: 162px” replace 162 with big enough number.
( you can use wider/higher banner/background image or make them line up better vertically if you edit the values in the .masthead{} entry, and the offset of the rest of the page in “body table {margin-top:???px;}” )
– you can control the color/alignment/size of the text in “MySpace
“table table table td div {color:rrggbb;text-align: xxx;font-size: ?px;}”
— if you are using black/dark background, you can:
-change the color of text on the search-button
“input {background-color:transparent !important}” ->
“input {color:rrggbb; background-color:transparent !important}”
-change the color of text in the “Details” box:
“table table table td {color:rrggbb;}”
Does anyone have any idea on how to access the table html for the comments and for the friends, specifically the TD tags for each individual entry?
Wow – awesome – you should make myspace layouts that people can use with the html code already done. Because that is way too complicated for me.
Very nice- I too am a web designer and I’ve always believed that less is more. I recently got myself a myspace page and I’m horrified at the cacophony of a design they give you for your profile. I of course wanted to change it, but wasn’t sure how, leaving me to try one of these web generators which I don’t really trust…
But now I can make something much cleaner looking myself. Thank you!
you can see what i’ve accomplished with your code, it needs a bit of tweaking still. i am however quite pleased with the results, thanks :)
http://www.myspace.com/spacingham
I have implemented your layout here and it is very clean and nice – thanks Mike!
Cat Lovers Only!
Couldn’t have made my page quite the same if it wasn’t for a few of your pointers.
Thanks so much. Take a gander if you fancy.
myspace.com/davelapsley
wow i really respect what you have written, its so true, i cant stand the pre-made layouts full of christina agularia and britany spears or who ever it may be. everyone should make their own and have to be creative and origional, if only i knew how though.
but yeh what u have written is so true and inspiring.
Thank you. Thank you. Thank you. Hard to find amongst the crap of websites advertising myspace layouts but a real gem!
how do i hack into my girls my space???thanx
Hey man, excellent walkthrough! I’m so glad someone’s taken the time to get under the skin of all the horrible myspace code to make something a bit prettier. I’ll definitely be having a tinker with this on my own space. Thanks :)
i wants to see my lady web page what do i do it pivt garcia-mose@sbcglobal.net
Excellent article, however, in your article, you sorta diss the concept of the “overlay”. While it is true that it covers up the default structure, almost all of the same funtionality can be implemented into a sound design…
if not even more.
After all, myspace doesn’t validate with no customization at all, why not make it look as good as possible?
For your viewing pleasure and critiques, here are a few designs I’ve done.
http://www.myspace.com/c_guth – me
http://www.myspace.com/g4gina – wife
http://www.myspace.com/hackyourmyspace – test account
Chris
Chris, yes, the overlay method offers massive potential… but even in your examples, most of the backend/dynamic content is not being shown and the info that is being displayed would probably require your assistance to update.
What Mike did was offer the potential for good design that integrates MySpace’s template/content/backend/whatever-we-are-calling-it updating. Not everyone is skilled in these here XHTMLs and teh CSS… So, using mike’s system, even Gina could update her page, add/remove friends, go from married to single (j/k), etc…
However, because you can offer the skills, yes, go for the overlay method! But for others, Mike’s way is teh_hawtness.
(but I understand… you wanted to post and show off your work–which rocks, btw)
Problem with header jpg:
I tried to implement this code today and make my own colours etc of this cool design. Everything displays wonderfully except for the header jpg image which doesnt display at all.
After screwing around with the code below for a good 60minutes, i realised that maybe myspace has recently disallowed this code? I viewed the source of my space and it was in there – however no image displayed. it wasnt hidden behind the ad (i replaced the image link with a 1600×1200 background photo to check) it wasnt anywhere!
Proof: http://www.myspace.com/115598426
Code:
.masthead {
width: 850px;
height: 100px;
position: absolute;
margin-left: -425px;
left: 50%;
top: 162px;
background-image: url(http://img108.imageshack.us/img108/2573/headermyspacegl8.jpg);
}
body table {
margin-top:104px;
}
Has myspace taken this out?!
You’re right, in my examples the majority of the content IS static, by my choice. (mainly because then people would steal my designed images and implement them into their own). By incorporating my stats/likes/etc into the images, they can’t really be stolen. In Version 1 of my myspace page, all of my text, friends, and info was completley updateable and scaleable. Too many people were stealing it so i took down all the images and had to re-design.
With that said, by using div’s in the layout these designs can easily be incorporated using easily updateable and scaleable text by anyone, linkable and updateable friends and custom friend images (www.myspace.com/hackyourmyspace uses this) and so much more. With the addition of the comments section, almost all of the main elements of the default myspace page and the things that make myspace great are accessible, updateable, and completely useful to any and all who want to make the most of thier page.
(thanks for the props on my work and many congrats to Mike for the hack)
Chris
Sean: did you insert the masthead division in your “about me” section?
<div class=”masthead”><span></span></div>
Chris: I don’t understand… your stats were being stolen? In v1, were they all updateable from the myspace backend? I’m not following your use of the terms updateable, linkable and scalable… Originally, I was referring to being able to log into myspace and use their forms and options to update your page. And as far as people stealing on the internet… it’s a noble fight, there is no way of getting around that ;-)
Thanks for the tips.
It sure looked good up until someone posted a HUGE graphic ;-0
anyone figure out any resize styles for the new video space feature?
I joined MySpace a week or two ago after increasing pressure from colleagues – colleagues whose abhorrent profile pages made me want to create an attractive profile if only to show them that it could indeed be done.
This article is what I had envisioned writing myself in the near future. Your profile is very well executed, the only bug to draw my immediate attention being that the footer links are chopped off on the left. Otherwise…. fabulous work.
Now, where’s the “give kudos” button?
-Hugh
Margo, if you’re still with us, I recommend that you remove the instances of “OMFG!” from your otherwise tasteful memorial profile.
Wrong to LOL.
ok, I am really dumb – exactly WHERE are these edits performed at? The only options I have seen are the text boxes to insert code into. Maybe I should just stick to massage therapy!
i love you like a father….thank you for sharing your experience by the way..
peace and love
godbless
iz
“And on the eighth day God created the graphic designer, and he confirmed by professional that it was good”
Probably the best Myspace-layout up to date:
http://www.myspace.com/bozzylicious
Mike,
Great stuff ! You are one of the few web designers I know who has had the patience to tackle myspace design.
Mike
Thanks a million.
— If you ever find yourself in cenetral NC – lunch is on me.
‘Brian
in response to the problems with the header…where do you put the code:
if you have a music profile is there is no “about me” section??
thanks!
sorry, my question about isn’t very clear –
Can you use the “masthead” or “header” with a myspace music profile? if so, where do you enter the code?
jeanette, there isn’t an “About <band_name>” section for music profiles? Regardless, just try it in any field.
There isn’t – there is a biography section so logically i tried it there to no avail. I have tried it several different ways, in different sections, but none seem to work. Has anyone tried this before or do you know or something I could try to make it work?
Hi there. Thank you for taking the time to write this article. Thank you for attempting to make myspace look less ugly and hopeless. I frequent your blog and enjoy your writing; you an extremely dynamic person.
Thanks!
Guided by this article: http://www.myspace.com/light_borne
You state that it is not possible to use shorthand for border styles, i.e., “border: 1px solid FF0000;” But I found it WILL work if you use the RGB function, a la “border: 1px solid RGB(FF,00,00);” Though I’ve only tested this in IE.
Hope this helps!
Thank you, I really found you story thrilling and if I learnt anything it is that CSS has no bearing on C++ or Java so your helpfully commented code is greatly appreciated.
I read it..got extremely confused! lol. Im sorry but my tiny little brain just couldnt handle the big words. :P Oh well! I think you did good work on figuring all this out. But i guess im off to go search google for something else to help me make myspace layouts. =/ Something with fewer words, and pictures! LOL
Sorry for the bother…just wanted to say good work on figuring this stuff out. I wish i knew how to make a layout! :)
thanks,
‘Somebody…’
This is great! Thanks for you help Mike.
Is there any way someone could figure out some hacks for band profiles like those guys on http://www.bandspaces.com did? It really seem incredible and I’m surprised no one has tried to tackle it down and release the code to the people.
My name is chelsea and something terribly has happend to me.
i was at a friends house oen day and i sudenly realized i had changed my password.
i dont know what i was thinking.
so i went to forgot my pasword.
but i couldnt remember my yahoo password eaither.
and i have been trying for months ways to hack, remember my pass anything to get back to myspace.
i have been so depressed!
see the biggest thing that worrys me is.
i met a friend there once, she had mentally problems and we connected.
sense i havnt been able to get into my myspace im afraid that she thinks i dont like her anymore.
she means the world to me, we can relate to anytthing and its breaking my heart that i cant talk to her anymore.
i have been crying. arguring, screaming.
and i realized that to me myspace is more then just a chatting place.
is a place where you can help.
i dont want to sound desparte but i am.
i was wondering if you could help me out with hacking or something.
my email is candygurrl34@hotmail.com
i will be waitting with anxiety and hope seeing if you message or comment me here.
i will love you and talk about you to everyone if you help me.
(Editor’s Note: Oh god.)
not asking for help but was your comment about modifying the number of friends in myspace a joke? one billion! good lord
Found a reference to you while lifting code based on your stylesheet. Was at that moment thinking of how many days it was going to take me to get to the bottom of this stylistic spiral. Love your work!
Hi, Mike!
I am pleased to say that I applied your technique to my profile, but added a little more, as in rounded corners, and a changed color scheme. Check it out here: http://www.myspace.com/bradkovach
I kneel before your awesome work. :)
I am a FireFox 2 user and have been going around in circles tying to get the comments section to fit in with the style like it is on your page.
I guess some of my comments break the layout in FireFox but IE keeps it in line.
And getting both IE and FF inline with CSS is beyond my skill…..
Again thanks for your awesome work, and thank you for sharing !
you rock the free world and all of the places in between.
im not sure if this is logical for my taste in such matters of equality. farewell
Is there any way i can hack into my teachers email and ruin his life?
Love the show!
I am not one to pass up the opportunity to create a site that looks different but might secretly be the same as everywhere else.
Hold on a minute…
Seriously though, nice one. Saved me and 600+ others from contributing more filthy code to the community (sic). And I don’t even know what CSS really means.
One step at a time…
By the time I finished reading all 600+ posted, I almost forgot what I was reading it for.
This is sorta releated … does anyone know a good work around for getURL() being disabled with Flash on MySpace. When embed tags are added now, they are rewritten on submission. I’m about to start working on an overlaying of a transparent gif and mapping the links over the swf. Just curious if anyone found a better work around.
Despite what anyone says, I like your layout Mike. It shows how clean a myspace page can look without an overlay. To me, that is original.
P.S. Thank you for sIFR.
Hey, thanks for the noted CSS work. I’ve never played around with CSS before until now, but with a text editor, a few hours, a ton of patience, and a million times trying something and hitting “refresh” … I just about have a bare minimum figured out. Thanks to your CSS explanation.
It doesn’t look as fancy as some pages but it’s ALL MINE. Yay!
Thanks again!
http://www.myspace.com/paravati
I case anyone is interested, I decided to go with the overlay approach. I thought you should all know, “image maps” do not work on myspace. When you submit HTML with an image map, your “#”s are removed (I assume this is also the reason everyone styles their pages with classes).
What I ended up doing was overlaying a table with transparent GIFs. Rollovers inside of Flash still work with the overlay, and my HREF tags work fine in IE7, Firefox and Safari.
Also of interest … I came across this solution but wwas never able to get it to work: http://www.flashload.net/faq.html
… It involves embedding an external swf that calls the getURL() instead. This method was written for OpenLaszlo, which appears to be software similar to Adobe’s Flex. I assume that with some tinkering, the same approach can be used in a general swf.
Thanks Mike, enlightening!
I knew that if I kept looking, I’d find something intelligent about customizing MySpace ! Thanks. :D
Here’s a question (and I haven’t thoroughly read all the comments on here yet) — I saw a lot of talk about “what if somebody posts a large image in a comment”.
I personally prefer to set my options so that no images are allowed in comments (i.e., the “no HTML in comments” setting).
My question is this: Will using Mike’s CSS code (or a version of it) nullify that setting ? Or will the setting still hold ? If the setting still holds, I’ll be a happy camper. I don’t want HTML comments because those big, ugly images just junk things up and I’m not interested.
Thanks in advance !
JoJo, that setting is a backend setting, so it will still hold true if set.
A way to limit the size (or, at least, resize) images in the comment wall is to use a setting such as:
table table table table table tr td img {
width: 90px;
}
this will make ALL image in the comment wall 90px. it is a janky solution… but myspace is a janky place ;-)
90 is chosen because this also affects the size of the poster’s image… which, by default is 90px. if you make it bigger, then the user’s image will be bigger also (ugly).
Firefox, of course, has a much more elegant solution:
max-width: 250px;
this will only limit images that are wider than 250px. So if someone posts a 175px image, it will not touch it. But yeah, firefox (and probably safari) only. I haven’t messed with IE 7, so I don’t know if it supports the max-width property.
Thank you, Mike! You are fully deserving of the #1 Google result for “myspace css”.
Looking forward to the uncrapulification of our Myspace page…
Okay. I’m at a complete loss here. I know that I probably shouldn’t ask this question here but I have nowhere else to turn. I used Mike’s code (amazing code it is, I’m an utter novice at CSS and was able to customize it to my heart’s content – pretty much). to customize a myspace film page:
( http://www.myspace.com/huntingseasonmovie ).
The problem that I’m running in to (and I only ask this here because this seems to be the place to find the smartest people around that are interested in making Myspace a decent looking place.) is that the table for my uploaded video is white. Any thoughts on making this table match the rest of my layout?
Any feedback I receive here I will pass along to the rest of the myspace community in the hopes that it makes it a better place.
Thank you.
You can try:
div.profileVideoList, div.profileVideos, div.profileVideos div, div.profileVideos table {background: none; }
(or change “none” to “black”)
Thank you, Leo !!
can i have someone design a site for me?…
Ill pay
Thanks Leo!
Hi Mike,
Just wanted to say that I love your work. I’m more of a Flash man myself and have struggled with CSS for about 2 years now…so your easy to implement hacks have saved me from the embarrassment of my non-designer-friend’s websites turning out better than mine ;)
Cheers again!
Stu
I apologise for asking this, but Im getting desperate…
First let me thank MIke for making so much effort on this topic.
Im slowly modifying my bands myspace to make it less Mikes and Ive hit the wall. I cant seem to change the main text color. I changed the background to black and now I cant find where to change the text from black to white. I went through code carefully many times and I still cant figure it out…
If anyone can help I would aprecciate it tremendously…
Thank you so much!
Matej
http://www.myspace.com/elektrikaband
I just wanted to thank you for your hard work and beautiful job. I used your template and was able to finnaly make a MySpace page that i actually want to look at. Sean’s “BLOO” Page.
Kudos and thank you once again!
Thanks for posting those tips. I ended up fixing my comments table width and masking everything with a div layer so I could plug in my own content designs:
Check it out
i want to hack into some one’s profile can you get me their password? thanx
thanx for the code… http://myspace.com/evetoadam
Mike I’d first like to say thank you for making all the code available and compliments on your article, well put together and got me laughing…I’ll be visiting newsvine.com frequently!
A few other comments I’d like to share.
I notice quite a few people putting down the default design and lack of design customisation on myspace.
I’m a creative person, spent some time in Art/Design education and have worked in various design and web dev areas for a few years (but certainly not major league). When I signed up for a myspace account a few days ago and saw the default page, within minutes I was (like you) searching through the many google results to look at ways I could change it.
There were basically three main options.
1. Use an online service to do it for me. (This wasn’t really an option just like adding clip art to anything I create isn’t an option)
2. The method you have made available to us all
3. The Div Overlay option
For now I have chosen the Div overlay option as it was the quickest and for me the simplest way I could get ‘something’ up to remove the default layout.
Now I was saying about people putting down this default layout and lack of customisation and have highlighted the three main ways that are available for people to add their own designs to their profiles.
I have seen some ‘slick and sick’ designs using all of these methods. So I have to ask, do people really think that if myspace.com was to offer a fully customisable interface using CSS it would improve the designs on myspace?
I personally believe it wouldn’t and not only would it not improve a large proportion of the designs it may also remove the challenge of doing what you and others have done.
People that want to learn and improve things will always do that, so I say fair play to Tom for leaving it the way it is, as this way it provides those that have the interest, time and ability to make the improvements themselves. And when they do, they feel really good about the achievement, right? ;-)
I have weighed up the pros and cons to using the Div overlay and the editing of the CSS and it’s too difficult for me to say which is best. So I think I’m going to have to do both!
Thank you once again for the work you’ve done and making it available as it will mean I will have to do less ‘working out what’s what’ and can concentrate more on the design :-)
my profile
Looks like a pretty popular article! I used it to clean up my page, too. Thanks for the work – if nothing else it makes snoopy potential future employers think I know how to tame an html s#!&storm like Myspace! :)
http://www.myspace.com/stgermaniac
Thanks again!
TR
Whooooo Hooooooo, I made it through all 652 comments. Thanks a Billion for the great comments inside the code. Really helps in the learning process.
Cheers, Colin
Hey Mike,
I don’t know if you’ve noticed, but MySpace has moved the search bar from the top of the page above the advert to below the advert. This has made my masthead not line up for some reason. I’ve moved it so it works in Firefox but then it doesn’t work in IE or Opera. Now this is the funny part. My personal MySpace page works OK, it’s just the Band page that it doesn’t work on. Anyhoo, just thought I’d put out the FYI. If I figure it out I’ll post back. If anyone else figures it out could you let me know please.
Cheers, Colin
Thank you so very much for your detailed analysis the CSS on MySpace.
I have only started a MySpace in the last week, and was mortified to realise that the CSS was all but unconfigurable – at least, in a tasteful way, as you suggest. I have even had to resort to specifying font sizes in px rather than em which I’m used to.
I applaud you too for leaving in the abuse. I think it shows an expansive mind.
If the writers of the posts only realised that by asking for hacking information, they show up how dishonest and lacking in intregrity they are. I am not as ‘kewl’ as you are, you see?
Thank you for your work. I put a link to the entry in my MySpace blog.
Thanks for this CSS template!
Your contribution to help combat the worlds biggest collection of eye wrenchingly terrible “webdesign” will not go unnoticed in the afterlife ;)
I joined myspace about a month ago, wasn’t really happy with the look, but thought, whatever. Then I saw some others, found a “pimping” site, and modified. But that wasn’t mine, so I changed the CSS a bit, what I could with no knowledge of CSS, only my natural ability to take things apart and put them back together.
I was happy.
Then I found this page. Now I am no longer happy. Now I have to learn CSS and make my “myspace” truly my space.
Thank you all for creating a lot of work for me :)
by the way: I agree with every positive comment on Firefox. I could never go back to IE.
I love this man, it’s quite nice and haxxor’d. I was messing around though, and noticed you could refer to an element by it’s id. In the form of:
element[id=”id“] {
styles
}
I don’t know if you’ve tried this and scrapped it, but I just noticed it and tried it (in mozilla at least, I know IE doesn’t work, but what’s new?) with the picture link:
a[id=”ctl00_Main_ctl00_UserBasicInformation1_hlDefaultImage”] {
color: red;
padding: 100px;
}
~Aziz
P.S. Again great work!
You are hilarious! Thanks for making an otherwise boring afternoon at work a blast.
Wait, Anthony–
Can you provide another example or explain what you’re doing there?
You can refer to something by it’s ID ?
Thanks for all the hard work. Here’s another layout “smacked-up” Mike D style
http://www.myspace.com/actionr
=P
Do you know how to create a safegaurd for your friends? I mean to show your top whatever, but protect them from others who are not your friend sending them messages kinda like a “linkless icon’???
R. King:
I’m taking a HTML/CSS course in my Computer Programming college program right now, and we’ve just finished the CSS section. Part of the textbook reports that in CSS you can refer to tags many ways, although some aren’t supported in some browsers (such as IE6, not sure about 7 though?). Anyways, one is selected one by its attribute.
Just like you can use psuedo-classes, such as :hover, you can access an element by attributes in it’s tag. You could say all images containing alt text (img[alt] { styles }) or your could specify the value (img[alt=”Photo”] {styles}). Here’s a list of all the different forms of this:
(ele = element, such as img
att = attribute, such as alt
val = value, such as “Picture of photo”)
– ele[att] = any of the the elements containing the attribute
– ele[att=”val”] = only selecteds element where the specified attribute is the specified value
There are others, such as att~=”val”, att^=”val” and more. Google it up if you want to know more. They’re all at least CSS2 and some are in CSS3 (^= $= and *=).
I know for a fact that it doesn’t work in IE6 (tried it)
Normally, you want to access an element through its ID by saying #photo. But as Mike D. mentioned, MySpace in its glorious genius forbids the use of the ‘#’ character. So, instead of using:
#ctl00_Main_ctl00_UserBasicInformation1_hlDefaultImage {
border: 2px solid black
}
i thought to try
a[id=”ctl00_Main_ctl00_UserBasicInformation1_hlDefaultImage”] {
border: 2px solid black
}
ctl00_Main_ctl00_UserBasicInformation1_hlDefaultImage is the id of the link surrounding your myspace photo. The img tag itself doesn’t have an idea, however. You can look at any myspace page’s source to find IDs.
Hope this helps :) email me at anthony.aziz@gmail.com if your still confused (I’m not a good teacher).
Btw, does the author Mike read these comments? I’d like to see what he says about this.
Anthony, that was quite a post!
I think the major issue here is that it just doesn’t work in IE6… this is important, because most of the myspace crowd probably uses IE (and it is still the dominant browser… though I wish it pain and suffering and want it to go away. far far away ;-).
Yes, that’s true. IE7 is out in the masses now, thanks to windows update. Perhaps if IE7 has a lot more CSS2 in it, considering 6 is old. Most myspace users are computer illeterate people (which is why myspace is so popular, it requires no computer knowledge) and thus won’t bother to use a different (and better IMO) browser. (no offense meant, there are of course very computer literate people on myspace and being illeterate isn’t evil… in fact my girlfriend is a ‘pimpmyspace’ junkie :P)
No one tell Tom about this selector though. Imagine the evil things…
Anyways, if someone could possibly test it out on IE7?
Mike you are great.
Re: Anthony Aziz
Gave it a try in IE7 and it doesn’t work.
/Simon
Oh i note the request for no myspace related help. Maybe, thus instead of bleeting such a demand I shall just congratulate any such person who can fathom the mystery that is HTML. god willing one day I’ll not hwo to turn three f’s into an elaborate picture of me and lassie x
p.s. where should i go for such asisstance on myspace a la classy?
Just wanted to say thanks. listed you on my page with a thank you.
also wanted to pass on a few other tips like hiding entire blocks and hiding the “viewing 10 out of 15 comments” text and just leaving the add a comment line.
found good work throughout this site: http://www.myspacesupport.com/myspace-generators/
will you plz hack myprofile and change the password for me? i used a fake e-mail and now i cant make a real one with that same e-mail address on yahoo. you can e-mail me the new password at sierra_bobby@yahoo.com
plz help me
Thanks for sharing this! You are great, thanks…
Hey Mike, just downloaded the zip, will have a good look now. I’ve spent days messing about using the complicated way to fix my myspace and it still looks different in different browsers so, I’m really hoping this helps. All Hail in advance.
Thanks for taking the time to write everything down. I imagine ( but not really since I need help) its like being the smartest kid in the room and still helping when you’re bored silly with the rest of us. I do love the humor though.
B.P.
I to hate the normal layouts on myspace, so i just did the whole cover it with a blank page and do my own thing :) yes a div layout, found the base code online then modified it for my use let me know what you think ! My page
hey mike…
thanks for the great advice.
http://www.myspace.com/treeghost
Great work!
Great work – it definitely is a pain weeding through their bad code…
Wow. It’s awfully nice of you to organize your thoughts & share your process. Mostly still “over my head,” and I wish I had more time on my hands to actually work on my myspace, BUT… I only set up my account to monitor my teenage niece’s account!
I’m motivated to give it a try, though! Appreciate your efforts in putting things in lay terms & wanted to let you know.
-o
THANK YOU so much. I can’t wait to get started on this. I’ve been away from the whole web programming thing for awhile, but am quickly learning css. I love it. You ROCK! Bless you for taking the time and having the patience to provide those of us who care about web aesthetics with a beautiful solution.
Great artical. I wonder if you could do one for the bands pages…I think it would of great use for artist such as myself trying to get noticed in a needle in a needle stack. Anyway thanks for this artical it was really informative.
Kyle
At the risk of annoying you with another “me too” email….THANK YOU for this information. Very useful indeed.
The mindless youth asking stupid questions in their endearing, illiterate manner are almost as amusing as the book-smart seekers of CSS knowledge that fail to use common sense and actually READ the posts stating not to ask for help in this format. Then again, common sense really is not common any more.
Thank you for an informative, enlightening and humorous break from the headache known as MySpace….
will you plz hack myprofile and change the password for me? i used a fake e-mail and now i cant make a real one with that same e-mail address on yahoo. you can e-mail me the new password at sierra_bobby@yahoo.com
plz help me
about peed my pants on that one.
Thanks for doing all the legwork on this. It really helped us to create something that is semi-tasteful… That’s very hard to do with MySpace.
And thanks to your tutorial, we were able to deal with the new google search bar all by ourselves.
Check out what we were able to do at http://myspace.com/truckerrocks
Just wondering what you thought of my mod- probably just like you said, a facade hiding my grotesque underbelly
myspace.com/wakeupkeo
I dont know my email to my myspace account and now i have no access to it at all ….im so bummed…MY friends miss me ): I have my password…but not my email address…( i might have punched in the wrong email address ) myspace customer service does not help……
JEN
Hey there Mike,
Thanks so much for this you are as we say in London “the dogs bollocks” its superb!! Here is what I have done:
http://www.myspace.com/ibizaangels
BUT I have a little question – I want to have one of those movies where you can view your photos and a music player on the front page
Where in the CSS code/can I insert this? Any ideas..? I’m not too good on CSS I’m only just learning – but dont see how I can insert a flash file in the code – I tried but the whole bleedin’ thing messed up.
I’ll be your mate for ever if you can help me!!
Melissa
xxxx
Thank you, very useful.
Used some of your code along with some MySpace CSS odds and ends of my own to make something half-decent.
Thank you, very useful
Oh i note the request for no myspace related help. Maybe, thus instead of bleeting such a demand I shall just congratulate any such person who can fathom the mystery that is HTML. god willing one day I’ll not hwo to turn three f’s into an elaborate picture of me and lassie x
i just want to say THANK YOU!!!
you rock ;-)
how do i get on fuckin myspace u fucking idiots!!!
Hey, thanks for a great solution to the problem that is MySpace layouts. I had been wanting to get round to coding my own design, but you have given my a great head-start. I look forward to seeing what I can now produce based on this design!
Here is also a neat trick using your layout. If your friends leave comments with huge images attached you can use the max-width css property:
img { max-width: 300px; }
Thank you Mike.
Beautiful work.
Just fyi your OHFG! add to the extended network is not working. The other problem with myspace is they change things in their code and you don’t often know what it could be so you have to reread all the parts of it’s anatomy all over again.
At least when I hack my own domain I do not have other people to consider. My menu could change my page format and size and I would not have to notify anyone to update their code also.
I am 36 and I told my 16 year old son that myspace is nothing new. The first online comunity that I can recal that was public and grafical and that you could add to was in the early 90’s and it was on Geocities. They had avatars on a 3d environment walking around.
Anyway. I have a hacked iPod and a customized myspace page and my son doesn’t.
I think it is mostly the younger generation born with the internet learning their social skills – God help us all if they choose myspace as that place of higher learning.
how do i change my url i hate please
Great work on that profile, Mike. It is impressive looking, especially as far as MySpace goes. There is only one thing I really like about MySpace–it allows otherwise unconnected groups of people to be connected. From a usability standpoint, I am at a loss. A beast towering millions of customers, but I will never love it. It will always be an inconvenience for me to try to customize it–it sickens me to see my JScript, CSS, and Flash fail because the markup is rewritten, but I understand the reasons behind such a security system. As it has been said many times before though: in the land where computers live, garbage in is garbage out. I refuse to clean up my garbaged HTML. Maybe another day I will see the light, but today isn’t looking very bright.
Mike thanks for the guide on skinning myspace. I could never face digging into that mess they made of their stylesheet. I don’t have anything else to say I just wanted to say thanks for the time you put into this.
Great work with this MySpace mod Mike. I’ve noticed that if you try to use this code on a MySpace Music account though, the comments box centers for some odd reason. Doesn’t happen with regular MySpace accounts, only with music. Just thought I would point that out and see what people have to say about it. Thanks, and again, great work.
IMPORTANT: BEFORE YOU COMMENT — Realize that any comments asking for help on their MySpace layouts will be deleted immediately.
Thanks for the wonderful help vanity and erick! Your suggestions have changed my life. By the way, I read some of the earlier comments people wrote and I just want to mention how much I despise their stupidity. I think Trisha has emotional conflicts that she should get help for… as soon as possible.
hey! what happened to your cool looking background?
Thanks Mike, lots of goodies here!
and for all who wanted the header/ masthead element clickable just do two things:
1. Add an a href in the div for the masthead in between the spans (cant post the code here but you can rip it out of my myspace page if you have firefox -view css) most of you will understand though.
2. In your css style, Add—
.masthead a {display:block;width:800px;height:60px;}
Just change the width/height to what you have and you are good to go.
i need help on hacking into my own myspace can you help?
Hey I haven’t read all of the comments b/coz I don’t have the time but I was just wondering if any one suggested just turning everything white incl. links and then pasting a “picture” over everything and using a div layout?
I’ve been doing this for ages and it takes me about 10 min to re-do my profile entirely – also the ahref tags work better than myspaces’ at times and you can take out all the stupid ‘friends’ crap and hide things like your blogs if you dont want people to see them.
But nice work for attempting the CSS aproach!
http://www.myspace.com/drdarcy
i would like to congratulate you on this extrodinary accomplishment, but for a 14 year old, it is indeed very hard to understand. something a bit better to comprehend? well, giving them thousands of codes, which im guessing you have, pasting them and telling them what each means. besides that, it is a very well written piece, for a Shakespearean reader. kudos.
I really enjoyed reading through this [unlike most CSS tutorials where I know more than the people that publish them.] Thanks for expanding my CSS knowledge further.
Wow, not only does your sarcasim and wit make this an enjoyable read, but your efforts have only furthered the idea that stylish pages are (relatively) easy, but that teaming up with the right folks, you’re able to create something that makes MySpace’s programmers look like maybe high school grads at best. Well done sir, well done.
I’m tempted to give up all this Christian, Jesus worship and just go ahead and worship you. I avoided myspace for nearly a year, ’cause of the ugliness. But my friends have beaten my into submission. Thanks to you, I can go beat myspace into submission. Seriously, I love you.
I joined myspace twice because my brother, his wife and a couple of friends were bugging me to get on it. Both times I deleted my profile soon after, partly because I felt the ugliness of it reflects poorly on me. I am a techie, not directly involved with Web design, but still, people would expect my profile to have a little sizzle. With your examples, along with what I learned about CSS on my last attempt, I should be good to go. Many thanks for providing this info (I am sure it has not gone unpunished).
can you please fix my my space so i can log on
can you please fix my my space so i can log on
GREAT INFORMATION Mike! Thanks for the guidance… Check out my results:
Aaron’s Adventures in MySpace…
Thanks again!
– Aaron
Mike, because sites like this i dont have to run out a spend fifty bucks on a book that could probably be better spend on beer or chips. Thanks brother for the starter. Moving on from here.
ps good site
Great article. The only suggestion I would make is to provide a map that shows that code goes with what table so it would be easier for us n00bs to edit the CSS to our needs.
For instance when some adds a big photo to your comments section it totally throws the whole page out of whack. I’m working on fixing that now.
Mike,
thanks for the code. I have been customizing MySpace layouts for about a year but I came across this post and decided to see what I could do with it without making too many changes. You can see what I came up with at: http://www.myspace.com/trappedinashell
Thanks again for the hard work.
-Alex
I want to add my name to the list of people thanking you for making this post. I signed up for a MySpace today, and spent 20 minutes just trying to work out where to put my code! Of course, when I found out that it was in the “About Me” box, I kicked myself – after all, it’s so OBVIOUS that stylesheet code should go in the same box as the main body of your text!!
I can’t imagine a more frustrating and awkward website to use, but this entry was a massive help. Thanks for your hard work!
I found this CSS code (I put it at the end of the non-IE style block) to limit comment picture sizes. It’s not perfect though because it limits the picture sizes to the same size as your friend’s pictures. Because the two images are so horribly linked you can’t make just the comment pictures one size and the friend pictures another.
td.text td.text table table table td a img {width:100px;}
td.text td.text table table table td div img {width:80px;}
td.text td.text table table td img {width:260px; max-width:260px; width:auto;}
td.text td.text table table td div img {width:80px;}
* html td.text td.text table table td img {width:260px;}
* html td.text td.text table table td a img {width:90px;}
* html td.text td.text table table td div img {width:80px;}
Way to go! I would like to learn CSS too…For now I’ll take a look to your source codes [thank you very much]. About time somebody has given to Myspace horrorific premade layouts a good lesson!
Well…with your help I am now a 3 week veteran of myspace with a totally new look…thanks…!!!
take a look… http://myspace.com/cerebrus1
also: anyone figure how to move the banner from the top to the bottom of the page…???
Thanks for this great work… MySpace CSS code makes me want to stab myself in the eye with a fork…it’s so maddening! You saved me hours of work…check it out at:
http://www.myspace.com/officialindiepit
Thanks Mike!
THANK YOU
I have been looking for this type of thing for a year. You are my savior. Now tell me again why I’m on MySpace… >.
Thanks so much for the help. I can’t stand to have a terrible looking myspace (I hate having anything that looks bad, but I can’t do anything about many of those things, such as my face), and your code really helped out (I did replace the pics and changed the colors and frame border thickness).
Thanks again. Without your help, my myspace would probably end up telling the world how much I love Justin Timberlake in glittery “I’m a princess” type.
P.S. While I’m at it, might as well pimp my site: http://blog.myspace.com/dustinfaber
OMFG… it’s about time! Even though I’m obviously late :-)
Exactly how CSS2 compliant is IE7? I’m trying to use the max-width property for the images in comments w/ IE7 and it’s ignoring it. It works in Firefox (using ‘!IE’ conditional comment). And I know the content of the conditional statement (using ‘gte IE7’ cc) is being read, I threw in some test text before and it worked.
DOES NOT WORK IN IE 7:
<![if gte IE 7]>
<style type=”text/css”>
.whitetext12 {width: auto;}
.orangetext15 {width: auto; !important}
table tr td table tr td.text table tr td.text table tr td table tr td img {max-width: 220px !important;width: auto !important;height: auto !important;}
table tr td table tr td table tr td div strong {display: inline;width: auto;}
</style>
<![endif]>
WORKS IN FIREFOX:
<![if !IE]>
<style type=”text/css”>
.masthead {margin-left: -372px !important;}
.whitetext12 {width: auto;}
.orangetext15 {width: auto; !important}
.contactTable {width: auto !important;margin-left:16px !important;}
.contactTable span.whitetext12 {position: relative; left: 0px;padding-top:15px;}
table tr td table tr td.text table tr td.text table tr td table tr td img {max-width: 220px !important;width: auto !important;height: auto !important;}
table tr td table tr td table tr td div strong {display: inline;width: auto;}
</style>
<![endif]>
</code>
Duh. Forgot to mention that any feedback on my profile is appreciated. Most of my friends are compu-tards and are no help in that arena. Thanks!
Also go here if you want to see my problem above, relating to the images in the comments section.
a_programmer_named_katie
It should also be noted that data URI’s are not allowed within both CSS or HTML.
I tried to embed a simple small background as I don’t have a way to host the images elsewhere. Myspace converted my “data:/” to “..”, therefore leaving a bunch of extraneous cruft.
Thanks! This is amazing. I am horrible with codes, haha so this is really helpful!!
Just dropped by again to say thanks for the tips. They helped me create a page I can live with. This forum really made a difference. I didn’t want to use a bunch of div layers. I just wanted to find the holes in the original setup where I could interject what I wanted. It turned out really cool I think.
Check it out here.
Thanks people.
Hey, I ended up creating a custom overlay for my myspace page. But, it was your site/hack that originally inspired me to search for better ways to design a myspace layout….thanks again man…
http://myspace.com/jswebb is my custom overlay…
Thank all of You!
i was wondering if someone could help me out with a major problem:
the other day i was on my myspace, and i changed my password. afterwards i logged off and then tried logging on again (to see if my new password worked) well it didn’t. and neither does my old one. so i tried to retrieve the password by sending it to my e-mail. but for some reason my e-mail account will not retrieve the messages. so basically, what im asking, is if someone could maybe hack into my account and retrieve the password for me. or tell me how i could hack into it. if you could i’d appreciate it very much.
you can email me at: ohhheybritt@hotmail.com
Hey Mike,
Just wanted to say thanks a lot for the great CSS template! I’ve used a modified version on my band’s profile, and so far everyone’s happy with the way it looks. Feel free to check it out if you want, it’s http://www.myspace.com/vsakira, and the band’s called Versus Akira.
I appreciate it!
Paul
vs.akira
Wow, thanks a million time for this. I’m an amateur graphic designer and seeing how sketchy were most of the customization pages (and myspace’s code), I pretty much set my page aside. But now, fun times ahead, and less sleep also ;x
A lot of people are also designing complete DIV overlays, which allow for way more customization.
Sorry to comment again..
This doesn’t work in Flock.
.redbtext:after {
content: ” billion”;
}
Should I just try it in Firefox, or is there something else I can try, maybe?
Er.
Doesn’t work in Firefox either.
It just shows up as text in my profile.
[Last comment, sorry.]
Wow, very profound and comprehensive. This is particularly helpful to all myspace users who might be using the site for their business ventures.
There are actually some sites that offer free myspace layouts such as this: http://profilepitstop.com/free_layouts/index.php. For all graphic design beginners, they can be a good start, since all you need to do is some tweaking and that’s it.
how do u make a page for layouts that u can share w/ people and how can u put codes on ur myspace without using them?c/b
http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=147081583
Mike, thanks very much for this. Everything works great, except for the masthead image will not work in IE7 at all on “band” profiles. I’m not sure about regular myspace profiles.
Cheers,
TC
Picky Myspacers everywhere thank you for writing this fantastic article.
Additionally those are far and away the best comment boxes I’ve ever seen. numbers in the background, that rocks.
Wow big props to Mike for doing this, thanks. My profile looks nice now.
I have seen some profiles that look like regular webpages with the menus on the sides and what not, and a friend of mine showed me a site where you could choose from different templates but I can’t seem to remember it.
Does anyone know of any sites where I can do this?
well I see you know about computers but do u know how to hack myspace like for us kids that dont know how to get to it from school? if so can u emil me back
For Aw-hero. Do a google search for CGI Proxy 2.1
Looks good. Want to have a profile competition? I think I did a good job with my own CSS. As you can tell by my page, I like a simple profile.
You have no idea how many layouts are now based on your work Mike. Too bad you can’t copyright CSS, you could charge a fortune in royalties.
The one thing I haven’t been able to figure out is how to remove the excess space below the “About Me” and “Who I’d Like to Meet” spans. I know it’s a result of the “br {line-height: 20px;}”, but changing it to 0px also removes the vertical margins between the tables. If anyone comes up with a fix for this, I’d love to know about it.
I used to be into CSS design heavily last year, I’ve drifted away from it lately but I still have enough knowledge of it to know that MySpace’s CSS is absolutely horrid. Before I came across this I was trying to figure out what all of this “table table table table table table tr td” gibberish was, but then your file cleared it all up. Now, my profile is delightfully arranged and I often find myself coming back to this page whenever I want to update my CSS.
Kudos.
First off, I have to say that you clearly have a lot of patience. What a mess. Being relatively new to CSS, I was having no end of trouble trying to sort through all of that junk. Thanks to you, I was able to pimp my Myspace without actually having to..uh…pimp my Myspace. Thanks!
I just wanted to say thanks! I know absolutely nothing about CSS but I was able to use this to fix my page…plus I learned something.
Thank you so much for posting this blog. It was passed to me by a friend. I’m forever thankful that someone took the time. Then actually made something that could help pages look decent. Instead of nasty, sparkly, and downright overkill…
thank you.
Wow, very nice. Glad you plumbed the depths of the MySpace ID tags, cuz I poked around a bit and it just wasn’t fun.
I did my part to pretty up the MySpace landscape: http://myspace.com/jooblie.
Great post!
you could add a permalink to the myspace article b/c it is gone from Keenan’s page. sigh.
Mike, I bow at your feet. Prior to this, I was editing a FreeWebLayouts layout (which are retarded in the first place). However, the tables were all over the place and it still looked like crap. The biggest problem was that if I put a semi-transparent background in where it was supposed to go, I got a multi layered effect. It looked cool, but that wasn’t what I wanted to do. Your fix now makes it so the background only applies once, hooray! My only problem was that the conditional IE statements would not work when I tried to use the DXFilter for .png files in the ‘IE only’ section… I got around that by making my banner into a Firefox ad :)
Anyways, is there any chance that you will (or have) designed a layout for the blog section? It’s no biggie if you don’t want to tackle it. I can probably follow your profile CSS to figure out how to rearrange the blog. Anyways thank you so much for stooping down to us mouth breathing MySpace retards and giving us a hand :D
yer kool dood
Wow post #750, do I get a prize? :P
Hi,
I tried to use li and P tags in Interests box section and it changes the font color from white to black. Any suggestions?
http://www.myspace.com/rockblog
Hi Mike,
Nice article.
Although I didn’t get my layout deleted when I hid the advert ages ago.
I’ve changed the design since then though.
Well done on creating such a cool space.
Ben
Thanks for the script. nice layouts here!
Hey RockBlog: you can add your own class to the styles to make your list look however you want.
Something like this:
.myList { color: ffffff; }
.myList li { color: ffffff; }
Then just add “class=myList” to your ul tag
I was about to quit in disgust when i found myself typing:
table table table table td etc…(thinking, this is rediculous).
That and noticing my “#ids” get hosed by myspace…
Thank you Mike, for the clean breakdown, and saving us all alot of time.
I’m glad I’m not alone in myspace hell. I’ve been trying to help a friend in Slovakia (ESL on top of it) deal with a myspace mess, and try to make it look acceptable in FF, IE & Safari. I feel like I’m playing with a Rubik’s cube with no color stickers (actually, that would make things easier…!).
As we hash our mess out, I will be referring to your words to try to figure out why things just won’t work. What a PITA!! XD Thank you Mike for putting this all together. You deserve a drink!
Question!
MySpace seems to be replacing any instance of ” ..[endif]>” appearing in my About Me section, and I imagine the IE fixes breaking. Though, other than that, everything seems fine.
If anyone can help, please do. Thanks.
Sorry! Sorry sorry sorry.
My question was:
MySpace seems to be replacing any instance of “
OK, joke’s on me I guess.
I made sure the comment displayed properly in the Comment Preview last time. Honest!
Last try:
MySpace seems to be replacing any instance of “LESS-THAN-EXCLAMATION-POINT” in the template code with “..” when the page is saved. Is this a MySpace change, or am I doing something wrong?
Looks like MySpace is now stripping the syntax for the “if ! IE” logic. Apparently started today as it was working yesterday.
With the popularity of pimping a MySpace page they are foolish for not making it easier to modify by giving a CSS block to edit and putting more ID or CLASS labels on more elements.
Yep, they just started doing that in the last few days. Good news is, none of that “If IE” stuff is essential. You can delete it and just change .contactTable span.whitetext12 to the following:
.contactTable span.whitetext12 {
width: 270px;
margin: 0px 26px 0px 26px;
}
Korova: I was worried that was the case. Bloody MySpace. :(
Dean: Thanks! Is that all I need?
Better yet, change the width in both .contactTable span.whitetext12 and .whitetext12 to “auto”.
I’ve taken Mike’s excellent code and stripped out some stuff that was unecessary. I also added code which resizes comments, so you don’t have to disable html in that section. The result can be found here:
http://www.myspace.com/bushidodean
I’ve tested it on Safari and Firefox for Mac, and IE and Firefox for the PC. Looks pretty much the same on all of them.
Scratch that… works fine in everything but IE. Stand by….
Auto only worked for one of the two in IE. Here’s the replacement code (I mean it this time):
.contactTable span.whitetext12 {
width: 270px;
margin: 0px 26px 0px 26px;
}
You don’t need to change anything for .whitetext12.
My page is updated now, so you can see it in action.
Awesome, that did the trick.
Thanks very much!
Ahh I can’t believe that MySpace would do this to us!! This probably means we can’t code differently for IE6 than IE7 now either…
And thanks to Mike for giving us a forum to discuss this… in his comments.
Thanks I came back here just to find out why less than and exclamation kept messing up…Damn myspace. Good thing for Dean H. Haha. Here is my space that I came up with using Mike’s code http://www.myspace.com/beyondenlightenment
I have seen in a few places it is possible to hide your Extended Network and Blog in MySpace. I see in your article that you added text to the EN banner, but have you found a way to remove it completely? I have looked at the code and can’t seem to find a way other than ‘hidden’ or ‘visible’. Thanks
Has anyone seen any good ways to design besides the Mike industry way or the div overlay? (currently i use a bit of both usually)
Are their any good tricks for myspace design on any other site or forum?
Is anyone able to design comments left on the main page or how your friends appear?
Dean…you should post your code
can’t find the code that changes color of the “url” on myspace. also the upcoming shows is a mess for band profiles any suggestions? here is my latest tweek:
http://www.myspace.com/vessel
Hey Chris,
Yeah, I need to sit down and write a generic stylesheet based on Mike’s code with my tweeks. Might get to that this weekend.
As far as your url color goes, this’ll do it:
strong { color: ffffff; ]
Nice lookin site. Pretty cool tunes as well.
Dean H., thanks for the work on the IE code. Just to clarify, when you say “just delete the if not IE stuff” you mean those specific single lines, not the style info between them, right? I figure it’s just the specific lines, because deleting the info between them loses the borders around each section.
And are you changing the .contactTable span.whitetext12 within the “if not IE” portion or the .contactTable span.whitetext12 up near the top, or both? When I try changing this value, the space between my top 8 friends disappears in Firefox and becomes minimal in Safari. Any help would be great. Thanks!
Hi Annie,
If you look at my personal page, you’ll see I deleted everything from “if ie” on down, and it still works properly. Personally, I don’t believe it ever worked as intended in the first place (browser specific). I think everything in that section simply over-rode the code for previous entries.
The change to the .contactTable span.whitetext12 is made in the code above.
I’ve noticed the spacing issue you’re referring to on some of the pages I’ve done, but not others. For example, it’s a problem on this page:
http://www.myspace.com/donnaderrico
but not this one:
http://www.myspace.com/bushidodesigns
Haven’t figured out quite why yet.
Dean, great fix so fast. I edited one small thing in my layout and my [if !IE] tags were bust. I’ve applied your fix (and only your fix), and it works great in IE, but it knocks out the borders around all the boxes in FF 2.0. I see it’s only on mine (it doesn’t affect yours). Any ideas?
myspace.com/kbregatta to see it.
Thanks, Dean. I’ll be looking into it more today. And for the record, I had the same problem as Rafa describes when I deleted everything in between the IE errors.
Thanx Dean. Thats my old band I’m the singer… I tried the “strong { color: ffffff; }” and it gave me the title “Myspace URL” but not the URL itself, it’s still black??? the donnaderrico page looks awesome. here are the sites that I’ve done trying to tweek this code:
http://www.myspace.com/justninamusic.com
this one has the upcoming shows which are a mess:
http://www.myspace.com/evetoadam.com
Thanx Dean. Thats my old band I’m the singer… I tried the “strong { color: ffffff; }” and it gave me the title “Myspace URL” but not the URL itself, it’s still black??? the donnaderrico page looks awesome. here are the sites that I’ve done trying to tweek this code:
http://www.myspace.com/justninamusic.com
this one has the “upcoming shows” which are a mess. I think it would be better if the “about” section came before the “upcoming shows” section:
http://www.myspace.com/evetoadam.com
I’ll try to put together some kind of updated code with comments this weekend and repost it. In the meantime, here’s another fairly simple one that I did which uses Mike’s basic code, without the IE stuff, and the borders work fine in all browsers:
http://www.myspace.com/damonconklin
If you view the source code of the page and copy everything from:
to
You should be able to edit it as necessary for your own page.
I forgot that that HTML tags get stripped out of posts here…
copy from
div class=comment
to
/style
nice work I like the image overlaying at the top…
so much cleaner and easier to tweek!
is there a way to link the matshead image?
is there a way to link the masthead image to url?
Great job Mike, of course…
Quick question:
For the header, I tried using a tif file to no avail. In short, I’d like to have an image with a transparent border essentially… my logo. It didn;t work.
Any ideas?
Thanks so much for everything…
-Michael
Before diving into myspace hacking, it’s a good idea to learn some basic web fundamentals/html/css. Do a Google search for “html tutorials”.
You cannot use tifs on the web. The only image formats you can use are jpg, gif, and png. The only format which supports transparency on all browsers is gif.