How to make a MySpace 2.0 Tutorial

Print This Post Print This Post Email This Post Email This Post

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.

2.0 layout

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!

Comments

  1. i made my very first code with this tut. thanks soooo much!!

  2. where can i find a code for field set boxes? a lot sites on myspace have them, but won’t share the code with someone who isn’t a designer. :o( could you please post it or do a tut on it?

  3. Try again hun, the codes had < br > in them, I have now made the codes clean again!

  4. the code to change the links color, at step 13, isn’t working for me, the links keep staying blue… any ideas?

Speak Your Mind

*