If you're new here, you may want to subscribe to my RSS feed. So that you can read the latest updates about Web2.0 tools, Making Money Online, Tips in SEO, Ajax and many more. Thanks for visiting ProgramimiCOM!

This is the first in a series of Myspace tutorials targeting specific blocks of the Myspace layout. If you’ve never tried to Modify myspace you should read some of the basic Myspace tutorials first, particularly where to customize Myspace layouts and backgrounds . The “extended network” block is the rectangle fount in the upper right portion of your profile.

You access it using the blacktext12 class. If you just want to make it disappear this is all you need:

<style>
.blacktext12 {
font-size:0px;
color:FFFFFF;
}
</style>
Be sure to change the color to match your background color. Technically you should not have to do this but Internet Explorer doesn’t render 0px fonts properly so you actually see a tiny font on screen if you don’t match the colors (a good reason to go to Firefox, it’s a better browser). This works because by default the Myspace extended network block contains only text.

It’s more fun, though, you place an image in that spot. The key to making that work is to know the dimensions of the image so you can set the size of the block properly. Here are the steps I use to find the image size if you have Firefox (if you have IE, sorry, you’ll have to dive into the source of the page or know where the image lives, another reason to upgrade to Firefox):

1. Browse to the page with the image you want to use (make sure it is on your own web space or you have permission to use it directly)
2. Right click (ctl - click if you have one button mouse) and select View Image or View Background Image
3. Copy the URL to paste into your code
4. Right click (ctl - click if you have one button mouse) and choose Properties (this will work in IE for page images but not background images, IE really does stink). Note the dimensions of the image.

Now your ready to take that information and customize your Myspace layout in a fun way:

<style>
span.blacktext12 {
font-size:0px;
color:FFFFFF;
background-image:url(paste URL from above here);
background-position:center;
background-repeat:no-repeat;
display:block;
width:468px;
height:60px;
}
</style>

Note that this time you needed to add the span tag in front of the blacktext12 property. The background properties aren’t strictly neccessary but help if you get the dimensions wrong.

If your adventurous you can play with other CSS properties. An example would be adding a border. All you need to do is add the following line of code to the end of the code above and you have a 2 pixel green border:

border:solid 2px rgb(0,255,0);

Note: you can only use rgb color codes or text color codes , hex codes (e.g. 00FF00) do not work in this situation.