Giving Thanks Profile 2.0 Layout! Get it while its hot!

Click Image For Preview

How to Use This Myspace 2.0 Layout:

Copy the code below and paste it into the css box of the customize profile section. Make sure your select ‘No Theme’ in the select theme section. Easy!

body { font-family: verdana, helvetica, arial, sans-serif; font-size: 11px; background: url(http://thanksgivinglayout.com/wp-content/uploads/2008/11/circlesbg.jpg) repeat fixed 70%;}
p{line-height:1.8;}
a:link, a:active, a:visited {color: rgb(255,255,255)}
a:hover {color: rgb(195,185,154) }

.r{}
div#header, div#googlebar {background-color:transparent;}
#topnav {background-color: #33290c;}
#topnav ul
{
    list-style: none;
    padding: 0;
    margin: 0;
    border-right: 1px #8b643d solid;
	display:block;
}
#topnav *
{
	color:#fff;
}
#topnav ul li
{
    padding: 0;
    margin: 0;
    float: left;
    border-left: 1px #8b643d solid;
}
#topnav ul li a
{
    padding: 0 10px;
    height: 29px;
    line-height: 29px;
    text-decoration: none;
    display: block;
	float:left;
}
#topnav ul li a small{font-size:8px;}
#topnav ul li a:hover
{
    background-color: #1548ae;
    color: #eee;
}
#topnav ul li a.open small{color: #003399;}       

#topnav ul li a.open
{
    background: #fff;
    color: #003399;
}
#topnav ul li a.open:hover
{
    background: #d9eafb;
    color: #036;
}
.r{}        

div[class~="module"] { border:none; }
div[class~="moduleTop"], div[class~="moduleTop"] div, div[class~="moduleBottom"], div[class~="moduleBottom"] div { background-color: transparent; background-image: url(http://profile.myspace.com/rc.ashx?bg=Transparent&r=4&w=2000&s=534633&sw=2); font-size:0px; }
div[class~="moduleTop"] div div, div[class~="moduleBottom"] div div { background-image:none; }
div[class~="moduleTop"] div div { height:2px; border-top: 2px solid rgb(83,70,51); margin: 0px 4px; }
div[class~="moduleBottom"] div div { height:2px; border-bottom: 2px solid rgb(83,70,51); margin: 0 4px; }
div[class~="moduleMid2"] { background:color:rgb(255,255,255); margin:0 5px;}
div[class~="moduleMid"] { border-left: solid rgb(83,70,51) 2px; }
div[class~="moduleMid1"] { border-right: solid rgb(83,70,51) 2px; padding-top:5px;}
div.moduleTop { background-position: top left; }
div.moduleTop div { background-position: top right; }
div.moduleBottom { background-position: bottom left; }
div.moduleBottom div { background-position: bottom right; }

div.wrap { background-color:transparent }
div.contentMid { background-color: transparent; }
div.module { border:0px solid #E5E5E5; color: rgb(255,255,255); }
div[id~=header], div[id~=googlebar] { background: none; } 

[id~=topnav] ul { border-right: 1px rgb(0,0,0) solid; }
[id~=topnav] ul li { border-left: 1px rgb(0,0,0) solid; }
div[id~=footer] { background-color:transparent; padding:0 0 20px 0;}
div[id~=footer] a { color: rgb(255,255,255)}
div[id~=footer] div { padding:10px 0; color: rgb(255,255,255)}
h3 {background: url(http://thanksgivinglayout.com/wp-content/uploads/2008/11/circleshead.png) repeat; color:transparent;}
h3.moduleHead { font-size: 120%; color: ; background-color: transparent; padding:0.em }
div.moduleMid2 h3 {
	background-color: ..;
	background-position: bottom left;
	background-repeat: repeat-x;
	color: padding-top:12px; text-transform: uppercase; letter-spacing:-1px; font-size:17px;}
h4 { font-size: 110%; color: }
div.basicInfoModule div.moduleHeadTop, div.basicInfoModule div.moduleHeadMid, div.basicInfoModule div.moduleHeadBottom { display:none; }
div.basicInfoModule {
background-image: url(http://thanksgivinglayout.com/wp-content/uploads/2008/11/givingthanks.png);
background-repeat: no-repeat;
background-position: 70% }
div.photo, div.profileDemographics, div.moduleMid, div.moduleTop div div, div.moduleBottom div div, div[id~=topnav] { background-color:  }
div.moduleMid2 h3, div.basicInfoDetails h2 {color:;}
a.url, ul.contactLinks li a, a:hover; {color: rgb(255,255,255)}
div.basicInfoDetails h2 { font-size: 24px; font-weight:bold; line-height: 1.2em;}
div.profileStatus, div.profileMood, div.profileMoodImg { height:18px; line-height:18px; margin-top:7px; }
div.profileStatus { margin-left:0px; }
div.profileFullName { color:#333; font-weight:bold; }
div.profileFullName span { color:#000; }
ul.profileUserAlbum li { background-color: #FFF; border: 1px solid #C7C7C7; }
div.musicPlayerModule h3.moduleHead { display: none; }
div.companiesModule li.moduleItem, div.interestsModule li, div.schoolsModule li.moduleItem, div.networkingModule li.moduleItem { background-color:  }
div.detailsModule li { background-color:; line-height: 0; color: rgb(255,255,255); }
div.detailsModule li strong { display: block; float: left; width: 40%; line-height: 1.2em; height: 1.2em; overflow: hidden; font-weight: bold; color: rgb(255,255,255); }
div.detailsModule li span { display: block; margin-left: 42%; line-height: 1.2em; }
div.networkingModule a { font-weight:bold; }
div.blogsModule ul.moduleList { border-top: dotted rgb(195,185,154) 0px; }
div.blogsModule ul.moduleList li { border-bottom: dotted 0px rgb(195,185,154); }
div.blogsModule ul.moduleList span.date { color: #ffffff; }
div.blurbsModule h4 { background-color: transparent; color: rgb(195,185,154); }
div.calendarModule ul.moduleList { border-top: dotted 0px #3d3d3d; }
div.calendarModule li.moduleItem { border-bottom: dotted 0px #3d3d3d; }
div.friendSpaceModule ol.moduleList li a img { border: 0px solid #000; }
div.commentsModule ul.moduleList li { background-color: rgb(0,0,0); }
div.commentsModule a.profileLink,
div.commentsModule h3 { color: ; }
div.commentsModule div.userComment { background-color: rgb(0,0,0); }
div.commentsModule div.user { background: transparent; background-color: rgb(0,0,0); }
div.commentsModule p.datePosted { font-weight: bold; color: rgb(195,185,154); }
div.commentsModule ul.moduleList li ul.commentsInfo li { font-size:80%; line-height: 1.2em; background-color: transparent; border-right: 1px solid ; }
div.commentsModule ul.moduleList li {background-color: rgb(0,0,0);}
[id~=topnav] ul li a:hover {background-color: rgb(195,185,154); color: rgb(0,0,0)}
[id~=topnav] ul li a.open:hover {background: rgb(195,185,154) none repeat scroll 0 0; color: rgb(0,0,0)}
[id~=subnav] * {
color: rgb(0,0,0) ..;
text-decoration:none ..;
text-transform:none ..;
}
[id~=subnav] ul li a:hover {background: rgb(195,185,154) none repeat scroll 0 0; color: rgb(0,0,0)}

Its very likely that you might want to change things around with particular layout from this or another layout site.  You may want to have a different backround image for your whole profile or maybe you want to change the little headers on each module to a new image.  Or maybe you want to change the colors of the top menu(navigation) bar to better suit your style.  This is all perfectly fine and I encourage everyone on myspace to utilize the new capabilities of Profile 2.0 to their fullest.  Read on to find out more about how to design your own Profile 2.0 layout.

First of all each CSS code has a label.  The format for each piece of code will something like body { background: #FFF;}.  This would tell the page to make the background color of the body white or #FFF.  Notice that after each label you see { code; }.  All of your code after the label must be between { and }.  So, those are some VERY basics like I said.  You can google CSS and find many great tutorials and examples that you can use on your profiles.  Next, I will start explaining more about how to design your own profile.

One of the first things I usually do when designing a profile 2.0 layout is set the background image.  This is done with the following code:

• body { background: url(link to image here) no-repeat fixed;}

That code will set your background image to the url you enter, tell it not to repeat and tell it to stay fixed when scrolling.  The following is a list of codes and a desciption of what part of the page they control:

• #topnav- Controls the look of the Myspace menu at the top.  A background color or border can be added here.
• #topnav ul
  {
  list-style: none;
  padding: 0;
  margin: 0;
  border-right: 1px #666 solid;
  display:block;
  } - I use this to control the color of the vertical line after the words ‘more’ and ’sign out’ in the menu.  Just change the color of border-right.
• #topnav ul li
  {
  padding: 0;
  margin: 0;
  float: left;
  border-left: 1px #666 solid;
  } - I use this code to control all of the other vertical lines in the menu.  Just change the color of each.
• #topnav *
  {
  color:#666;} - This is used to change the color of the little arrows in the menu.
• div.module {background-color: #000;}- This will change the background color of every module on the page.  You could also leave the color out or use transparent instead of a color to allow your background to show through.  You could use an image as a background as well using the code from the body example above.
• h3 {background: url(link to image here) repeat; color:transparent;}- This controls the headings of all the modules on the page.  I use this to set an image as a header for each module.  The color transparent makes the text of each heading dissapear.
• div.basicInfoModule {
  background-image: url(link to image here);
  background-repeat: no-repeat;
  background-position: 70% }- div.basicInfoModule controls the top module where your picture and info are located.  I like to use this module to place an image.  The background-position rule is using a percent.  In this example the image would be located 70% from the left side of the module or almost to the right side.

Those are only a few of the rules that dicate how your page will look.  These are the ones I change most frequently when creating new layouts.  If you can understand how to use the above codes then it should be easy to manipulate a profile to the style you like.  Other rules will change margins of modules, colors of text, bullet styles.  The best way to learn is to grab the layout code and paste it into your CSS box on Myspace.  Then start changing things to see what happens.  A great tool that I use is the Web Developer Toolbar for Firefox.  Using this toolbar allows you to make changes to CSS on the fly making it easy to track down which CSS rule is controlling which module on Myspace.

A note about backgound images

When using backgound images inside the modules I like to use images with transparency.  A computer image, regardless of the color information contained within the image, is always a rectangle of some type.  After working hard to create or manipulate an image, you dont want it show on your page with a rectangular background.  With some images this will be fine, but im talking about design elements.  The cure for this is the use a file format called .png.  PNG images retain transparency information making them much better for design elements than .jpg.  If you are using a photo editing program to manipulate your design elements make sure you create you designs on new layers.  Its okay to use a background image while working just for reference but when you save the image be sure to turn off your background layer.  Save your image as a .png and you will have a nice design element with a transparent background.

I hope this helps in your quest to design your own Myspace Profile 2.0 layouts.  If you can use CSS to design your Myspace layout you could easily apply the same techniques to developing your own website.  Good Day!

Wish your friends a Happy Thanksgiving with this Myspace image comment!  Get it Now!

Click Image For Preview

How to Use This Comment:

Copy the code below and paste it into comment box when you comment your friends! Easy!

<a href="http://www.thanksgivinglayout.com" target="_blank"><img src="http://thanksgivinglayout.com/wp-content/uploads/2008/11/thankfulfor9.jpg" alt="Myspace Thanksgiving Day Comments" border="0"</a>

Wish your friends a Happy Thanksgiving with this Myspace image comment!  Get it Now!

Click Image For Preview

How to Use This Comment:

Copy the code below and paste it into comment box when you comment your friends! Easy!

<a href="http://www.thanksgivinglayout.com" target="_blank"><img src="http://thanksgivinglayout.com/wp-content/uploads/2008/11/thankfulfor8.jpg" alt="Myspace Thanksgiving Day Comments" border="0"</a>

Wish your friends a Happy Thanksgiving with this Myspace image comment!  Get it Now!

Click Image For Preview

How to Use This Comment:

Copy the code below and paste it into comment box when you comment your friends! Easy!

<a href="http://www.thanksgivinglayout.com" target="_blank"><img src="http://thanksgivinglayout.com/wp-content/uploads/2008/11/thankfulfor7-copy.jpg" alt="Myspace Thanksgiving Day Comments" border="0"</a>

Wish your friends a Happy Thanksgiving with this Myspace image comment!  Get it Now!

Click Image For Preview

How to Use This Comment:

Copy the code below and paste it into comment box when you comment your friends! Easy!

<a href="http://www.thanksgivinglayout.com" target="_blank"><img src="http://thanksgivinglayout.com/wp-content/uploads/2008/11/thankfulfor6.jpg" alt="Myspace Thanksgiving Day Comments" border="0"</a>

Wish your friends a Happy Thanksgiving Myspace image comment!  Get it Now!

Click Image For Preview

How to Use This Comment:

Copy the code below and paste it into comment box when you comment your friends! Easy!

<a href="http://www.thanksgivinglayout.com" target="_blank"><img src="http://thanksgivinglayout.com/wp-content/uploads/2008/11/thankfulfor5.jpg" alt="Myspace Thanksgiving Day Comments" border="0"</a>

Wish your friends a Happy Thanksgiving Myspace image comment!  Get it Now!

Click Image For Preview

How to Use This Comment:

Copy the code below and paste it into comment box when you comment your friends! Easy!

<a href="http://www.thanksgivinglayout.com" target="_blank"><img src="http://thanksgivinglayout.com/wp-content/uploads/2008/11/thankfulfor4.jpg" alt="Myspace Thanksgiving Day Comments" border="0"</a>

Wish your friends a Happy Thanksgiving with this cute little brown turkey Myspace image comment!  Get it Now!

Click Image For Preview

How to Use This Comment:

Copy the code below and paste it into comment box when you comment your friends! Easy!

<a href="http://www.thanksgivinglayout.com" target="_blank"><img src="http://thanksgivinglayout.com/wp-content/uploads/2008/11/thankfulfor3.jpg" alt="Myspace Thanksgiving Day Comments" border="0"</a>