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!

Share and Enjoy: