Basic Myspace 2.0 Tutorial

What's new with the Myspace 2.0 code? Div modules and I personally love them! It has made it easier to create the default look as well as the triple background look. For this tutorial I will help you create a regular 2.0 layout similar to the regular 1.0 look as seen below:



1. Body

Code:

.AnGella {This controls the body, main font properties, background}
body{background-color: #000; background-image: url(""); background-attachment: fixed;
  font-family: helvetica, arial;
  font-size: 11px;
  color: #53beee;}

2. Top Nav

Code:

.AnGella {This controls the header with the Google ad & navigation properties}
div#header, div#googlebar {background-color: transparent; background-image: url(""); background-repeat: repeat; background-attachment: fixed;}
#topnav {background-color: transparent;}
#topnav a {color: #ffffff;}
#topnav ul, #topnav ul li {border: none;}
#topnav ul li a:hover {color: #ffffff; background-color: #000000;}

3. Main Modules

Code:

.AnGella {global module properties}
div.moduleMid1 {background-color: #000000; background-image: url(""); background-attachment: fixed; padding: 5px; border: 4px solid #53beee;}


4. Profile Demographics

Code:

.AnGella { basic details, the small box that contains your age/location/etc... }
div.profileDemographics { height: 100px; width: 90%;  background: #666666; border: 2px solid #53beee; }

5. Main Module Headers

Code:

.AnGella {Module header properties for Interests, Blog Entries, Details, Friend Space & Comments }
h3.moduleHead{font-family: helvetica, arial;
  font-weight: bold;
  font-size: 16px; color: #ffffff;
text-align: center;
background-color: #666666;  padding: 2px; line-height: 20px;}


6. Secondary Module Headers

Code:

.AnGella {Module header properties for general, music, status, ethnicity }
strong, h4 {font-weight: bold; color: #ffffff;}
h4 {font-family: helvetica, arial;
  font-weight: bold;
  font-size: 16px; color: #ffffff;
text-align: left;
background-color: #666666; padding: 2px; line-height: 20px;}

7. Link Properties

Code:

.AnGella { link properties }
a:link, a:active,
a:visited,
a.redlink:link,
a.redlink:active,
a.redlink:visited {color: #ffffff; font-weight: bold;}
a:hover {color: #fff; text-decoration: underline;}

8. Footer Properties

Code:

.AnGella { footer properties }
div#footer {font-size: 10px;}


Please keep this posted i would like to follow this and work with it to do some 20 layouts thanks so very much, i believe i can figure this out!! Fantastic!!

bubblebutt wrote:Please keep this posted i would like to follow this and work with it to do some 20 layouts thanks so very much, i believe i can figure this out!! Fantastic!!

It's here to stay! Enjoy!

great tut
ive just started makin 2.0 lyts && i luv em
i was wonderin is there neway 2 change tha name links above
friends 2 dif colours, wen i hover ova em its red && blue or is that wit
all not just mine

ditzydoll wrote:great tut
ive just started makin 2.0 lyts && i luv em
i was wonderin is there neway 2 change tha name links above
friends 2 dif colours, wen i hover ova em its red && blue or is that wit
all not just mine

Thanks! I have been getting that too so it isn't just you. I believe it is only the 2.0 layouts though. Not sure there is a fix for it. All other 2.0 layouts I have seen do it.

Admin wrote:

ditzydoll wrote:great tut
ive just started makin 2.0 lyts && i luv em
i was wonderin is there neway 2 change tha name links above
friends 2 dif colours, wen i hover ova em its red && blue or is that wit
all not just mine

Thanks! I have been getting that too so it isn't just you. I believe it is only the 2.0 layouts though. Not sure there is a fix for it. All other 2.0 layouts I have seen do it.

i avnt found nethin 4 it yet
just anotha of Toms lil thins 2 get unda my skin