Basic MySpace layout tutorial

MySpace Website Tutorials | Submited Nov 17, 2007

Written by: Mr. Evil [BOFH]

Notes

This is a guide. Not a how-to. There's a million things you can do with css that you won't find in this; for more of that [click here].

Background

Changing the background is first part. The selector is 'body'; the body holds everything from inside the browser window to the bottom of the screen.
background-color:000; gives the profile a black background,
background-image:url(IMAGE_URL_HERE);
background-attachment:fixed; makes the background stay in one position regardless of scrolling; you can also use scroll and it'll be positioned according to the next setting.
background-position:center top; makes the background at the top of the screen in the center. You can use any combination of top, center, left, right, bottom you like.
background-repeat:no-repeat; means that the image won't repeat itself. You can use, repeat, which makes it tile, repeat-x, which makes it tile across, and repeat-y, which makes it tile downward.

body{
background-color:000;
background-image:url(IMAGE_URL_HERE);
background-attachment:fixed;
background-position:top center;
background-repeat:no-repeat;
}

Tables

Myspace uses a lot of tables, so to make the background show completely you'll need to make them transparent.

table, tr, td{background-color:transparent; border:0;}

I included border:0; to get rid of the ugly white border that's left behind.
If you want your columns to have a background/border the next bit of code controls that, you can add to it, take away from it.

table table table{
border:1px solid;
border-color:FFFFFF;
background-color:000;
background-image:url(IMAGE_URL_HERE);
background-attachment:fixed;
background-position:top center;
background-repeat:no-repeat;
}

.7F{The next line is so it doesn't look funny with extra borders}
table table table table{border:0}

Font/links

This handles ALL the font on the page, to change the headers and titles refer to my other tutorial [here].

.7F{All Text}
*{
color:FFF !Important;
font-family:Arial !important;
font-size:11px;
}
.7F{links}
a, a:link,
a:visited, a:link:visited{
color:FFF !important;
font-size:12px !important;
font-family:Arial !important;
text-decoration:none;
}

You can target certain texts according to what they're tagged by.
For example, if I want to make all the <b>bold</b> text big I would use

b{font-size:16pt;}

and it would look like
Srsly
That works with anything, <li></li>, <u></u>, <span></span>.
Fun, huh?

Targeting certain areas

Right click>>view source
from there you can find the selectors for everything on the profile.
or
You can get this and use outline>>outline current element and it'll tell you what you're hovering over in your browser.
For example, if I were hovering over the contact table it would put a red border around it, and display this in my browser

To more easily mess with stuff using the web developer toolbar go to css>>edit css and you can see the changes as you're making them.
I guess I'm done for now. Woo!