MySpace Layout Tutorial for Beginners

You may be new to web design or just new to MySpace in general. Are you sick of the plain white, boring default page of your MySpace profile? Here is a very basic tutorial on how to spiff up your page - from basic coding to some more in-depth details - whether you just want to add some extra color here and there, or go all out with an entirely new layout.

Basic CSS Coding in MySpace

Cascading Style Sheets (CSS) is the type of coding that makes it possible to customize your profile. If you know nothing about it, below are some basic code examples and information on how to use them that can change the look of your page.

Normally, all your CSS code goes in the "About Me" section of your "Edit Profile". But you need to make sure the code is inside the tags. When using CSS, open the code with tag. Otherwise the code will be broken and won't work.

For example:

- Changing the Main Table Color and Text

The "background-color" is just what it means. The "color" part of the code is the color of the text.
Most likely you will have to use a hexadecimal color code for this. For instance, if you
want to use the color white, the code would be #FFFFFF . Black, on the other hand, is #000000 .
Just about every color you can think of has its own hexadecimal code on the web. However, in
CSS, the color code would normally be written without the "#" sign.

EXAMPLE: table table table td {background-color: 000000; color: FFFFFF; }

- Changing a Font

Use the code below - except after "font-family", put the name of the font you want to use, followed
by either the word "serif" (font with feet) or "sans-serif" (font without feet).

EXAMPLE: .text { font-family: arial, sans-serif; color: FFFFFF; }

- Changing the Link Color

This does just what it says - changes the color of the links on your page. You can also change the
color of active and visited links, or even add a hover effect, if you wish; when the mouse hovers
over a link, it will change to the color of your choice. The "text-decoration" simply decides whether
the links are underlined or not. For no underline, just add "none" next to it. Otherwise, type
"underlined".

EXAMPLE: a:link { color: CCFFFF; text-decoration:none; }
a:active { color: FFFFFF; text-decoration:none; }
a:visited { color: CCFFFF; text-decoration:none; }
a:hover { color: FFFFFF; text-decoration:none; }

- Changing the Label Colors

This changes the color for all the labels on your page - "General", "About Me" "Friend's Space",
etc.

EXAMPLE: .nametext, .whitetext12, .lightbluetext8, .orangetext15, .blacktext12, .redtext, .redbtext, .blacktext1
{ color:FFFFFF !important;}

Of course, that's assuming you want all of those to be the same color. If you want each type of label to be different, see below:

EXAMPLE: .nametext { color: FFFFFF; font-family: arial, sans-serif; font-size: 16pt; }
.whitetext12 { color: FF00FF; font-family: arial, sans-serif; font-size: 10pt; }
.lightbluetext8 { color: FF3333; font-family: arial, sans-serif; font-size: 10pt; }
.orangetext15 { color: 66FFCC; font-family: arial, sans-serif; font-size: 10pt; }
.blacktext12 { color: 00FF33; font-family: arial, sans-serif; font-size: 10pt; }
.redbtext { color: 6633FF; font-family: arial, sans-serif; font-size: 10pt; }

nametext - Your username at the top of the page.
whitetext12 - The labels at the top of your contact, interests, and detail boxes.
lightbluetext8 - the labels inside the individual boxes on the left-hand side of the page (General, Status,
etc.)
orangetext15 - The "About Me", "Who I'd Like to Meet", "Friend's Space" and "Friend's Comments"
labels
blacktext12 - The text inside the "Extended Network" banner
redbtext - The number of friends

Backgrounds

You can choose to have either a plain, colored background, or a background image - or even both. If you want to add a background image, you will need the URL of the image that you're linking from. If you have your own background you want to use, simply upload it yourself to Photobucket or another image hosting site, copy the URL, and add it into the style sheet. Below is an example code:

EXAMPLE: body
{ background-image: url(http://www.myspacelayoutsupport.com/myspace-backgrounds/images/redonblack.jpg);
background-color: 000000;
background-repeat: no-repeat;
background-attachment: fixed; }

If you don't want an image at all, simply delete the "background-image" line from the code and leave the rest. The "background-repeat" part of the code is what decides if the image (if you have one) will repeat itself or not. You can choose "repeat-x" (to repeat horizontally), "repeat-y" (to repeat vertically), or "no-repeat" (no repeat at all). The "background-attachment" part of the code determines whether the background stays still or not. You can choose to have it "fixed" or "non-fixed". If fixed, the background doesn't move with the page when you scroll down.

Just remember to add the code within the tags.

Changing the Color and Style of Your Tables

Here is an example of a CSS for the tables on your profile page. A description of the certain commands follows.

EXAMPLE: table, td
{ background-color:transparent; }

table table table
{ background-color:000000; }

table table table
{ border-width:1;
border-color:FFFFFF;
border-style:dashed; }

table table table table
{border:0px;}

In the first part of the above code, where it says "background-color:transparent", it's simply saying that the tables are going to be invisible so you can see what lies below - whether it be a colored background, or an image. In the next part of the code (table, td), the "background-color" is the color of the table background. In the next part (table table table), the "border-width" is how thick you want the border around each table to be. The "border-color" is the color of the border, and "border-style" is how the border looks. The options for this are "solid", "dotted", "dashed", "double" and "groove".

Adding Images to Your Profile

When you first login to the website, you may notice that there is an option to "Add/Edit Photos". This is where you go to upload pictures to your Pic Page, a specific area that visitors to your profile can go to view your pictures.

But what about putting photos directly on your profile page? This is done easily enough, but you need to use a good image hosting service, such as Photobucket or ImageShack. Upload your photos at those sites, copy the code, and then go "Edit Profile" on the main page of your MySpace and paste your image code anywhere you want in your profile.

Adding Video to Your Profile

Like the added "Pic Page", there is also a "Video Page" on every MySpace member's profile. You can add videos to this just as easily, but of course you may also want to add video to your profile page.

If you want to save space and keep things less cluttered, you can always simply put a link to a particular video instead. Otherwise, you need to use an embedding code provided by a video hosting website such as YouTube. You can add almost anyone's video from YouTube onto your profile page, as long as they have the embedding option enabled.

When you find a video that you want to add, look over to the right under "About This Video" and copy the code in the "Embed" box. Now all you have to do is run back over to MySpace, go to "Edit Profile", and paste it wherever you want.

Tips on Creating a Good MySpace Layout

- Make sure that everything is easy to read. One of the most annoying things is having to highlight text on a webpage in order to see what it says. If you can't read your own wording against a bright (or dark) background, or it's too small, then chances are your visitors won't be able to read it, either.

- Take the time to actually pick a color scheme that goes well together - colors that clash with one another, or are too bright, can be extremely hard on the eyes.

- Go easy on the added content: images, movies, flash banners, etc. Not everyone has a highspeed connection or a top-speed computer, and I've seen some MySpace pages that even overwhelm the ones who do have these things. If your page takes too long to load, it won't be looked at for very long.

- For pictures, make sure they're not too big! Another highly annoying thing is to try viewing a page that has images so large, it extends the page where you have to scroll sideways to see the whole thing. It isn't too hard to resize an image - if you have Photoshop or another photo editor, you probably alrady know how. Otherwise, Photobucket has the option to cut down large images to different percentages of its original size. Resizing your images before putting them on your page makes things look both less cluttered and easier to view.

Conclusion

Here is an example code of some of the style sheets I've used in this guide.

Hi there!

- - -

This has been a very basic tutorial on how to customize your own MySpace profile page. Obviously things can get far more advanced, but hopefully these codes can help you start out.