Advanced Layouts – DIV Layouts
What you will learn
Create a Div Layout profile
Creating a Div Layout Profile is one of the more complex Myspace edits you can accomplish. Stripping the rules of Myspace off, it is possible to do whatever you want with your profile, and hopefully this short tutorial will explain the key concepts in creating it.
1. To start with, you need to remove your original code from your profile. All information in the sections should be deleted, so if you’re wanting to save it, then copy and paste it into a notepad file.
2. Now that your profile should be empty, we need to hide all of the tables that Myspace produce. First, put this into your about me section:
<style
type="text/css">
.btext {display:none;}
.contacttable
{display:none;}
.lightbluetext8 {display:none;}
.nametext
{display:none;}
.orangetext15 {display:none;}
.redlink
{display:none;}
.whitetext12 {display:none;}
.hidethem
{visibility:hidden; display:none;}
.comments
{visibility:hidden;display:none;}
</style>
Then this into your Who I’d Like To Meet section
<DIV class="comments"><table><tr><td><table><tr><td>
And finally this into you Hero’s section:
</td></tr></table>
</td></tr></table>
</td><td
class="text">
<div
class="hidethem">
<table><tr><td><table><tr><td>
Your profile should now have no information on it except your picture and your contact table.
3. Now that your profile is hidden, we need to start adding layers to build up a new one. In this tutorial, I will only add two, but you can add as many as you want. Two will hopefully show you the basics to creating your own div profile, so you can start to experiment on your own.
The following code will set the color of your profile background, so choose a suitable color. I have chosen black here for the purpose of this demonstration.
<style>
body {
background-color:black;
}
table tr td {
background-color:black;
}
With the background layer done, im going to move onto my first layer. This will cover the image of yourself and the rest of the stuff that’s there on your profile
.layer1
{
background-color:green;
position:absolute;
left:50%;
margin-left:-400px;
top:155px;
height:600px;
width:800px;
z-index:1;
}
Then copy this into your interests section:
<div class="layer1">
</div>
Congratulations, you’ve completed your first layer! Now its time to move onto the second one.
4. There is a very simple principal behind layering your profile, and that is with the z-index command. With the z-index command, we can layer profiles on top of each other. Higher numbers mean they’ll be on top of lower numbers. Copy and paste the following code under the code you’ve already created in your about me section.
.layertwo
{
background-color:cccc99;
position:absolute;
left:20px;
top:20px;
height:30px;
width:160px;
padding:20px;
z-index:2;
}
Then copy and paste this in between <div class=”layer1> and </div>
<div class="layertwo"><center>Hello I made a div profile</div>
You have now just created a very basic div layout profile. From here you can edit the code, create new layers (remember to add a higher z-index than the last) position it where you want using the top and left commands. The sky’s the limit as to what you can do. Although to help you, I’ve included a list of codes you can use to link to certain areas of your profile you haven’t changed. You will need your friend ID which can be found in the address bar when you’re on your page. The numbers in bold will be your friend ID.
http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=000000
Copy and paste it into each of these links, where it says friendid
Pictures: http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=friendid&MyToken=c0b8f541-65a8-4e91-ab3c-064690d8a4d8
Videos
http://vids.myspace.com/index.cfm?fuseaction=vids.showvids&friendID=friendid&n=124725820&MyToken=c0b8f541-65a8-4e91-ab3c-064690d8a4d8
View All Comments
http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=friendid&MyToken=c0b8f541-65a8-4e91-ab3c-064690d8a4d8
Add Comment
http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=friendid&MyToken=c0b8f541-65a8-4e91-ab3c-064690d8a4d8
View Blog
http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=friendid&MyToken=c0b8f541-65a8-4e91-ab3c-064690d8a4d8ML