Untitled Document

Installing a DIV Overlay Layout to your Myspace

Even though this tutorial is aimed at amateurs, you will still need to have some HTML experience in order to add your own content to the DIV layers.

FIRST OF ALL, DELETE ALL CONTENT FROM YOUR MYSPACE. EVERYTHING. THERE CAN'T BE ANYTHING IN YOUR ABOUT ME, OR WHO I'D LIKE TO MEET, OR HEROES.

If you want to keep your old content, back it up to your computer by saving it to a text file.

Then, continue reading this ;)

Step 1) How to Find Your Friend ID

- One of the first instructions you will always see for a DIV overlay is something like "Replace all the XXXXXXs with your friend ID." So what is your friend ID exactly? It's your own unique number that is associated with your myspace page, and all of your interactive links on your page (Add Comment, View Pics, etc) must contain this number, or they won't work.

To find your friend ID, go to your myspace.com home page

Once you're there, click on the link below your default photo that says Profile
(The link is outlined with a red box below)

When your profile loads, look in your browser's address bar. You will see a link that looks like this:

The number highlighted in red will be your friend ID. It will be a different number to mine, obviously, but it will always come directly after friendID=

Step 2) Replacing the XXXXXXs with your friend ID

- Now, you could go through your code by hand, look for all of the Xs, and replace them with that number. But there's an easier way. ;)

Open the simplest text editing program you have on your computer. If you use Windows, that's probably Notepad, and it should be located under Accessories in your Start Menu. To find it, go to Start > Programs > Accessories > Notepad.

Once you have it open, go back to the page with the codes on it, right click to select them all, and then press CTRL + C
This will copy the code.

Then paste it into your Notepad document. There is no need to save it. Once you have the code pasted into Notepad, go to Edit > Replace (within the Notepad application).

It will bring up a pop-up box like the one above. Next to where it says Find what, type XXXXXX, or whatever else the layout instructed you to replace. Where it says Replace with, put your friend ID. Then click Replace all.

This will automatically replace everything with your friend ID.

Step 3) Putting in your own photo

In most instructions you will also see directions saying something like:
"To replace the kitten's photo with your own photo, search for http://cbimg6.com/layouts/07/06/05/18234ac.gif in the code and replace it with the URL to a photo of you."

The first step in doing this is to find the URL of your photo. To do this, go to your myspace pictures and right click on the photo you want to use, then select Properties. Another box will pop up.

If you're using Firefox, the box will look like this:

You need to copy the entire URL that is next to the word Location. Select the entire URL by clicking at the beginning of it, and holding down your mouse and dragging it until you reach the end of the URL. It should end in .jpg or .gif

The URL for our image is http://a594.ac-images.myspacecdn.com/images01/88/m_9ed973a2bc1f797df849b73caaa28341.gif
Yes, it's long. :)

If you're using Internet Explorer, the box will look like this:

You need to copy the entire URL that is next to the word Address (URL):. Select the entire URL by clicking at the beginning of it, and holding down your mouse and dragging it until you reach the end of the URL. It should end in .jpg or .gif

Once you have copied the URL to your image, go back to your open Notepad document where you have the Who I'd Like to Meet code.

Go to Edit > Replace again. This time, next to Find what: put the image URL that you need to replace. Next to Replace with:, put your image URL that you just copied. Then hit Replace all.

Once you've done all of this, you're safe to paste the Who I'd Like to meet code into your actual myspace. So go to Edit > Select All and copy the entire code...

Then paste it into the Who I'd Like to Meet section of your myspace.

Then go back and copy the About Me code, and paste that into the About Me section of your myspace.

Then hit Save All Changes at the bottom of the page.

When you go to view your profile, you'll see that none of your old content is there. That's because you deleted it lol. Remember? (rofl)

With DIV overlay layouts, you have to add the content manually. It's just a matter of figuring out where the text will show up depending on where you put it in the code. So go to the Who I'd Like to Meet section, and look at the code that's in there.

Before each section in this layout, there's an image header titling the section. You can see in the code that there's a part that says "about.gif," so that must represent the About Me image header, so the text below that must be where you put your About Me text. The same thing goes for Interests.gif = interests section, and friends.gif = friends.

If you're still having trouble finding where to put the text, just experiment. Try putting in a word, then hit "Save All Changes" and see where it shows up.

If you're using a layout that has a friend section, and you want to add links to your friends' profiles and their photos:

Each snippet of code that creates one friend photo that links to their profile will look something like this:

The layout may tell you exactly what one friend link looks like. But let's say the above code represents one friend pic/link, like I said.

the friendID is your friend's friend ID/URL. To get it, just go to their myspace profile and look in the URL.

It's the number at the end, just like on your own profile. So paste that into the code:

The http://falsetigerlimbs.net/layouts/overlays/kitten/friend.gif URL is what you need to replace with the link to their photo. How do you get the link to their photo? Why, using the same method that you used to get the link to your OWN photo. You will need to choose the tiniest photo of them possible, which will be from your friends list or your top friends.

You see what I mean? You need to choose one of these SMALL photos, not their default photo, or a huge photo. Right click on the photo you want to use, and go to Properties. Copy the URL to their photo, just like you did for your own photo.

Then go back to the snippet of code, and paste it in place:

Then hit Save All Changes once more, and this time when you go to your profile, you'll see that you have a friend link in place:

So then just keep doing that until all of the hearts have been replaced with your friends' photos/links.

And then, your layout is installed, pretty much. :)

I'll add a few more tutorials that have simple HTML codes soon.