When I first joined MySpace a little over a year ago, I was hooked. I loved the fact that I could express myself on this website that millions of others were using. On the other hand, I completely despised their default layout formats. I hated the boxes, the tacky little contact tables, and pretty much the whole entire way that everyone’s profiles were set up. I knew from the get-go that their layouts weren’t going to work for me.
I did some browsing one day and came across this girl’s profile that looked nothing like the others. There were no boxes, no contact table (just cute little image links across the top of her page), and it was set up just the way I wanted mine. She was using a DIV overlay layout.
I tried a number of times to get a hold of this girl to ask her how she made her profile, but to no avail. This is when I began searching. I found website after website that had DIV overlay generators but they were far too advanced for a beginner like me. I came across a website that seemed promising called MySpace Pro Designs, only to find out that it, too, was too difficult for me to use.
A few days later, my little sister ended up on the same website and to my surprise, sprawled across the top of the screen was written: “New! Simple DIV Overlay Generator!” I was ecstatic. I got on, tried it out, and ta-da! I did it! I went from a standard MySpace profile layout to the new one I have today (check it out here). Of course, it took a lot of practice to get the hang of things and a ton of websites helped me tremendously. Now I’m here to share with you exactly how to use this generator and which websites you can use to add a few touches of your own.
1. Visit The Website & Choose Your Design
Go to http://www.myspaceprodesigns.com and take a look at the top of the page. You will see a number of link buttons, one of them labeled “Generators”. Click on that and it should take you to another page with a list of all the generators they have for your personal use.
Scroll down to “Full Profile Generators” and below it you will see three different green bars. Click on the one that says “Simple DIV Overlay Generator and Previewer” (or just click here). This should take you to a page with a bunch of small thumbnails with little boxes in them.
If you look at the top, you will see links that say 1 and 2 Box(es), 3 boxes, etc. These are the boxes that your content will go in. For example, if you want a section for pictures, a section for information about you, and a section for links, you would choose one of the formats with three boxes in it. Click on the format you wish to use and it should take you to a screen where you can customize your design.
2. Customize Your Layout
Once you’ve chosen your format, you will see a picture of it and then below that you will see various areas in which you can edit this design. These areas include background, divs, text, links, and link hover. I’m going to explain to you what each editing option means.
The main background is basically just the color of your entire page. On top of this background your boxes (or DIV layers) will sit and inside of those boxes will be your information, pictures, links, and what-not. Text and links is where you will edit the main text and link formats for your entire profile. Link hovers is where you will choose what you want your links to look like when someone puts their mouse over them.
Background Color – When editing the background section, this will be the color of the background that your boxes (or DIV layers) sit on top of. This is where you will place the color code of the background you choose.
When editing the DIV’s section, this will be the background color of the boxes that your text and pictures will go in.
For all of the color codes, please visit http://www.pagetutor.com/common/bgcolors1536.png.
Background Image – If you don’t want a color for your background either for your page or your boxes (or DIV layers) and instead want an image, this is where you would put it. You will need to upload an image to your photobucket album (or whatever image website you use) and paste the direct link URL in this box. If you do not wish to use an image, leave this blank.
Image Repeat – If you are using a tiny image but you want it to take up the whole page, you would want the image to repeat. If not, you would choose “no repeat”. No image? Don’t do anything with this part.
Image Position – Let’s say that you have a small image and you don’t want it to take up the whole page, you only want it in the center. This is where you would change that. Once again, if you are not using a background image, leave this blank.
Image Attachment – If you’re using a background image and want it to stay in place when someone scrolls down your profile, choose “fixed”. If you want the image to scroll with your page, you would choose “scroll”.
Opacity – This basically means transparency. If you want your DIV layer boxes to be someone transparent, you would make the opacity less than 100%. Usually 85-90% does fine. Anything less than that will make your profile harder to read especially if you have a detailed background. If you don’t want any transparency and want your boxes to remain solid, keep the opacity at 100%.
Border Width – This will be the border around your DIV layers. Usually 1-7 is okay, anything larger will look tacky (in my opinion). If you do not wish to have a border, leave it at 0.
Border Style – You can have a solid border, a dotted border, etc. Choose wisely. If you do not want a border, don’t mess with this area.
Border Color – This is where you will choose a color for you border. For a list of all of the color codes, please visit http://www.pagetutor.com/common/bgcolors1536.png.
The text, links, and link hovers editing should be pretty self explanitory, so we will move on.
3. Generate!
Once you’ve finished customizing your layout, click generate. This should take you to another page with a preview of your layout and the codes. Go to your edit profile page on MySpace, make sure that everything is deleted on your profile except for your headline and copy these codes into their specified place.
4. Edit the Codes and Add your Links
Okay, this is where it gets a tad bit tricky. The only code you will need to mess with is the code you pasted in the “Who I’d Like to Meet” section of your profile. If you scroll down near the bottom, you will see a part of the code that reads, This is box 1. If you chose to use more than one box, you will see it again but it will say This is box 2. and so on. You will erase the text that says, “This is box (number here)” and that’s where all of your images, text, and links will go. So, to put it simpler, all of your text will go between the and the tabs.
Like I said, if you chose more than one box, you will see an area for box 1, 2, 3, 4, etc. If you wish to specify one box for images, one for text, and one for links, you would put all of your link codes in box 1, all of your image codes in box 2, and all of your text in box 3 for example.
Now, keep in mind that because you’re using a DIV overlay, the contact tables will no longer be there. You will have to add your own links. The link codes are below, all you have to do is add your friend ID where the X’s are. You will need to turn these into links yourself.
Add – http://messaging.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID;=XXXX
Send Message – http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID;=XXXX
View Comments – http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID;=XXXX
Comment -http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID;=XXXX
View Pics – http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID;=XXXX
Read Blog – http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID;=XXXX
Once you are finished, you can turn the links into images, add some cool extras to your page, and a lot more to get it looking exactly the way you want it to. For help on how to make links, image links, and what have you, be sure to visit http://www.lissaexplains.com and click on “HTML”. Hope you enjoy your new, not-so-typical, myspace layout.
