About This Page READ MEIf you're wanting to learn how to make a really cool layout for yourself, or to submit to this site to see what kind of ratings you get for you, then it would be a good idea to read over this page. I'm going to try to include as much basic knowledge of css that I can for everyone to learn maybe study.

If you have already submited some layouts, and they're not there anymore then the reason is because of one of the following.

• 1. You got the layout from another site, and posted it here. GRRRR
  
• 2. It was to plain, basic, with only a background color maybe a picture, and then transparent tables. Sorry if you liked it, but I personally felt that it wasnt done from the heart as you should do with the layouts you create. Try to make them something that you wouldnt be embarressed to have on your page.
  
• 3. I've deleted a lot of decent looking layouts because the preview image was of the person that submited it. If you dont know how to take a screen shot of your layout you're more then welcome to upload the background picture of the layout! that might be one of the best ways to show everyone what the layout will look like. If you want to know how to take a screen shot of the layout Click Here and read the FAQ page. I answered how to create them in there.
  
• 4. some people have been flagging layouts that the background images are dead in, so I've deleted them also. Heres a hint that I always do with any pictures I put on a layout, I upload them onto myspace in a group! Then I just copy that background image, and put it within the code. That way I will NEVER have to worry about bandwidth, or the picture not being there anymore. Its simple to do, just create a group, set it to private, and then upload your pictures to it. noone will be able to see that group except for you.
  
• 5. Preview image wasnt anything like the layout. Theres been a few layouts that I've deleted just because of the preview image. I cant stress how much the preview image means in layouts. If someone likes what they see in the preview image they're more then likely to click on it, and check out that layout. If you have a background image in your layout, and you actually created that layout then you should have that background image saved on your computer. Just upload that for the preview image!!!

Ok with all that being said here it goes with myself trying to explain css, and how to customize your profile in the most simpliest way, but to still make it look nice!.

What is CSS?CSS stands for Cascading Style Sheets, and it is how you can customize the design of any website. Give it some nice background images to things you never thought you could give a background image to. Customize the colors of everything, and make your websites look like they are everything and more. There are some differences in how Internet Explorers views webpages verus Firefox, Opera, and Safari. Internet Explorer tends to slack on most of the updated CSS standards.

On a site like myspace, you have to encode all of you style sheet into one page rather then a different page. Most websites (including this one) use a <link> tag to import a style sheet into the design. Since Myspace has blocked the <link> tag, you will have to use your style tags to do this.
What are style tags?
This question is one of the most frequently asked questions within the myspace world. I get at least 15 messages a day for help to solve that question. Style tags are 2 tags, 1 starting tag, and 1 ending tag. the start tag is -- <style type="text/css"> and then the ending tag is </style>. Everything that goes between there is your css stylesheet, NO html tags belong there, so no links, images, table codes, bold tags ect ect.

What are Style Sheets?The style sheets that you need to create for any website are based on a "Selector {property: value;}" technique. Theres no ifs ands or buts for that, thats just how it is. The Selector is what you're going to be modifing, the html tag you will be modifing if I must say. So if you would like to change something that deals with an element that is bolded, you would put b for the Selector. Then the Property is what you're applying to it, so if you want to change the color of your bolded text you would have b {color:;] so far. And finally the value is exactly what you want to happen to that, so to change the color of your bolded text completely to red, you would put b {color:red;}. Now theres a HUGE list of what you could put for your properties and values, and you can see some of them located on the CSS Elements below.

How do I use CSS Classes?Classes are what we have to use for customzing a myspace profile, theres already a bunch of class's within a regular myspace page, and thats how we're able to customize so much of it without any extra html within your page. Heres a few of myspace's class's that they've used.
For your display name on your page, they put it in a span tag with a class set to it like so - <span class="nametext">Your Name</span> the class="nametext" within that line is the class that is set to it, so since they put a class there you're able to totally change how your name would look on your page by using the selector {property:value;} code as mentioned above. One thing to remember about classes though, is you always need a period before the name of the class (otherwise known as the selector), so to make your display name red you would put this in your style sheet .nametext {color:red;} easy enough huh?

What changes what in Myspace?Ok heres the fun part. We've gone over what style tags are, how to write code between your style tags (with the selector {property:value;} code), and what classes are. So hopefully you're ready to take this starter code below, and be able to customize it up to you're liking. The CSS Elements at the bottom of this page are just a few of the property names, and values that you can put to them. Below is a starter stylesheet of everything that effects myspace for the common user, remember to put it all between your style tags. Everything that is baby blue below is what the following line will change.

.skem9 {Change the background of your page, and then the scrollbars}
body{background-image:url("url to image you want as a background");
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-position:center;
	background-color:000000;
	scrollbar-face-color: aa0000;
	scrollbar-highlight-color: 000000;
	scrollbar-3dlight-color: aa0000;
	scrollbar-shadow-color: 000000;
	scrollbar-darkshadow-color: aa0000;
	scrollbar-arrow-color: 000000;
	scrollbar-track-color: 000000;}

.skem9{the following effects all of your tables on your page,
 I suggest to always keep it as transparent with no borders}
table, tr, td{background-color:transparent;
	border:transparent;}

.skem9 {The next line effects the main tables where everything is on,
	all of your text and whatnot ly on here so have fun and set a background to it
	to test things out!}
table table table {border:0px;
background-color:6e9dd4;}

.skem9 {If you added a background image, or borders to the line above
	I suggest to deactivate them on this line so it doesnt repeat itself}
table table table table {border:0px;
	background-color:transparent;
	background-image:none;}

.skem9 {The following changes the color of all of the text on your page
	within your about me, who Id like to meet and interest}
table, td {color:black;}

.skem9{How about we give the comments text a totally different color?
	well heres what will just change the comments}
.text .text table table td {color:dddddd; 
	letter-spacing:-2px;}

.skem9 {Lets change the color of your scrollboxes text, and your myspace url text
	width the following line}
div, strong {color:	242424;}

.skem9 {Lets change the color of the text right next to your defualt picture
	"age, location, sex, ect ect"}
.text {color:red;}


.skem9 {"XX's Latest Blog Entry" and "XX has XX Friends"}
.btext {color:eeeeee;font-weight:bold; font-size:12pt;}

.skem9 {time and date in the Comments section.}
.blacktext10 {display:block; 
	width:100%;
	text-align:right; 
	color:6e9dd4; 
	background-color:242424;}

.skem9 {XX is in your Extended Network}
.blacktext12 {color:242424;}
.skem9 {actually, lets hide the extended network, it gets annoying anyways}
.blacktext12 span {display:none;}

.skem9 {"General", "Music", "Heroes", etc.}
.lightbluetext8 {color:red;
	display:block;
	width:100%;
	text-decoration:underline;}

.skem9 {your name above your profile picture}
.nametext {color:242424;
	font-size:20px;
	font-weight:bold;
	display:block;
	width:100%;
	font-variant:small-caps;}
	
.skem9 {"About Me", "Who I'd Like to Meet", "XX's friend space"}
.orangetext15 {color:white;
	background-color:black;
	display:block;
	width:100%;
	font-family:tahoma;}

.skem9 {XX has "XX" Friends}
.redbtext {color:black;}

.skem9 {Displaying "XX" of "XX" comments}
.redtext {color:black;}

.skem9 {"contacting XX", and "XX's Interest"}
.whitetext12 {color:242424;}

.skem9 {this is for all of your linked images on your page}
a img {opacity:70%;
	filter:alpha(opacity=70);
	border-width:0px;}
a:hover {filter:none;
	opacity:100%;}

.skem9 {lets put a background on the navigation bar at the top eh?}
div table table td {background-color:red; 
	height:20px; 
	width:780px; 
	line-height:20px; 
	text-align:center;}

.skem9 {your navigation bar links, like Home | Browse | Search ect ect.}
a.navbar:link, a.navbar:visited {color:black;}
a.navbar:hover {color:red; 
	background-color:black; 
	text-decoration:none;}

.skem9 {Te following is the redlink for within your friends space to view all friends}
a.redlink:link, a.redlink:visited {color:242424; 
	text-decoration:none;}
a.redlink:hover {color:black; 
	text-decoration:none;}

.skem9 {and then last but not least, lets change all of the links on your page}
a:link, a:visited {color:242424;
	text-decoration:line-through;}
a:hover {color:black;
	text-decoration:none;}

AND you're done! Stop copying everything above, and then read the following for some more notes :) ok wow, if you thought that was alot of reading, imagine me here typing all of this out haha. fun fun I guess.
but anyways, heres a few more tips and tricks to help you along you're way. Its important to know some of these also as it would be less coding lines, and less typing all the way around.

Lets say you want to change the "About Me" and "Who I'd like to Meet", so you would put something like this between your style stags - .orangetext15 {color:blue; font-weight:bold; background-color:green;} Ok cool and now we want to change the "contact XX", and "XX'x Interest" ect, to the same thing as the about me and who I'd like to meet section. Instead of making to lines like the following
.orangetext15 {color:blue; font-weight:bold; background-color:green;}
.whitetext12 {color:blue; font-weight:bold; background-color:green;}
You can group them together with a comma seperating it, so instead of 2 lines, it would then be 1 like the following
.whitetext12, .orangetext15 {color:blue; font-weight:bold; background-color:green;}
Cool!
Another thing that is kinda along the same lines as grouping that I see quite often is something like the following between a persons style tags
.orangetext15 {color:blue;}
.orangetext15 {font-weight:bold;}
.orangetext15 {background-color:green;}
Why have 3 lines, where you're calling on the same Selector (the orangetext15 class) when you can put it all into one nice and clean line like so
.orangetext15 {color:blue; font-weight:bold; background-color:green;}

Ok! One last and final thing I have to mention. You should now know what style tags are right? if not then I dont even know how you made it this far down the page.. But yeah, you only need 1 pair of these throughout your whole page. That means you dont need one for your contact table, one for your online now image, and one for your profile. Combine it all! Your page will load faster for most if you keep up with these common things for your profile.