Create Myspace HTML code for custom header

Recently I created a Myspace for YHA Australia. The new Myspace 2.0 profile customisation tool is a much improved interface on the old, hack-laden previous version. Using a combination of CSS and HTML, you can create a custom Myspace DIV layout that allows you to keep the functionality (comments, friend lists) while adding your own content (custom image header) and div layout objects.

Part one: Setup and custom header

To start off, you'll want to create the page as normal in the Myspace 2.0 tool while avoiding the use of any templates. This allows you to have complete control of the design. The first thing most people want to know is how to add a custom banner on top of the page. This can be achieved using the following steps:

1) Insert the below code in the "CSS" field of the Myspace profile 2.0 tool. You will need to adjust this to fit your image and website design. Mess with the "margin-left" and "width" until the page lines up, then adjust the height to be the same as your custom image.

div.custombanner {top: 0; left: 50%; margin-left: -380px; width: 750px; height: 650px; position: absolute; }

2) Now go to the "About me" section of the page and click "Edit Blurbs."
3) At the top of the "About me" field, put the following code:

<div class="custombanner"><img src="YOUR_IMAGE_URL_HERE" /></div>

4) Preview the page. Your image should now appear above the rest of your page, including ads.

[This post is to be continued.. Please comment if you have questions/tips.]