Versatile Creations

Crystal · **Joined:** Tue Apr 29, 2008 1:35 pm **Posts:** 2

Have you ever seen a myspace layout that you liked but wanted to change the color of this or the font of that and didn't know how? Well I am going to attempt to show you how to do just that. Below is a layout I took from another layout that I did not write and I edited it to my own liking. Luckily, I know a bit about html and css so I could do it, but for the ones that don't know much about it, then I will add somewhat of a detail explanation below the code. First, I added the code in quotes with things you can change in red, there are more things you can change but I tried to keep it simple and added what I thought would be easiest to explain. After that I added the code so that you can copy and paste into your About Me section and then from there you can edit the things you see on this page in red. So you will need to refer back to the things in quotes. If you have any questions about what I am attempting to show you how to do, then you can post them in this forum and I will try to help you out to the best of my abilities. Once you get the hang of this, then you will be able to edit any myspace layout code you see. So let's get started!

Quote:

Play around with the settings to get different results. I used this website to help write this explanation of the codes, if you are interrested in learning more this is a great website to start!
http://www.w3schools.com/default.asp

Font-Family = This is the kind of font (The type of letters shown on the page) like Veranda, Arial, San serif, etc.

Font-Size = The font-size property sets the size of a font. You can use words such as small, medium, large or you can use px (like 9px)

Font-Color = The will set the font color. Use the 6 digit hex color if you know it or you can type the color in. Example FFFFFF or White.
To find more hex colors go to this website:
http://www.december.com/html/spec/color.html
*Remember do not add the # sign before the hex code, it might mess up your layout code.

Text-Decoration = The text-decoration property decorates the text.
Possible values
None Defines a normal text
Overline Defines a line over the text
Line-Through Defines a line through the text
Underline Defines a line under the text
*These are a neat effect to add to the hover codes.

Text-Transform = The text-transform property controls the letters in an element.
Possible values
None Defines normal text, with lower case letters and capital letters
Uppercase Defines only capital letters
Lowercase Defines no capital letters, only lower case letters
Capitalize Each word in a text starts with a capital letter

Line-Height = The line-height property sets the distance between lines.

Background-Image url = If you have a background image to add you put in the url here if you do not then simply add none.

Background-Attachment = The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.
Possible values
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-Position = The background-position property sets the starting position of a background image.
Possible Values
(If you only specify one keyword, the second value will be "center")
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

Background-Repeat = The background-repeat property sets if/how a background image will be repeated.
Possible values
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-Color = The will set the background color. Use the 6 digit hex color if you know it or you can type the color in. Example FFFFFF or White.
To find more hex colors go to this website:
http://www.december.com/html/spec/color.html
*Remember do not add the # sign before the hex code, it might mess up your layout code.

Hover = The :hover pseudo-class adds a special style to an element when you mouse over it.

Border = You can set the border around the tables. Here are some examples to use. Experiment with this and find which you like best.
None
Dotted
Dashed
Solid
Double
Groove
Ridge
Inset
Outset

Border-Width = Sets the width of the border.
Possible Values:
You can set it in px, like 0px, 1px, 2px, etc.
Thin
Medium
Thick

Also look for the contact table and you can change the url if you have a custom contact table. Don't forget to change the size to the contact table that you have so it will show.

Also, you can change the scrollbar colors. Play around with them and you will see. To get a picture of what is what, go to this website and see what the scrollbar looks like: http://jacorre.com/design/scrollbarcolor.htm

The bottom code is to change the new navbar in myspace.

Now this is where you can copy the code used above and change the things on this page in red to your own liking:

Code:

<style>
.r{}
     
body {
   font-family:Verdana,Arial; font-size: 9px; color: FFD3E3; font-weight: normal; text-decoration: none; text-transform: uppercase; line-height: 10px; 
   {background-image:url("http://i218.photobucket.com/albums/cc115/crystalm36/forum%20example/vcforumexamplebg.jpg");
background-attachment: fixed;
background-position: center;
background-repeat:no-repeat; 
background-color:white;}
 
      
   }
   

p {margin: 0px 0px 1em 0px; font-family: Verdana, sans-serif !important}

a, a:link, a:visited {color:000000; text-decoration: none;}

a:hover {font-family:Verdana,Arial; font-size: 9px; color: 000000; font-weight: normal; text-decoration: none;  text-transform: lowercase; line-height: 10px; }

img {border: none}

br {line-height: 10px;} 

u {text-decoration: none; }

table table table br { line-height:15px; }

* html table table table.latestBlogEntry br { line-height:0; }

form {border-width:0px;background-color:none;}

input {background-color:transparent !important}

body&gt;div {margin-left: 10px;}
                                             
table { border:1px solid white;}
table, tr, td { background-color: ffffff;
   border: 0px; }


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


table table table td {background-color:transparent;margin:0px;padding:0; vertical-align:top ! important;}
* html table table table td {padding: 0 26px 15px 26px;}
 
table table table table {border-width:0px; background-color: transparent; margin:0px; padding:0px; background-image: none;} 
table table table table table{ border-color:ffffff;}

table table table table td {padding:3px 0;margin:0px; }
table table table table table td { padding:0 2px 0 0;}


table table table {
   margin:0px; 
   max-width: 423px;
   width: 100% !important; 
   padding: 0 12px 14px 12px; 
   }
      
* html table table table { padding:0;}
      
body td table, body div table {margin-top: 0;}

font {color:000000;font-size:10px}

a font:hover {font-family:Verdana,Arial; font-size: 9px; color: 000000; font-weight: normal; text-decoration: none;  text-transform: lowercase; line-height: 10px; }

a.navbar:link, a.navbar:visited {color:000000}

a.navbar:hover {font-family:Verdana,Arial; font-size: 9px; color: 000000; font-weight: normal; text-decoration: none;  text-transform: uppercase; line-height: 10px; }

table tr td table tr td font {display: inline;}

table tr td table a.navbar {font-size: 10px;}

.text {color:000000;font-size:11px}

a.text:link, a.text:visited {color:000000}

a.text:hover {font-family:Verdana,Arial; font-size: 9px; color: 000000; font-weight: normal; text-decoration: none; text-transform: lowercase; line-height: 10px; }

.contactTable {width: auto !important;}

* html .contactTable, *html .userProfileURL {width: 325px !important;}

.contactTable td {padding: 0px; margin: 0px; text-align: center;  }

.contactTable span.whitetext12 { left: 0;}
* html .contactTable .whitetext12 {margin-left: 25px;}  

.contactTable td table {  
   height:150px;
   background-color: transparent; 
   background-position: center; 
   background-repeat: no-repeat;     
   }
* html .contactTable td table {  
   background-position:center center;
}

.contactTable a {padding: 0px; margin: 0px 0px 0px 0px; display: block; background-color: transparent;  }
.contactTable a { height: 30px; width: 125px;} 
.contactTable img { display:none; visibility:hidden;} 
.contactTable a img { 
   border: 0px;          
   display: block; 
   visibility: visible; 
   }  
               
.contactTable a img { width:115px; margin-top:6px; margin-left:8px;}

.nametext, .whitetext12, .orangetext15, .btext { 
   margin: 14px 0px 4px 0px; 
   width:auto; 
   display: block; 
}

* html .nametext, * html .whitetext12 { width:278px; }


.orangetext15, .btext {
   width:auto;
   }     
table table table 
.orangetext15 { margin-bottom:-15px;}

table table table table .orangetext15 { margin-bottom:4px;}
   
* html .orangetext15, * html .btext   { width:373px;}   

table tr td table tr td table tr td div strong {display: block; width: 270px;}

.whitetext12 { margin-top:0;}
.blacktext12 { display: block;  margin-bottom:0px !important;}
.NOTES { content:"view all of your friend's link"; }

a.redlink:link {display: inline; border-width: 3px 0px 0px 0px;  padding-top: 3px;}

.NOTES { content:"firefox hack to make tables not to have a huge gap"; }
td.text {text-align:left;}    


table table tr td {
   line-height:1.4em; 
}            

table.userProfileURL strong { margin-top:-5px; margin-right:8px !important; }
table.userProfileURL { text-align:center;}     
table.userProfileURL table {margin-top:-7px;  margin-right:-5px;}   
 table table table.userProfileURL {padding-bottom:0;}
*html table table table.userProfileURL td {padding-bottom: 0;}


table.userProfileDetail .whitetext12, table.contactTable  .whitetext12{ margin-top:3px;}
table table table.blurbs span.orangetext15, table table table.friendSpace .orangetext15 { display:none; }  
table table table.blurbs table {margin-top:-18px;}
table table table.blurbs table span.orangetext15 { display:block; margin-bottom:-10px;}  

table table table.extendedNetwork { padding:0; } 
table table table.extendedNetwork td {padding:0;} 

table table table.contactTable { padding:0;}
table table table.contactTable span.whitetext12{ display:none; }.contactTable .text {font-size:1px !important;}
table table table.contactTable td.text {height:0px !important}
.r{}
body {
   background-color:000000;
}         

.r{}

table table table {
  border-width: 0; 
  border-style: solid; 
  border-color: 000000; 
  background-color:ffffff; 

}     

table table table table    
.r{}   
   
.contactTable td table { 
  background-image: url('http://i218.photobucket.com/albums/cc115/crystalm36/forum%20example/vcforumcontactexample.gif');   
} 
   
.contactTable a img, .contactTable img { 
   visibility: hidden; 
   }  
  
.r{}
                              
.r{}
body, table table tr td, table table div, li, p, .redtext, .blacktext10, .text, a.text:link, a.text:visited, 
a.searchlinksmall, a.searchlinksmall:link, a.searchlinksmall:visited,
.lightbluetext8, a, a:link, a:visited, a.redlink:link, div, font, a.navbar:link, a.navbar:visited
{
  font-family:Verdana,Arial; font-size: 9px; color: 000000; font-weight: normal; text-decoration: none; line-height: 10px;   

}    
            
a.searchlinksmall, a.searchlinksmall:link, a.searchlinksmall:visited { font-weight:normal;}

.r{}
.nametext, .whitetext12, .orangetext15, .btext, .redbtext,    .blacktext12, table.userProfileURL strong {  
   margin: 14px 0px 4px 0px;  
  font-family:Verdana,Arial; font-size: 9px; color: ffffff; font-weight: normal; text-decoration: none; line-height: 10px;

}   

.whitetext12 { margin-top:0; }   


.r{}

span.blacktext12 {


padding-bottom:;



}

.blacktext12 { text-align:center; margin-top:0px;} 

.nametext, .whitetext12, .orangetext15, .btext, table.userProfileURL strong {   
   background-color:000000;



  padding-top: 2; 
   padding-right:2;
   padding-bottom:2;
   padding-left:4;
   padding-left: 4;

  border-style: none; 



}
     
 


.nametext {   

  font-family:Verdana,Arial; font-size: 9px; color: ffffff; font-weight: normal; text-decoration: none; line-height: 10px; background-color:000000;


}      
 


.r{}
.lightbluetext8 { 
  font-family:Verdana,Arial; font-size: 9px; color: 000000; font-weight: normal; text-decoration: none; line-height: 10px;



}          

     
.r{}  

.r{}    
a, a:link, a:visited, a.redlink:link, a.redlink:visited, a.navbar:link, a.navbar:visited, a.text:link, a.text:visited, a.text:hover {
  font-family:Verdana,Arial; font-size: 10px; color: 000000; font-weight: normal; text-decoration: none; line-height: 10px;

}    

a.navbar:link, a.navbar:visited, a.text:link, a.text:visited, a.text:hover {  font-family:Verdana,Arial; font-size: 9px; color: 000000; font-weight: normal; text-decoration: none;  text-transform: lowercase; line-height: 10px;

   }    

a:hover, a.redlink:hover, a.navbar:hover,  a.text:hover {
  font-family:Verdana,Arial; font-size: 10px; color: 000000; font-weight: normal; text-decoration: none;  text-transform: lowercase; line-height: 10px;
}         

a.navbar:hover,  a.text:hover { font-family:Verdana,Arial; font-size: 10px; color: 000000; font-weight: normal; text-decoration: none;  text-transform: uppercase; line-height: 10px; 

   }

.NOTES { content:'make font smaller for friends comments box';}
a.navbar:link, a.navbar:visited, a.navbar:hover, a.text:link, a.text:visited, a.text:hover { font-family:Verdana,Arial; font-size: 9px; color: 000000; font-weight: normal; text-decoration: none;  line-height: 10px; }
     
table, td { padding: 0px; }
table table table { height: .01%; width: 100%; padding: 1px; }
table table table table { padding: 0px; }
table table table table table { padding: 0px;}
table table table table table table { padding: 0px;}

td.text td.text table table table td {padding:0px 5px 0px 5px !important; }
span.orangetext15, span.btext {width:100% !important;}
* html table table table td {padding: 0;} 
* html .contactTable, *html .userProfileURL {width: 280px !important;}
table.userProfileURL table { margin-bottom:0; }
.contactTable a { height: 30px; width: 133px; }

.whitetext12 {display:none;}

.btext, .latestblogentry br, .redtext, div td form, table table td.text table td.text table table tbody td table, .orangetext15, .whitetext12, .text .text .orangetext15, .navigationbar span{display:none;}


</style>
<style>
body {
scrollbar-face-color: ffffff; 
  scrollbar-shadow-color: 000000; 
  scrollbar-highlight-color: ffffff; 
  scrollbar-3dlight-color: 000000; 
  scrollbar-darkshadow-color: ffffff; 
  scrollbar-track-color: ffffff; 
  scrollbar-arrow-color: 000000;


}
</style>



<style>.i {display:none}{! color top menu !}div.profileWidth table td, i i i.x {background-color:transparent !important;}{! color search area and behind ad different than top menu !}div.profileWidth div {background-color:transparent !important}{! color link font in top menu !}div.profileWidth div ul li a {font-family:verdana; font-size:11px; font-weight:bold; color:black !important}{! link hover color !}div.profileWidth div ul li a:hover {color:white !important; background-color:transparent !important; display:block}{! remove shadow in google search area !}div.profileWidth div.clearfix, .i i i {background-image:none !important;}</style>

Versatile Creations

How to make a myspace layout

Who is online