Hacking MySpace

Div overlay layouts are the holy grail of MySpace customization. Basically they allow you to create a profile that looks completely different to the standard MySpace profile. However, the only problem is, that div overlays are quite difficult for newcomers to understand. In this series of articles I explain exactly how to create a div overlay layout. Here’s part three.

As I mentioned in part one of Creating a div layout, I’ve written an article that provides an overview of the process of creating a div overlay, so I suggest that you read that first (if you haven’t already read it).

Creating a div overlay involves the following steps:

• Erasing or hiding the existing profile
• Restyling the parts you want to keep
• Styling new profile sections
• Placing new div sections in the profile
• Within these divs, placing the new content and linking to the standard MySpace functions

In part one we looked at how to erase or hide the existing profile. In this article we look at how to restyle the parts of the profile that we want to keep. In part two we looked at how to restyle the part of the profile we wanted to keep. In this part we start styling the new profile sections.

You’ll find it much easier if you have at least some knowledge of CSS. I devote a couple of chapters to CSS in Hacking MySpace, but you’ll also find plenty of resources on the Internet via Google, like W3 Schools.

If you’ve worked through the first and second articles in this series, you should now have a blank profile. In this article you’re going to create a number of new classes that you’ll use to style elements that will make up the new overlay.

Thanks to Nick Edwards who supplied the original code on which this is div layout is based. 

This code would also sit in the About Me section of your MySpace profile:

<style>

The .background class positions and styles the background:

.background {background-color: transparent; position: absolute; left: 50%; top: 190px; margin-left:-460px; width: 960px; height: 600px; z-index: 0; visibility: visible !important; overflow: none; color: white;}

The row class styles the row block that appears in the upper section of the Div overlay:

.row {background-color: 000000; position: absolute; left: 50%; top: 190px; margin-left: -400px; width: 750px; height: 75px; visibility: visible !important; overflow: none; color: white; border:2px solid white;}

The column1 class styles the left column of the Div overlay. It specifies that the background color is black, and it specifies its position, width and height, and border:

.column1 {background-color: 000000; position: absolute; left: 50%; top: 300px; margin-left: -400px; width: 350px; height: 500px; visibility: visible !important; overflow: auto; color :white; border: 2px solid white;}

The column2  class styles the row block that appears in the upper section of the Div overlay:

.column2 {background-color:000000; position: absolute; left: 50%; top: 300px; margin-left: 0px; width: 350px; height: 500px; visibility: visible !important; overflow: auto; color: white; border: 2px solid white;}

</style>

If you want to change how the row and columns appear in your profile, make the changes by adjusting the .row, .column1, and .column2 classes.

If you wanted to add more sections (or boxes) you would need to create some additional classes in this section, specifying where the section would appear, along with its color, size, width, height and so on. Most of the properties here are pretty obvious, and I’ve covered them in previous chapters—the really tricky part is the positioning of the sections (I will write a separate post about this soon).

If you’ve got a copy of Hacking MySpace, the complete code for creating a div overlay profile is available from the support area. 

If you have any questions, please leave a comment or go to the Hacking MySpace support forums.

Have fun.

John Pospisil

Related: