How to make a 2.0 MySpace Layout

written by Glitter Frosting on June 14, 2009 for silentranksproductions.com

If you enjoyed this tutorial and use our basic code, please link back to us! No part of this tutorial may be reproduced without written permission!

This is what we will be making, the layout looks crazy to teach you better what the different tags do! Click on the little images to see them in full.

Alright, first off we will get into some CSS coding here, but don't be scared. All CSS is is a language telling your browser where to put things and what to make them look like. Think of the html you insert into your "about me" section as the content and the CSS as the beautify script.

We will step by step add one piece of coding at a time and see what that does to the look, so you can LEARN and UNDERSTAND the language. If something looks out of whack it's because we didn't speak the language right. OK. Here we go.

0. (OPTIONAL) make 3 graphics ahead of time, a background tile, a top banner (960 x 200) and a bottom banner (960 x 50) and upload to your image host. Or you just use the ones I provided to learn.

1. Go to Profile--> Customize Profile and check out that window there. In the select themes category click on "no theme" and in "Change Layout" set the width to 960px.

That will make your profile look naked...lol...like this:

We don't want to embarrass our space, so let's get it dressed!

2. This piece of code adds the background, the main font, its color and style, this is called the body tag. I added a background tile and set it to "repeat" so the little image does just that, repeat into all direction!

Let's see what that looks like. In your custom CSS area (where we set the "no theme" and made the layout 960px wide) paste this code snippet and click "preview". This is what you will see:

TIP: Open a notepad document (or frontpage or other html editing software) and paste all the pieces into the the document as we go along, this way you can just copy and paste the whole thing into MySpace again if MySpace plays silly. Sometimes the changes don't show in the preview and you will have to actually push "publish" to see what we did. That is why it is a good idea to track our progress offline as we go along.

2. Moving on, lets make the top including the google bar look like we want it to look. In this code you can change the background color and fonts. I used #989c9c which is a gray shade.

So add this code snippet to what we already have and click "preview" again! And lookie, we changed it to look like this:

3. Now let's add the top banner which is where most of the creative part will take place. This codes adds a banner of 200px height, if you have a different banner height, remember to change the pixel in the in the "padding-top" attribute as well!

OK, let's add that into the CSS right under what we already have. Then click "preview" and we have this:

4. Awesome, now let's do the same for the bottom using this code, my banner is 960 x 50 pixel:

and we now have our banner on the bottom (Go us!):

5. Let's move on the the tables, so we actually see what we have written. This code changes the background properties for the main table. I made the main table background blue and added a 5 pixel white border:

Paste and Preview and we are looking at this:

6. Ready to spice it up some more? The following piece of code adds a background to all modules, I am making mine white:

and now we are looking at this:

Pretty cool, ey?

7. We can also edit the look of the comments with this code. I am making my comment text black and the background pink, I also added a solid line under each comment.

which looks like this:

8. Moving on to editing the text properties in the different areas. First let's change the module header, where it says "Blogs" or "About Me". I am making my headers red with a red border on the bottom and also have the headline appear in all uppercase letters!:

We are now seeing this:

9. The main module on top needs an extra special headline, so lets add that with this code:

I made my font in times new roman style, centered it, made it bigger than the rest and with a dashed border on the bottom:

10. Now lets change the text in the modules that are usually on the left hand side like interests, schools and so on:

I am making all mine to be gray:

11. Now let's change the sub headlines of these modules, like where it says "General" under interests, or lists your companies under "companies":

I will keep the same shade of gray but will change the font type to century gothic and it will look like this:

12. You can also change the bold text in the details section that says "status" or "zodiac sign" and so on:

and that will make it look like this:

13. Let's change the predefined links in the modules like "subscribe to blog" "view photos" and so on with this code:

and that will get us that (see "Blog Post" and "Aquarius"):

14. We can also have the links in our modules appear different, let's say you have your navigation in the interest module you can change links in there like this:

and it will make them look like this:

15. Let's also change the look of all links with this code:

I want the links to be in the same gray and have no hover effect, the text won't change when I move my mouse over the link.

16. The last we will do is edit the MySpace bottom navigation, we will just change the size and make it tiny winy:

like this:

AWESOME. You did it. These are just a few examples of things to edit, there are MANY more, if you are looking to change something specific google it and add that code snippet to your code.

Here is our complete code:

and here is what we made:

Now, go play with the code, change colors, fonts, borders, background images, and so on. Remember to only change one or two tags at a time to catch errors early in the process!

I hope you had fun and will now be able to make your own cool 2.0 layouts!

Hugs

Dani! silentranksproductions.com