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