Hacking MySpace

With Myspace the greatest customization you can do is called a “Div Layout” or “Div Overlay”, now I will show you how to use this on a group layout to make your group look even better than it already does.

A group layout

Well, I have taught you in previous tutorials how to create a div layout and customize certain aspects of Myspace pages pretty well, so why not a group? Well the short answer is because it’s not much different than a normal div layout, the only difference is that you cannot space out your code and so it looks messy and harder to understand.

Lets get started

As I said above, a group div layout is very similar to a normal Myspace page, just you don’t always need to hide anything. I say not always as there are some things you can hide (e.g. the navbar), but I have shown you the codes before and so I am sure you can work that out for yourself if you want to.

The basic div

So, I thought I would start by showing you how to create a basic one div layout, as simple as it gets without moving the topics/bulletins around at all.

Of course you can make any variations of this as you like, this is just an example.

As always we make our div layout and position it where we want:

<style type=”text/css”>.main {position:absolute; top:195px; left:50%; margin-left:-400px; width:800px; height:600px; border:2px solid white; background-color:black; padding:4px; z-index:1; color:white;}</style>

There is very little you will want to change about the div above, unless you want it to be wider, taller or change the colors at all. Leave the top positioning where it is unless you plan on hiding the Myspace navigation bar, in which case you might want to move it up a bit (by decreasing the top number).

Well basically that is it. I will show you it in context with a semi-customized layout I just created around it (shown in the image below). So you will have the navbar showing above the layout, then a big div, then your topics and bulletins like usual.

<style type=”text/css”>body{background-color:black;} table, tr, tbody, td, div {background-color:transparent;}table table table{background-color:transparent;border:0;}table table table table{background-color:black;border:2px solid white;} table table table table table{border:1px solid white;} .main {position:absolute; top:195px; left:50%; margin-left:-400px; width:800px; height:600px; border:2px solid white; background-color:black; padding:4px; z-index:1; color:white;}</style>

Hit “enter” a bunch of times here (to move the group topics down to where you want them).

<div class=”main”>All your group content here</div>

Some people can really do amazing things with group layouts, for example one layout which I really like is the Myspace computer help group which if they have taken their layout down a preview can be seen here.

Other than adding more divs and changing the style of them a bit there isn’t much else you can do. Next week I will show you how to put the topics and bulletins into a div of their own and style them a little bit, so you can create even better group layouts.

Related: