myspace band bio style color hide custom content above

myspace Band Artist Page, Bio Section, Style, Hide, Create Custom Content above or Below

Hide Bio Header (example:1)
Hide Bio Header(example:2)
Hide Bio Section
Hide Bio (example:2)
Style Bio (color, font, borders)
Classify To Style without Effecting Other Page Elements
Create Custom Content Above Bio

DISCUSSION
To view a diagram that shows how this section is structured, and how the structure fits into the page, refer to the following example myspace page:
Test Page Showing Layout, Structure, Classes of Band MySpace Page
There is a key to the right of the page.

(When classes were assigned, this section did not get one. Therefore it is often necessary, that we first apply style to the desired element, then apply additional style to reverse the effect on other elements.)

I can address the Bio table like this:
table table td.text table
However, this will also address several other tables, such as the the shows, friends, comments.
Hide Bio Header (example:1)
If I want to hide only the Bio Header, and NOT effect the shows, friends or comments, I use the following: (You can place this in your Bio Section)

<i class="i">
<a href="http://xiii.us/ms/band-bio">Band Hide Bio Header Code by Eileen</a>
</i>
<style>
.i {display:none;}
{!-eliminate bio header!-}
table table td.text table td.text {display:none;}
{!-recover in shows and friends-!}
table table td.text div table td.text,
table table td.text table.friendSpace td.text {display:inline;}

{!-eliminate the orange line that shows up in IE.  
This WILL mess up background coloring used in shows, friends and comments !}
table table td.text table {background-color:transparent;}
</style>

Notice I had to recover stuff in the shows and FriendSpace.
(If you find you have trouble with display:none and recovery via display:inline, change to visibility:hidden, then remove the extra space by moving the inner bio table up. I have seen some strange behavior related to modifying display modes.
I do NOT recommend using display:block with a td element.
Hide Bio Header(example:2)
You can instead use this to hide the bio header:

<i class="i">
<a href="http://xiii.us/ms/band-bio">Band Hide Bio Header Code by Eileen</a>
</i>
<style>
.i {display:none;}
{!-eliminate bio header!-}
table table td.text table td.text {visibility:hidden;}
{!-recover in shows and friends-!}
table table td.text div table td.text,
table table td.text table.friendSpace td.text {visibility:visible}

{! move up inner table of Bio !}
table table td.text table table {position:relative; top:-24px; margin-bottom:-24px;}

{! undo effect on other tables !}
table table td.text div table table,
table table.friendsComments td.text table table,
table table td.text table.friendSpace table {top:0px; margin-bottom:0px;}
</style>

That one required a lot more unDo.
Hide Bio Section
If I want to hide the Bio space, and NOT hide the shows, friends, or comments, I use the following code. You may want to alter the 100px to another value.
The larger this value, the more the friendSpace will move up.
Place the code in the Bio area

<i class="i">
<a href="http://xiii.us/ms/band-bio">Band Hide Bio Code by Eileen</a>
</i>
<style>
.i {display:none;}
table table td.text table {visibility:hidden;}

table table td.text div table,
table table td.text table.friendSpace,
table table td.text table.friendSpace td.text table,
table table.friendsComments td.text table {visibility:visible;}

{The above does leave space, 
  I could have instead done display:none but that messes up formatting of shows
  So now I eliminate the space by moving up the friendSpace }

table.friendSpace {position:relative; top:-100px; margin-bottom:-50px;}
</style>

Hide Bio (example:2)If you do NOT have shows, or want to go to the trouble to get all the alignment right after rendering the display:none followed by display:block or inline; the below code may work better for you.

<i class="i">
<a href="http://xiii.us/ms/band-bio">Band Hide Bio Code by Eileen</a>
</i>
<style>
.i {display:none;}
table table td.text table {display:none}

table table td.text div table,
table table td.text table.friendSpace,
table table td.text table.friendSpace td.text table,
table table.friendsComments td.text table {display:block;}

{! you may still want to move the friendSpace up, to accomodate the carriage return space !}
table.friendSpace {position:relative; top:-20px; margin-bottom:-20px;}

</style>

Style Bio (color, font, borders)
You can style this space with the below code block. I have used different colors and font sizes, which you can change.
If I have Yellow, and you want that area Green, then change yellow to green.

Code to obtain the above style:

<i class="i">
<a href="http://xiii.us/ms/band-bio">Band Bio Style Color Code by Eileen</a>
</i>
<style>
.i {display:none;}
table table td.text table {background-color:yellow !important}
table table td.text table td {background-color:transparent}
table table td.text table {border:4px solid; border-color:maroon;}
table table td.text table table {border:none;}
table table td.text table td {color:green; font-size:13px; font-family:comic sans ms;}
{! style header text !}
table table td.text table td.text {border:2px solid; border-color:green; background-color:lightgreen }
table table td.text table td.text span.orangeText15 {color:blue !important; font-size:16px !important; }
</style>

The above code DOES EFFECT other sections, because the bio does NOT have its own class.

To make the above style changes withOUT effecting other page elements, You can either style the other sections to override this, or you can add your own Classification to this space.

Classify To Style without Effecting Other Page Elements
To add your own classification, you do need to re-create the Bio Header.
It is just a header, very easy to re-create, and it allows you to style this space without effecting other sections on the page.

The below code block adds Classification and style. Notice that we can add the same style, and NOT effect the rest of the page:

<i class="i">
<a href="http://xiii.us/ms/band-bio">Band Hide Bio Header Code by Eileen</a>
</i>

<style>
.i {display:none;}
{!-eliminate bio header!-}
table table td.text table td.text {display:none  }

{!-recover in shows and friends-!}
table table td.text div table td.text,
table table td.text table.friendSpace td.text {display:inline; }

{!-move up our bio section !}
table.myBio {position:relative; top:-24px;}

{! color bio background !}
table.myBio {background-color:yellow; border:4px solid; border-color:maroon;}

table.myBio td {font-family:comic sans ms;}

table.myBio td.myBioHead {color:blue; background-color:lightgreen; font-size:16px; font-weight:bold; border: 2px solid; border-color:green}
table.myBioI td {color:green; font-family:comic sans ms; font-size:13px;}

table.myBio {border-collapse:collapse;}

</style>

</td></tr></table></td></tr></table>
<span class="off">Re-Open Bio Table give it our own Class </span>
<table class="myBio" >
<tr>
<td class="myBioHead" style="width:435px;" >  
About Us
</td></tr>
<tr>
<td>
<table class="myBioI"><tr>
<td  >
<span class="off">YOUR Bio Content goes Below</span>

Data in Bio 

<span class="off">END Bio Content </span>

Create Custom Content Above Bio

<i class="i">
<a href="http://xiii.us/ms/band-bio">
Band Custom Div above Bio Code by Eileen</a>
</i>

<style>
.i {display:none;}
{!-eliminate bio header!-}
table table td.text table td.text {display:none;}
{!-recover in shows and friends-!}
table table td.text div table td.text,
table table td.text table.friendSpace td.text {display:inline;}
{! move up our custom section.  You may change px value !}
div.myDivR {position:relative; top:-20px; margin-bottom:-20px; }
{! you can apply style to the custom div !}
div.myDivR {background-color:white; border:2px solid; border-color:darkgreen;}
</style>

</td></tr></table>
</td></tr></table>
<span class="off">Create Custom Section</span>
<div class="myDivR" style="width:435px;">
<i class=i>---START CUSTOM SECTION--</i>

My Own Content Goes Here.  
I can add a table, object, image, or any other content that myspace accepts.

<i class=i>---END CUSTOM SECTION--</i>
</div>

<span class="off">END Create Custom Section</span>
<br>
<span class="off">Re-Open Bio Table give it our own Class </span>
<table class="myBio" style="width:435px;">
<tr>
<i class=i>style stuff below comes from default code.</i>
<td class="myBioHead" valign="center" align="left" width="435" bgcolor="ffcc99" height="17">  &nbsp;&nbsp;<span class="orangetext15"> 

About Us
</span>  </td></tr>
<tr>
<td>
<table class="myBioI"><tr>
<td  >
<span class="off">YOUR Bio Content goes Below</span>

Data in Bio

<span class="off">END Bio Content </span>

[note: a thin orange line may show up, which is residue background from the bio table. It will show in IE (not FireFox). You can fix this by either removing the background color from the main bio table OR by adding a background color to your custom section. Personally, I render all default background color and border gone before I start customizing.).