myspace 2.0 Customize Blurbs Section

Explanation of Blurb Table Location and Structure

Please refer to the following myspace page to see how this table is structured.
This is a real myspace page, with style code added to show the parent relationships, laying, classes, and other attributes which can be used to manipulate the blurbs div.
Regular MySpace Page Showing Structure, Layout, Classes
The link will try to open into a new window. This allows you to view the key on this page, while viewing the above myspace page, at the same time (in different windows).

Key to the above page:

div.blurbsModule

a (link) no class assigned

span no class assigned

a (link) has unknown class or id

div no class assigned

div has unknown class

div has unknown id

div.moduleTop

div.moduleMid

div.ModuleMid1

div.moduleMid2

div.moduleBody

div.moduleBodyEnd

div.moduleBottom

div.blurbAboutMe

div.blurbLikeToMeet

h4

h2

h3

Using the above key (along with the myspace page the key is applied to) I can then easily figure out the needed code, to customize the blurbs section.

Remove Blurb Header and the space it occupies

{! hide Blurbs header !}
{! code by Eileen; terms of use: xiii.us/tou !}
div.blurbsModule h3 {display:none;}

Remove About Me and To Meet Headers and the space they occupy

{! hide About Me and Meet header !}
{! code by Eileen; terms of use: xiii.us/tou !}
div.blurbsModule div.moduleBody h4 {display:none;}

If you want to remove ONLY the About Me header and keep the To Meet Header, use the below code instead.

{! hide About Me header !}
{! code by Eileen; terms of use: xiii.us/tou !}
div.blurbsModule div.moduleBody div.blurbAboutMe h4 {display:none;}

If you want to remove ONLY the To Meet header, and keep the About Me header, use the below code:

{! hide About Me header !}
{! code by Eileen; terms of use: xiii.us/tou !}
div.blurbsModule div.moduleBody div.blurbLikeToMeet h4 {display:none;}

Header Banner for Blurbs Section
If I want to place a header banner, in the blurbs, above the blurbs title, I can do this by applying a background image to the div.moduleTop within the blurbs section.

{! apply a top banner to blurbs module !}
div.blurbsModule div.moduleTop {
background-image:url(YOUR-URL-HERE);
background-position:center center;
background-repeat:no-repeat;
height:60px;
width:400px;}

Replace the 60px with the height of your image, and the 400px with the width of your image.

The above, combined with the code for hiding the existing headers, will leave you with a custom blurbs header, and no other headers.

Or you can replace the Blurbs header with a Custom Image:

{! Custom Image as Blurbs header !}
{! code by Eileen; terms of use: xiii.us/tou !}
div.blurbsModule h3 {
background-image:url(YOUR-URL-HERE);
background-position:center top;
background-repeat:no-repeat;
height:60px;
width:400px;}
div.blurbsModule h3 span {display:none;}
}

I will add more stuff here later, as I come across specific questions, related to customizing the stuff in this space