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.

• 0 Comments

Are you looking to change your Myspace backrounds? This is the code for placing the Myspace background image in the top center of the browser window. In order to make the image visible the backgrounds of all the tables in the Myspace layout need to be made transparent. This process will be explained in the Myspace layout tutorials.

<style type=”text/css”>

body {
background-color: FFFFF;
background-image:url(http://URL TO IMAGE);
background-position: top;
background-repeat: no-repeat;
}
</style>

One thing to note is I used only the vertical background-position option and let the default horizontal position of center do its own thing.

This is not an optimal position as the Myspace banner ads will obscure the top portion of the image.

• 0 Comments

Looking to change your Myspace backrounds? Here is the code for placing the Myspace background image in the top left of the browser window.

<style type=”text/css”>

body {
background-color: FFFFF;
background-image:url(http://URL TO IMAGE);
background-position: top left;
background-repeat: no-repeat;
}
</style>

Remember that without special code the contents in the Myspace layout tables will cover the Myspace background image on the left when the browser window is made smaller.

• 1 Comment

Looking to change your Myspace backrounds? Here is the code for placing the Myspace background image in the top right of the browser window.

<style type=”text/css”>

body {
background-color: FFFFF;
background-image:url(http://URL TO IMAGE);
background-position: top right;
background-repeat: no-repeat;
}
</style>

Remember that without special code the contents in the Myspace layout tables will cover the Myspace background image on the left when the browser window is made smaller.

• 0 Comments

Looking to change your Myspace backrounds? Here is the code for placing the Myspace background image in the center of the browser window. In order to make the image visible the backgrounds of all the tables in the Myspace layout need to be made transparent. This process will be explained in the Myspace layout tutorials.

<style type=”text/css”>
body {
background-color: FFFFF;
background-image:url(http://URL OF IMAGE);
background-position: center;
background-repeat: no-repeat;
}
</style>

One thing to note is I used only the vertical background-position option and let the default horizontal position of center do its own thing.

As you can see this is not an optimal position as the Myspace layout tables content will obscure the top image. In an advanced tutorial I will show you how this position combined with tiling can create interesting Myspace background image effects, like a drop shadow on the Myspace layout table edge.

• 1 Comment

Looking to change your Myspace backrounds? Here is the code for placing the Myspace background image in the right center of the browser window.

<style type=”text/css”>

body {
background-color: FFFFF;
background-image:url(http://URL TO IMAGE);
background-position: right;
background-repeat: no-repeat;
}
</style>

Remember that without special code the contents in the Myspace layout tables will cover the Myspace background image on the right when the browser window is made smaller.

• 0 Comments

Looking to change your Myspace backrounds? Here is the code for placing the Myspace background image in the bottom left of the browser window.

<style type=”text/css”>

body {
background-color: FFFFF;
background-image:url(http://URL TO IMAGE);
background-position: bottom left;
background-repeat: no-repeat;
}
</style>

One thing to note with bottom positioned images is if the browser window is small, or if you have a lot of content and the Myspace layout tables stretch down a long way, the image will not be initially visible.

Remember that without special code the contents in the Myspace layout tables will cover the Myspace background image on the left when the browser window is made smaller.

• 0 Comments

Here is the code for placing the Myspace background image in the bottom center of the browser window.

<style type=”text/css”>

body {
background-color: FFFFF;
background-image:url(http://URL TO IMAGE);
background-position: bottom;
background-repeat: no-repeat;
}
</style>

One thing to note with bottom positioned images is if the browser window is small, or if you have a lot of content and the Myspace layout tables stretch down a long way, the image will not be initially visible.

• 1 Comment

Here is the code for placing the Myspace background image in the bottom right of the browser window.

<style type=”text/css”>

body {
background-color: FFFFF;
background-image:url(http://URL TO IMAGE);
background-position: bottom right;
background-repeat: no-repeat;
}
</style>

One thing to note with bottom positioned images is if the browser window is small, or if you have a lot of content and the Myspace layout tables stretch down a long way, the image will not be initially visible.

Remember that without special code the contents in the Myspace layout tables will cover the Myspace background image on the right when the browser window is made smaller.

• 0 Comments

One thing to realize about the Myspace background, and any background on the web, is the canvas is infinite. It is the browser window that determines the “size” of a Myspace background. In real world terms you can think of the browser as a window in your house and the Myspace background as the sky. The sky is infinite, but you only see the part exposed by your window. The bigger the window, the more sky you see.

On thing that is different about the Myspace background image and the sky, though, is the image itself is not infinite. What happens is the Myspace background image, by default, “tiles”, endlessly, in all directions. This is an important fact to remember when choosing or creating a background image. Your window will probably be different than everyone elses window. If someone elses window is smaller they will only see part of the beautiful background you design. If the window is bigger the background will repeat and, if not designed properly, cause ugly seams.

There are things you can do to make your background look the same, or very close to the same, in all windows. The two main strategies are to create images that will tile seamlessly or change the default behaviour of the Myspace background image so it stays where you want it to. I cover both of these techniques in the “Myspace Tutorials: Myspace Backgrounds” category.

• 0 Comments