How to Edit Your Myspace Background

With Myspace being as popular as it is, many websites are springing up offering pre-made profile layouts that you can copy and paste onto your profile to make it look better. This instructable is for those people who want to go their own way and write their own profile using a little HTML and a bunch of CSS.

edit3:
Myspace has a new method of editing profiles. This instructable details the old way of profile customization, and still applies to people who haven't upgraded to "Profile 2.0".

Myspace uses CSS to edit the colors and such. CSS is an internet technology that stands for Cascading Style Sheet. Without getting too far into it, CSS allows you to edit many aspects about the design of your Myspace, as well as webpages that you write.

The first step is to add the following lines of HTML to the "About Me:" content box. I put mine at the very top, so that it is easily accessible if I want to change it later. This will not appear on your profile, it is simply to alert the web browser of the person viewing your page that there is CSS between these html tags, and to adjust your profile accordingly.

<style type="text/css">

</style>

Now, to tell the browser where to apply this background to, you need to add the first bit of CSS, the body selector:

body
{

}

This tells your Internet browser that this CSS applies for parts of your profile within the body HTML tags, which is almost everything.

Myspace puts backgrounds on all the assorted tables, and even one straight down the center of the page. This would severely obstruct your viewing of the background you are now working on. To fix this, you need to add a small block of code under the body selector.

table, tr, td
{
background-color: transparent;
border: 0px;
}

This will make your background completely visible, and erase all the assorted boxes that appear on your profile by default.

Now for this next step, you get some choices. There are 5 different qualities that you can give your background, all done with CSS. They are:

background-color - This sets your background as a solid color, and provides a backdrop if your background image is not large enough to fill the entire screen.

background-image - This sets an image as your background.

background-repeat - If you have an image as your backgroud, this tiles the image if it is too small to completely fill the bowser window

background-attachment - This determines if the background will scroll as you scroll up and down the page, or if it will remain fixed in position.

background-position - This allows you to decide if your background image is in the upper left corner (default) or centered in the middle of your page.


I will go into detail on each of these on the following 5 pages.

This attribute allows you to set what color is displayed as your myspace background. There are multiple ways that you can set the value for this attribute.

The first is:
background-color: rgb(r, g, b);
The "r" in parenthesis represents the red value, the the "g" in parenthesis is the green value, and the "b" in parenthesis represents the blue value. To change your background color, you just set these values to any number between 0 and 255. For example, (0, 0, 0) would be black, (255, 255, 255) is white, (255, 0, 255) is purple, and (255, 255, 0) would be yellow.

Another method is to fill in the hexadecimal value for the color:
background-color: #000000;
This value is 6 digits, preceded by the pound symbol. The six digits are broken up into 3 pairs, the first representing red, the second green, and the third blue. Setting these values to values between 00 and FF will give you different colors. For those of you wondering how FF is a value, this uses the hexadecimal counting system, which counts like: 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10.

A third method is to use the name of the color, like I have in the picture below:
background-color: black;
The full list of supported colors and their names can be found at:
http://www.w3schools.com/css/css_colornames.asp

A background color is all well and good, but sometimes, you just want a little more than just a solid color to your profile. This is where background-image comes in.

To use background-image, you add the following line:
background-image: url(url);

The url within parenthesis is swapped out with the location of the image you want to use. To do this, you'll need to know the exact url of the image. So, the tag will wind up looking like:
background-image: url(http://www.website.com/image.jpg);

Alright, you now have your image loaded onto your Myspace page, but now you want something more. You don't like it sitting in the upper left corner of the screen, you want it to stand out in the middle! For this, you use:
background-position: center center;

There are 10 items you can fill in for the values for this attribute. They are:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%

The top 9 should be self explanatory. The bottom one might be a little vague.

x% y% lets you adjust how far in a direction the image will be. So, for:
background-position: 100% 100%;
The image will be in the lower right corner of the screen.

Note: For people who expect mozilla/firefox users to view your page, you need the attribute background-attachment to be set to "fixed", as will be discussed in the next step.

Alright, now you have a cool image on your profile, and its positioned exactly where you want it, but you also have a large profile, so people have to scroll to see it all, and when they scroll, your image goes with it. If you want to change this, the background-attachment attribute is for you. There are only two states for this attribute, fixed and scroll.

background-attachment: fixed;
This setting will fix your image in place, so when the browser scrolls, your image will stay put in your browser window.

background-attachment: scroll;
This setting will fix your image in one spot on your page, and it will scroll along with the page.

Maybe you found a cool design like the old Windows wallpapers, which was just a small graphic tiled over and over many times to create a cool-looking background for your desktop, and now you want to recreate that on your Myspace. With the background-repeat attribute, you can!

background-repeat: repeat;
This will tile your background image in all directions.


background-repeat: repeat-x;
This will tile your background image in the horizontal direction only.


background-repeat: repeat-y;
This will tile your background image in the vertical direction only.

background-repeat: no-repeat;
This will prevent your image from repeating itself.

So, now your background is all set, but you feel the cursor just isn't unique enough to go with your unique profile. Thats where the cursor attribute comes in!

cursor: crosshair;
This attribute will change the cursor from its standard arrow shape into a crosshair shape.

cursor: pointer;
This displays the default cursor that appears when you roll over a link (usually a hand).

cursor: move; The cursor indicates something that should be moved
This displays your computer's default cursor for moving a window.

cursor: e-resize;
This displays your computer's default cursor for adjusting the right side of a window.

cursor: ne-resize;
This displays your computer's default cursor for adjusting the upper right corner of a window.

cursor: nw-resize;
This displays your computer's default cursor for adjusting the upper left corner of a window.

cursor: n-resize;
This displays your computer's default cursor for adjusting the top side of a window.

cursor: se-resize;
This displays your computer's default cursor for adjusting the lower right corner of a window.

cursor: sw-resize;
This displays your computer's default cursor for adjusting the lower left corner of a window.

cursor: s-resize;
This displays your computer's default cursor for adjusting the bottom side of a window.

cursor: w-resize;
This displays your computer's default cursor for adjusting the left side of a window.

cursor: text;
This displays your computer's default text entry cursor.

cursor: wait;
This displays your computer's default busy cursor.

cursor: help;
This displays your computer's help cursor.

Alright, now you've changed your background, but you've discovered that the default font color now blends into your background, and nobody can read what you've written. To fix this, we now need some new CSS properties:

font-family: font;
This property specifies what font you want to use on your profile. When using this property, please avoid using fonts that only a few people have. The default Windows TrueType fonts like Times New Roman and Courier New are good choices.

font-size: size;
This property specifies how large the text will be. You can use a variety of ways to set this value, but I find setting it using the point size to be easiest. I believe the default size is 9pt, so to keep everything the same as before, you can use font-size: 9pt;. Alternatively, you can choose not to add this property.

color: (color);
This property specifies the color of the text. It works exactly like the background-color property from before.

font-weight: (value);
This property specifies the thickness of the text. It typically has two values, normal, and bold.

font-style: (value);
This property specifies the slant of the text. It typically has two values, normal, and italics.

text-decoration: (value);
This property specifies the decorations on the text. The most common values for this are none and underline.

Myspace breaks its text up into 5 main chunks. This step details changing the appearance of the text used in the interests box, for comments, and much of the text at the top of the profile.

To change these text aspects, you need to add the following CSS selector and properties:

body, div, span, td, p, .orangetext15, .whitetext12, .lightbluetext8, strong, b, u, .redtext, .redbtext, .btext, .text, .nametext, .blacktext10, .blacktext12
{
font-family: Courier New;
font-size: 10pt;
color: rgb(200, 200, 200);
font-weight: bold;
font-style: normal;
text-decoration: none;
}

This next text block is for the text that makes up your Myspace name above your profile picture:

.nametext
{
font-family: Courier New;
font-size: 10pt;
color: rgb(200, 200, 200);
font-weight: bold;
font-style: normal;
text-decoration: none;
}

This CSS selector controls the headings in the assorted profile boxes, such as "About me", and "[username]'s blurbs" or "[username]'s Friends comments"

.whitetext12, .orangetext15
{
font-family: Courier New;
font-size: 10pt;
color: rgb(200, 200, 200);
font-weight: normal;
font-style: normal;
text-decoration: none;
}

This set of CSS selectors controls how the links scattered throughout your profile appear:

a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover, a.man:link, a.man:active, a.man:visited, a.man:hover, a, a:link, a:active, a:visited, a:hover, a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover, a.text:link, a.text:active, a.text:visited, a.text:hover, a.searchlinksmall:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.searchlinksmall:hover, a.redlink:link, a.redlink:active, a.redlink:visited, a.redlink:hover
{
font-family: Courier New;
font-size: 10pt;
color: rgb(200, 200, 200);
font-weight: normal;
font-style: normal;
text-decoration: none;
}

For those of you who want a more dynamic page, you can add one last section of CSS to have links change their appearance when rolled over.

a.navbar:hover, a.man:hover, a:hover
{
font-family: Courier New;
font-size: 10pt;
color: rgb(200, 200, 200);
font-weight: bold;
font-style: normal;
text-decoration: underline;
}

At this point, you are complete! Take pride in your now hand-coded Myspace profile page.