April Fools Ideas

April Fools MySpace Spoof Pages.

I created these a few years ago. Now I am upgrading the tutorial to work with myspace 2.0).

Code for myspace 2.0

Spoof page, to make the page look like the user has been deleted

Select "Customize Profile" from the Profile menu
Select "Change Layout"
Select the layout, that looks like this:



Next select
"Modules"

Hide all modules EXCEPT the blurbs.
We are going to use the blurbs for our content, we will hide the blurb headers, in a later step.

Notice that the top area (where your profile image, contact links, online, mood, status, headline reside) can not be hidden using the "Modules" function.

However, we can hide all of it, or elements within it using CSS.
[note: You may opt to not show some personal information such as age, last login. If you choose this the word "private" will show next to the header for that content. We will hide this later.]

Now drag the blurbs to the top (if they are not already there), placing them just below the top area.


Put the following code into the CSS area:

{! prepare for div overlay myspace 2.0 code by Eileen !}
{! terms of use http://xiii.us/tou !}
.i {display:none;}
{! Hide Basic Information Module !}
div.basicInfoModule {display:none;}

{! hide blurbs header !}
div.blurbsModule h3 {display:none;}

{! hide about me header !}
div.blurbAboutMe h4 {display:none;}

{! hide entire meet section !}
div.blurbLikeToMeet {display:none;}

{! hide Meet Header !}
div.blurbLikeToMeet h4 {display:none;} 

{! override default padding in blurbs module !}
div.blurbsModule {margin:0px; padding:0px}
div.blurbsModule div.moduleBody, div.blurbsModule div.moduleMid{padding:0px;} 

{! remove extra space caused by padding, margins, min-height settings !}
div.contentMid2 {padding:0px;}

{! set width of profile !}
div.wrap {width:800px;}

{! set style for div we are using as our container !}
div.myCoreDiv{width:800px;  background-color:white; text-align:center; height:400px;}
div.spacer {height:157px;}
div.myCoreDiv span.s1 {display:block; font-size:14px; color:#1D1f81; width:100%; text-align:center"} 

Put this code into your about me section:

<a class=i href="http://xiii.us/v/">
myspace 2.0 Div overlay code/tutorial by Eileen</a>
<div class="myCoreDiv">
<div class="spacer"></div>

<span class="s1">
Invalid Friend ID.
<br />
This user has either canceled their membership, or their account has been deleted.
</span>
</div>

To make the page look more realistic, you want to make a user name that looks like it belongs on the top menu.
My example page uses "other" as the display name.

If you want to make your page look like an Error Page (with a slightly altered message)
Follow the instructions above, except instead use the following code:

Put this into the css area:

{! prepare for div overlay myspace 2.0 code by Eileen !}
{! terms of use http://xiii.us/tou !}
.i {display:none;}
div.wrap {width:800px;}
{! Hide Basic Information Module !}
div.basicInfoModule {display:none;}

{! hide blurbs header !}
div.blurbsModule h3 {display:none;}

{! hide about me header !}
div.blurbAboutMe h4 {display:none;}

{! hide entire meet section !}
div.blurbLikeToMeet {display:none;}

{! hide Meet Header !}
div.blurbLikeToMeet h4 {display:none;} 

{! override default padding in blurbs module !}
div.blurbsModule {margin:0px; padding:0px}
div.blurbsModule div.moduleBody, div.blurbsModule div.moduleMid{padding:0px;} 

{! remove extra space caused by padding, margins, min-height settings !}
div.contentMid2 {padding:0px;}

{! set style for div we are using as our container !}
div.myCoreDiv{position:relative; width:800px;  background-color:white; text-align:center; height:400px;}

div.myCoreDiv span {display:block; color:#1D1f81; font-family:Arial, Helvetica, sans-serif; text-align:center; width:800px;}
div.myCoreDiv span.s1 {font-size:14px;  position:absolute; top:157px; left:0px;} 

div.myCoreDiv span.s2 { font-size:11px; position:absolute; bottom:0px; left:0px; } 

Put the following into your about me area:

<a class="i" href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy92Lw==">
myspace 2.0 Div overlay code/tutorial by Eileen</a>
<div class="myCoreDiv">
<div class="spacer"></div>

<span class="s1">
<strong>Sorry! an EXPECTED error has occurred.<br /><br />
This error has NOT been forwarded to MySpace's technical group.</strong>
</span>
<div class="spacerb"></div>
<span class="s2">
We here at myspace Understand your frustration with the poor engineering of our system. <br />We  really have to concentrate on the changes which will best increase our revenue.<br />Performance is not really that important.
</span>
</div>

While I recommend that you Upgrade to Myspace 2.0. Below is the older code I had for myspace 1.0


However, the below code may still work, for 1.0
For a while it did not work, myspace was not allowing me to close tables, I did not open. However, they later started allowing this again.


The first one makes your page look like an error page (with the text slightly altered.

The 2nd one makes it look like your user has been deleted.


Instructions:

STEP 1 (Very Important)
Cut and Past your current Code (style code you can leave data in place) to notepad, so you can easily restore it.

Step 2:
Paste the code block of choice in your About Me OR to Meet section.

Save, and you are done.

The block button uses Tom's friend Id, you may want to change it to your own.
The block is a required page element.

If you are using the "User Deleted" spoof page, to the effect can be enhanced by changing your user default image, to one that makes it look like you have been deleted.
This way your friends will see this image in their friend space and comments, in place of your usual profile image.

Here are some images you may use.


The band page (see the note on the bottom of this article)
Have Fun.

The 1st example spoof page looks like Spoof Error Page
The 2nd example spoof page looks like Page that looks Deleted

<i class="myCmt">! Spoof Page !
<a href="http://www.msplinks.com/MDFodHRwOi8vdmlld3MtdW5kZXItY29uc3RydWN0aW9uLmJsb2dzcG90LmNvbS8yMDA3LzAzL2FwcmlsLWZvb2xzLWlkZWFzXzI2Lmh0bWw=">myspace spoof error page code tutorial by Eileen</a>
</i>
<style>
.myCmt {display:none}
body {
margin-top: 20px;} 
div.navigationbar a:link, a:hover, a:visited {color:white;} 
{! removes most content and the space it occupied !}
div table div div select {position:absolute !important; top:-500px !important;}
table table table {display:none}
{! minimize the remaining main page content!}
table table img {display:none;}
table table td {line-height:0px; border:none; padding:0px; margin:0px;}
table table td {height:0px !important;}
{! remove above effect from top menu !}
table.navigationBar td {font-size:9px; line-height:12px; height:12px; margin:1px; padding:1px;}
form {display:none;}
{! music player USE BELOW LINE TO HIDE and NOT PLAY!}
table table object, table table embed {display:none}
</style>
<span class="myCmt">Close ALL open tables so that our div is not effected by the stuff we have removed 
</span>
</td></tr></table></td></tr></table>
</td></tr></table></td></tr></table>
<span class="myCmt">!!Create, size and style our div.!!   </span>
<center>
<div class="myDiv" style="width:800px; height:auto; background-color:white;">
<center>
<table align="center" height="auto" width="800"  border="0" >
<tr> <td valign="top" align="center">
<br><br><br><br>
<font  face="Arial, Helvetica, sans-serif" size="3">
<b>Sorry! an EXPECTED error has occurred.<br><br>
This error has NOT been forwarded to MySpace's technical group.</b>
<br><br><br><br><br><br><br><br><br><br><br><br>
<font size="1"><b>We here at myspace Understand your frustration with the poor engineering of our system. <br>We  really have to concentrate on the changes which will best increase our revenue.<br>Performance is not really that important. </b></font>
</td></tr></table>
</center>

</div>
</center>
<div class="navigationbar" style="background-color:003399;   
 position: absolute; visibility:visible; left:50%; top:0px; 
 margin-left: -400px; width: 800px; height: 20px">
<a href="http://www.myspace.com">MySpace.com</a> | 
<a href="http://www.myspace.com/Modules/Help/Pages/HelpCenter.aspx">Help</a> |
<a href="http://www.myspace.com/index.cfm?fuseaction=block.blockUser&userID=6221">block</a>
</div>
<span class="myCmt">!!Open same number of tables we closed.!! 
</span>
<table style="display:none"><tr><td>
<table><tr><td><table><tr><td><table><tr><td>

OR if you prefer for your page to look deleted:

<i class="myCmt">! Spoof Page !
<a href="http://www.msplinks.com/MDFodHRwOi8vdmlld3MtdW5kZXItY29uc3RydWN0aW9uLmJsb2dzcG90LmNvbS8yMDA3LzAzL2FwcmlsLWZvb2xzLWlkZWFzXzI2Lmh0bWw=">myspace spoof deleted error page code tutorial by Eileen</a>
</i>
<style>
div table div div select {position:absolute !important; top:-600px;}
.myCmt {display:none}
body {
margin-top: 20px;} 
.navigationbar a:link, a:hover, a:visited {color:white;} 
{! removes most content and the space it occupied !}
table table table {display:none}
{! minimize the remaining main page content!}
table table img {display:none;}
table table td {line-height:0px; border:none; padding:0px; margin:0px;}
table table td {height:0px !important;}
{! remove above effect from top menu !}
table.navigationBar td {font-size:9px; line-height:12px; height:12px; margin:1px; padding:1px;}

{! music player USE BELOW LINE TO HIDE and NOT PLAY!}
table table object, table table embed {display:none}
</style>
<span class="myCmt">Close ALL open tables so that our div is not effected by the stuff we have removed 
</span>
</td></tr></table></td></tr></table>
</td></tr></table></td></tr></table>
<span class="myCmt">!!Create, size and style our div.!!   </span>
<center>
<div class="myDiv" style="width:800px; height:auto; background-color:white;">
<center>
<table style="align:center; height:auto; width:800px; margin-bottom:200px; margin-top:80px;">
<tr> <td valign="top" align="center">
<br><br><br><br>
<font  color="1D1F81" >
<span style="font-size:14px; font-color:1D1f81">
<b>Invalid Friend ID.<br>This user has either cancelled their membership, or their account has been deleted.</b>
</span>
</td></tr></table>
</center>

</div>
</center>
<div class="navigationbar" style="background-color:003399;   
 position: absolute; visibility:visible; left:50%; top:0px; 
 margin-left: -400px; width: 800px; height: 20px">
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29t">MySpace.com</a> | 
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tL01vZHVsZXMvSGVscC9QYWdlcy9IZWxwQ2VudGVyLmFzcHg=">Help</a> |
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPWJsb2NrLmJsb2NrVXNlciZ1c2VySUQ9MTU2NjM4NDI1">block</a>
</div>
<span class="myCmt">!!Open same number of tables we closed.!! 
</span>
<table style="display:none"><tr><td>
<table><tr><td><table><tr><td><table><tr><td>

Thank you for visiting; have a nice day

codes ? Is not code plural already? Spoof your mySpace page to look like page has been removed

BAND (and other artist) Pages
Place the code block (using one of the above code blocks) in the band members section.
Then ADD The Below Additional Code block:

<style>
div table img {display:none;}
table.navigationBar {position:relative; top:28px; margin-top:-30px;}
</style>

Manipulating the Right Side of the Myspace Profile

If you have noticed that your "view friends ..." link is hidden, and this occurred recently [Sep 2007] it may be the result of a myspace code change.
The "view friend ... " link was moved inside a div.
This code should recover it:

<style>
table.friendSpace table div {display:block;}
table.friendSpace table div * {display:inline;}
</style>

Initially it the class span.redlink was removed, but this was later added back.


Here are some of the search queries, this post was initially designed to address:
(The wording comes directly from the information provided by google).

-- Hide right side myspace

<style type="text/css">
td.text table {visibility:hidden};
</style> 

--Hide right side and remove the space it occupied

<style type="text/css">
td.text table {display:none};
</style> 

-- remove blog area myspace
-- how do i hide my blog area only on myspace

<style>
table.latestBlogEntry {display:none;}
</style>

-- hide white space myspace
-- blank space after removing blog & extended network
-- how do you remove the white space where your extended network box used to be
[This is moot if the blogs and extended network are hidden using the above code. No more white space problem. If you have a whitespace problem, keep reading, and use the code I have here instead of the code you now have.]

-- hide extended network and move up my about me
-- hide extended network and move blogs up

<style>
table.extendedNetwork {display:none;}
</style>

-- remove blog and extended network no white space
-- hide extended network and blogs and move up my about me

<style>
{! hide extendedNetwork and blogs !}
table.extendedNetwork {display:none;}
table.latestBlogEntry {display:none;}
{! due to carriage returns we need to move the blurbs up slightly !}
{! first I control the size of the carriage return so the distance is the same on different browsers !}
br {line-height:12px;}
table.blurbs {position:relative; top:-24px; margin-bottom:-24px;}
</style>

-- Picture in Extended Network:

<style>
{! put picture in extended network !}
{! first hide the default text !}
span.blacktext12{display:none;}
{! put a background in the table !}
table.extendedNetwork {background-image:url("URL-OF-YOUR-PICTURE");
background-position: center center;
background-repeat:no-repeat;
height:150px; width:300px; display:block }
{! change above px value to height of your picture !}
</style>

-- Picture in Blog Area:

<style>
{! Put a picture as the background to the blog table !}
table.latestBlogEntry{background-image:url("URL-OF-PICTURE");
background-position: center center;
background-repeat:no-repeat;
height:348px; display:block }
{! change above px value to height of your picture !}
{! minimize and hide the text which is in the blog area !}
table.latestBlogEntry td, table.latestBlogEntry br {line-height:0px !important; font-size:0px !important; visibility:hidden }
</style>

If you want to put Text or Links or Video (or other swf content) into your extended network area, I recommend reading This
It discusses some different strategies which can be used to obtain the effect.

Friends And Comments
These solutions work with or without a calendar. You choose to (or not to) display the calendar via the calendar functionality, no customization is needed.

--Hide Both Friends and Comments

<style>
table.friendSpace, table.friendsComments {display:none;}
</style>

--Hiding Friends without Hiding Comments

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

You can provide a Link to View All Friends by placing this code at the end of your "Who I'd Like To Meet" Section:

<a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=6221">View All Friends</a>

Replace Tom's Friend ID (6221) with your own. You can replace the View All Friends with any text you want also.
--OR Creating A Custom Top Menu
--OR If you want the link to have its own "box" (or table) you can do something like this, at the end of the about me area

<span class="off">!--Create Custom Table Under Meet Table With a Custom Link --!</span>
</td></tr></table>
</td></tr></table>
<br>
<table style="border:1px green solid; width:435px; "><tr><td>
<a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=6221">Click Here to View My Friends</a>
</td></tr></table>
<table style="display:none"><tr><td>
<table><tr><td>
<span class="off">!^^END CUSTOM BLOCK ^^!</span>

(Change Tom's friend id, 6221, to your own. Change color and border as desired. For no border change 1px to 0px.)

--Hiding Comments without Hiding Friends

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

You can provide a Link to View/Add Comments by placing this code at the end of your "who I'd Like To Meet" Section:

<a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=6221">View Comments</a>

And/OR a link to Add a Comment:

<a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=6221">Add Comment</a>

If you want to keep the default header/link stuff, that comes with the friends and/or comments; it is possible, however tedious. This means that instead of just using display:none on the whole area, I have to hide at a level lower than the level the links reside. This takes MORE code than just creating our own header and link. But if you want to tap into the automatic friend number calculation, this is of value. (Personally, I think a Fake number is Better anyway).
Notice how much code this takes, compared to the above solutions.

--hide friends, leave .. Has .. Friends and Link to View All Friends
[It is code like this that causes me to consider writing a generator every so often]

<style>
{! <a href="http://www.msplinks.com/MDFodHRwOi8vdmlld3MtdW5kZXItY29uc3RydWN0aW9uLmJsb2dzcG90LmNvbQ==">
Hide friendSpace keep view Link and Has Friends </a> !}
{! Get rid of only Friends Pictures and Names and Space they occupied !}
table.friendSpace table table {display:none}

{! ditch the Friendspace Header and the space it took up !}
table.friendSpace .orangetext15 {display:none}
table.friendSpace table, table.friendSpace table td {height:auto !important; line-height:0px; border:none; padding:0px; margin:0px;}

{! Position below link as desired !}
table.friendSpace table div {position:relative; top:0px; line-height:15px; float:left; }

{! Use below line ONLY if you DO NOT want the .. has .. Friends thing !}
table.friendSpace span.btext {display:none;}
{! Use below line ONLY IF you WANT to show .. has .. Friends !}
table.friendSpace span.btext {display:inline; line-height:15px;}

{! get rid of orange line !}
table.friendSpace table {background-color:transparent !important;}
</style>

Hide Everything in Friend Space EXCEPT the links to View Friends

<style>
{! <a href="http://www.msplinks.com/MDFodHRwOi8vdmlld3MtdW5kZXItY29uc3RydWN0aW9uLmJsb2dzcG90LmNvbQ==">
Hide friendSpace keep view All Friends Links </a> !}
{! Get rid of only Friends Pictures and Names and Space they occupied !}
table.friendSpace table table {display:none}

{! ditch the Friendspace Header and the space it took up !}
table.friendSpace .orangetext15 {display:none}
table.friendSpace table, table.friendSpace table td {height:auto !important; line-height:0px; border:none; padding:0px; margin:0px;}

{! Position below link as desired !}
table.friendSpace table div {position:relative; top:-20px; line-height:15px; float:left; margin-bottom:-20px; }

{! Hide the .. has .. Friends thing !}
table.friendSpace span.btext {display:none;}

{! get rid of orange line !}
table.friendSpace table {background-color:transparent !important;}
</style>

--Hide view friends all|online|mutual

<style>
{! Hide view friends !}
table.friendSpace table div {display:none;}
</style>

--Hide Comments, leave view all and add comment links
This line:"Showing X of Y Comments (view all/Add Comment)"
Is addressed like this:
table.friendsComments table td b
Within that line, the actual view/add are defined as links.
Therefore, I can ditch the "Showing X of Y Comments" and keep the View Add (without the /).

<style>
{! Get rid of inner comment table stuff !}
table.friendsComments table table {display:none}

{! render the rest of it not visible !}
table.friendsComments table {visibility:hidden;}

{! ditch the friendsComments Header and the space it took up !}
table.friendsComments span.orangetext15 {display:none}
table.friendsComments table, table.friendsComments table td {height:auto !important; line-height:0px; border:none; padding:0px; margin:0px;}

{!! USE ONE OF THE BELOW TWO BLOCKS !!}

{! 1:keep the view all  and  Add Comment links.  Postion them left !}
table.friendsComments table td b a {line-height:15px; visibility:visible; position:relative; float:left; padding-right:20px; }

{! 2:Instead I may just want to keep an Add Comment Link !}
table.friendsComments table td a {line-height:15px; visibility:visible; position:relative; float:left;  }
table.friendsComments table td b a {display:none;}

{! ditch a little whitespace !}
table.friendsComments {position:relative !important; top:-20px !important; margin-bottom:-20px;}
</style>

To remove the whitespace caused by the Carriage Returns between the Tables

<style>
{!remove carriage returns between main tables on right side!}
table table td.text br {display:none;}
{!restore carriage returns at other effected levels!}
table table td.text table br {display:inline;}
table table table td.text br {display:inline;}
</style>

If you want to keep only 1 (the first One) Comment, or keep only the first few comments see this article:
Show only one (1st) Comment

Thank you for Visiting; Have a Nice Day :-)


-hiding right side of myspace, how?
-when manipulating the right side of myspace.
-when hiding the right column code on myspace.

MySpace Page Customizing Article Contents



MySpace changes, problems, updates, code fixes related to recent changes



customized online now icon code that works


Page Layout, Layering, Classes


MySpace Page Layout Showing Divs, Tables, Cells, Classes (Regular and Band Page)



MySpace Blog Page Customize Style


DIV OVERLAYs



Div Overlay Tutorial MySpace Band Page



Simple Div Overlay Tutorial for MySpace Page



Simple MySpace Div Overlay using Floating Div blocks inside a Core Div


Turn your mySpace page into a Spoof Deleted or Error Page


Music Players and Videos



Hide MySpace Music Player (includes Band 4 Song Player)



Resizing and Moving the MySpace 4 song music player



Video Posting Guide Blogger and mySpace


Top Page Area




Top Navigation Menu Bar, Style, Hide



Place a Custom Top Banner MySpace



Band Page Top Area and Menus Including Maroon Nav Bar



Ad Banner Un-Hidding if Hidden, Understanding, Styling


LEFT


MySpace Left Side Styling Hiding


Top Left ProfileInfo MySpace Profile Img, Last Login, Location, Age, Sex, Styling



mySpace Band Page Top Left Profile Image, Location, Last Login, Customize and Style



mySpace URL box userProfileURL hiding, styling



mySpace Details Table userProfileDetails hiding, styling, creating custom Details Tables


RIGHT



mySpace Right Side Hide and Style Routines



MySpace Blog latestBlogEntry, hiding, styling, importing into Div



Create Custom Table (Div or other Content) above Blurbs



Blurbs (About Me/To Meet) Styling, hiding, etc ...



Calendar MySpace Styling Hiding Moving



MySpace Friend Space, Styling, sizing, coloring, hiding, moving



MySpace Comments FriendsComments Structure, Style, Move



MySpace Center Only Comments


BOTTOM



MySpace Bottom Links, copyright cc, Gray background



Add custom div content to bottom of mySpace page


Band Page



mySpace Band Page Shows Hiding, Styling, Moving, importing into Div Overlay


OTHER



One column Centered Layout



Picture placement and Alignment MySpace, Blogger, other web pages



image effects change image when hovering over



MySpace Eliminating Excess White-Space



Firefox Marquee Bug, Direction Up or Down



I hate splinks for many reasons

myspace extendedNetwork status style hide repalce with image import into div overlay

extendedNetwork/Status table, styleing, hiding, replacing with image, import into div overlay

-- remove blog and extended network no white space
-- hide extended network and blogs and move up my about me

<style>
{! hide extendedNetwork and blogs !}
table.extendedNetwork {display:none;}
table.latestBlogEntry {display:none;}
{! due to carriage returns we need to move the blurbs up slightly !}
{! first I control the size of the carriage return so the distance is the same on different browsers !}
br {line-height:12px;}
table.blurbs {position:relative; top:-24px; margin-bottom:-24px;}
</style>

-- Picture in Extended Network:

<style>
{! put picture in extended network !}
{! first hide the default text !}
span.blacktext12{display:none;}
{! put a background in the table !}
table.extendedNetwork {background-image:url("URL-OF-YOUR-PICTURE");
background-position: center center;
background-repeat:no-repeat;
height:150px; width:300px; display:block }
{! change above px values to height and width of your picture !}
</style>

--Style

<style>
table.extendedNetwork {background-color:lightgreen !important; border:3px solid !important; border-color:darkgreen;}
table.extendedNetwork span.blacktext12 span {color:darkred; font-size:14px !important; font-family:comic sans ms; line-height:19px !important}
</style>

--Import into Div Overlay

<style>
{! size and position Status box !}

table div.myCoreDiv table td.text table.extendedNetwork {display:block !important; visibility:visible !important; position:absolute !important; 
top:20px; left:20px; width:220px; height:150px;}
table.extendedNetwork, table.extendedNetwork td {border:0px !important;}

</style>

mySpace latestBlogEntry Blog table style hide

MySpace Profile Blog Table
note:This article covers the blog table on the main profile page. If you are looking for information related to the styling the blog content page go here:
myspace blog page customizing

The code on this page consists of css STYLE commands. I did not provide style tags with each code block.
Before Using the below code blocks, start with this style block:

<style type="text/css">
{!-STYLE blog table-!}

</style>

You can now choose the commands you wish to use, and place them in the above block, to create your own blog table style block.

Explanation of Blog Table Location and Structure
The blog table is assigned to class="latestBlogEntry"
This class exists on the standard page, band page and other artist pages (film page, comedy page)

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 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

Using the key to the left of the page, and looking at the blog area we can determine the following:
The blog table is this deep:
table td table td.text table.latestBlogEntry
The td I have colored red adds NO value to the above address.
I usually leave it out.
There are multiple other equivalent address strings to address this space.
Sometimes I use just this:
table.latestBlogEntry
I try to avoid this (for multiple reasons), but sometimes I get lazy and use it:
.latestBlogEntry

My diagram does NOT show rows (neither IE or FF do anything with a border applied to a row).
Looking at the cells (shown with dashed borders) one can see that the table consists of multiple rows, each row with one cell.
The first row/cell has the header and "subscribe" link
The last row/cell has the "view all blog entries" link
The cells in-between have the subject and links to the actual blog entries.

We can address the header cell as follows:
table.latestBlogEntry tr:first-child td
The above does not work in IE6. I have not tested it in IE7, but according to the documentation it should work in IE7. It does work in FF, Opera, Mozilla, Safari.

We can address the actual Header in this cell as follows:
table.latestBlogEntry td span.btext

Hide or Remove Blog Table
I can remove the blog table with the following code block:

table.latestBlogEntry {display:none} 

The above will remove the blog table and the space it occupied. It will leave behind a Carriage Return.
If you do not want to remove the whitespace, instead of {display:none} use {visibility:hidden}

If you want to eliminate the space caused by the carriage return, you can do this by adding a negative top margin to the element just below the blog table, or a negative bottom margin to the element just above the blog table. If you still have your blurbs do this
Move Blurb Table Up slightly

{! move blurb table up about one Carriage Return !}
table.blurbs {margin-top:-13px} 

Add Border
To put a border around the entire table I do this:

{! put border around blog table !}
table.latestBlogEntry {border:4px solid; border-color:pink} 

Add Border to Cells
If I want a border around each cell, which will separate each entry, I can do this:

{! add borders to individual entries in blog table !}
table.latestBlogEntry td {border:2px solid; border-color:green}  

Add Background Color to Blog Table

{! add background color to blog table !}
table.latestBlogEntry {background-color:lightblue}

Notice that when you do this, only the bottom cell doesn't show the color of the background, but instead is white.
This is because this cell has been assigned a white background in the myspace code.
We can remove this as follows:

{! remove white background from blog table last cell !}
table.latestBlogEntry td {background-color:transparent}  

Add Background Image to Blog Table

{! add background image to blog table !}
table.latestBlogEntry {background-image:url(http://i14.tinypic.com/6c4xffr.jpg);
background-position:center center; background-repeat:repeat;}  
table.latestBlogEntry td {background-color:transparent;}

Add Background Color to Blog Cells

{! add background color to blog table cells !}
table.latestBlogEntry td {background-color:violet}

Replace Blog With a Background Image

{! Replace Blog with a background image !}
{! size blog table to same size as image !}
table.latestBlogEntry {height:90px; width:200px;}
{! apply background image !}
table.latestBlogEntry 
{background-image:url(http://i14.tinypic.com/6c4xffr.jpg);
background-position:center center; background-repeat:no-repeat;}
{! hide and minimize table content !}
table.latestBlogEntry td {visibility:hidden;}
table.latestBlogEntry td * {display:none;}
table.latestBlogEntry td {height:0px; width:0px; font-size:1px; line-height:1px; padding:0px; margin:0px;}
table.latestBlogEntry br {display:none;}

Replace Blog With Object,Video or Link
If you want to turn your image into a link OR put an object (such as a video) in this space, I recommend that you REMOVE the blogs space, and then create a custom div above the Blubs.
MySpace Custom Content Above Blurbs

Thank you for Visiting; Have a Nice Day


hide blog no white space

myspace custom content above blurbs (about me)

This solution addresses the following:
- Putting custom Content above the blurb (about me) area
- Hiding the "about me" header without hiding the "to meet" header (or the opposite)
- Different color borders around "about me" and "to meet" areas

When combined with hiding the blog area; This becomes an alternative solution to such things as:
- Replacing Blog area with Text
- Replacing Blog area with anything containing a Link
- Replacing Blog area with a Video
And if the blog area has been replaced with static sized content (or removed); we can hide the extended network area, and this becomes an alternative solution to such things as:
- Replacing extended network area with Text
- Replacing extended area with anything containing a Link
- Replacing extended area with a Video
[note:If you are keeping your blogs, in their default location, and you want to put something above them, this is NOT the best strategy to use. In this case I recommend absolute placement measuring down from the top of the page. Getting right-left alignment correct across multiple platforms is difficult, but it is more accurate than trying to use relative movement over the blog area.]

I recommend this for ANY use of the blog area, other than either the actual blogs or a simple picture (which can be set as a background). For all other uses, I highly recommend just removing the area and using this strategy to put something else in the location. This is the best strategy to insure that your left/right (horizontal) alignment lines up with the blurbs table.

IF the blogs are removed (or replaced) I then recommend this strategy for ALL extended network replacements except a simple background picture or a video slider.

This strategy is more reliable than any strategy involving relative or absolute placement to attempt to place something where the blogs and/or extended network boxes reside. [Unless you are keeping your blogs, see above note.]

To create a custom space above the Blurbs/About me:
1) Insert Code at the very top of the section to close off a few layers of tables, so that you are at the point the blurb table is created.
2) Create Your custom Table with its own class
3) Re-open the Blurbs table and give it a unique custom class.
4) Re-Create the blurbs header and give it a unique custom class.
5) Re-open the table which contains the about me and meet cells. Give it a unique custom class.
6) Re-Open the about me cell, give it a unique custom class. This will also allow us to address it independently of the "To Meet" cell, without adding more additional code either at the end of the "about me" or the top of the "to meet"
7) HIDE the residue from the original blurbs/about me area.

In addition if we want to replace the blogs
8) Remove the blog and the Space it occupied
In addition if we want to replace the extended network
9) Remove the Extended Network and the Space it occupied.

Place this code at the TOP of your about me section:

<style>
{!-eliminate residue blurb headers!-}
.blurbs {display:none}
{!-Use below line ONLY if you want to eliminate Blog area-!}
.latestBlogEntry {display:none;}
{!-Use below line ONLY if you want to eliminate Extended Network area-!}
.extendedNetwork {display:none;}

{!-If we removed blogs and extended network we still have space due to carriage returns.  We move up our custom table to take care of this.  If we set the BR line-height we can control how much space it is. -!}
br {line-height:10px;}
.myT1 {position:relative; top:-20px; margin-bottom:-20px; }

</style>

</td></tr></table>
</td></tr></table>
<span class="off">Create Custom Table</span>
<table class="myT1" style="width:435px;">
<tr><td>My Own Content In My Table 1</td></tr>
</table>
<span class="off">END Create Custom Table</span>
<br>
<span class="off">Create Custom Table 2</span>
<table class="myT2" style="width:435px;">
<tr><td>My Own Content In My Table 2</td></tr>
</table>
<span class="off">END Create Custom Table 2</span>
<br>
<span class="off">Re-Open Blurbs Table give it our own Class </span>
<table class="myBlurbs" style="width:435px;"><tr>
<td class="myBlurbHead" valign="center" align="left" width="435" bgcolor="ffcc99" height="17">  &nbsp;&nbsp;&nbsp;<span class="orangetext15"> My Blurbs
</span>  </td></tr>
<td>
<table class="myBlurbsInner" ><tr><td class="myAboutMe" >
<span class="orangetext15">  About me:
</span><br>
<span class="off">YOUR about me Content goes Below</span>

The code will give us this Structure (without all the borders, those are there for demonstration purposes. You can add your own borders if you like).

Element to Address	How To Address	diagram
1)custom table 1	table.myT1	pink solid
2)custom table 2	table.myT2	orange solid
3)Blurbs Section	table.myBlurbs	black solid
4)Blurb Header	table.myBlurbs td.myBlurbHead	blue dashed
5)About Me Section	table.myBlurbs td.myAboutMe	green dashed
6)About Me Header	table.myBlurbs td.myAboutMe .orangetext15	green dashed
7)Meet Section	table.myBlurbs table td [must undo effect on (5)]	light green dashed
8)Meet Header	table.myBlurbs table td .orangetext15 [must Undo effect on (6) above]	light green dashed

Not only have we structured the code so that we can put our own tables above the blurbs, and have them line up correctly; we have created additional levels of classification in the blurbs area. More elements can now be addressed independently for hiding or other styling.

Here is a page which has utilized the above to achieve maximum classification of this area:
MySpace Page Using Above Code with Additional Style Added

The below Code block will place a Video in Place of the Extended Network and Blogs.
Place this code block at the TOP of the about me (before any other code or content).
Replace the video with your own video.

<span class="off"><a href="http://spiff-myspace.blogspot.com/">MySpace Hints and Codes</a></span>
<style>
{!-eliminate residue blurb headers!-}
.blurbs {display:none}
{!-Use below line ONLY if you want to eliminate Blog area-!}
.latestBlogEntry {display:none;}
{!-Use below line ONLY if you want to eliminate Extended Network area-!}
.extendedNetwork {display:none;}

{!-If we removed blogs and extended network we still have space due to carriage returns.  We move up our custom table to take care of this.  If we set the BR line-height we can control how much space it is. -!}
br {line-height:10px;}
.myT1 {position:relative; top:-20px; margin-bottom:-20px; }

</style>

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

<span class="off">Create Custom Table</span>
<table class="myT1" style="width:435px;height:auto; border:2px hotpink solid;">
<tr><td>

<span class="off">!-REPLACE BELOW BLOCK WITH CODE FOR YOUR VIDEO</span>
<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="350" width="435" data="http://www.dailymotion.com/swf/2Vfh94CKBjTl1YAa">
  <param name="allowScriptAccess" value="never" />
  <param name="allowNetworking" value="internal" />
  <param name="movie" value="http://www.dailymotion.com/swf/2Vfh94CKBjTl1YAa" />
</object>
<span class="off">!^^END OF VIDEO BLOCK^^!</span>

</td></tr>
</table>
<span class="off">END Create Custom Table</span>
<br>

<span class="off">Re-Open Blurbs Table give it our own Class </span>
<table class="myBlurbs" style="width:435px;"><tr>
<td class="myBlurbHead" valign="center" align="left" width="435" bgcolor="ffcc99" height="17">  &nbsp;&nbsp;&nbsp;<span class="orangetext15"> My Blurbs
</span>  </td></tr>
<td>
<table class="myBlurbsInner" ><tr><td class="myAboutMe" >
<span class="orangetext15">  About me:
</span><br>
<span class="off">YOUR about me Content goes Below</span>

If you need help determining the code to use, for the video you want to use, see Video Posting Guide MySpace and Blogger

mySpace blurbs about me meet

MySpace Blurb Section

The Blurbs Section contains the About Me and Meet Sections.

Explanation of Blurb Table Location and Structure
The table which contains the about me and meet sections is assigned to class="blurbs"
This class exists on the standard page. It does not exist on the band page.

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 this table.
Regular MySpace Page Showing Structure, Layout, Classes

Using the key to the left of the page, and looking at the blurb area we can determine the following:

Blurbs is a unique class used only for this table.
Text is a class used in multiple places on the page (but only one place within the blurbs).

The blurbs table is this deep:
table td table td.text table.blurbs

The red td is not needed here, and adds no value, as far as making the address string unique. There are multiple other ways to address the same space.

My favorite is this:
table.blurbs
Or this
table table table.blurbs
The first one tells me that it is a table in class blurbs
The 2nd one tells me the table is at least three tables deep (or has two parents which are tables).
If I consistently use the 2nd one, then I can look at my code and know that the table is exactly three tables deep. (I get lazy and take short cuts sometimes)

This also works:
.blurbs
I dislike the above for multiple reasons.
At least for now, there is nothing else assigned that class. But don't count on it staying this way. MySpace has extended the class use to the table rows and/or cells before.

If you are trying to address the blurbs to UNDO the effect of a command which was used to effect something else, but also effects the blurbs you may want to use an even more explicit address.
body table tr td table tr td.text table.blurbs

Here are some useful code blocks/lines effecting this area.

Remove Blurb Header and the Table Cell it is inside
This is the Red dashed area shown on the diagram.
{! remove blurbs header and cell it occupies !}

<style>
<a class=i href="xiii.us/ms1/">myspace 2.0 tutorials and code by Eileen (or is it myspace 2.0 codes :-)</a>
<a class=i href="http://xiii.us/tou/">terms of use</a>
.i {display:none;}
table.blurbs td.text {display:none}
</style>

If you only want to hide the header, and not remove the space it took up, replace {display:none} with {visibility:hidden;}

Replace Blurb Header with image

<style>
<a class=i href="xiii.us/ms1/">myspace 2.0 tutorials and code by Eileen (or is it myspace 2.0 codes :-)</a>
<a class=i href="http://xiii.us/tou/">terms of use</a>
.i {display:none;}
{! replace blurbs header with image !}
table.blurbs td.text {
background-image:url(URL-OF-YOUR-IMAGE-HERE); 
background-position:center top; 
background-repeat:no-repeat;
height:60px;
width:400px;}
table.blurbs td.text span.orangetext15 {
display:none;}
</style>

Replace the 60px with the height of your image.
Replace the 400px with the width of your image.
Replace the URL-OF-YOUR-IMAGE-HERE with the url of your image.

Remove the About Me AND To Meet Header
These have a class assigned, orangetext15. These headers are both in a span of class orangetext15. They are the only items in that class at this level
table.blurbs table td
Therefore this will eliminate them both:

<style>
<a class=i href="xiii.us/ms1/">myspace 2.0 tutorials and code by Eileen (or is it myspace 2.0 codes :-)</a>
<a class=i href="http://xiii.us/tou/">terms of use</a>
.i {display:none;}
{! remove about and meet headers !}
table.blurbs table td span.orangetext15 {display:none}
</style>

Remove ONLY the To Meet and keep the About Me
Put this at the END of your About Me

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

AND
Put this at the TOP of your "Who I'd Like To Meet"

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

Remove ONLY the About Me and keep the Blurb header and the to Meet
This one is trickier, because we have to re-classify the Meet area to accomplish this.

Place this code at the BOTTOM of the about me section:

<style>
table.blurbs span.orangetext15 {display:none;}
table.blurbs td.text span.orangetext15{display:inline;}
table.meet span.orangetext15 {display:inline; }
table.meet {margin-top:-20px;}
</style>
</td></tr></table><table class="meet"><tr><td>

Remove the Blurbs header and the About Me Header, and keep the to Meet header.
Put this code at the END of the about me section:

<span class="off">!START Block to remove Blurbs and About Me Header, keeping Meet Header!</span>
<style>
table.blurbs span.orangetext15 {display:none;}
table.blurbs td.text {display:none;}
table.meet span.orangetext15 {display:inline; }
table.blurbs {margin-top:-30px;}

{!if you want to ditch the orange background border!}
table.blurbs {background-color:transparent;}
</style>

</td></tr></table><table class="meet"><tr><td>
<span class="off">!END Block to remove Blurbs and About Me Header, keeping Meet Header!</span>

Blurbs Change All Coloring
Unless you have added borders there should not be any.
The below example re-assigns all coloring, and adds borders. You can change border style, font family, font size, and colors to get the effect you want.
For borders you do not want, that I assigned, you can change to 0px.

<style>
<a class=i href="xiii.us/ms1/">myspace 2.0 tutorials and code by Eileen (or is it myspace 2.0 codes :-)</a>
<a class=i href="http://xiii.us/tou/">terms of use</a>
.i {display:none;}
{!!STYLE BLURBS!!}
{!blurbs: remove all coloring!}
table.blurbs, table.blurbs td, table.blurbs table {background-color:transparent}
{!add border!}
table.blurbs {border:2px solid; border-color:hotpink}
{!add border to about and meet sections!}
table.blurbs td {border:2px solid; border-color:maroon}
{!add background color to blurbs!}
{!if you color the cells different this will act as a border!}
table.blurbs {background-color:darkblue}
{!color blurb cells!}
table.blurbs table td {background-color:lightblue}
{!use different color for header cell!}
table.blurbs td.text {background-color:pink}
{!change color and font of blurbs text!}
table.blurbs td.text span.orangetext15 {color:black; 
 font-family:comic sans ms; font-size:13px;}
{!change color and font of about and meet headers!}
table.blurbs td span.orangetext15 {color:maroon; 
 font-family:comic sans ms; font-size:11px;}
{!change color of text font in blurbs!}
table.blurbs td span.text {color:darkgreen; 
 font-family:comic sans ms; font-size:9px; font-weight:bold}
</style>

Thank you for Visiting; have a Nice Day

For more information You can visit the following:
about me on myspa how to style abot me section.
to meet on myspac how to style meet section.
about me myspace styling change orange to blue
about me
Hide blurbs
Resize Blurbs table myspace

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.).

MySpace Calendar Structure Styling Moving Div Import

[note: This block was re-written May 20 2007 to take advantage of new myspace Classes]

PseudoCode
1) Classify where possible, to narrow down the potential area effected by the code changes.
a) Find the closest point, where myspace allows the insertion of data.
b) Close out cells, rows and tables to get to the desired point to add in a Div
c) Create the Div
d) Re-open the same number of tables, rows, cells closed in (a)

2) Use style commands to make room in the area where you want to place your calendar. You can use relative positioning to move down the items in either the top left or top right of the page.

3) Use style to resize the calendar to fit in the new location

4) Use style to move the calendar to the new location.
Code to place calendar in Top Left Corner

<span class="off">BLOCK:1Insert Custom Class and Div</span>
</td></tr></table>
</td></tr></table>
<div class="myDclassFC">
<table style="display:none"><tr><td>
<table><tr><td>
<span class="off">!^End Classify Div Block^!</span>

<span class="off">! Style Block to Move/Format Calendar !</span>
<style>
{! BLOCK:2 !}
{! size calendar to fit in the left column !}
.myDclassFC table, .myDclassFC table table {width:300px !important;}
.myDclassFC table table td {width:100px !important}
.myDclassFC table table td.text {width:200px !important}
.myDclassFC table table table {width:100px !important;}

{! reverse above effect on comment space !}
.myDclassFC table.friendsComments, .myDclassFC table.friendsComments table {width:430px !important;}
.myDclassFC table.friendsComments table td, .myDclassFC table.friendsComments table table  {width:100% !important}
.myDclassFC table.friendsComments table table td {width:0px !important}

{! BLOCK:3 !}
{! move down top left content to accommodate calendar !}
{! top px value and margin-bottom px values should BOTH be set to the expected height of your calendar.  You will need to change this if your calendar grows !}
.profileInfo {position:relative; top:250px;   margin-bottom:250px;}

{! BLOCK:4 !}
{! position calendar top left !}
.myDclassFC table {position:absolute; top:175px; _top:185; right:50%; margin-right:75px;}

{! BLOCK:5 !}
{! maintain position of other stuff effected by above !}
.mydclassfc table table, .mydclassfc table.friendspace,
.mydclassfc table.friendscomments
 {position:relative !important; top:0px; left:0px; right:0px; margin:0px;}

{! BLOCK:6 !}
{! Style stuff to improve calendar appearance !}
{! because myspace did not line the header up well to start with, this looks better if you use table and cell background colors to form borders !}
.mydclassfc table {background-color:lightblue;}
.mydclassfc table table td {background-color:lightgreen}
.mydclassfc table table table, .mydclassfc table table table td {background-color:yellow;}
</style>
<span class="off">!^End Style Block to Move/Format Calendar^!</span>

Remember to adjust px sizes to accommodate your own calendar length and profile.
The same concept is used to move the calendar to the top right. Instead of moving down the profileInfo, you would move down the item in your top right corner. In the default profile this is the extendedNetwork (or the video slider if you have chosen that option).

The below blocks are replacements for pieces of the above code. They go between style tags, and replace a similar block in the above code.

Replace [Block 3]code which makes room, for the calendar, in the top left; with code which makes room in Top Right

{! BLOCK 3 !}
{!move extended network down to make room for calendar!}
.extendedNetwork {position:relative; top:300px; margin-bottom:300px;}

OR

{! BLOCK 3!}
{!move video slider down to make room for calendar!}
td.text object, td.text embed {position:relative; top:300px; margin-bottom:300px;}
{!undo effect on any objects in your blurbs!}
td.text table.blurbs object, td.text table.blurbs embed {position:static}

AND
Replace [BLOCK 4]Code which relocates calendar to top Left, with code to relocate calendar to Top Right:

{! BLOCK 4!}
{!position calendar top right!}
.mydclassfc table {position:absolute; left:50%; top:175px;  margin-left:-50px;}

OR if you want to locate the calendar between the contact table and the url box:
Replace [BLOCK 3] AND [BLOCK 4] with this:

{! BLOCK 3 !}
.contactTable {margin-bottom:300px;}
{! BLOCK 4 !}
{! position calendar after contact box on left !}
.myDclassFC table {position:absolute; top:510px; _top:515; right:50%; margin-right:75px;}

This is dependent on a static size of the ProfileInfo area in the top left. You do control this size via your content, and can control it further by assigning a height to the .ProfileInfo class.

The calendar resizing block [Block 2] can be omitted if you choose to locate the calendar top right. You may choose to keep this block and modify the values. This does give you more control over how the calendar looks. It has a tendency to resize weird if anything related to its position and/or size are changed, unless you hard-set the values (as I have done above).

The formatting block [Block 6] should be modified to your tastes. Look at how it effects your calendar, if used as coded. From there you will see which colors you want to change to suit your own profile. I used color names (instead of numbers) so you can easily see which area is effected by which color.

myspace codes to move the calendar (Well I have always just called it code, but the use of this word with plurality seems to be coming more and more common.)

Thank you for Visiting; Have a Nice Day :-)


-I have myspace calendar codes.

mySpace Friend Space, Styling, sizing, positioning, Customizing

Customizing the MySpace Friend Space (class="friendSpace")

For those who don't want to read through my explanations, and just want quick code, I have added some quick links to take you to the code in this article:

Hide Friend Space
Sizing the Friend Space
Hiding Friend Space Keeping Header and/or Links
Hide the view friends text and links
Change the view friends Link to include only All link, and say what you want.
Replace Friend Space With Image

Due to frequent myspace core code changes, and the work involved in maintaining the information on this blog, I removed the diagram from this page.
Instead please refer to the myspace page, where I have coded in the needed style, to generate the needed diagram.
Click Here for MySpace page showing layout div table cell classes
On the page you can see the table levels and classes which can be used to individually address the various elements in the friend space.

Some other things to be aware of, related to the friend space are:
The orange background, to the header, is assigned at this level:
table.friendspace table

All the tables and cells, down to level, table.friendspace table table table td, are assigned a width of 435px.
However, if an outer level auto expands to accomodate more content, that does not mean that all the subtables/cells expand as well.
This is why I will often re-assign the width, of the inner tables/cells to 100%.

The cell containing the friend's name (at level, table.friendspace table table table td) is set to width 107px. Word-wrap is set to break, but this only works if the friend name has spaces in it OR in IE. FF seems to have a problem wrapping if there is not a space. (Tell you friends with long names to use spaces).
However, the cells containing the friend's picture are each set to width 25%.

If I want to completely control the sizing of this area, I just hard set all of it.
The below block sizes the friend space to 300px small, it sizes each friend so as to eliminate space between them.
Sizing the Friend Space

<style>
{!-Size friendspace outer 2 tables !}
table.friendSpace table,  
table.friendSpace td, 
table.friendSpace {width:300px !important;}

{!-Size inner levels  to exactly 1/4 of above!}
table.friendspace table table td, 
table.friendSpace table table table, 
table.friendSpace table table table td {width:75px !important; margin:0px; border:0px; padding:0px;}

{!- set so that img PLUS padding = 1/4 of full table width-!}
table.friendspace img {width:74px !important}

{!-names above friend pictures.  I keep these small.  FF has wrap issues-!}
table.friendspace table table td a {font-size:9; font-family:Arial Narrow}

{!-ditch picture border-!}
table.friendspace a img {border:0px !important;}

{!-deal with view friends div-!}
table.friendSpace table div {width:98% !important; font-size:8px !important}

{!-Gets rid of some excess space-!}
table.friendspace br {line-height:2px;}
table.friendSpace div {display:none;}
</style>

The next style block sets colors and fonts:

<style>
{!-ditch the orange behind the header, also effects another table-!}
table.friendspace table {background-color:transparent;}

{!-style header-!}
table.friendspace .orangetext15 {color:lightgreen; font-size:16px; font-family:Impact}

{!-the sub-header-!}
table.friendspace .btext {color:Green; background-color:lightgreen}
{!-If I want the number styled different than the text-!}
table.friendspace span.redbtext {color:black; border:1px green solid; font-size:15; font-family:Impact; background-color:white}

{!-view all friend link-!}
{!-this moved into a div in Sep 2007-!}
table.friendspace table div {color:darkgreen !important; font-size:9px; font-family:Comic Sans MS; background-color:yellow}
{!-override display;block often used after hiding stuff for an overlay-!}
table.friendSpace table div * {display:inline !important}

{!-color of space-!}
table.friendspace {border:2px DarkTurquoise solid !important}
table.friendspace table td {background-color:transparent !important; border:2px yellow solid !important;}
table.friendspace table {background-color:green !important}
table.friendspace table table td {background-color:lightblue !important; border:0px !important}
</style>

The Result of the Above Styling:


Hiding The Friend Space

<style>
{!- Eliminate friends Space -!}
table.friendSpace {display:none}
{!- Optional lines to eliminate the small amount of white space left by Carriage Return-!}
br {line-height:12px;}
table.friendsComments {position:relative; top:-12px; margin-bottom:-12px;}
</style>

You can easily provide a link to view the friendSpace:

<a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=6221">View All Friends</a>

(Replace Tom's Friend Id with your own)

Hiding Friend Space Keeping Header and/or Links
If you must keep the header and/or links, here is the code for that (although personally I think it is best to just re-create them):

<style>
{! Get rid of only Friends Pictures and Names and Space they occupied !}
table.friendSpace table table {display:none}
{! ditch the Friendspace Header and the space it took up !}
table.friendSpace span.orangetext15 {display:none}
table.friendSpace table, table.friendSpace table td {height:auto !important; line-height:0px; border:none; padding:0px; margin:0px;}

{! Position below link as desired !}
table.friendSpace table div {position:relative; top:0px; line-height:15px; float:left; }

{! Use below line ONLY if you DO NOT want the .. has .. Friends thing !}
table.friendSpace span.btext {display:none;}

{! Use below line ONLY IF you WANT to show .. has .. Friends !}
table.friendSpace span.btext {display:inline; line-height:15px;}
</style>

To Remove whitespace Caused by Carriage Returns between the Tables:

<style>
{!remove carriage returns between main tables on right side!}
table table td.text br {display:none;}
{!restore carriage returns at other effected levels!}
table table td.text table br {display:inline;}
table table table td.text br {display:inline;}
</style>

Hide the view friends text and links

<style>
{!-hide view friends text and links-!}
table.friendSpace table div {display:none;}

{! Show online now icon div which shows up every so often !}
table.friendSpace table table table div {display:block;}

{!-minimize the carriage return white space-!}
table.friendSpace table br {line-height:1px}
</style>

Replace Friend Space With Image

<style>
table.friendSpace td {display:none}
table.friendSpace {background-image:url("URL-OF-PICTURE");
background-position: center center;
background-repeat:no-repeat;
height:348px; display:block }
{! change above px value to height of your picture !}
</style>

Change the view friends Link to include only All link, and say what you want.
If you want to remove the "OnLine" and "New" leaving this:
View Old Doc Hoovey's Friends: All

<style>
table.friendSpace table div a {font-size:13px !important;}
table.friendSpace table div {height:15px; width:160px; overflow:hidden; }
</style>

If you want to have only the link to view ALL (as above) However want Different Text, you will need to make an image of the text you want to use.
I have a pre-made image which says (in black text, font = comic sans mst)
view all friends
You are welcome to use this image.
The code to apply it is below:

<i class=i>Change View Friend Link
<a href="http://www.msplinks.com/MDFodHRwOnhpaWkudXMvdi8=">Change View Friend Link</a>
</i>
<style>
.i {display:none;}
table.friendSpace table div a {font-size:13px !important;}
table.friendSpace table div {height:15px; width:160px; overflow:hidden; }

table.friendSpace table div a.friendtext {display:none;}
table.friendSpace table div a.friendLink {display:block; width:200px;}
table.friendSpace table div {background-image: 
url('http://i11.tinypic.com/6xj2p0x.gif');
background-position:left top;
background-repeat: no-repeat;}
</style>

For some other versions of "view all friends" you can replace the gif in the above code with one of the following:

http://i7.tinypic.com/6pfosg3.gif

http://i16.tinypic.com/85yo7cm.gif

Or you can make your own. Make it 160px width by 15px in height.

This code was tested in IE, FireFox, Opera and Safari.
It will not work in some very old versions of the above browsers which do not support overflow:hidden.

Thank you for Visiting; Have A Nice Day :-)

codes for hiding how much friends use above
how do I hide friends without leaving white space
hide white space left by removing friends
move friendspace
hide mutual and online, show only all
change view friend link to say view all friends
change size of friend names
change size of friend pictures
show more than 4 friends per row in myspace
show only one friend in myspace

mySpace Comment FriendsComments Space Styling Sizing

Styling and Sizing the MySpace Comment Space

This article does styling.
If you are looking to put your comments in a scroll box, or move them, see the following article:
mySpace Friends and/or Comments in Scroll Box

The code on this page works on the standard page and artist (band, film) pages.

Quick Links for those who do not want to read the whole article
Comment space Structure and Discussion
Remove Default Style
Apply Color/Style to Comment Table Backgrounds and Borders
Sizing Comment table Columns and Header Cells
Widen/Stretch MySpace Comment Table
Size and Style Comment Table fonts
Hide name and image of friend leaving Comment on MySpace Comment Table
Controlling size of images and Objects in a Skinny MySpace Comment Table

Comment space Structure and Discussion
To better understand what I am discussion on this page, please refer to the following myspace page
mySpace page with style added to show layering and classes
AND/OR
Band Page showing layering and classes

On one of the above pages look at the Comment Space, class="friendsComments"

On the standard page (and some artist pages) the friends Comment table is at this level:
table table td.text table.friendsComments
On the band page it is at this level
table table.friendsComments

On both pages it can be addressed like this:
table.friendsComments
This table is shown with a off-white color border, on my pages.

table.friendsComments td.text table td span.orangetext15
(Look at the diagram and the key)
Notice that this is the ONLY occurrence of span.orangetext15 at this level.
We can use this to style this space, without effecting other spaces.

Background-color:
One thing my diagram does not show, is where the background coloring and borders are applied.
I think it is best to REMOVE it all, and just apply your own.

Remove Default Style

<a class=i href="http://xiii.us/ms/friendsComments">
myspace friends comments customize</a>

<style>
{! remove default background and borders from comments !}
table.friendsComments table, table.friendsComments td {background-color:transparent; border:0px;}
</style>

Apply Color/Style to Comment Table Backgrounds and Borders

<a class=i href="http://xiii.us/ms/friendsComments">
myspace friends comments customize</a>
<style>
{! remove default background and borders from comments !}
table.friendsComments table, table.friendsComments td {background-color:transparent; border:0px;}
.i {display:none;}

{! background color full comment space !}
table.friendsComments {background-color:yellow}

{! border around full comment space !}
table.friendsComments {border:2px solid orange}

{! line separating comments from friend names !}
table.friendsComments td.columnsWidening {border-left:2px solid green}

{! line after each comment !}
table.friendsComments table table td {border-bottom:3px solid lightgreen}

{! border around Xs Friends Comments text !}
table.friendsComments table td span.orangetext15{display:block; border:3px solid red; width:100%}

{! line underneath displaying X of Y comments  !}
table.friendsComments table table {border-top:3px blue solid}

{! color comment right column !}
table.friendsComments td.columnsWidening {background-color:springgreen}

{! color comment left column !}
{! must be used with ABOVE block to color right column or
   both Right and Left columns will be colored !}
table.friendsComments table table td {background-color:lightblue}
</style>

Sizing Comment table Columns and Header Cells

<a class=i href="http://xiii.us/ms/friendsComments">
myspace friends comments customize</a>
<style>
{! comment table sizing !}
.i {display:none;}
{! below values work well if you are keeping comments in right column and have not resized your profile !}

{! ditch the padding and margins !}
table.friendsComments, 
table.friendsComments table,
table.friendsComments td
{padding:0px !important; margin:0px !important; }

{! full comment table width !}
table.friendsComments {width:460px;}

{! width of comment right column !}
table.friendsComments table table td.columnsWidening {width:400px !important;}

{! width of comment left column !}
table.friendsComments table table td {width:60px !important;}
table.friendsComments table table td a img {width:60px}
table.friendsComments table table td img.imgOnlineNow {width:60px !important;}

{! force comment header  Xs Friends Comments full table width !}
table.friendsComments span.orangetext15 {display:block; width:460px !important; }

</style>

Size and Style Comment Table fonts

<a class=i href="http://xiii.us/ms/friendsComments">
myspace friends comments customize</a>
<style>
{! comment table style fonts }
.i {display:none;}
{! friend name font !}
table.friendsComments table table td a{font-size:9px !important; font-family:Arial Narrow !important; color:darkgreen !important}

{! set font of comment text or it will use same size as friend name !}
table.friendsComments table table td.columnsWidenin {font-size:12px !important; font-family:comic sans ms !important; color:blue !important}

{! sytle comment header  Xs Friends Comments !}
table.friendsComments span.orangetext15 {display:block; width:460px !important; color:hotpink; font-family:courier new}

{! style  showing X of Y comments !}
table.friendsComments table td b, 
table.friendsComments table td b *
{font-size:13px !important; color:magenta !important; font-family:comic sans ms !important }

{! style the add comment at bottom !}
table.friendsComments table td a {font-size:15px; font-family:impact; color:brown}

{! style the links in the div.commentlinks to override above !}
div.commentlinks, div.commentlinks a {font-size:10px !important; font-family:Arial Narrow !important; color:pink !important}

{!-style date-!}
table.friendsComments table table td span.blacktext10 {color:blue; font-size:11px; font-family:courier; background-color:lightblue;}
</style>

Widen/Stretch MySpace Comment Table
In the below example I am using 600.
You can alter the values to suit your own profile
Do NOT use this code UNLESS YOU HAVE moved Comments out of the Right Column.
If you do, you will stretch out your entire profile.

Place this code at the very top of any block which takes html (about, meet, interests)

<a class=i href="http://xiii.us/ms/friendsComments">
myspace friends comments widen,stretch</a>
<style>
{! comment table sizing !}
.i {display:none;}

{! ditch the padding and margins !}
table.friendsComments, 
table.friendsComments table,
table.friendsComments td
{padding:0px !important; margin:0px !important; }

{! full comment table width !}
table.friendsComments, 
table.friendsComments table,
table.friendsComments td,
table.friendsComments table td {width:600px !important;}

{! width of comment right column !}
table.friendsComments table table td.columnsWidening {width:500px !important;}

{! width of comment left column !}
table.friendsComments table table td {width:100px !important;}

{! force Comment table header full width !}
table.friendsComments table td span.orangeText15 {width:600px !important}
</style>

Hide name and image of friend leaving Comment on MySpace Comment Table

<a class=i href="http://xiii.us/ms/friendsComments">
myspace friends comments hide friend name and image</a>
<a class=i href="http://xiii.us/ms/friendsComments">friends Comments myspace code by Eileen</a>
<style>
.i {display:none;}
table.friendsComments table table td {display:none;}
table.friendsComments table table td.columnsWidening {display:block;  border:3px black dashed !important; background-color:lightgreen; width:100%}
</style>

Controlling size of images and Objects in MySpace Comment Table
IF you are NOT trying to make the comment table less wide than 460px, I recommend that you instead take advantage of the built in code, to control the width of objects and images. Unfortunately the myspace coders choose a value which was slightly too wide for the space allocated. However, by making the friend image and name smaller, you can still take advantage of their code.
For this solution please see my above block
Sizing Comment table Columns and Header Cells

However, if you are trying to make your comment space less wide than the above allows for, you can use the below code.
This does require that you make ALL link images the same size as every other link image; and all non link images the same size as all other non link images (in IE).

<a class=i href="http://xiii.us/ms/friendsComments">
myspace friends comments hide friend name and image</a>
<a class=i href="http://xiii.us/ms/friendsComments">friends Comments myspace code by Eileen</a>
<style>
{!-Control size of pictures and objects in comments -!}
table.friendsComments table table td.columnsWidening img {width:200px;}
.i {display:none;}
{!-prevent object sizes from messing with column widths -!}
table.friendsComments table table td.columnsWidening object, 
table.friendsComments table table td.columnsWidening embed {width:200px;}
{!online icon -!}
table.friendsComments img.imgOnlineNow {width:80px !important;}
{!-online icon div that shows up every few days for a few hours-!}
table.friendsComments table table td div img{width:80px !important;}
</style>

MySpace Custom Menu Buttons

Create Custom Menu or Buttons for MySpace

First you need to know how to create the links, then you can choose to put them into a menu or button if desired.

My example links each have 2 classes, one unique to that link and one shared by all links. I like to do this so that when I go to add style, I can style all links with some shared style, and/or set individual style for a specific link.
These classes are harmless if not used.

In each of the below examples I use Tom's friend ID (6221) If you use this code you will want to replace Tom's friend ID with your own.

Add Me

<a class="myAdd myNav" href=
"http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=6221">
Add Me</a>

View/Add Comments

<a class="myAddComment myNav"  href=
"http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=6221">
View/Add Comments</a>

View Friends

<a class="myViewFriends myNav"  href=
"http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=6221">
View Friends</a>

SEND MESSAGE

<a class="myMessage myNav"  href=
"http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=6221">
Send Me A Message</a>

BLOCK

<a class="myBlock myNav" href=
"http://www.myspace.com/index.cfm?fuseaction=block.blockUser&userID=6221">
Block Me</a>

Now I will alter a link, and turn it into an image
To do this, I replace the link text with the image.
Block Link as a Button (image)

<a class="myBlock myNav" href=
"http://www.myspace.com/index.cfm?fuseaction=block.blockUser&userID=6221">
<img src="http://i24.tinypic.com/35ndmx3.gif"></a>

Link Placement
You have several choices for link placement.

absolute placement
IF I am inside a parent container, that itself has been placed using absolute or relative, I can measure from top left.
This will place the block buttom 20px from the top and 30px from the left relative to its parent container.

<style>
{! place block buttom !}
a.myBlock {position:absolute; top:20px; left:30px;}
</style>

If you are placing relative to the body (Full Page), you may want to measure from center top. This will give you the best positioning relative to the rest of the page content.

<style>
{! place block buttom !}
a.myBlock {position:absolute; top:200px; left:50%; margin-left-100px;}
</style>

For an example that uses the text links, and puts them all into a top menu, go here:
Putting Links into a Menu Bar

mySpace Top Navigation Bar, Style or Hide

MySpace Top Menu Bar

This article is being updated to reflect the June 18-July 10 2008 changes. What you see is what I have so far.
Keep in mind that this area is being changed, by myspace, a lot. Keeping up with all of their changes is difficult and tedious (and possibly pointless).

If your drop down links, on the main menu, are not placing correctly, it is likely caused by an attempt to use a position:relative or position:absolute on something in the top menu/ad area structure. This WILL alter the positioning of the drop downs. They are positioned using absolute, and a calculated value. The earlier issues, related to this positioning referencing the body have been fixed, but this is still a potential issue.


Some Quick Links, for those who do not want to read everything:
Removing/Changing the Dark Blue Color Bkgd
Hide Top Menu
Style Top Area to include Ad background, Search area, Menu
Size Top Area to include Ad background, Search area, Menu
You can make it skinny (when I tested this on Sep 13 2008)

Hide Google Search and myspace Logo (does not hide shortcuts) WARNING: This may be against the rules. MySpace is not clear on this.
Change color of the link text AND drop down Arrow things in Top Menu
Change color of the drop down Arrow things in Top Menu

For an image, which shows the depth (parents) of the Top Menu Bar, please see this myspace page:
MySpace Page Showing div, table, cells and classes
I have updated the above page to show many of the new structure/classes

The page, I link to above, has been turned into a diagram, by adding style commands. I also added a color coded key to the right.

The dark Blue Color Bkgd
The dark blue (2358B8)coloring is applied at this level:
div div.profileWidth table td

<a class=i href="xiii.us/ms/ad-search-menu">
myspace remove blue behind ad/search area by Eileen</a>
<style>
.i {display:none;}
div.profileWidth table td, x.i i .i {background-color:transparent !important}
</style>

You can change transparent to the color of your choice.

The table which contains the top menu is NO LONGER in class navigationbar
It no longer has a class (they used an ID which we can not access, with code myspace will accept).

The navigation bar can now be addressed like this:
div.profileWidth table td div

Notice how many other things this potentially effects.
However, all of the other effected elements can be addressed separate, because they are all in an additional class
All the other elements (except the moot empty div), effected by the above statement, can be addressed like this:

div.profileWidth table td div.clearfix,
div.profileWidth table td div.clearfix div,
div.profileWidth table td div div

However,
visibility:hidden has been disabled for everything in the top ad/search/menu area.
display:none works sort of.
Any attempt to reverse a display:none, causes a problem with the drop down menus.
So I will use a solution which combines positioning with opacity.
This is NOT the only solution.

Code to Hide Top Menu
As of Today, July 3 2008, this code no longer works however if you scroll down a bit, you will find another solution, which did work when I tested it today.
Place this code at the bottom of the Meet, or wherever you put style blocks.

<a class=i href="xiii.us/ms/ad-search-menu">
Hide MySpace Main Menu Nav Bar</a>
<style>
div table div, .i {display:none;}
div.profileWidth div.clearfix, i i i, 
div.profileWidth div.clearfix div {display:block;}
</style>
<i class=i>END code to Hide Top Nav Bar Main Menu</i>

The below solution does work as of July 3 2008, but keep in mind that myspace may be trying to block the ability to hide this menu. Therefore expect more changes which break the various published solutions, including this one.
You can place this code at the very bottom of the to Meet section:

<a class=i href="xiii.us/ms/ad-search-menu">
myspace Hide New Top Menu Nav Bar</a>
<style>
.i {display:none}
div.profileWidth {margin-top: -30px !important;}
div.profileWidth div {filter:alpha(opacity=0); opacity:0.0001}
div.profileWidth div.clearfix, i i i, 
div.profileWidth div div {filter:none; opacity:0.9999}
div.profileWidth div.clearfix {position:relative; top:30px}
</style>
<i class=i>!!! End Code to Hide Top Menu !!!</i>

Code to Style Top Menu
If you first apply the block I have below, you will clearly see where each color/style gets set.
Then you can look at the color/style, and determine exactly what to change.
i.e. if you see PINK, and you know that everything PINK you want GREEN, change PINK to GREEN.
etc ...

You can place this code into the about me, meet, or interests section.

<a class=i href="xiii.us/ms/ad-search-menu">
myspace style top area ad/search/menu</a>
<style>
.i {display:none}
{! color top menu !}
div.profileWidth table td, i i i.x {background-color:black !important;}
{! color search area and behind ad different than top menu !}
div.profileWidth div {background-color:pink !important}
{! color link font in top menu !}
div.profileWidth div ul li a {font-family:comic sans ms; font-size:11px; font-weight:bold; color:pink !important}
{! link hover color !}
div.profileWidth div ul li a:hover {color:hotpink !important; background-color:green !important; display:block}
{! remove shadow in google search area !}
div.profileWidth div.clearfix, .i i i {background-image:none !important;}
</style>
<i class=i>!!! End Code to Style Top Ad/Search/Menu !!!</i>

Of course, you can change the style attribute values (such as color, font size, font weight, font family) to the values of your choice.

Here is another solution which also colors the little down arrows

<a class="i" href="xiii.us/ms/ad-search-menu">
myspace top menu navbar change link color (text and arrows)</a>
<style>
.i {display:none;}
div.profileWidth table td ul *,
div.clearfix i i i {color:yellow !important font-family:comic sans ms !important; font-size:18px !important; font-weight:bold !important}
</style>
<i class="i">End Code to color links in top menu</i>

Code can go at the very top or very bottom of the about or meet sections.

If you want the down arrows a different color, than the text, see the code at the bottom of this article.

Size Top Menu
It is much more difficult than before to make the top menu smaller.

The below code block will make the top menu and search area narrow, to go with a skinny profile.
Place at very top of about me section:

<a class="i" href="views-under-construction.blogspot.com/2007/03/myspace-navigationbar-top-menu-style.html">
Size myspace top menu skinny code by Eileen
</a>
<a class="i">
<style>
.x.i i, .i {display:none}
{! you can alter below width !}
div.profileWidth {width:513 !important }
div.profileWidth table:first-child tr:first-child div.clearfix {position:absolute !important; margin-top:0px !important; top:0px; left:50%; margin-left:-364px}
div[id*="shortcuts"] {position:relative !important; left:-150px !important; }
div.profileWidth table:first-child tr div.clearfix {margin-top:80px !important; position:relative;}
div.profileWidth table:first-child tr div.clearfix span div.profile {position:absolute !important; top:0px !important; right:1px !important;}

div.profile {_margin-top:80px !important;}

div.profileWidth div.clearfix div.profile,
div.srchfieldlayer {position:static !important; margin-left:0px;}

div.profile div.srchfieldlayer { position:relative !important; left:-6px !important; width:200px !important;}
div.profile div.srchfieldlayer div,
input.srchTextfld {width:200px !important; _width:130px !important}

div.srchButton, 
div.srchButton div,
div.srchButton div input {width:48px !important; font-size:8px !important;}

{!do NOT use important below it will mess up search drop!}
div.profileWidth div.clearfix div div {position:static; margin-left:0px;}

div.profileWidth div.clearfix div {_position:absolute; _margin-left:-364px}

h1.mslogo {display:none !important}

</style>
end code to size menu and search areas
</a>

This code will make the menu less high. (If used with above to make it skinny, you will need to alter a value in the above code, or in FireFox, your add will overlap your search area) It works as is in IE.
You can alter the px values to suit your needs.

<a href="xiii.us/ms/ad-search-menu" class="i"> MySpace Top Menu Code by Eileen

<style>
div.profileWidth table td div ul {height:10px !important; padding-top:15px !important}
div.profileWidth table td div ul li * {font-size:6px !important; height:10px !important; line-height:10px !important}

{! below px value should be 29 minus the px height value used above !}
div.profileWidth div.clearfix {position:relative !important; top:15px !important; z-index:9 !important}
div.profileWidth {margin-top:-15px !important;}
.rail {display:none !important;}
div.profileWidth td {background-color:transparent !important;}
</style>
!! END Code to Decrease Top Menu Hight !!</a>

Shadows in Top area
The shadow you see, is caused by background images.
These are applied at various levels.
Some other things formed with background images are:
- myspace logo to the left of the google search area
- the rounded corner look of the google search bar
- the google search logo next to the google search bar.

I do remove the shadow from the google search area, in my above example.
This shadow background image is applied at this level:
div.profileWidth div.clearfix

The myspace logo background image is applied at this level:
div.ProfileWidth div.clearfix h1

The "powered by" (http://x.myspacecdn.com/modules/common/static/img/header/en-us/poweredbygoogle.png) that shows up just before the word Google (which is in a span) is applied at a level:
div.profileWidth div.clearfix form

There is also a background image used to give the search box the curved look.
This one is interesting, because it is applied at multiple levels, and the code is in a style sheet.

Look at the image, it is interesting.
http://x.myspacecdn.com/modules/common/static/img/header/searchFldBg.gif

Then see how it is applied (also interesting).
the code is found in css file
http://x.myspacecdn.com/modules/common/static/css/header/profileheader002.css

The image is applied multiple times, at multiple levels, to accomplish the effect, of keeping the image look, even if resizing the input field.

Code to remove the application of the curved edge input image, without effecting other elements:

<a class=i href="xiii.us/ms/ad-search-menu">
myspace remove image border of google search input box</a>
<style>
.i, i i.x {display:none;}
div.srchfield, div.x i i .i,
div.srchfield div {background-image:none !important;}
</style>
<i class=i>!!! End Code to remove border img on google search !!!</i>

A similar image is applied to the search button
http://x.myspacecdn.com/modules/common/static/img/header/searchBtnBg.gif
Code to remove image shadow border thing:

<a class=i href="xiii.us/ms/ad-search-menu">
myspace remove image border of google search button</a>
<style>
.i, i i.x {display:none;}
div.srchButton, div.x i i .i,
div.srchButton div {background-image:none !important;}
</style>
<i class=i>!!! End Code to remove border img on google search button !!!</i>

Prevent Google Search from Wrapping to Next Line and Causing Centering Issuses
Sizing and Spacing of the Google Search, Shortcut, Logo Space
This space seems to want to wrap, if it does not have enough space (even if it looks like there is plenty of space).

BEST SOLUTION is to REMOVE whatever is causing the problem
The profile sizes this space just fine, if no other code is messing with it.

The below code solved the problem with some profiles. It really depends on what is causing the problem to start with.
I used the below code to prevent the wrap, and keep the google input box reasonably sized.

<a class=i href="xiii.us/ms/ad-search-menu">
myspace size and prevent wrap in google search</a>
<style>
.i, i i.x, .rail {display:none;}
div.profile form {position:absolute; top:10px !important; right:10px !important;}
div.srchfield input {width:190px !important;}
</style>
<i class=i>!!! End Code to size google search space !!!</i>

IF I am adjusting the top menu and google search to do a skinny profile, I can reasonably take them down to the same width as the ad banner.
I was able to get them down to under 600px, but getting the search centered in FireFox was difficult. (Margin values are set in the style sheet for the id, making it difficult to use margins to space and center. IE uses text-align, so I could center easily in IE).

The below code block takes the search and menu down to 720px width (the same as the ad banner.)
It also includes the same formatting I used in the previous code block:

<a class=i href="xiii.us/ms/ad-search-menu">
myspace size menu and search, prevent wrap in google search</a>
<style>
.i, i i.x, .rail {display:none;}
div.profileWidth,
div.profileWidth table,
div.profileWidth table td {width:720px !important;}
div.profile form {position:absolute; top:10px !important; right:10px !important;}
div.srchfield input {width:190px !important;}
</style>
<i class=i>!!! End Code to size menu and search !!!</i>

Hide Google Search and MySpace Logo (does not hide shortcuts
If you do not know where to put this code, you can put it at the end of the Meet or Bio.

<a class="i" href="xiii.us/ms/ad-search-menu">
myspace Hide New Top Menu Nav Bar</a>
<style>
.i {display:none}
div.profile * {display:none !important;}
</style>
<i class=i>END CODE to Hide Google Search and MySpace Logo</i>

Change color of the links (text and arrows) in the main Top Menu
This code can go anywhere you are keeping style blocks, but must go OUTSIDE any existing style block. It has its own style tags. If in doubt, put at the very TOP or very Bottom of the Meet or Bio section.

<a class="i" href="xiii.us/ms/ad-search-menu">
myspace top menu navbar change link color (text and arrows)</a>
<style>
.i {display:none;}
div.profileWidth table td ul *,
div.clearfix i i i {color:yellow !important}
</style>
<i class="i">End Code to color links in top menu</i>

If you want the arrows a different color, you can apply the below block
Change color of the drop down Arrow things in Top Menu
This code can go anywhere you are keeping style blocks, but must go OUTSIDE any existing style block. It has its own style tags. If in doubt, put at the very TOP or very Bottom of the Meet or Bio section.

<a class=i href="xiii.us/ms/ad-search-menu">
myspace top menu navbar change color of link arrows</a>
<style>
.i {display:none;}
div.profileWidth table td ul small,
div.clearfix i i i {color:green !important}
</style>
<i class=i>End Code to color link arrows in top menu</i>

More stuff on Styling this Space Later

Thank you for Visiting; Have a Nice Day :-)


-I have code to customize myspace navigation links.
-And make navigation bar transparent
-How to change color of navigation bar
-eliminate hide pipes (lines) in navigation bar
-hide blue menu bar
-myspace menu font bold

xiii.us/ms/ad-search-menu

myspace top ad banner search area

MySpace top page area (ad banner, search, shortcuts)

This article has been combined with another article, and updated to reflect the June 18, 19, 20 2008 myspace code changes.

Please go here;
MySpace Top area (ad, search, navigation/main menu)


xiii.us/ms/ad-search-menu

MySpace Band Page, Top area, Ad Banner, Search, Menus, Navigation Bars

The top area on the Band (and other artist) page(s) is now structured the same as on the standard page.

I cover this information here:
MySpace top area, ad banner, search area, top menu

However, this area has undergone many changes over the last few months, and keeping up with all of the myspace core code changes is tedious.
So my code may not be up to date.


For the Maroon navigation artist bar see this article:
Remove, hide or Style the Maroon Artist (band, film, comedy) menu

MySpace Band page, Custom Section below Top Menu

MySpace 2.0, Custom Section above Main table, Below Menu

This strategy takes advantage of an html fluke that occurs, when one attempts to place content in a table, outside of a defined cell.
This forces the content above the table.
I have tested this in multiple browsers, and the behavior was consistent.

Place this code in the Bio Section BELOW any content you want to show in that section.

This code does force the friends to the bottom.
If you want the friends on the right, scroll down on this page, to find the solution.

Content in Bio Section goes here.

<i class=i>START CODE HERE
Template Code written by Eileen
<a href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy9tczE=">MySpace Code  (Codes ?) and Tutorials by Eileen</a>
<a href="xiii.us/ms1">MySpace Code  (Codes ?) and Tutorials by Eileen</a>
</i>

</td> </tr></table>
</td> </tr></table>
</td> </tr>
<div class="myTopDiv" style="border:2px green groove; margin-right:auto; margin-left:auto; width:100%; ">

Top Div Content goes here.  <br><br>
If no height is assigned, div will auto size based on content as long as the content is not placed absolute within the div.

I am adding br tags to show how content takes up space, and sizes this div
<br>
<br>
<br>
<br>
<br>


</div>

<tr><td class="myB" colspan="4" style="text-align:center">
<div class="myBottom" style="text-align:center">

<table style="display:none"><td>
<table><tr><td>

<style>
.i {display:none;}

</style>

<i class=i>END code to create Custom Top Section</i>

Custom Section below Nav Bars, Above Main Table, keeping Friends to the Right

This code does hide anything in the interests area that occurs after the "Sounds Like".
You can easily re-create this content, if you want, since it is static.
(I can provide the code for that if anyone wants it).

This code goes into the Sounds Like BELOW any content you want to show up in that section.

Content in Sounds Like Section goes here.

<i class=i>START CODE HERE
Template Code written by Eileen
<a href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy9tczE=">MySpace Code  (Codes ?) and Tutorials by Eileen</a>
<a href="xiii.us/ms1">MySpace Code  (Codes ?) and Tutorials by Eileen</a>
</i>

</td> </tr></table>
</td> </tr></table>
</td> 
<div class="myTopDiv" style="border:2px green groove; margin-right:auto; margin-left:auto; width:100%; ">

Top Div Content goes here.  <br><br>
If no height is assigned, div will auto size based on content as long as the content is not placed absolute within the div.

I am adding br tags to show how content takes up space, and sizes this div
<br>
<br>
<br>
<br>
<br>


</div>

<td class="myB" colspan="4" style="text-align:center; border:2px green dashed;">
<div class="myBottom" style="text-align:center">

<table style="display:none"><td>
<table><tr><td>

<style>
.i {display:none;}

</style>

<i class=i>END code to create Custom Top Section</i>

artist band film maroon menu nav bar myspace

Maroon menu navigation bar Artist (Band, Film) pages

MySpace Band Page, Top Area, Ad Banner, Search, Main Menu, Music Nav Bar

Most of the content which was on this page, is now no different than on the standard page, please see this article:
MySpace Top ad/search/menu area styleing and more

This code was tested, and still working, on September 13th 2008.

This article still covers the maroon navigation artist menu:
How the music nav bar (and its code) is Structured
Hide the maroon music menu nav bar
Fade the maroon music menu nav bar so it is semi-transparent
Style the maroon music menu nav bar Logo, replace with color and/or your own image
Style the maroon music menu nav bar

How the music nav bar (and its code) is Structured
For a diagram showing the structure (showing borders of divs, tables, cells along with classes) go here:
mySpace page showing Artist Band page Structure
The maroon nav bar background coloring is done at this level:
div table

The navbar contains a background, a bottom border, an image, links, and text (the pipe things between each link which look like vertical lines). The text is not defined as font, or bold or any thing easy to isolate it with. The links can be addressed using the a, but the pipes between them are more of a problem.
The image, within the maroon bar is addressable as:
div table a.navbar img
We can isolate the actual links with this:
div table a

and then undo the effect on the main menu by addressing it like this:
div.profileWidth table div a

It has a unique id assigned to it, and can be address like this:
table#musicnav
(However now that they are blocking the pound sign, even in non safe mode, I can no longer take advantage of this.)

Hide the maroon music menu nav bar
It is now easier to hide, because the content that used to be at the same level, has had additional classification added to it.

One can now do this:

<a class=i href="xiii.us/ms/ad-search-menu">
myspace hide maroon music menu nav bar</a>
<style>
div table, .i,  i  i.x {display:none;}
div.profileWidth table {display:block}
table div table {display:block;}
</style>
<i class=i>!!! End Code to Style Top Ad/Search/Menu !!!</i>

Fade the maroon music menu nav bar to semi or completely transparent

<a class=i href="xiii.us/ms/ad-search-menu">
myspace fade maroon music menu nav bar transparent</a>
<style>
div table {filter:alpha(opacity=13); opacity:0.13} 
.i,  i  i.x {display:none;}
div.profileWidth table,
table div table {filter:none; opacity:0.99999;}
</style>
<i class=i>!!! End Code to Style Top Ad/Search/Menu !!!</i>

Change opacity values closer to 0 to fade more, or higher to fade less.


Style the maroon music menu nav bar Logo

<i class=i>!!START code to style music nav bar logo !!</i>
<a class=i href="http://xiii.us/ms/band-navbar">
myspace artist music band nav bar logo style code by Eileen</a>

<style>
a.navbar {background-color:green !important; display:block;
 background-image:url(http://i30.tinypic.com/2vm7tkg.gif); 
background-repeat:no-repeat;
background-position: center center;}
a.navbar img, i i i.x {visibility:hidden;}
.i {display:none;}
</style>

<i class=i>!!! END CODE to style music nav bar logo</i>

Style the maroon music menu nav bar
You can style (color, fonts and such) the maroon navigation bar, HOWEVER it does effect other elements, UNLESS you also apply style for those elements.

You can style the music nav bar DIFFERENT from the top menu and calendar ONLY IF you also add style code for those elements.
I did NOT add that style code below. I suggest you read my articles on styling the calendar, and the top menu, and style those areas to your liking.

The code block below sets the style of the multiple elements on the navigation bar.
By applying the below code block, you will easily see its effects on the bar.
From that point you can change the colors, fonts, and such until you get the look you want.

<i class=i>!!START code to style music nav bar !!</i>
<a class=i href="http://xiii.us/ms/band-navbar">
myspace artist music band nav bar style code by Eileen</a>

<style>
{! style applied to music nav bar effects shows and main menu and shows. This can be reversed by styling these areas with additional code. !}

{! remove maroon background and black bottom border from music bar !}
div table {background-color:white !important; border-bottom:0px !important}
x.i i, .i {display:none;}
{! font of music nav bar !}
div table td a {color:darkgreen !important; font-family:comic sans ms; font-size:11px;}
</style>
<i class=i>!!END code to style music nav bar !!</i>

To now style the shows go here:
MySpace Band Page Shows

To style the new top Menu (what used to be in class navigationbar) go here:
MySpace style the New Top Menu

Thank you for Visiting; Have a Nice Day :-)

hide or style maroon artist navigation bar

MySpace Band Page Top Left Profile Info, Styling, Hiding, etc

If you want to style (hide, move, import) the profileInfo area, on the Standard page (non artist/band) go Here ProfileInfo:Layout, Styling, Hiding, moving etc ...
That article has a nice diagram showing the classes and layout of this space. It has -multiple examples showing how utilize the classes and layering and other attributes to manipulate this space.

Some Quick Links if you are not interested in my Explanations (although reading them may help you to come up with your own code in the future).
Hide entire Top Left Section
Hide Name
Replace Name with Image
Hide Genre
Hide Profile Image
Move Profile Image
reSize Profile Image
Hide Text next to Image(last login, location, profile views, online now)
Hide Text next to Image AND center image, view my pics|videos
Hide Headline, Location, Last Login, Profile Views and View My Pics|Videos
Hide Last Login (only)
Style Profile Info (color, font)
Replace headline, location and profile views with your own text

The Band Page is Different
-It has no profileInfo class (I have been hoping for one).
-It does not have the extra unused cell
-It uses a different colspan for the "view my pics|videos".
-It has both the headline and the genre inside both a font and a strong tag (which is good for addressing them), and has assigned some very dark green color to them, which looks black on a white background. (Try a black background and the green is obvious).
- Mood thing doesn't seem to show up, although it is on the home page, and can be set.
- It accepts html in the headline, which allows one to add further classification to the space (the standard page only takes the font tag).

Otherwise, it is similar.

To see a diagram, which shows the structure of this area, and how it fits into the full page:
myspace page showing structure and classes

There is not enough classification to uniquely address most of the elements in the top left (profile info) area, without effecting other page elements.

However, I can add further classification to this space, by using the headline area.

Here is an example of a page, where I have, by closing and re-opening tables, added more classification:
Click here to see Sample Page
Here I have closed a few tables, added in a P (paragraph) and then re-opened the tables, adding class H to one of them.
(The reason I used a P instead of a div, was due to very limited space).

Notice how my structure is effected.
I can now isolate the top left section from the rest of the left side (sort of).
This is useful if I want to hide this block, without effecting the General section.

Hide entire Top Left Section
i.e. to hide the entire Top left section (above the contact table) I can do this:
Put this in the headline:

</table></table><p><table class=H><td><table><td> 

Now put this at the top of the Bio:

<a class=i href="http://xiii.us/ms/band-profileInfo">
style or hide default image area myspace music page code by Eileen</a>
<style>
table.H, .nametext, font strong{display:none;}
div.clearfix i i, .i {display:none;}
table table table table td.text img {display:none;}
table table p table table td.text img, table table td.text table table td.text img {display:block;}
table, td {height:auto !important; }
table table br {display:none}
table table td.text br, table table p td br {display:inline; line-height:13px}
p {margin-top:-13px;}
</style>

I tried several strategies, while this one did not have the least code, it did have the least effect on other page elements.

Some Other Useful Code Blocks:
Hide Name

<a class=i href="http://xiii.us/ms/band-profileInfo">
style or hide default image area myspace music page code by Eileen</a>
<style>
{!-hide name-!}
span.nameText, x.i i, .i {display:none}
</style>

Replace Name with Image
Set Height to the Height of your image, Set width to the width of your image, and replace the URL of my image with the URL of your image.

<i class=off>! replace nameText with image !
! <a href="http://spiff-myspace.blogspot.com">myspace code tutorials author:Eileen</a>
</i>
<style>
table table table td.text span.nameText {
height:50px !important; width:100px;
display:block;
background-repeat:no-repeat;
background-position:center top; 
background-image:url(http://i3.tinypic.com/4p1qxk5.gif); 
font-size:0px !important;
text-indent:-1313px;}
div.clearfix i i, .i {display:none;}
</style>

Hide Genre

<style>
{! hide genre !} 
table table table td.text font strong{display:none}
{! recover headline !}
table table table table td.text font strong{display:inline}
</style>

Hide Profile Image

<a class=i href="http://xiii.us/ms/band-profileInfo">MySpace Band Hide Profile Image</a>
<style>
{! remove profile image !}
table table table table td.text a img, .i {display:none;}
{! recover contact table link images !}
table table table.contactTable table td.text a img {display:block;}
{! recover right side images !}
table table td.text table table td.text a img {display:block;}
</style>

Move Profile Image

<style>
{!<a href="http://xiii.us/ms/band-profileInfo">MySpace Band Move Image</a>!}
table table table table td.text a img {position:absolute; top:0px; left:50%; margin-left:-420px;}
{! recover contact table link images !}
table table table.contactTable table td.text a img {position:static; margin-left:0px}
{! recover right side images !}
table table td.text table table td.text a img {position:static; margin-left:0px}
</style>

You need to change the positioning values.
If you have added images to your general area, you need to put them in a class, so that you can address them for override positioning.
reSize Profile Image

<style>
{!<a href="http://xiii.us/ms/band-profileInfo">MySpace Band Resize Profile Image</a>!}
table table table table td.text a img {width:90px; height:auto}
{! recover contact table link images !}
table table table.contactTable table td.text a img {width:auto; height:auto}
{! recover right side images !}
table table td.text table table td.text a img {width:auto; height:auto}
</style>

Hide Text next to Image AND center image, view my pics|videos
Start by putting code in the headline to add additional classification. This is the only way we can separate the "view my pics|videos" from the general table.
This also gives us greater control over text next to the image.

Put this in the Headline:

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

Put this at the top of the Bio:

<a class=i href="http://xiii.us/ms/band-profileInfo">
mySpace band page Customizing Tutorials by Eileen (Top Left Profile Info)
</a>
<style>
{! use ONLY WITH additional code in the Headline !}
{! hide text next to profile image !}
{! center name, genre, image, view-my-pics-videos !}
x.i i i, .i {display:none}
p  p {display:none}
p table {width:100%; margin-top:-13px;}
table table table table td.text {width:auto; text-align:center}
table table table table td.text img {display:none;}
table table table table td.text font strong {display:none;}
table table table table td.text a img {display:block; margin-right:auto; margin-left:auto}
table table table td.text {text-align:center}
div.clearfix i i, .i {display:none;}
</style>

Hide Text next to Image(last login, location, profile views, online now)
Put this in the Headline AFTER any Headline text you want to show:

"<div class="H">

Now put this at the top of your bio section (or wherever you are keeping style blocks):

<style>
div.H {display:none}
{! remove quote. Use only if you have no headline text displayed !}
table table table table td.text font strong {display:none;}
</style>

Hide Headline, Location, Last Login, Profile Views and View My Pics|Videos
Due to this being at the exact same level as the General Table, I have to add additional classification to make this work.
I can do this in the General Section, but this would require that I re-create multiple headers and cells within that space.
I can do this in the Headline.
I choose the Headline.
Step 1) Install this code in your headline:

</td></tr></table><table class="T"><tr><td >

Step 2) Place this block at the top of the Bio (or where ever you keep your style blocks):

<span class="off">!-Below style block works with additional code added to headline-!</span>
<style>
{!-text next to and under profile image-!}
table.T {display:none;}
{!-hide quote-!}
table table table table td.text font strong {display:none;}
</style>

If you combine the above, you can hide the entire space.
Step 1) Install this code in your headline:

</td></tr></table><table class="T"><tr><td >

Step 2)Place this block at the top of the Bio (or where ever you keep your style blocks):

<span class="off">!-Below style block works, to hide the profile Info area (top left) with additional code added to headline-!</span>
<style>
{!-text next to and under profile image-!}
table.T {display:none;}
{!-hide genre and quote-!}
table table table td.text font strong {display:none;}
{!-band name-!}
span.nameText {display:none}
{!-clear gifs-!}
table table table td.text img {display:none;}
table table table.contactTable td.text img {display:block;}
table table table  td {height:auto !important;}
{!-anything on right side of profile-!}
table table td.text table td.text img {display:block;}
</style>
<span class="off">!-End block to hide Profile Info (top left)-!</span>

Hide Last Login (only)
This requires that we add a div and p (paragraph) to the area, so that we can get the needed positioning and then clip off the last login.
(Clip requires position absolute, we need the div to create the outer container so that when we do the position absolute we have a reference point).

You WILL NEED TO ALTER px values. The values used, worked perfectly on my test page. The actual values needed depend on the amount of space taken up by the text in your space, along with the size of your image.

Place the following code in the Headline:

YOUR HEADLINE"<div class=H><p> 

Now place this code at the top of the Bio:

<style>
{!<a href="http://xiii.us/ms/band-profileInfo">MySpace Hide Last Login</a>!}
{! assumes you created div.H and P in the headline !}
{! insure that online now icon does not change position of last login !}
div.H img {position:absolute;}
{! set a known px size, so that the size does not fluctuate as much cross browser!}
div.H p {font-size:11px}
{! set div height to the height the text content currently takes up !}
div.H {height:200px; position:relative; top:0px;}
{! clip of last login and top hanging quote !}
div.H p {position:absolute; top:0px; left:0px; clip: rect(20px, 200px, 130px, 0px)}
</style>

Getting Clip Values correct:
rect (top, right, bottom, left)
Top: clips off of the top. If too much has been clipped off the top, decrease this value.
Bottom: If too much has been clipped off of the bottom, INCREASE this value.
If too little has been clipped of decrease the value.

Right: This should be the width of the P (paragraph)
To temporarily see what is going on, you may want to add this line (put it inside the style block)

div.H p {border:2px green solid;}
This will allow you to see the boundaries of the Paragraph you are clipping.


Style Profile Info
The below style block will make the area look like this:

Match the coloring/styling on the diagram, with what I use in the code, to see how to style each section.

<style>
{!-The text next to picture, all in class td.text-!}
table table table table td.text {color:red !important; font-family:comic sans ms; font-size:11px;}
{!-name above picture-!}
span.nametext {color:blue !important; font-size:18px; font-family:courier new; background-color:pink}
{!-genre and headline-!}
table table table td font strong {color:hotpink;font-size:8px; font-family:impact;  border-bottom:3px green solid}
{!-headline NOT genre in case you want them different-!}
table table table table td font strong {color:hotpink;font-size:8px; font-family:impact;  border-bottom:3px green solid}
{!-links; this effects many other links on the page-!}
table table table a {color:violet !important; font-size:14px; font-family:impact}
</style>

Replace headline, location and profile views with your own text

If you want to fake the number in the profile views, this solution will do this.

Step 1) Create an image which contains the text. The image should be about 130px high and 180px wide.
You can use any drawing tool for this (paint, photoshop, paintshop). There are also some online sites you can use for this step.
(I will add some later).

Step 2) Save your image to www.tinypic.com
You can use another site to host the image, however you must have a very tiny name.
They band page headline does have many characters to work with.

Step 3) Place this code in the headline:

<img src="URL-OF-IMAGE"/>

Place this code in the bio:

<style>
font strong img {background-color:white; width:180px; height:130px; position:absolute; margin-left:-10px; margin-top:-20px;}
</style>

Although I think the above is cleaner, another way to fake the profile views is to create a paragraph (or div) which has the desired number of views, give it an opaque background, and place it over the existing profile views.

Each profile is different, so the values needed will vary from profile to profile.
The below code worked on my own test page.

Place this in the headline:

<div class=P>profile views: 666</div>

You have some room for headline text after the above code, but not much. You can replace the div with a P to gain more space for headline text.
Place this in the bio:

<style>
div.P {display:block; background-color:yellow; height:40px; width:160px; }
div.P {font-size:13px;}
div.P {position:absolute; margin-top:75px; _margin-top:90px; _margin-left:-10px;}
</style>

change Yellow to the color of your own background.
You may need to adjust the margin values.

Thankyou for Visiting; have a nice day

codes ? Is not code plural already? I have been a software engineer for several years now, and before myspace existed, I had never seen the word codes in reference to software code.
MySpace band page last login
How to hide the last login on the band page myspace

mySpace band page profile views import into div overlay

mySpace band page div overlay; import profile views into div overlay

I still recommend that instead of this solution, you find yourself a counter, from another site, and place that counter onto your page. But for those who feel they must have the profile-views field, from the default myspace page, you may use this solution.

WARNINGs:
1) This solution puts html in the headline. I expect myspace to quit allowing this at any time (they do not allow this on the standard page). For now it works on the band page.

2) This solution uses syntax with some obvious bugs in it. The headline field (whcih I used) does NOT have enough room to use all of the needed table close/open tags. I did test this in 3 browsers (IE, FireFox, Opera) and they all handled the missing tags by assuming I wanted to close them, when I closed their containing parent.

This solution has been tested on three browsers, and across multiple resolutions and dpi settings. It was tested with my own div overlay (underlay?) strategy.

It is very important that you keep the lines which set the px sizes for font size and line-height. You may change the px values However, I do not recommend changing px to any other sizing method. IF you choose to change the font and/or line-height size you will need to adjust the clip values as well.


Put the following code line in your Headline field

</table></table><table class=H><td><p><table><td>

Put the following code block with your style blocks. The end of the Influences is a good place.

<i class="off">! import Profile Views into Div Overlay
!-code author:Eileen <a href="http://spiff-myspace.blogspot.com/">myspace tutorials and customizing code
!-The below style block is to be used with code in the headline which does the following:
   - closes tables, opens table with class H, opens Paragraph, blances open and close tables
</i>
<style>
{! recover block of text next to and under profile image !}
table  table table.H, table table table.H table {display:block;}
{! remove what we can of the view pics videos links !}
table table table.H a {display:none;}

{! control hieght of text in our Paragraph !}
table.H p {visibility:visible; line-height:20px; }
{! control height of carriage return !}
table.H p br {display:inline; line-height:10px;}
{!-online now icon removed to prevent it from messing with spacing-!}
table.H p img, table.H div  {display:none;}

{! position 60px higher than you want the page views -!}
table.H {position:absolute; top:0px; left:0px; margin-left:0px; width:220px;
 z-index:9 !important }

{! clip off everything except the page views. !}
{! you may need to modify the below clip values !}
table.H p {position:absolute; clip: rect(80px, 180px, 110px, 0px); z-index:9 !important } 

{! style page views text.  Size effects above clip values !}
table table table.H td  {  color:maroon !important;  font-size:15px !important; font-weight:bold !important;}

{! insure our page views can show on top.   !}
div.myCoreDiv {z-index:0 !important; }
</style>

Notes on positioning
When positioning the page views:
- Measure from the page center, based on the complete page, not the core div. This element is NOT inside our core div, as our other content is. This means positioning will not be as accurate cross browser/resolution.

- The top px value needs to be HIGHER, than the desired location by the SAME amount you clipped off the top.


Some notes on use of clip
Sets the shape of the element. The valid shape value is: rect (top, right, bottom, left)
I do not believe it works with any other shapes (I had no luck using any other shape)
The element must be positioned absolute for it to work.
No coordinates need to be supplied, however position:absolute must be applied.

I have had luck with clip on element types
image (that is how my online now icon solution works)
paragraph

Supposedly it works on any element where overflow works. (I guess that means it works on tables in FireFox but not in IE :-).

mySpace Band Page hide URL blue border remove

mySpace band/artist page URL hide or style

Please refer to the following myspace page to see how the URL space is structured.
This is an actual myspace page, with style code added to show the div, table, cell layering, parent relationships, classes, and other attributes which can be used to manipulate this space.
Band 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

Using the key to the left of the page, and looking at the URL space we can determine the following:
The actual text is in a div.
We can remove it as follows:
You can put this code at the top of the Bio (or wherever else you are keeping style blocks).

<style>
{!-eliminate text from url space-!}
table table table table div {display:none;}
{!-recover div in friend and comment spaces-!}
table table td.text table table div {display:block;}
</style>

Notice that I had to recover the div elements in my friend and comment spaces, after removing the div elements from my URL space.

What is left, of our URL space, is a think blue border.
We have a few choices for dealing with the URL blue border. It is actually a background color, applied at level:
table table table td
Because we do not have a class assigned, it is not possible to remove this color without effecting other tables.

If you do not mind removing the color from other tables as well, you can do this:

<style>
{!-eliminate blue background from url space-!}
table table table td {background-color:transparent;}
</style>

Personally I do not like the effect this has on the general table and shows table.

I prefer to just hide this url blue border (background) by hiding it under the contact table.

<style>
{!-hide blue url border under contact table-!}
table table table.contactTable {position:relative; 
top:0px; margin-bottom:-45px; }
</style>

myspace band general member since band members hide style

MySpace Band Page General Table, Hide or Style

Please refer to the following myspace page to see how the General Table space is structured.
The below link goes to an actual myspace page, with style code added to show the div, table, cell layering, parent relationships, classes, and other attributes which can be used to manipulate this space.
Band 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

Using the key to the left of the page, and looking at the General Table space we can determine the following:
The general table is three tables deep (as are all of our content tables).
The table is NOT assigned to a class, making it difficult to address uniquely.

Hiding this space completely with out effecting other page elements is difficult.
IF you are willing to replace the space with something else, which is at least 60px in height, this is easily accomplished as follows:

- do NOT enter anything in the band website field. This way this field will NOT show up in the table.
- Put data into the Band Members section to close off the existing General Table, create a div (to hold your custom content, and remove (display:none) the rest of the general table.

The following code block goes in the band members section. You can put any content you want inside the div. Alter the div height as needed to accomodate your content. You can use height:auto as long as your content is at least 60px in height.

<i class="off">!-replace  General Table-!
!-<a href="http://xiii.us/v/">myspace tutorials and code-!</i>
</td></tr></table>
</td></tr></table>

<div class="myGeneral">
your div content here
</div>

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

<style>
{!-hide row headers in General Table-!}
table table table table td span.lightbluetext8 {display:none;}
{!-Position custom Div which will replace General Table-!}
div.myGeneral {position:relative; top:-60px; margin-bottom:-60px;  background-color:white; border:2px pink solid;  width:300px; height:60px; }
</style>

<i class="off">!-END block to replace  General Table-!</i>

It IS POSSIBLE to remove this space, without replacing it.
However, it takes quite a chunk of code, mostly code to reverse the effects on other page elements.
This would require I do the following:
Add additional classification to the profile info area (which does not have a class assigned). I would do this in the headline section.
I would then hide, and minimize to almost nothing; the remainder of the general section.
I would then restore the contents of the profile Info area (using the classification I added).
I would also restore elements in the contact table, using class table.contactTable.
I would restore the URL using the div layers.
I can remove the General header, and then restore it in multiple other places.
So while this is possible, I am not certain it is really worth the effort; when it is not that hard to just cover the remaining content, as I did above.

Remove the Member Since label and text

I created this code for someone who asked the question in a form I frequent.
I am not sure it is worth the work, but this is the code I came up with (it worked for the individual who requested it).

Make sure you don't have anything in the web address field, we will re-create that cell, and then you can add in what you want.

<i class="off">! remove member since !
<a href="http://xiii.us/v/">myspace tutorials and code</a>
! close off general sub table so we can re-create !
</i>
</td></tr></table>
<i class="off">! re-open table, assigning a class !</i>
<table class="myGeneralSub" cellspacing="3" cellpadding="3" width="300" align="center"  style="background-color:white">
<tr class="myBandWeb">
 <td class="myRowHead">
<span class="lightbluetext8">
Web Site
</span></td>
<td class="myContent"><a href="YOUR WEBPAGE URL">
TEXT TO GO WITH URL for webPage
</a></td></tr>
<tr class="myMembers">
<td class="myRowHead"><span class="lightbluetext8">Band Members</td>
<td class="myContent">
PUT YOUR BAND MEMBERS HERE

<style>
{! non IE hide member since date to deal with FF layering issue !}
td[id*="ProfileMember Since"] {visibility:hidden !important;}

{! style the cells we created to match the cell mySpace code creates !}
td.myRowHead {background-color:b1d0f0}
td.myContent {background-color:d5e8fb}

{!-eliminate row headers-}
table table table table span.lightbluetext8 {display:none;}
{!-restore row headers in our new  table-!}
table table table table.myGeneralSub span.lightbluetext8 {display:inline;}

{! move our table up, top border prevents need to position as perfectly !}
table.myGeneralSub { border-top:10px solid; border-top-color:6699cc; margin-top:-40px; z-index:7}

{! change layering of General table Header so it sits on top !}
table table table table td.text span.whitetext12 {position:relative; top:0px; z-index:9}

</style>
<i class="off">! END BLOCK to remove member since !</i>

Replace mySpace URL with text, link or Video

Replace the myspace URL with a Link, Video or Text

If you want to place an image in this space, see this article:
myspace URL style, hide, replace with image

If you want to put custom text in this space, the easiest way to do this, is to create an image, which consists of the text, and then use the link above.

While the below strategy is more complex, than what is needed to place an image or text in this space, it will work.
The below is useful if you want to place a link, video or other interactive content into this space.

If you want to place a link or video in this location than I recommend that we approach the problem differently.
Instead of asking "How do I put a Link (or Video) in my URL Box", ask "How do I place a link or video in the page location where the URL box now resides".

There are multiple options for doing this.
Try to avoid strategies which involve absolute placement or Relative placement which uses large px values. Also try to avoid right and/or left positioning, this is almost impossible to get lined up so it looks correct in multiple browsers and/or resolutions.
I use this strategy:
step 1) Remove URL box
step 2) Create a custom table (or div) above my Interests Table. This way the left/right placement is controlled by the table structure already in place, and we do not have to adjust it.
step 3) Place my content in my custom table.
step 4) Use relative placement to move my custom table UP above the music player.

Because the content between the top of the interests table, and the location of the URL is known and controllable, it is reasonable to use relative positioning to move over this area. the music player height is static at 51px (unless you have changed it or myspace changes the default code). The element, in this space, which seems to vary the most between different browsers seems to be the carriage return. We will want to explicitly set this, so that we have more control over the exact distance

The below code combines the above steps. This code goes into the General Interests Section.

<span class="off">!-START Create Custom URL Table-!</span>
<style>
{!-Eliminate the residue Interests and General Headers-!}
table.interestsAndDetails {display:none;}

{!-Control size of Carriage Return-!}
br {line-height:11px;}

{!-Eliminate the existing URL table-!}
table.userProfileURL {display:none;}

{!-Create space under the contact table for our new URL box-!}
table.contactTable {margin-bottom:40px;}

{!-Move the New URL table UP over your Music Player-!}
table.myTableL1 {position:relative; top:-125px; margin-bottom:-50px }

{!-Move up the Interests table slightly-!}
table.myInterests1 {position:relative; top:-10px; _top:0px; margin-bottom:-10px; _margin-bottom:0px}
</style>

<span class="off">!-Create Custom table above Interests Table-!</span>
<span class="off">!-Close out default Interests Table-!</span>
</td></tr></table>
</td></tr></table>
<span class="off">--!Begin CUSTOM Table!--</span>
<table class="myTableL1" style="align:center; border:3px DarkBlue solid;  background-color:lightblue;  width:300px">
<tr>
<td valign="middle" style="width:100%; height:33px;">
<center>
YOUR TABLE CONTENT GOES HERE
</center>
</td>
</tr>
</table>
<span class="off">!-ReOpen Interests Table, Create Headers-!</span>
<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</span>
</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 </span>
<td width="175" bgcolor="d5e8fb" style="WORD-WRAP: break-word">
YOUR GENERAL INTERESTS GO HERE
</td>
<span class="off">!-END Create Custom URL TABLE-!</span>

My Space Left Side, Structure, Hiding, Styling, and More

I highly recommend upgrading to myspace 2.0 however, if you are still using version 1, the code on this page works.

The following page has a diagram, which shows the layout of the myspace page.
Click Here: MySpace Page Layout
It shows the depth of each page elements.
By depth I mean the number of layers, of div, table, and cells. (I do not show rows).

Notice the left column, it has a black dashed border. It has no class assigned (the right column has class text assigned, it is shown in red dashed).

EVERTHING in this column has a class assigned.

It has the following classes:
profileInfo
contactTable
userProfileURL
interestsAndDetails
userProfileDetail
userProfileSchool
userProfileCompany
userProfileNetworking

There is also an object (addressed as an embed in FF).
This is addressed as follows:
table table div object,
table table div embed

If I want to hide everything on the left side I do this:

<style>
{! hide left side; code author:Eileen xiii.us !}
table.profileInfo,
table.contactTable,
table.userProfileURL,
table.interestsAndDetails,
table.userProfileDetail,
table.userProfileSchool,
table.userProfileCompany,
table.userProfileNetworking
{display:none;}
{! additional code if you want to center what is left !}
table table div {position:absolute;}
table table td.text div, table table table div, div table table div, table table div div {position:static;}
table img {display:none;}
div table img, table table td.text img {display:block;}
td {width:auto !important;}
</style>

The above code does NOT hide the music player. The code to center what is left of the profile does apply position:absolute to the div surrounding the music player, to get it out of the way.
If you want to hide the music player, you can do this using the build in myspace functionality.
If you want it to play, while hidden, I have the solution here:
Hide music player myspace 2.0 and myspace version 1, playlist and single song player

OR instead of hiding, you can minimize and put in the top corner.
For that code go here:
myspace music player skins for playlist and single song players, myspace 2.0 and myspace 1.0
select the template that shows the size you want to use, it has the single button size, along with a size to show the play/stop, forward, back and volume.
Then select
[position player]
and select where you want to put the player.


For more code which can be used to manipulate the left side of the profile, Click on the Subject in the below table:

Styling the Profile Info,Name (class nameText), Picture,Headline, Sex, Age, Location

Text Next To Profile Image,age, sex, location,Hiding, Changing, Styling

Importing Mood Thing into a Div Overlay

userProfileURL URL Box,hiding, styling the URL space

Picture in place of URL box

Custom Content in URL space

Interests Table, Styling, Hiding, Changing headers

Custom table Above Interests Table

Custom Interests Table or Custom Table BELOW interests Table

Details Table,Styling, Creating Custom Detail Table

Have a Nice Day; Thank you for Visiting :-)

How to Hide entire left side of myspace OR
hide whole left side myspace.