Example 3: Change font color, size and family of various text on my MySpace Profile Page



I did a Google search on "MySpace CSS", looked over several websites, most were just a page with links to other sites which isn't what I was looking for! I finally found a site with a long lists of CSS rules that would change the display of stuff on my MySpace Profile page at http://www.createblog.com/forums/lofiversion/index.php/t84325.html. My below CSS changes are from this createblog.com site and those CSS rules that I have gathered over the last months as I made changes to my MySpace Profile page.

For this example I'm only interested in changing font color in various sections (tables) so that the text does not blend in with background image that I will use. I have not found CSS MySpace Profile code that will change the blue font color in a few of the areas so I have kept away from using background images into which blue text would disappear.

A few months ago I did want to change the blue text font color in my Contact area. For that I created an image that had text on the image and overlaid it above what MySpace displays in the Contact area. I'll discuss that in a future Example.

In Example 4 I will add a background image to the My Contact section where the image will be beneath the current text displayed by MySpace in the Contact section.

The code below is not my final code for this example. The code is what I used as I worked my way through to see which style change affected which area of text on my MySpace profile. My code for this example will be at the bottom of this page and will be generate text colors to go with an orange background image.

I would suggest you go through the style changes below and one by one change the font color or make the font size large, like 28pt, and do the preview profile and see which section of text is changed. Then you can pick and choose which style changes to fonts you will keep, and which you will remove. Remember, the style changes below will not change all the areas of text. I put a comment above each of the CSS rule change to try to help you identify the area of text it will change.

Remember you can do a Google, Yahoo or other web search on words like "Hex Color Number" and find a website that offers the Hex number for colors. I like to use a neon lime green color "33FF33" when I'm trying to see what text a style change affects. 




<gwl code="layout">
<style type="text/css">
.code { GreatWebLayouts MySpace Profile style changes}
</style>

<style type="text/css">

	body {
	border:2px dashed ffffff; background:FFFFFF 
	url('http://s113.photobucket.com/albums/n210/gwldn/Jewel_Tone_2/JT2_Fire_Opal_1024x1024.jpg') 
	no-repeat fixed center 50%; 
	}       

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

{Id name above the photo }
.nametext{font-family:arial; font-size:16px;  color:FF0033; font-weight:none;border:0px; 
text-transform: uppercase; bold}	

{words on right side of the photo}
.text {font-family:arial; font-size:12px; color:FF0033; font-weight:none;border:0px; 
text-transform: lowercase;}

{Many areas. Make font size large like 28px to see text}
body,table, td, li, p, div, textarea  
{font:normal 12px arial; color:00FF00; font-weight:none; border:0px; text-transform: 
none; line-height:12px;}

{bolded MySpace URL title}
.standard b, p b, B, strong {
font-family:arial; font-size:9px; color:66f2cc; font-weight:none;border:0px; 
text-transform: uppercase; }

{Contact section header and Detail section header  }
.whitetext12{font-family:arial; font-size:10px;  color:FF870F; font-weight:none;border:0px; 
text-transform: uppercase;}

{Detail section titles }
.lightbluetext8{font-family:arial; font-size:9px;  color:FF0000; font-weight:none;border:0px; 
text-transform: uppercase;}

{right hand side, Extended Network title}
.blacktext12{color: ff9900; font-family:arial;text-transform: lowercase; text-decoration:none; 
font-size: 9pt;font-weight:normal; }

{right hand side, Blog title and How Many Friends title}
.btext{color: 444466; font-family:arial;text-transform: lowercase; text-decoration:none; 
font-size: 9pt;font-weight:normal; }

{number of your friends, lower right hand side)
.redbtext {font-family:arial; font-size:12px;  color:cccccc; font-weight:none;border:0px; 
text-transform: uppercase;}

{orange text on right hand side of Profile page}
.orangetext15 {font-family:arial; font-size:9px;  color:00D235; font-weight:none;border:0px; 
text-transform: uppercase;}

.contactTable {width:300px !important; height:200px !important; padding:0px 
!important;background-image:url("http://s113.photobucket.com/albums/n210/gwldn/My
Space_Contact_300x200/horse_003_300x200.jpg");

</style>
</gwl code="layout">


Below is code I added to mySpace profile and a screen shot of the actual mySpace profile page: 



<gwl code="layout">
<style type="text/css">
.code { GreatWebLayouts}
</style>

<style type="text/css">

	body {
	border:2px dashed ffffff; background:FFFFFF 
	url('http://s113.photobucket.com/albums/n210/gwldn/Jewel_Tone_2/JT2_Fire_Opal_1024x1024.jpg') 
	no-repeat fixed center 50%; 
	}       

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

{Id name above the photo }
.nametext{font-family:Times New Roman; font-size:16px;  color:FEE4C2; font-weight:none;border:0px; 
text-transform: uppercase; bold}	

{words on right side of the photo}
.text {font-family:arial; font-size:9px; color:FF0033; font-weight:none;border:0px; 
text-transform: lowercase;}

{Many areas. Make font size large like 28px to see text}
body,table, td, li, p, div, textarea  
{font:normal 9px arial; color:FF9F71; font-weight:none; border:0px; text-transform: 
none; line-height:12px;}

{bolded MySpace URL title  -- not used, removed}

{Contact section header and Detail section header  }
.whitetext12{font-family:arial; font-size:10px;  color:FF870F; font-weight:none;border:0px; 
text-transform: uppercase;}

{Detail section titles }
.lightbluetext8{font-family:arial; font-size:9px;  color:FF0000; font-weight:none;border:0px; 
text-transform: uppercase;}

{right hand side, Extended Network title}
.blacktext12{color: FF9F71; font-family:arial;text-transform: lowercase; text-decoration:none; bold;
font-size: 9pt;font-weight:normal; }

{right hand side, Blog title and How Many Friends title}
.btext{color: 0000FF; font-family:arial;text-transform: lowercase; text-decoration:none; bold;
font-size: 12pt;font-weight:normal; }

{number of your friends, lower right hand side)
.redbtext {font-family:arial; font-size:12px;  color:cccccc; font-weight:none;border:0px; 
text-transform: uppercase;}

{orange text on right hand side of Profile page}
.orangetext15 {font-family:arial; font-size:9px;  color:FF0000; font-weight:none;border:0px; 
text-transform: uppercase;}


</style>
</gwl code="layout">


Here is a screen shot of what this above code produced:



In Example 4 I will add a background image to the My Contact section where the image will be beneath the current text displayed by MySpace in the Contact section.

If you want to receive an email when I add more help text then click the Subscribe button on the home page of www.GreatWebLayouts.com.