Archive for November, 2008

Giving Thanks- Profile 2.0 Layout

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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5 out of 5)
Loading ... Loading ...

Design your own profile 2.0 layout

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.

Profile 2.0 CSS Rules

Myspace used to use tables for their layout designs which is now outdated and very hard to edit.  No one wants to deal with tables for design purposes.  While tables do have their own use, CSS is much better for design purposes.  CSS stands for Cascading Style Sheets.  CSS is nothing new to the world of web design, only new to Myspace.  Youll find that its not that hard to learn once you try a couple of things.  One great thing about CSS is that you can make one simple change to… lets say a color, and it will apply the change to everything in its class.  For example, you can change the background colors of all of the modules by changing one piece of code.  That comes in very handy.  So, ill show you some VERY basics of CSS and explain what the different sections of your Myspace Profile 2.0 are labeled.

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!

Thankful for Jesus

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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Thankful for My Friends

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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...


Thankful for My Twins

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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Thankful for Little Girls

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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Thankful for Precious Little Boys

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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Thankful for My Child

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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Thankful for You

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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Thankful for My Son

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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Thankful for My Daughter

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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 5 out of 5)
Loading ... Loading ...

Happy Thanksgiving Turkey

Wish your friends a Happy Thanksgiving with this cute 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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Thanksgiving Turkey

Wish your friends a Happy Thanksgiving with this cute 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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Happy Thanksgiving Turkey

Wish your friends a Happy Thanksgiving with this cute  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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Wild Turkey

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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Turkeys!

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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Cold Night- Profile 2.0 Layout

Fall Leaves 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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 5 out of 5)
Loading ... Loading ...

Orange Fall- Profile 2.0 Layout

Fall Leaves 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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5 out of 5)
Loading ... Loading ...

Fall Leaves- Profile 2.0 Layout

Fall Leaves 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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

November Night- Profile 2.0 Layout

November Night 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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Turkey Time- Profile 2.0 Layout

Turkey Time 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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5 out of 5)
Loading ... Loading ...

Fall Comes- Profile 2.0 Layout

Fall Comes 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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Graceful Leaf- Profile 2.0 Layout

Graceful Leaf 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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 4 out of 5)
Loading ... Loading ...

Girly Turkey- Profile 2.0 Layout

Girly Turkey 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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Bright Fall- Profile 2.0 Layout

Bright Fall Myspace 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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Thanksgiving 2.0- Profile 2.0 Layout

This is our first myspace 2.0 Thanksgiving Layout!  Try it out!

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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Happy Thanksgiving Turkey

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!

Rate It!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...