MySpace Band Music Player Color Skin Move

Band Music Player Moving, Removing, Hiding, Coloring, adding an image Skin

This article was updated 26 September 2008 due to myspace code changes

27 September: MySpace changed their code again last night, breaking some of my changes. I should have expected this change, but still hesitate to update this content further until MySpace decides if they want the player one div, or two divs deep. Personally I liked 2 divs deep.

Removing the Band Music Player

Addressing the Band Music Player
Moving the Player
Making your Player show On Top, instead of Under, another Element, Problems with player layering
Allowing your background to show through your player

The page the below link goes to has not yet been updated. Maybe this evening.
Tool for Generating Code To apply Color or Image Skin to the Band Player

Addressing the Band Music Player
To get a better idea, of what I am describing, you may want to view the following myspace page. I have added styling to the page to show the page elements, classes, and layering.
www.myspace.com/music3test

Looking at the above page, one can see that the music player is in the right column.
The right column is in class text.
The player is at this level:
table td table td.text div object



If you add any objects, you need to give them their own class, so that any code to style/move the music player, can be coded so as to NOT effect other objects.


removing the Band Music Player
do NOT set the player to autoplay, in some browsers it will play, even if hidden.
This code will remove the player and the space it occupied, and move your shows (or blogs if you have no shows) up a slight amount to account for the carriage returns left behind when the player was removed.

This code can go at the very top of the Bio.

<i class=i>START CODE to Hide Band Music Player. 
<a  href="xiii.us/eGen/mpSkin.php">
Music Player Skins</a>
<a  href="http://xiii.us/eGen/mpSkin.php">
Music Player Skins</a>
<a  href="views-under-construction.blogspot.com/2006/01/myspace-band-music-player-color-skin.html">
My Space band music player Code by Eileen</a>
</i>
<style>
table table td.text div object, .i {display:none}
table table td.text div, table table td.text div.i div {height:auto !important;}
table table td.text div {margin-top:-13px;}
table table td.text table div {margin-top:0px;}
</style>
<i class=i>END code to Hide Music Player</i>

Moving the Player
Absolute Positioning, measuring from Top Center:

This is the method MOST div overlay strategies require.
(If using my div overlay strategy this is NOT the best positioning method)

This may also work well, without a div overlay, if the location you are placing the player is NOT very far from the top of the page.

This code can go at the top of the Bio:

<i class=i>START CODE to Move Band Music Player. 
<a  href="xiii.us/eGen/mpSkin.php">
Music Player Skins</a>
<a  href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy9lR2VuL21wU2tpbi5waHA=">
Music Player Skins</a>
<a  href="views-under-construction.blogspot.com/2006/01/myspace-band-music-player-color-skin.html">
My Space band music player Code by Eileen</a>

The below code centers the Player 200px from the top.  You can change the top and left-margin values.
</i>

<style>
.i {display:none;}
table table td.text div object {position:absolute; top:200px; left:50%; margin-left:-225px;  z-index:9}
table table td.text div object object {position:static; margin-right:0px; margin-left:0px;}
table table td.text div, table table td.text div.i div {height:auto !important;}
table table td.text div {margin-top:-13px;}
table table td.text table div {margin-top:0px;}
</style>

<i class=i>END Code to Move Band Player</i>

Absolute Positioning, measuring from Top Left:
Use this strategy ONLY IF your player is logically inside a parent container, that you are positioning relative to.
IF you used MY Div Overlay Strategy, You Want to Use This Method

<a  href="views-under-construction.blogspot.com/2006/01/myspace-band-music-player-color-skin.html">
My Space band music player Code by Eileen</a>

The below code places  the Player 100px from the Top and 20px from the Left of the closest Parent Div that has a position command.  
You can change the top and left px values.
</i>

<style>
.i {display:none;}
table table td.text div object {position:absolute; top:100px; left:20px;  z-index:9}
table table td.text div object object {position:static;}
table table td.text div, table table td.text div.i div {height:auto !important;}
table table td.text div {margin-top:-13px;}
table table td.text table div {margin-top:0px;}
</style>

<i class=i>END Code to Move Band Player</i>

Layering the Player, Solve problems with player sitting under, instead of on top of, another Div.
A change to the myspace default/core code, which occurred in either late May or early June 08, some people discovered that their band music player, was no longer showing.
On the pages I looked at, the player was hidden under another element (usually a custom div).
The solution is z-index (The same myspace code change which caused the problem also allowed the player to utilize z-index).

<style>
.i {display:none;}
table table object {position:relative; 
top:0px;
z-index:9 !important;}
</style>

The above code MAY effect other objects on your page. The position command is needed, in most cases. You can change it to position:absolute, and change the top value, add left and margin values, as needed.
You may have to adjust this on other objects as well.

Allowing your background to show through your player
Place this code at the very top of your bio:

<a class=i href="http://xiii.us/ms/band-music-player">
MySpace Band Music Player Style Skin Tutorial</a>
<style>
table table td.text div object {filter:alpha(opacity = 40);}
table table td.text div object object {opacity:0.4;}
.i {display:none;}
</style>

Prevent Effects on Other Objects When moving or styling Band Player

If you are adding other objects to your page, and they will fall at the same level as the player, you MUST give them their own class, or they will be effected by the band player code.

i.e.

<div class="myObject1">
Your object code here.
If you are doing a cut and paste of code, 
from another site, paste that code here.
</div>

<style>
div.myObject1 {position:static; 
background-color:transparent;
background-image:none;
-moz-opacity:1;
filter:none;}
</style>