Beginners Guide: The MySpace Div Overlay
brought to you by dizbe.com
Millions of people today use and abuse Myspace. It has been an amazing social phenomenon that has taken the internet world by storm. You’re no longer considered a ‘nerd’ for spending hours upon hours at your computer posting message and writing blogs.
Unfortunately, in the case of Myspace, most of the users are still stuck in the early 90’s of what looks good on the internet. So in my quest to make the internet a more beautiful experience, i’m going to try to aid these people who are looking for something different in their Myspace experience. For those who understand that there is more to a template that shiny animated .gif’s.
Below, I have created this basic style structure point for anyone who is looking to build and design their own Myspace Div (overlay) layout, to cover-up their cheap, generic profiles.
Before you do this however, I expect you to have a general understanding of basic css and xhtml, as well as some general web design. The plan here is one that is often skipped over in most tutorials, and that is, I want to increase your understanding of how to piece together your very own layout. This tutorial isn’t just about me giving you some code that you can modify to make it your own, I want everyone reading this to learn how to create their very own masterpieces
So, before you begin, you’ll need to clear your current profile of all content (ex - music, boks, large pictures, basically anything that is going to make your profile too large to fit behind your template)
Next, you’re going to create that basic <div> overlay. This code uses a “main” div to overlay the current myspace template, and hide it from view. It then uses another div within itself to hold all of the content center of the browser.
So are a base for your template, paste this code into the
About Me section of your profile. This is the
CSS part of the website. This will define all look and style of your content.
Code:
<style type=”text/css”>
body {
font-family:arial, verdana, sans-serif;
font-size:62.5%;
background-color:ffffff;
}
.main{
background-color:ffffff;
width:960px;
height:900px;
position:absolute;
left:50%;
top:133px;
z-index:1;
margin-left:-480px;
}
.container {
background-color:cccccc;
width:800px;
height:100%;
margin-left:80px;
}
</style>
Then, within your
Who I’d Like to Meet section, use this XHTML for your new profiles layout. It will define the structure and actual content
Code:
<div class=”main”>
<div class=”container”>
*Content and additional Divs Go here*
</div>
</div>
<div style=”position:relative; height:400px; overflow:hidden; border:0px;”>
<table><tr><td><table><tr><td>
So essentially, this code creates you a blank starting canvas for your new profiles code. It works simply by placing a <div> over the top of the entire original myspace profile. And within that, you have your actual container where you can add your actual websites structure later on.
Now that you’ve covered up the old bland myspace profile, you are left with a blank canvas. You can now start being creative and essentially create your own content and layout. I would start with Adobe Photoshop (or whatever design program you use), and use
Prnt Screen, And start designing your new template!
A few basic tips you must know though:
- The width of your website should not exceed 800px.
- Don’t forget that you are not allowed to cover up the ads on you Myspace page
- Remember that when creating a div overlay you will need to recreate all basic functionality again.
- You need to design a section where people can leave comments - ie a text area, with a submit button and link to view all the comments.
- Most importantly don’t forget to recreate the links in your design that allow people to ‘add to friends,’ ’send message’ etc..
This tutorial will be followed by a more in depth tutorial on how to actually design within the blank canvas I’ve left for you.
Linear Mode
Forum Contains New Posts 
Forum Contains No New Posts 
Forum is Closed