Blanking Out Your Profile

First of all, you will need to blank out your Myspace profile. All the text, links, images, etc. that are on there normally (basically EVERYTHING) can be made invisible... and Myspace must be obliterated!! Doing this is easy, you just need to copy THIS IMPORTANT BUNCH OF CSS CODE and paste it into any of the text areas of your profile (i.e., the "About Me" section, or the "Interests" section.) (Tip: to quickly copy all of this code, you can go to EDIT in the menu bar and hit SELECT ALL, then COPY it.)

This code doesn't delete anything on your profile, it just makes it all temporarily hidden (and actually, everything is still visible in the page's source code.) There's a lot more code in there than there really needs to be, it's not very complicated. The only tricky thing about getting it right was trying to make as much of the page invisible as I could, without hiding the controls that let you save your changes on Myspace (even Myspace's "safe mode" does not help out with this.) All that I've added here is the CSS property "visibility:hidden;" ...simple stuff!

Next you'll want to replace the "YOUR BG COLOR GOES HERE" and "BG IMAGE URL" text that's in that code (colored red on the page) with whatever color or background image you want to have on your profile. You don't need to have both a color and an image (you can delete some of the code.) A color looks something like this: #FF0000, or you can simply write in "blue", "green", etc. An image's URL looks something like this: http://www.theageofmammals.com/images/blue.jpg. (More on images below.)


Adding Images On Top

So now you have a blank profile, with a background image and/or color (and also a blue rectangle remnant where the ad banner used to fly so proudly.) Now you want to add images on top of it! You can pile <div> layers on top of your page. Here's the basic code that you can copy and paste into any text area of your profile (i.e. "About Me"), the things you have to replace are in red:

<div style="position: fixed; left:x; top:y;">
    <img src="url" width="w" height="h">
<div>

So, filling in x and y with number values is how you position your image on the page. The numbers can be either pixel or percent values. If you want them to be percentages (i.e. you want your image to be 20% down on the page) just put a % sign after your number. Usually you have to test these values out to see where the best position is through trial and error.

The width and height parameters are totally optional, meaning it'll work even if 'width="blah"' and 'height="blah"' aren't written in. Filling w and h in with number values lets you change the size of the image. These are only necessary if you want to make the image a different size than what it is now (i.e., stretch it.) Percentages are acceptable here, also. (Tip: if you enter a width value and no height value, the image will automatically resize itself to the height it needs to be to maintain its correct proportions...simple!)

The url is just a link to whatever image you want. Either you can find this image online, or, if you want to make your own image or use your own photo, you can upload it for free to a site like PhotoBucket.com and then link to that. Animated GIFs are super fun and are thankfully still all over the Internet, just ask Google for what you want. GIFs and animated GIFs with some sort of transparency are nice because you can see through to what's behind. You can put a whole bunch of these images on top of eachother if you want.

Here's a neat trick that will allow you to stretch your image out over the entire window (making it huge and stretchy!):

<div style="position: fixed; left:0; top:0; height:100%; width:100%;">
    <img src="url" width="100%" height="100%">
<div>

(Note: some sites whose images you'll want to link to might not permit you to because by linking in this way you are basically putting a bit of extra stress on their web server and stealing their bandwidth...! This is called "hotlinking." It's sort of sneaky, but don't worry about it. Most of the images in my Myspace profiles are hotlinked, there's just always the threat that a site might take down a certain image or prevent you from linking to it, and then it won't show up on your profile anymore (doh)!)


Adding Sound

To add some cool tunes to your website, you'll need an embed tag, like this one (which, again, you can paste into your profile in any text area you want):

<embed allowScriptAccess="never" src="url" autostart="true" loop="true or false" hidden="true">

So, again, url is the link to the music or sound file (i.e., WAVs, MP3s, MIDIs, etc..) MIDI files work really well because they download a lot faster than MP3s, and also they're super cute. Looping can be set to either true or false (or if you're super sneaky, "palindrome"!!), but be warned that loops on webpages are rarely seamless.

(FYI it seems like Myspace is not allowing you to embed your own music on your page anymore...)


Do it

I glossed over some of the technical stuff, which you can search for if you're interested, but it's not necessary...doing this is really simple. A lot of it just involves saving things and reloading them and trying them out over and over until it looks cool. Please don't hesitate to email me if you need help.. but this code only works for making stuff that looks like the above profiles. You can't add links and you can't display your comments, top friends, etc... sorry... I'm sure it's possible but I don't know how.