interests interestsAnddetails table hide custom customize myspace

MySpace Interests Table (interestsAndDetails) Hide, customize, custom

Remove Interest Table Row Headers
Remove Interest Table Row Headers
Custom Div Above Interests
Custom Div Above Interests, with Interests Hidden

Please refer to the following myspace page to see how the interests table is structured, and how its structure fits in with the complete page structure.
The below link goes to a real myspace page, with style code added to show the parent relationships, laying, classes, and other attributes which can be used to manipulate this table.
Regular MySpace Page Showing Structure, Layout, Classes
The above page is best viewed in FireFox or Opera. IE does not recognize the border-spacing attribute, making it more difficult to see the layering. You can download FireFox using the link in my SideBar
By referring to the diagrams in the above link I can easily figure out the needed codes to style this space.

The interests table is at this level:
table table table.interestsAndDetails
It can also be addressed in many other ways, some of which are:
.interestsAndDetails
td td table.interestsAndDetails
table td table td table.interestsAndDetails

I prefer this:
table.interestsAndDetails

To change the coloring, I first recommend eliminating all of the existing color, then assign the color you want at the table.interestsAndDetails level (myspace assigned all of their color at lower levels).
You can put this code wherever you keep your style blocks. If you do not have a specific place for this, you can put this code at the top of the about me:

<style>
table.interestsAndDetails td, table.interestsAndDetails table {background-color:transparent !important;}
table.interestsAndDetails {background-color:pink}
{! if you want to get rid of the blue line under the header !}
table.interestsAndDetails td {border:0px !important;}
{! or instead if you just want the border a different color !}
table.interestsAndDetails td.tdborder {border:2px solid !important; border-color:magenta !important;}
</style>

Of course you can change pink to the color you want your own interests table.
If you now want a border around the outside of the table, add this to the above style block
table.interestsAndDetails {border:2px solid; border-color:magenta;}
If you want a border to separate the header from the rest



If I want to eliminate the entire table, and effect nothing else in the profile, I can use this:

<style>
table.interestsAndDetails {display:none}
</style>

This will leave some space due to the carriage returns above and below the table. These can be eliminated by either resizing the carriage return (if you want to effect the space between all tables), using a margin bottom on the table just above the interests table, using a negative margin-top on the table just below the interests table, or relative movement up, of the table just below.

In the below I use a margin-top on the table just under the interests table. The reason I choose this, is because the music player is above. The music player can NOT be addressed without effecting other objects on the page.

<style>
table.interestsAndDetails {display:none}
table.userProfileDetail {margin-top:-12px}
</style>

If you have removed your details table, replace it, in the above code, with the table which currently resides just below the location you removed your interests table from.

Styling the text in the interests section
If you only want to change all the text, to the same color (keeping the default font sizes):

<style>
{! color ALL text in interests section !}
table.interestsAndDetails td * {color:hotpink !important}
</style>

For more diverse styling:
The below code block styles all of the text in this section. Before each line there is a comment indicating what is effected by the line of code.
You can replace the fonts and colors with the style you want.

<style>
{! style main interests heading !}
table.interestsAndDetails td span.whitetext12 {color:hotpink !important; font-size:22px !important; font-family:impact; background-color:lightgreen}
{! style row headers !}
table.interestsAndDetails td span.lightbluetext8 {color:darkblue !important; font-size:16px !important; font-family:Arial; background-color:yellow}
{! style the rest of the text !}
table.interestsAndDetails td, table.interestsAndDetails td a {color:green !important; font-size:12px !important; font-family:Comic Sans MS; background-color:lightblue;}
</style>

For a list of available fonts go Here
For a list of additional font attributes you can use in the style line go Here
Remove Interest Table Row Headers

<style>
table.interestsAndDetails table td:first-child{display:none}
{! IE6 the best we can do is to remove text and minimize row!}
table.interestsAndDetails table span.lightbluetext8 {display:none}
table.interestsAndDetails table td {width:auto !important}
</style>

Eliminate some Interests Table Rows
IF you do not put data into a specific row, the row should not show up. However, if you have code in it, it will show up.
And sometimes, it just shows up.
To eliminate a single row, it takes two lines of code.
Place this code at the BOTTOM of the row just above the row you want to eliminate.

<table class="off"><tr><td>

Place this in the row you wish to eliminate:

</td></tr></table>

(There is a way to eliminate the "General" row, but because it takes a chunk of code, and a new class, and is best accomplished by just not putting data into that space, I will leave that out for now.

Custom Headers
If you want ALL Custom Headers, I suggest you make a complete custom Interests Table.
To learn how to do that go Here: Creating a Custom Interests Table
If you want SOME custom headers:
It is easiest to change the row headings which are BELOW the General, so I will cover those first.
To change any single heading, without effecting the others, place this code in the section ABOVE the heading you wish to change:

<table class="off"><tr><td>

AND Place the below block at the TOP of the Row you are changing:

</td></tr></table></tr></td>
<tr><td><span class="lightbluetext8">CUSTOM HEADING</span></td>
<td width="175" bgcolor="d5e8fb" style="WORD-WRAP: break-word">
Your data for this section goes here

Changing the Heading for the General Interests Column
If you want to change the heading for the "General" interests column, it gets more complicated. Because there is no data entry point, BEFORE this title is created, we have to enter our code AFTER the creation of this title.
Therefore we have to create a new class, so that we can hide the old "Genreal" heading without hiding our new heading.

Place this block at the TOP of the General Interests Row:

<span class="off">!-START code for custom General Interests Row header-!</span>
<style>
table.interestsAndDetails table {display:none;}
table.interestsAndDetails table.myI2 {display:block;}
</style>
</td></tr></table>
<table class="myI2" bordercolor="000000" cellspacing="3" cellpadding="3" width="300" align="center" bgcolor="ffffff" border="0">
<tr><td valign="top" align="left" width="100" bgcolor="b1d0f0" NOWRAP><span class="lightbluetext8">

Your CUSTOM HEADING 

</span></td>
<td width="175" bgcolor="d5e8fb" style="WORD-WRAP: break-word">
<span class="off">!-END code for custom General Interests Row header-!</span>
Data to go with your Custom Heading goes here

If you want to change to main heading (the heading that says "Your-Name's Interests), you also have to re-create the "General" heading. This also requires that you assign a new class to the interests table (the default class interestsAndDetails will be used to hide the residue text from the old header).
Therefore, if you have used my style block above, you must replace table.interestsAndDetails with table.myInterests

Place this code at the top of the General Interests Box:

<span class="off">!-START code for custom General Interests header-!</span>
<style>
table.interestsAndDetails {display:none;}
table.myInterests {display:block;}
</style>

</td></tr></table></td></tr></table>
<table bordercolor="6699cc" cellspacing="0" cellpadding="0" width="300" bgcolor="ffffff" border="1" class="myInterests">
<tr><td class="text tdborder" valign="middle" align="left" width="300" bgcolor="6699cc" wrap="" style="WORD-WRAP:break-word">&nbsp;&nbsp;&nbsp;
<span class="whitetext12">

YOUR CUSTOM TABLE HEADER

</span></td></tr>
<tr valign="top">
<td class="tdborder">
<table class="myI2" bordercolor="000000" cellspacing="3" cellpadding="3" width="300" align="center" bgcolor="ffffff" border="0">
<tr><td valign="top" align="left" width="100" bgcolor="b1d0f0" NOWRAP><span class="lightbluetext8">

YOUR CUSTOM ROW HEADING

</span></td>
<td width="175" bgcolor="d5e8fb" style="WORD-WRAP: break-word">
<span class="off">!-END CODE FOR CUSTOM INTERESTS HEADER-!</span>

YOUR GENERAL INTERESTS HERE

Custom Div Above Interests
This code goes at the TOP of the General Interests Box:

<a class=i href="http:xiii.us/ms/interests">Custom Div above Interests Table</a>
<i class=i>!-Create Custom Content above Interests Table-!</i>
<i class=i>!-Close out default Interests Table-!</i>
</td></tr></table>
</td></tr></table>
<i class=i>--!Begin CUSTOM Div!--</i>
<div class="myDivL1" style="align:center; border:3px DarkBlue solid  background-color:lightblue;  width:300px">

YOUR DIV CONTENT HERE

</div>

<i class=i>!-ReOpen Interests Table, Create Headers-!</i>
<table class="myInterests1" bordercolor="6699cc" cellspacing="0" cellpadding="0" width="300" bgcolor="6699cc" border="1">
<tr>
<td valign="middle" align="left" width="300" bgcolor="6699cc" wrap="" style="WORD-WRAP:break-word">&nbsp;&nbsp;&nbsp;
<span class="whitetext12">MY INTERESTS</i>
</td>
</tr>
<tr valign="top">
<td>
<table class="myInterests2" bordercolor="000000" cellspacing="3" cellpadding="3" width="300" align="center"
            bgcolor="ffffff" border="0">
<tr>
<td valign="top" align="left" width="100" bgcolor="b1d0f0">
<span class="lightbluetext8">General </i>
<td width="175" bgcolor="d5e8fb" style="WORD-WRAP: break-word">
GENERAL INTEREST DATA
</td>
<span class="i">END Create Custom Content above Interests-!</span>

<style>
.i {display:none}
table.interestsAndDetails {display:none;}
div.myDivL1 {position:relative; top:-15px;}
</style>

Custom Div Above Interests, with Interests Hidden
Put this code at the very top of your General Interests Section:

<a class=i href="http://spiff-myspace.blogspot.com">
MySpace Code Tutorials by Eileen</a>
</td></tr></table>
</td></tr></table>
<div class="myDivI">
CUSTOM DIV CONTENT HERE
</div>
<table style="display:none"><tr><td>
<table><tr><td>
<style>
table.interestsAndDetails{display:none;}
.i {display:none}
</style>

Thank you for visiting; have a nice day


color interests table background
change color of interests table to blue
how do I change the color of the interest table
use to color myspace interests table