I do not have time to troubleshoot people's code. (Hopefully I will again in the future).
I do not have much time to answer questions (but if it is a quick answer, that only takes me a few minutes, I will try to answer).
I really recommend the following site, for myspace customizing questions: Official Myspace Customizing Forum
That is the most reliable source, and the people I know who enjoy helping, and are quite good at it, tend to hang out there.

Friday, March 09, 2007

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

Labels:

40 Comments:

Anonymous Geert Eichhorn said...

first of all, thanks for being one of the few people out there helping people out with the various div classes of myspace..

the thing is.. i already have and myspace div overlay
as u can see here:
myspace.com/darkshadowstalker
(also put it up as website link)

anyways.. i want to put the friends table from myspace in my div overlay instead of just some pictures and links of friends as i have now...

how can i put the table in my orinal div? or perhaps add i div for this.. that shouldnt be an issue..

if u could help me it would be greatly apriciated..
u can contact me at g@hanazuki.com
or on my myspace page of wich the link is right here :)

thnx a bunch

25/9/07 10:00  
Blogger dylpickler said...

do you have a blog about styling ect. for the comment section?

26/9/07 13:26  
Blogger daniel15 said...

OMG, I love you! Thanks sooo much, this is really helpful :)

16/11/07 17:21  
Anonymous Anonymous said...

100 out of 10 for your page, I myself have spent hours and hours deciphering the myspace codes and trawling the internet for what does what and finally I have found what is the answer to all mySpaces dreams, your page.

Much respect.

Trevor Izzard.

18/11/07 06:19  
Blogger Eileen (aka Coboble) said...

Thank you

18/11/07 23:19  
Blogger Juan said...

Hey!
In the friendlist resize part you are talking about doing the section from scratch. I can manage to do it from scratch too, but when I have the div already made I don't know how to insert each friend to my DIV.

Any tips?

15/12/07 19:52  
Blogger Eileen (aka Coboble) said...

Jaun

Many people just draw the image directly onto the core image, and then use the clear gif method to create the link.

Or you can tediously place each image using absolute placement, and turn the image into a link
(I have been meaning to write instructions for this, but have not yet finished).

Check back a few days after Christmas. I might have something here. (I may even have a tool to create a custom friendSpace).

18/12/07 09:44  
Anonymous GrissomSir said...

how can I stop others from getting my friend info after I hide it...only want to show top four and give no access to others....permanently so they cant copy/paste in other programs to view?

29/12/07 11:52  
Anonymous A Fan said...

You are a hero!

30/1/08 06:42  
Anonymous mattbell said...

Eileen,

Thank you so much for creating such a useful website. You have been very helpful. It really is awesome that you are willing to share all of your hard work and help so many people.

I am having an issue with the above code to adjust the size of the friend space. None of the resizing I am trying to do seems to work in Firefox, but it does work in IE pretty much perfectly.

Any help you can give to resize the friend and comment space in Firefox would be very much appreciated. Thank you in advance!

My test page is located here:

http://www.myspace.com/callezamoramusic

22/2/08 21:30  
Anonymous Anonymous said...

Hey I've modified your 'Sizing the Friend Space' code a bit to fit in an artist myspace I'm doing for a new youth venue in New Zealand. The code works in Firefox, but in IE theres a whole lot of white space around it. It here if you wanna check it out.

myspace.com/zealwest

Any ideas why?

Bryce

24/2/08 22:57  
Anonymous Bryce said...

Any thing? Supposedly its supposed to work in IE! But not for me!


Bryce

4/3/08 15:18  
Anonymous Alex said...

Hello there! First of all, all of these blogs are probably the best thing I have ever discovered on the internet in quite some time!

I am having trouble figuring out how to get rid of the white background located in my friends space.

Everytime that I attempt to use the coding from your Customizing Friends Space section, and I change all the backgrounds to transparent, that part just stays white.

any idea why?

thanks so much


My website is www.myspace.com/jabmusic

6/3/08 20:39  
Anonymous Arlie Box said...

Eileen
I found that if one wants to widen their Friendspace, the following code causes the slide to the right issue with text in FF, unless you want Huge friend pics. (1/4 of 795=198px wide cells & pics.

I found that if I take the section
{!-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:95px !important; margin:0px; border:0px; padding:5px;}
and set the above width to same width as I want the pics, the names will stay centered over the pics both in FF & IE, and they spread evenly across the table width.

Hope this comes in Handy.
Arlie

26/3/08 20:16  
Anonymous Anonymous said...

Eileen, your blogs have been extremely helpful to me thus far, but i'm having a little trouble with the friendspace...i just want to put my top friends in a certain spot on my layout div...i've left plenty of room...can't seem to get them to appear at all...could you email me at feaddict@gmail.com and give me some hints? you can check out my layout so far at www.myspace.com/flawlessescapeband thanks so much......

scott

16/4/08 01:34  
Blogger Kimberly Holmes said...

Hi! This is an awesome tutorial.

I'm wondering, though, how to get the FriendsSpace to show up in a separate DIV from the comments?

Thanks.

6/5/08 13:54  
Blogger Nadya said...

Do you know how to FLOAT images in the Friendspace LEFT, so that you can show more than 4 friends per... row? I would like to show 7 per row instead of 4....

hmmmm

- nk

13/5/08 23:55  
Blogger Nadya said...

OR, better yet....

... do you know how to go about FLOAT-ing your friendSpace (images & links) all LEFT?

I'm trying to do this for my profile: http://www.myspace.com/_nadya

- nk

14/5/08 03:44  
Blogger Eileen said...

Even if you float the images left, you can not change the table structure, which forces only 4 friends per row.

14/5/08 07:36  
Anonymous Anonymous said...

This has been so awesome. I've been trying to find a way to shrink my friend space forever--this is exactly what I was looking for. Thank you!!!

20/5/08 14:52  
Blogger Kimberly Holmes said...

Hello,

It's me again (Kimberly). I am still working on creating the friendSpace in a separate div. If anyone has any tips, please let me know. Thanks!

23/5/08 22:35  
Anonymous YOP said...

Hii Help me ! please .. with ! DIV Myspace Band =( Somebody ???

3/6/08 16:56  
Anonymous Yo said...

hello, it would want to know like putting the friendly box of space but underneath the normal thing, it wanted to put 3 sections like: div.mybio. please Help ! me !!


Yo.

3/6/08 17:10  
Anonymous jon said...

Hi Eileen - I love your work.

I can't seem to get my friendspace and comments table to shrink to fit inside my div so i don't have to use x-scroll. Can you please help me?

http://www.myspace.com/sandovalband

21/6/08 08:39  
Anonymous Brandon said...

I cant seem to find out how to change the text color in my comments section. Any ideas?
Please message the myspace with any answers.

www.myspace.com/striccatestpage

26/6/08 09:10  
Anonymous Anonymous said...

Hi folks, we're trying to do a major Myspace page re-design, all is going well but we don't like the FRIENDSPACE layout.

I'd like to replace this with a bespoke background image and overlaid transparent gif links for each Top Myspace friend (so it looks better) and then just display the text "X has Y friends" generated by Myspace, i.e. the real friends total will go up, but the Top Friends is created manually. Is there any way of getting rid of everything except the text for the total friends? (or do I have to exclude that too?).

10/9/08 08:34  
Anonymous Anonymous said...

hello
how can i get my frinds space to the other side of the profile??

10/9/08 15:13  
Anonymous Gracie said...

I also want to put my friends and coments on the left instead of the right. Im fidling with a code but it puts them to the extreme left and throws off my whole profile....can someone email me a code please???? gracieloco@yahoo.com

21/9/08 17:55  
Blogger u∃∃l!∃ said...

oh,

Well you can start by centering them, and then use relative movement to get them further left.
This is the cleanest way I know.

Start with this:
Center friends and Comments

That strategy works well depending on the layout of the rest of your page.
It will also effect any right side apps, videos placed using the myspace process, calendar if displayed.

21/9/08 19:43  
Anonymous Anonymous said...

How do I change the text that says "--'s Friend Space (top #)"?

28/11/08 15:28  
Anonymous JE said...

I have my friends and comments in a DIV (scrolling). Looks fine in FF, but friend space isn't showing in IE, and in IE you have to scoll down to see the comments (in FF the top friends and the first comment are flush). Any suggestions?

Thanks!

JE

4/12/08 06:22  
Blogger IceCandy said...

hey is there a way to make friends in row of 8 instead of a break after 4 friends?

thanks

6/12/08 09:55  
Blogger u∃∃l!∃ said...

Not without doing one of the following:

- upgrade to myspace 2.0
- create a custom friend space

If you upgrade to 2.0 you can control how many friends go across.
However, you will need to insure that 8 fit across.

6/12/08 13:09  
Blogger dhanai said...

Ive been racking my brain trying to figure out how to get the pictures of my top friends all the same size without scaling... ive tried clipping and overflow but its not really cross browser friendly, or maybe im just doing it wrong... any thoughts?

10/12/08 11:42  
Anonymous JE said...

Hi Eileen,

I posted a comment on 4/12/08 about the friends not showing up in the scrolling div in IE.

Here is the page if it helps:
http://www.myspace.com/djmusicgroup.com

Any clue as to why this is happening? Any help would be greatly appreciated.

Thanks,

JE

17/12/08 17:51  
Blogger Aleah said...

Hi Eileen! I have followed your tutorial and it is so much better than the way i have been doing myspace div layouts before, with lots of negative absolute placement to get everything centered etc..

However, I am trying to customise the friendspace so that it is transparent, showing the image of my core-div behind the pics, as well as making it one line across, 8 pics wide instead of 4. Is this possible? Now it is showing up as a white block, even though i have set all bg attributes to tranparent as far as i can see...

10/2/09 08:08  
Blogger Gaslight said...

Thank you so very much for the codes and ideas on your blog. It really is amazing.

I just have a quick couple questions about my page (http://gaslightrevival.com; it gets directed to our myspace)
1. Why do I have space between my background color and the borders?
2. How can I get my View Friends links back?

8/4/09 23:13  
Blogger Marta said...

Hi! I am having an issue with the friend & comment spaces. Everything works fine except the online now icon is huge!! It seems to be taking on the same size as the friend image but I have the size for the online now image all the way down to 10px. How can I fix this?

Also, how can I change the orange heading for the Comment? I've changed all the settings I can find and still haven't been able to change it.

Thank you!

I just wanted to add that I love your tutorials!

11/4/09 13:10  
Anonymous Anonymous said...

Hi,

I was wondering whether there's a code to block out my newly added friends in the activity stream?

thanks!

7/5/09 10:51  
Anonymous Anonymous said...

Just thought id say a big thanks without your information and guidence in the various topics you have on here i wouldnt have been able to creat my bands page
This is one of the only relable and dependable sources iv found on the net iv never used css code prior to this so its all down to your info :)

heres a link to my site if you fancy having a look at what your info has helped me create its just a test site at the mo as i havnt put it live on our real page yet but i will do very shortly as theres a few small bugs

myspace.com/tonythetrees

thanks again you have been an invaluable source of information and help

tony

4/6/09 09:39  

Post a Comment

Due to Excessive Spam, I have turned on comment moderation.

Links to this post:

Create a Link

<< Home