Difference between revisions of "Change MySpace Background"

From OpenTutorial
Jump to navigation Jump to search
(Changing the Color)
m (Reverted edits by Taylor collins (Talk); changed back to last version by Hapa)
Line 2: Line 2:
  
  
<style type="text/css">
+
=== Changing the Color ===
table table table table table {direction:ltr;}
+
To change the background to any color you have to use the following code in your profile:
table table table table table td {direction:ltr;}
 
</style><a href="http://www.cleanupmyspace.com" target="_blank"><img
 
src="http://i165.photobucket.com/albums/u54/cleanup_bucket/corner_sign.gif" alt="Myspace Layouts, Myspace Graphics, Codes" style="position:absolute; left:0px;
 
top: 0px;" border="0"></a>
 
  
<Style type="text/css" source="http://www.cleanupmyspace.com/" author="Cleanupmyspace">
+
<pre>
table, tr, td{
+
<style>
background-color:transparent;
+
    body{
border-style:none;
+
        background-color: Color;
}
+
    }
 +
</style>
 +
</pre>
  
body{
+
Where "Color" is any standard html RGB value
background-color:rgb(0,0,0);
 
background-image:url(http://i165.photobucket.com/albums/u54/cleanup_bucket/Cleanup_Album_2/puzzle_layout.jpg);
 
background-position:top left;
 
background-repeat:repeat;
 
background-attachment:fixed;
 
}
 
 
 
table table table table, table table table td{
 
background-image:none;
 
background-color:transparent;
 
}
 
 
 
body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{
 
color:rgb(255,255,255);
 
font-size:9pt;
 
font-weight:normal;
 
font-style:normal;
 
text-decoration:none;
 
text-transform:none;
 
font-family:tahoma,sans-serif;
 
}
 
 
 
.orangetext15, strong, .lightbluetext8, .whitetext12, .nametext, .btext, .redtext, .redbtext{
 
color:rgb(102,102,102);
 
font-size:10pt;
 
font-weight:bold;
 
font-style:normal;
 
text-decoration:none;
 
text-transform:uppercase;
 
font-family:Georgia,sans-serif;
 
}
 
 
 
a, a font, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited, a.man font, a.redlink, a.redlink:visited{
 
color:rgb(204,204,204);
 
font-size:9pt;
 
font-weight:normal;
 
font-style:normal;
 
text-decoration:underline ;
 
text-transform:none;
 
font-family:tahoma,sans-serif;
 
}
 
 
 
a:hover, a:hover font, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.man:hover font, a.searchlinkSmall:hover, a.searchlinkSmall:active, a.redlink:hover, a.redlink:hover{
 
color:rgb(153,0,0);
 
font-size:9pt;
 
font-weight:normal;
 
font-style:normal;
 
text-decoration:underline ;
 
text-transform:none;
 
font-family:tahoma,sans-serif;
 
}
 
 
 
table table table, div table table{
 
border-color:rgb(255,255,255);
 
border-style:double;
 
border-width:6px;
 
background-color:rgb(0,0,0);
 
}
 
 
 
table table table table, div table table table{
 
border-style:none;
 
}
 
 
 
A IMG{
 
border-style:none;
 
}
 
</style>
 
 
 
<style type="text/css">.contactTable {width:300px !important; height:150px !important; padding:0px !important;background-image:url("http://i165.photobucket.com/albums/u54/cleanup_bucket/Cleanup_Album_2/puzzle_contact.gif");background-attachment:scroll; background-position:center center;background-repeat:no-repeat; background-color:transparent;}.contactTable table, table.contactTable td { padding:0px !important;border:0px; background-color:transparent; background-image:none;}.contactTable a img {visibility:hidden; border:0px !important;}.contactTable .text {font-size:1px !important;}.contactTable .text, .contactTable a, .contactTable img {filter:none !important;}.contactTable .whitetext12 {display:none;}</style>
 
 
 
</Style> I got my layout at <A href="http://www.cleanupmyspace.com" target="_blank">Cleanupmyspace.com</A>
 
 
 
<style type="text/css">
 
.bodyContent{
 
background-color:rgb(0,0,0);
 
background-image:url(http://i165.photobucket.com/albums/u54/cleanup_bucket/Cleanup_Album_2/puzzle_layout.jpg);
 
background-position:top left;
 
background-repeat:repeat;
 
background-attachment:fixed;
 
}
 
</style>
 
  
 
=== RGB Color Picker ===
 
=== RGB Color Picker ===

Revision as of 22:26, 20 June 2008

MySpace Customizing is mainly done through Cascading Style Sheets (CSS) this tutorial explains How to Change the Background of your MySpace Page


Changing the Color

To change the background to any color you have to use the following code in your profile:

<style>
    body{
        background-color: Color;
    }
 </style>

Where "Color" is any standard html RGB value

RGB Color Picker

<flash>file=OTColorpicker.swf|width=600|height=300</flash>

Changing the Background Image

To change the background to an image is similar, just use the following code:

<style>
    body{
        background-image:url("URL");
    }
</style>

Where "URL" is the location if the image to be used.


Optional Background Image settings

background-attachment:"VALUE";

Value Description
scroll The background image moves when the rest of the page scrolls
fixed The background image does not move when the rest of the page scrolls.


background-repeat:"VALUE";

Value Description
repeat The background image will be repeated vertically and horizontally
repeat-x The background image will be repeated horizontally
repeat-y The background image will be repeated vertically
no-repeat The background-image will be displayed only once


background-position: "VALUE";

Value Description
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
If you only specify one keyword, the second value will be "center".
x-% y-% The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%.
x-pos y-pos The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions.

Example

<style>
    body{
    background-image:url(http://www.crashlanding.us/photos/albums/wpw-20051116/Crash_Landing_Logo_1024x768.jpg);
        background-attachment:fixed;
        background-repeat:no-repeat;
        background-position: center center;
        background-color: #000000;
    }
</style>

This effect can be seen at www.myspace.com/hapa01


Glossary

CSS[1]
HTML[2]
MySpace[3]
RGB[4]
URL[5]