Perhaps one of the major factors in ensuring MySpace has become one of the most popular social networking sites is the ability for users to customize their profiles, and create a unique identity for their page. Most MySpace users prefer to use pre-made layouts from sites such as MashCodes, but for those of us who want a completely personal, customized layout there are two main options available to us:

1. Work with the existing layout by customizing with CSS styling


2. Cover up the layout with a DIV overlay (and take complete control of the presentation).

Both methods have their advantages and disadvantages, and both are governed by the same set of rules (according to what is disallowed in MySpace profile code). So in this article, I’ll present an overview of MySpace profile customization, and explain how each of these two methods could be used to create a better profile page for you.

How MySpace layouts work (and how they don’t work too!)

MySpace layouts are constructed of carefully nested tables, cells and rows. In fact, I find it quite frustrating that MySpace chose to use this god awful method, but I guess we just have to put up with it and do the best we can to make it pretty.

When you want to add style to the otherwise bland presentation of your MySpace profile, you must do this by adding your CSS right in the middle of your content. MySpace will not allow you to add this into the section of the page (where it truly belongs), so instead you must paste this code in the “About me” section of your profile edit page. Any additional content (non-CSS, that is) must be pasted either below the CSS statements, or in the “I’d like to meet” section instead.

Things which just won’t work!

1. No Javascript! At all. MySpace rightly fears that scripts inserted into MySpace profiles could be used to attack other profiles, generate automatic adding of friends and other such dangers. If you do attempt to add any form of javascript to a MySpace profile, you’ll find it’s either automatically removed, or split so that the script becomes essentially useless.


2. You can’t use the # symbol anywhere in your CSS. When used in CSS, the hash symbol denotes an ID for a particular piece of styling, but this is disabled by MySpace, most likely to prevent instances where something can only appear once within the page. Instead you must use classes (eg: .this_class) to style your profile page. This also means that…


3. You are unable to use regular hex values for colors. Instead you must specify color: red or color: ff0000. Also, you must use longhand for your colors: color: f00 will not work, whereas color: ff0000 will.


4. Don’t specify rules for iframes. Again, these will be removed. Most likely, this is to prevent people from hiding the banner ad which features above each MySpace profile (helping to fund this ever-popular site), and it is against the terms of service to remove or hide it. So just don’t. Unless you do want your account to be revoked…

You see where we’re headed with this now?

Now you understand the ‘rules’ of MySpace layout code, let’s take a look at the two methods you could use to customize your profiles.

How to work with the existing layout using CSS

Default MySpace profiles are styles using an external style sheet. Take a look at the MySpace profile style sheet and you’ll quickly notice two distinct trends:

1. The elements are constructed of tables, carefully nested inside each other


2. The various text elements have strange names like “whitetext12″ and “orangetext15″

This does make it rather difficult to understand which style statements correspond to which elements in the actual layout. However, with a little experimentation and some knowledge of CSS code, you should easily be able to change some of these statements and style your profile according to your preferences.

To get you started, I have completely stripped down the default MySpace profile to a blank minimalist canvas (take a look at this in action here). Below you can download the style for this minimalist canvas which you can use as the basis for your own experimentations.



To use this style in your own MySpace profile, simply copy the whole section and paste this into the "About Me" section of your MySpace profile editing page.

To help you understand the most important style features of this template, I did add some comments to the code, but when you save this in your MySpace profile, these comments will disappear (as they are not allowed as part of the code). Instead, it may be better to alter this styling code using a text editor so you can be sure you are making changes in the right place.

Here’s some help to get you started:

To change the background…

This is the section which controls the general background of the page:

body.bodyContent {

background-color: ffffff;

background-image:none;

background-repeat: ;

background-attachment: ;

background-position: center top;

To change the background color, simply change the value “ffffff” to your preferred color.

To add a background image, add the URL of your background image instead of “none”, like this:

background-image:url(http://yourhost.com/yourimage.jpg)

To change the borders around the sections…

Find this section in the style code:

table table table {

border: 2px solid 000000;

background-color: white;

background-image: none;

}

And change the line highlighted in bold to the values of your choice.

To change the background color of all sections…

Again, find this section of code:

table table table {
border: 2px solid 000000;
background-color: white;
background-image: none;
}

This time, change the different line highlighted in bold to the background color value of your choice.

The DIV overlay method

This is my preferred method of customizing MySpace profiles as it allows complete control over the appearance, and you can add almost anything you like (bearing in mind the restrictions I explained earlier, that is!). However, some knowledge of HTML coding is required if you would like to customize your own profile using the DIV overlay method!

Using an overlay basically means you will cover the original MySpace profile with something you have created using HTML code. This is a two part customization: as with the CSS styling method, you will need to add your style statements to the “About Me” section in your profile editor. Secondly, you will need to add the actual code for the overlay in your “I’d like to meet” section.

Here are examples of the most basic codes you can use to achieve a DIV overlay for your MySpace profile:

Insert the following into your “About Me” section, ensuring you have first deleted any existing content from this section:

You can change the width of the overlay to something slightly greater if you prefer, though 800px is generally a good width for all browser sizes which may be viewing your profile. The “Top: 125px” statement ensures the overlay does not cover the advertisement at the top of the page, which would violate MySpace’s terms and could result in your account being suspended!

Now add this section of code to your “I’d like to meet” section:

Add your content here (including any additional tables or DIVs)

As I mentioned, this is a very basic form of overlay for your profile, and will result in a mostly white page with your own content near the top of the page.

Using this as a basis, you can easily add more DIVs (or nested tables, if that’s your thing) and assign classes which can be styled by adding further statements in the “About me” section. To give you an example of what can be achieved using the DIV overlay method, take a look at my MySpace profile page.

Useful resources

Some useful links to help you learn even more about customizing your MySpace templates:

• Hacking a more tasteful MySpace (Mike Industries)


• The Web Designer's Guide to MySpace (HyalineSkies)


• Web color calculator


• CSS Tutorial (W3 Schools)

I hope this article has provided you with some ideas of how you can customize your own MySpace profiles. In forthcoming posts, I will be also be detailing further customization methods, so be sure to subscribe to the feed in order to stay updated.