This will be part one of a series for creating your own MySpace DIV overlay. I will try to keep this tutorial simple and straightforward. The idea is to cover the entire default MySpace profile with your own custom page. While DIVs can be used to cover specific areas of the profile [while retaining much of the default page], this series will walk you through the steps necessary to cover the entire default profile [see my current profile here]. The easiest way to visualize a DIV overlay is to imagine a stack of strategically placed “layers”.
Insert the following CSS into your ‘About Me’ section:
<style type="text/css"> .main { position: absolute; left: 50%; top: 125px; width: 800px; z-index: 1; margin-left: -400px; } </style>
The important properties above are top and margin-left. Adjusting top will reposition the table vertically. The smaller the number, the closer the table (base DIV overlay) is to the top of the page. If you want to cover the MySpace navbar, edit 125px accordingly. Margin-left controls the table position (left of center).
We’re creating a table with a height and width of 800px. Feel free to change the background color as needed (currently set to white). If you’re looking for color resources I’ve bookmarked a few sites on del.icio.us. Insert the following HTML into your ‘I’d Like To Meet’ section:
<div class="main"> <table style="width: 800px; height: 800px; cellpadding: 0px; cellspacing: 0px; background-color: FFFFFF;"> <tr><td valign="top"> INSERT CONTENT AND ADDITIONAL DIVS </td></tr></table></div>
That’s all I’ll leave you with for now. The base layer is all that’s really needed to get started with your own custom DIV overlay. Your default layout should be completely covered by a solid table with the text ADDITIONAL DIVS, CONTENT, AND IMAGES GO HERE assuming you copied everything verbatim. You can replace that text with additional TABLES, DIVS, text, or images. Note that it is essential that any previous code you may have inserted into your profile be removed before creating your overlay. Note that the DIV does not cover the top advertisement. Covering the banner ad is aginst the MySpace TOS.
The basic MySpace div overlay that I have written the tutorial series for is available for download here.
- Part One: MySpace DIV Overlay [The Base]
- Part Two: MySpace DIV overlay [Navbar / Content]
- Part Three: MySpace DIV overlay [Comments]
- Part Four: MySpace DIV overlay [Color]
- Dark minimal MySpace DIV overlay
- Minimal Lime MySpace DIV overlay
