MySpace Electropunk Div Overlay 1.0

Warning If you are fairly computer-illiterate and don’t know Photoshop from the place that develops your prints on the corner, move on immediately. Implementing this layout requires advanced web design skills. It is offered with no technical support. Requests for help will be immediately deleted.

It amazes me how utterly stupid the vast majority of MySpace users are. It doesn’t surprise me why Newsvine creator Mike Davidson turned off comments on his post on MySpace development: the users don’t read, they’re generally only half-literate, irresponsible and have no care for what’s being developed for their eventual benefit. Yes. I went there.

After spending hours writing The web designer’s guide to MySpace, MySpacers gladly took the code I had written and formed it into all sorts of overlays including making their own from scratch using the tutorials, learning (or leveraging their existing) XHTML, CSS and graphic design skills required to build much better-looking layouts for a social network plagued by gross negligence of usability and web design skills. To continually evolve my own skills and “brand” within the MySpace sphere, I developed another design for my profile, a grey, white and pink design that felt MySpace-y and pretentious, added some equally pretentious, self-parodying copy, and released it live to the world. At its inception, the profile even played Panic! at the Disco. It was really MySpace, and that was exactly what I wanted it to be.

It didn’t take long, however, to notice that many teenage MySpace users really liked my code; with 14,995 views of the profile as of 16 February, a few decided that it wasn’t worth attempting to build their own: instead, they’d just plagiarise the one I had built exclusively for myself. Of course, most of these plagiarists, with their limited ability to use Photoshop or other such tools, ended up with horribly hacked-up versions of the original code, complete with pixellated images and aliased text. Since they didn’t bother to copy over the images, instead leeching them off of my own server, I was able to have a little fun with a few of the plagiarists. After sending them a few nasty messages, most of them complied and took down the fully-copyrighted MySpace profile code I had written.

I was angry. I was confused. How could people be so stupid? How could people take the work of someone else and write it off as their own? In some of the cases, I found myself wondering why I had ever developed a div overlay guide for MySpacers at all. I secretly wanted the social network to die.

Forgetting the wrongs

Of course, as much as I generally hate a fair amount of the MySpace community, I’m willing to give them another chance. Some six months after its development, I’m releasing my old design to the MySpace community as promised, just like I do with all of my public designs. No worries about plagiarism now: I’ve relicenced the code under a Creative Commons By-Nc-Sa 2.5 Licence, so it’s absolutely free and distributable for personal use. All I ask in return is that you link back to hyalineskies within your profile or your MySpace blog.

Not for the faint of heart

Once again, let me warn everyone that is downloading this: customising this layout will require skills in Photoshop as well as general knowledge of HTML. This div overlay, much like my last one, is not a copy-and-paste job; instead, it will work the best and be the coolest if you spend some time customizing it and slicing images properly. If you are new to MySpace DIV overlays, read the guide before you continue: it will save you literally hours of time and frustration.

First, you’re going to need some creative assets, the media that you want to display visually (or aurally, in the case of audio) on your blog. This includes all of the text that you want the profile to display, as well as a photo of yourself (preferably high-res and good for cropping to an extreme horizontal) and an MP3 audio file that you’d like to play (if you want to use the audio player.) If you want to maintain the same typography used in the stock template, you’ll need Helvetica Neue (which is unfortunately not free) and Jason Kottke’s awesome pixel font Silkscreen.

On a more development-oriented plane, if you plan on using the Flash-based RSS widget, you’ll also need to know where your blog places its RSS feeds. If it’s not obvious, you’ll also need publicly-accessible web space to upload all of the files to. You’ll also need to make sure you implement a Flash cross-domain policy to get the RSS widget to work properly, something I explained in detail in this article.

Getting Started: Customizing the Visual Design

Once all of this has been collected, you’ll need to edit layout.psd for images, html.html for your text and to get your links to work and playlist.xml for your audio player to properly function. Once you have your images, you’ll want to inspect some of the stock image slices and figure out how your own image should fit into it. photo.jpg gives a quick container reference to how you should crop your image; you should also attempt to slice the PSD to the same dimensions (or just edit photo.jpg if you aren’t worried about image integrity, placing your image over the green area.) The image area is marked within layout.psd as its own layer; simply crop your image to the proper dimensions and place it within the layer. Since I don’t ever use the Photoshop slice tool, you’ll need to manually slice your images to get the desired effect. Simply overwrite photo.jpg with your own.

If you want to change the background image to display your name or your own tagline, simply edit the respective text layers in Photoshop, turn off all upper layers so you simply have the text and background displayed, and then Flatten the visible layers using the Layers -> Merge Visible menu option (Apple+E on the Mac, Ctrl+E on the PC.) Using the rectangular marquee tool, start at x: 0 y: 0, crop to a dimension of 800x840, and then use the Save for Web option to overwrite main_back.gif. (Also, as an easter egg: If you’re a really experienced graphic designer, there’s a blood-red background option sitting below the grey; note that you’ll have to change a few CSS values to convert the pink to something higher contrast to use this option instead.)

Once you’re done with that, you’ll need to make up to six friend images. Examples are included in the template as a guide; you’ll need to slice down to 200x50 and save with appropriate filenames.

Customising the HTML, CSS and XML

You really don’t need to know how to write a whole lot of HTML from scratch to perform this part of the customisation; instead, you just need a firm grasp on Find/Replace and reading HTML comments to know what to place where. First, add in your text for About Me, Who I’d Like to Meet, Comment Guidelines, Music and Stats in the proper locations; all of them are marked with inline HTML comments (which look like <!-- -->). Once you’ve added your copy, you can go through and simply replace the other fields with Find/Replace. All necessary, user-replaceable URLs/fields are between hash (#) glyphs; for example, #FriendID# means that you need to replace that section (including the hashes) with your Friend ID. Below is a list of all field codes used that need user replacing.

• #friendID# Your friend ID (for example, mine is 16608804). If you don’t know your friend ID, this tool will retrieve it for you.
• #YourURI# The URI to which all of your images, .swf files and MP3 file are in. This is on a remote server someplace.
• #rssURI# The URI to the RSS feed you want the blog reader to reference.
• #blogURI# The URI of the blog’s publicly-accessible page that you are pulling #rssURI# from.
• #photosURI# A URI to a place where more photos of you are kept. This can be your MySpace “View more Pics” URI or something off-site, such as Flickr.
• #Filename# The filename of your MP3 file. This only appears in playlist.xml.
• #friendImageName[Number]# URIs to your friends. You’ll need to change these to correspond with the friend images you made above. An example is included (that links to my profile) in html.html.

Once you’re done with that, open css.css and do a Find/Replace on #YourURI#, replacing it with the URI where you are hosting all of your images.

To edit the XML, simply open playlist.xml and edit out the URL, Song Creator, and Song Title with the respective MP3 URI and song details. If you need help writing this format, check out this part of the guide.

Once you’re done, check through your code to make sure you closed any new HTML/XML tags and replaced all fields with their proper values.

Uploading the final overlay

If you haven’t been using a div overlay previously, delete all existing user comments and profile data from your MySpace profile. This data will break the div overlay and allow some things to show from underneath, so the more you can get rid of the better. To keep user comments from appearing and breaking your overlay, turn on Comment Approval under Profile Options. Don’t really ever approve the comments for use on the page; doing so can break the overlay. Some users have found workarounds documented in the comments on this article.

You’ll then need to upload your MP3 file and all images (except the PSD) to the directory you specified in the XML and CSS above on your web server. If you don’t do this, you’ll notice that your profile is oddly blank and may have a few broken images.

Once you’re done with that, copy all of the contents from css.css to your About Me section and your edited html.html to the Who I’d like to meet section. Save your profile and test everything. If something isn’t displaying right, make sure that you properly edited the files and that everything is uploaded to the location where you specified it. If your RSS reader doesn’t seem to be functioning, make sure that you have a cross-domain policy named crossdomain.xml in your server root (/) where you uploaded your files. If you’re absolutely convinced that it’s my error and have checked everything above, e-mail me and I’ll do what I can to help. 99% of the errors that occur on implementing this overlay are due to field replacement errors in css.css or html.html.

If everything works as planned, you should have something that looks relatively similar to this screenshot over on Flickr; if it doesn’t and the layout appears horribly misaligned or broken, re-download the files from the server and start over if you aren’t good at debugging HTML and CSS; if you are, make sure that you didn’t edit the CSS in any drastic ways and closed any HTML tags you added to the layout.

Once you’ve got all of this under control, voila! You’ve successfully built an immensely cool new div overlay. If you’ve made some really drastic edits to it, feel free to post your modifications in the comments below (including a link to the code) for others to use.

Comments

Comments RSS Feed for “this post”

External Discussion

Displaying the only trackback.