How to Create a Div Overlay Layout for MySpace Using Photoshop

For awhile a good friend of mine wanted a custom made Div Overlay profile to promote her business. After helping her talk to several designers and establishing that it would cost a minimum of $100.00 to get a layout designed we decided to see if I could create a Div overlay for her to use with Photoshop and basic coding. Please keep in mind that before you try to do this yourself you need to have some basic knowledge of HTML and Photoshop.

The first thing you need to do is find a template that you want to use. In my case I choose a standard website template that was in .psd format. These can be found on various websites including Adobe or Templatemonster. Or you can create your own layout from scratch in Photoshop if you are an advanced user.

Step One

Once you have found the template you want to use, or have made your own, work with the layout until it looks Precisely how you would like it to look in MySpace. This means make sure all the text you want to include (Add, Message, Block, Rank, Etc.) buttons are there along with information you want the overlay to provide about you (About Me, Interests, Hobbies, Favorites). Remember when using this layout your friends and viewers will no longer be able to see the standard MySpace categories.

When everything looks aesthetically pleasing to you and contains all the information you feel is necessary use the Slicing tool in Photoshop to create all the links necessary to navigate your profile. The easiest way to make sure you get the correct link addresses is to sign out of MySpace, go to your existing profile, and click on each link that you want to be available in your Div Overlay. Copy the address that appears in your web browsers and paste it in the corresponding slice area.

Step Two

After you are completely done with slicing each section that will be linked to an address and your layout looks the way you want it you are ready to save the layout. Go to "File" and choose "Save For Web" in order to save the HTML and Images necessary to complete your overlay.

In the dialog box that appears choose the "JPEG" file format and if you would like to have a smaller file size then use the "Optimized" settings. Then save the files to the folder of your choice and be sure that you save both the HTML and the Images when given the option.

Step Three

Once you have everything saved upload the Images that you have just saved in Photoshop to a place that can host them for you. Either your own site if you have one or a place such as Photobucket.com. From there go into your web browser, I use Firefox, and go to "File" and then "Open File". Find the folder containing the HTML created in Photoshop for your MySpace Div Overlay and open this in your browser.

You should see the layout you have just created the way it will eventually appear in MySpace. Then (still using Firefox) go to "View" and view the "Page Source". This view will show you all of the HTML code and the code that you will need for your Div Overlay should begin with:

< table id="Table_01" width="776" height="681" border="0" cellpadding="0" cellspacing="0" >

And end with:

< /table >

Step Four

Copy of this code and place it into a word processing program that you are comfortable with. Replace each of the image URLS created in Photoshop with the Image URLs provided by Photobucket or whatever hosting service you are using. For example when you see a URL similar to:

< img src="images/main1.gif" width="32" height="1" alt="" >

You will need to replace the "images/main1.gif" with "http://www.photobucket.com/images1234/main.gif" in order for your Div Overlay to show up correctly in MySpace.

Step Five

Now it is time to go to MySpace and update your profile. I strongly recommend that you either use a separate account that is solely for testing your layout OR be sure to copy and paste the code from your existing layout into a Word or Notepad file and save it in case you have unexpected problems with your new layout.

Step Six

Once you are in MySpace the first thing you need to do is hide your profile. I use the following code to hide my profile BUT allow my top friends and comments to be seen. You can also use this code to set the background color of your new Div Overlay profile.

body {
background-color:transparent;
}
body table tr table tr td.text table tr td.text table tr td table tr td { font-size: 15px; font-family:Monotype Corsiva; color:red;
}

table table,table table table table,table table{background-color:transparent;width:;border:0px;}
div,table,tr,td,th{background-color:transparent;text-align:left;border:0px;}
a.navbar,font,.whitetext12,.btext,.orangetext15,
.redbtext,.redtext,.blacktext12,.blacktext10,
.lightbluetext8,strong,.nametext,div b font font,
div font font u,table table table table, table.contacttable{display:none;}
div table form tr td,td.text table,a.text, table div font a,table div div,{visibility:hidden;di-splay:none}
table td table tr td.text table {visibility:hidden;}
table td table tr td.text table table, table td table tr td.text table table td.text {visibility:visible;}
td.text table table {display:inline; visibility:visible;}
embed{position:absolute;top:0px;left:0px;display:block;width:0px; height:0;}
.comments{visibility:visible;width:610px; height:380px;position:absolute;
top:650px;left:175px;
overflow:visible;background-color:transparent;
border:black 0px solid;z-index:2px;}

Place the code found above into the "About Me" section of your profile.

Now directly underneath the code you have inserted to hide your profile place the following code.

.Parent {
background-color: transparent;
position: absolute;
left: 50%; top: 200px;
overflow:none;
z-index:1;
border-style: none;
border-width:0px;
border-color: none;
}

The code you should now have in your MySpace "About Me" section should look like:

body {
background-color:transparent;
}
body table tr table tr td.text table tr td.text table tr td table tr td { font-size: 15px; font-family:Monotype Corsiva; color:red;
}

table table,table table table table,table table{background-color:transparent;width:;border:0px;}
div,table,tr,td,th{background-color:transparent;text-align:left;border:0px;}
a.navbar,font,.whitetext12,.btext,.orangetext15,
.redbtext,.redtext,.blacktext12,.blacktext10,
.lightbluetext8,strong,.nametext,div b font font,
div font font u,table table table table, table.contacttable{display:none;}
div table form tr td,td.text table,a.text, table div font a,table div div,{visibility:hidden;di-splay:none}
table td table tr td.text table {visibility:hidden;}
table td table tr td.text table table, table td table tr td.text table table td.text {visibility:visible;}
td.text table table {display:inline; visibility:visible;}
embed{position:absolute;top:0px;left:0px;display:block;width:0px; height:0;}
.comments{visibility:visible;width:610px; height:380px;position:absolute;
top:650px;left:175px;
overflow:visible;background-color:transparent;
border:black 0px solid;z-index:2px;}

.Parent {
background-color: transparent;
position: absolute;
left: 50%; top: 200px;
overflow:none;
z-index:1;
border-style: none;
border-width:0px;
border-color: none;
}

Step Seven

In your "Who I'd Like To Meet" section you will need to insert the following code.

Between the codes from Step Four that was originally generated in Photoshop and edited by you to reflect the correct image URLs.

Now you can update your profile to save the changes and have a look at your new layout. You can make changes to the values that I have placed in bold type to change the position of your overall layout and your background colors.