I know that many people have been curious what this is and how to make one. Here is an example of what a div overlay is. A large box covers your old myspace and new, smaller text boxes are placed over it. With the boxes you customize your myspace by inputting text or images.
A large benefit of making a div overlay is that you get to get rid of those annoying sections you never liked. This could be the extended network, what books you read, etc. A downfall is that this can be very time consuming if you're inexperienced with HTML. Don't panic, I will try to make my directions clear and concise of how to make one. Please feel free to ask for more specific detail and/or point out where you get confused.
A large benefit of making a div overlay is that you get to get rid of those annoying sections you never liked. This could be the extended network, what books you read, etc. A downfall is that this can be very time consuming if you're inexperienced with HTML. Don't panic, I will try to make my directions clear and concise of how to make one. Please feel free to ask for more specific detail and/or point out where you get confused.
Step 1: Save ALL of your old layout and text. Your About Me, I'd Like to Meet, etc. Save it all on a WordPad or Word document. You're going to want to refer back to it later.
Step 2: You're going to need to save all of your important links. Covering your old myspace will no longer give you access to certain links. In your WordPad or Word document, save links such as: Send Message, Add to Friends, View All Comments, Submit a Comment, View All friends, View Pictures, etc. Make sure you get ALL of the links that you want. Some of them you're not going to see again after you cover your old myspace. Be sure to label which link sends you where so you don't get them mixed up.
Step 3: Simplest step. Delete everything off of your myspace. You're in good hands; all of your layout is already saved on Word just in case you want to undo this.
Step 4: Now is where we begin to input codes. In your currently blank "About Me" section, put in this code:
This is the first half of the code that covers your myspace. After you have put this code in, put this code below that one, in the "About Me" section:
This code hides your comments. No worries, you will still be able to access them and have people send you comments. You most likely cannot have a div overlay and display comments on the same page. It just looks plain weird. There may be a code out there for it, but I haven't come across it.
Step 5: Next we will input the second half of the code that covers your old myspace. Input this code at the very top of your "I'd Like To Meet" section:
Here is a quick review of what each means: width:815px means how wide the large box will be that covers your old myspace. You probably won't be changing this number. height:1380px means how tall your lage box is that covers your myspace. Depending on how much content, images and text you have, you will make this number smaller or larger. border:2px solid is how thick your border is going to be. You don't really need to mess with this when covering your old myspace. background-color: ccccff is the background color of your new myspace layout. This is simply a matter of color. Click here to get a list of color numbers [in hex code] that you can input as your background color. Or to put it simple, you're probably familar that FFFFFF is a white background and 000000 is a black background. |
|
 |
|
|
|
|
|
This is the finishing code that covers your myspace and hides comments.
Step 7: Finally we will add text boxes so you can customize your new myspace. The following code will be used several times when making your myspace:
Content and text goes here.
left: 100px means how far from the left the box will go. If you put in "left:10px" your text box will be very close to the left. If you put in "left:500px" your text box will probably be closer in the middle, depending on your width. When putting in the number of px you go left, it's more of a trial and error. You're going to have to hit "Preview" and go back to "Edit" several times before you get your text box where you want it.
top: 100px means how far from the top your text box will be. If your number is "top:10px" your text box will be very close to the top of your myspace page. If you put in "top:500px" your box will go lower towards the bottom of the page.
border: 2px solid is simply how thick the border of the text box is going to be.
width: 200px is how wide your text box is going to be. 200px-350px is probably an average width for a text box. You don't want to stretch your page too much
background-color:FFFFFF is the color of your text box.
height: 160px is simply the height of your text box.
Step 8: Inputting text in your text boxes is simple. It allows HTML. If you look at the Accurate Code Thread, you will find simple codes to get you going if you don't already know how.
Step 9: Here we will make a custom comment box so friends can send you comments. If you already have a comment box, you can skip this step. Here is the code for the comment box:
If you look at the code carefully, it really isn't hard to understand. If you paid attention of how to adjust color and border styles above, it should be simple to understand how to customize your comment box.
The only major part that you're going to need to know how to change is:
The friend ID value is going to change. My friend ID value is 58201080. You can find your friend ID number when you view your own profile. If you don't do this correctly, your friends will not be able to send you comments.
You are finished! I hope that this tutorial was useful. Please leave comments of how I did or suggestions to improve it to make it more clear. Thanks.
Captain