You Can Transform Your Myspace Layout

You've done it. You signed up for Myspace. Your profile is there with your likes/dislikes, the results of the random quizzes you've taken, the sometimes outrageous images your friends have left as comments, the song of your choice. But you can't stand the layout. And you know there are lots of sites offering free Myspace layouts, but you don't want something someone might pick too. You want to be unique. But you looked at the code in the Edit Profile option and couldn't make sense of it. So, here is a general tutorial on the coding used in Myspace, and how you can customize your own layout.

First, you will need to have a basic understanding of Cascading Style Sheets, or CSS. CSS is a stylesheet language used to describe the presentation of a document written in a markup language, such as HTML. In other words, CSS tells your page how to look.

A CSS stylesheet has three basic elements to it - the beginning , the coding, and the end . If you forget or alter either the beginning or end, your Myspace layout will not display correctly.

CSS coding also has three basic elements - Selector {property:value;}. The selector is what you are defining. Examples include body, links, or text. The property includes color, borders, and background images. The value is used with the property. So if the property is color the value would be the hex code of the color you want to use. For help with color hex codes try 2createawebsite.com (go to web design, then choose hex color code chart and generator). One selector can have many properties, such as defining a background image that repeats in the center. An example of the code would be:

body {
background:#000000 url('none') repeat center;
font: 10pt bold arial;
}

where url is replaced with the location of the image, such as photobucket.com image hosting. Most image hosting sites will have the url of your image ready for you to copy and paste into your coding.

Now, since Myspace already has the stylesheet in place in the About Me section, there's no reason to remove either the beginning or the end. Your concern will be with the CSS coding in between. Knowing the basics, let's look at selectors specific for Myspace.

Background: This is what we covered above. If you just want a solid color, remove url('none') repeat center. You can also change how it repeats, or if it repeats at all.

Tables: table, tr, td {coding} - the area under the profile tables

.contactTable {coding} - your contact table

Text: .text {coding} - page text

.nametext {coding} - your name

.whitetext12 {coding} - contacting xxx(your friendID), xxx interests, etc

.lightbluetext8 {coding} - general, music, etc

.blacktext12 {coding} - "x" is in your extended network

.orangetext15 {coding} - xxx blurbs, about xxx

.blacktext10 {coding} - comment dates and times

.redtext {coding} - displaying # of # comments

Links: a:active {coding}, a:visited {coding}, a:link {coding}, a:hover {coding} - regular links

a.navbar:active {coding}, a.navbar:visited {coding}, a.navbar:link {coding}, a.navbar:hover {coding} - navigation bar links

You can further customize your Myspace layout by using various tweaks like hiding or moving items. Insert the following codes into the About Me section for different effects.

Flip your Myspace profile:

table{direction:ltr}
table table{direction:rtl}

Move the Myspace music player:

td td embed {left:50%;margin-left:#px;top:#px;position:absolute}

Hide the Myspace music player:

td td embed {width:0;height:0}

Hide the Myspace Contact Table:

.contacttable{display:none}

It isn't hard to make your Myspace layout as unique as you are. With a little CSS and creativity you can change things to suit your style. Make your Myspace profile stand out!