Geefx.com News Area
Myspace Layouts
CSS Layout
Have you ever seen those rather cool Myspace profiles where they look more like a website rather than a Myspace site? There aren’t any of the usual tables, and it looks more like a work of art? Well this tutorial will show you how to do that with aid of some css script.
1. To start with, you need to get rid of your old profile. All the information in all the sections should be deleted. If you’re wanting some of this to be displayed on your profile later then and you don’t want to rewrite it, then I’d advise copy it into notepad or something, but for now remove everything.
2. Now that your profile should be empty, so next we need to hide all of the tables. First of all copy and paste the following code 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>
Now copy and paste this code into your I’d Like To Meet section:
<DIV class="comments"><table><tr><td><table><tr><td>
And finally copy 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 be looking quite small now with barely anything there.
First Layer
3. Now that we have hidden your profile, its now time to build your profile. I am going to make it a simple two layer profile because its only going to take two layers to teach you to build your own.
The following code will be pasted into your About Me section. Part one of this is the background on Myspace without our first layer, so for the purpose of this tutorial I am going to make it a beige color with the hex code CCCC99. Note where I put this, as this is where you will change the background color to suit your profile.
<style>
body {
background-color:CCCC99;
}
table tr td {
background-color:CCCC99;
}
Now that I’ve got my background color done, I am going to move onto my first covering layer. For this I am going to add a background image to it (you can replace this with a color if you want. Just change background: to background-color: followed by your color.)
.layerone
{
background:url('http://img69.imageshack.us/img69/8234/backgroundse5.gif');
position:absolute;
left:50%;
margin-left:-400px;
top:155px;
height:600px;
width:800px;
z-index:1;
}
Now, in order to keep it all neat so you can separate your css code from your html, copy and paste the following into your interests section.
<div class="layerone">
</div>
There is your first layer completed and it should look a little like this:
4. Now to show you how to layer your sections. All you have to do, is change the z-index value. Higher values will bring the layer up, while lower values will bring the layer down. For example, our next layer has to appear on top of our background layer. To do this we are going to change the z-index value to a 2. Copy and paste the following code under your .layerone but remember to keep it in the style tags.
.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>This Tutorial Was Brought To You By <a href=http://www.geefx.com>Geefx.com!</a></div>
Your profile should now look like this:
Congratulations. Your have just created you first (and very basic) css script profile.
From here, you can now add your own layers (remember to increase your z-index if you want it to appear on top of a different layer), your own pictures, backgrounds whatever you want.
Below is a list of possible address you might need (links to your pictures etc). For all of these you are going to need your friend id. This can be found in the address bar
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
