-Notes (v.4)
- Reasons why this might not work for you:
1. you have not completely removed a previous code used to hide the comments or place comments in a scrollbox.
2. you have added extra <table> tags or closed off default tables in order to hide sections of your profile.
example: <div style=”display:none;”><table><tr><td> ect ect..
3. there’s quite a few things that will conflict with this.. trial and error! - (FireFox Only)- If your friend has a long name with no spaces (example: ihavealongannoyingnameXcore) it will stretch out the table cell that it’s in and throw everything off. Check that out if something doesn’t look right.
- quick lesson on “position: relative”
top: -45px = moves up 45px
top: 45px = moves down 45px
left: -15px = moves left 15px
left: 15px = moves right 15px - Any attributes in red can be adjusted to your preference.
- Steps 2 & 3 go in your style tags!
STEP 1. - Choose your type of profile.
(PERSONAL) - place at the very bottom of your “I’d Like To Meet” section:
</td></tr></table></td></tr></table>
<div class="comt"><table class="off"><tr><td><table><tr><td>
(BAND) - place at the very bottom of your “Bio” section:
</td></tr></table></td></tr></table></td></tr></table>
<div class="comt"><table class="frnd"><tr><td>
<table class="off"><tr><td><table><tr><td>
STEP 2. - Add ONE of the codes to either hide or keep the top 8+ friends.
Comments WITH top 8+ (DO NOT EDIT)
.comt td, .comt table{width:0px!important; height:0px!important; background-color:transparent!important; border:0px!important; _padding:2px!important;} .comt .comt td, .comt table, .comt td a img, .comt td td td a, .comt td b a, .comt td .redlink{visibility:visible;} .comt td td td b{top:0px; display:inline;} .comt .redtext15{display:none;} .comt td b, .blacktext10 {display:block;} .comt table, .comt td b, .comt .btext, .redlink{position:relative; top:-9px;} .comt {z-index:7;}
Comments WITHOUT top 8+ (DO NOT EDIT)
.comt td, .comt table{width:0px!important; height:0px!important; background-color:transparent!important; border:0px!important; _padding:2px!important;} .comt, .comt td, .comt table, .comt td a img, .comt td td td a, .comt td b a, .comt td .redlink{visibility:visible;} .comt td td td b{top:0px; display:inline;} .comt td td td table, .comt .redtext15, .redlink, .comt .btext, .frnd{display:none;} .comt td b, .blacktext10 {display:block;} .comt {z-index:7;}
.comt table, .comt b {position:relative; top:-39px; _top:-30px;}
* DO NOT add the code in red to band pages.
“_top:XXpx;” should always be about 9px less than the “top:XXpx;”
STEP 3. - Changing Position, Sizes, & Styles.
The MAIN COMMENT DIV
JB{The Main: comment div;}
.comt {width:450px; height:390px; overflow:auto;
background-color:white; border:1px solid; border-color:black; position:absolute; top:400px; left:50%; margin-left:-100px; }
JB {Timestamp: width;}
.blacktext10 {width: 320px;}
* the timestamp width should be roughly around 130px less than the main Comt Div.
- HIDES AN UN-HIDES -
JB{hides: online now images in comments & top 8}
.comt td td td .ImgOnlineNow{display:none;}
JB{hides: online now images only in top 8}
.comt td td td td .ImgOnlineNow{display:none;}
JB{hides: comment timestamp}
.blacktext10{visibility:hidden;}
JB{hides: Displaying XX of XX comments(View/Edit All Comments)}
.comt td b{display:none;}
JB{hides: name has XXX friends}
.comt .btext{display:none;}
JB{hides: View All of names Friends link}
.redlink{display:none;}
JB{hides: friend name links}
.comt td td td a{visibility:hidden!important;font-size:0px!important;}
JB{unhides: friend name links in top 8 (fix for above code)}
.comt td td td td a{visibility:visible!important; font-size:10px !important;}
JB{hides: friends name links only in top 8}
.comt td td td td a{visibility:hidden!important; font-size:0px !important;}
JB{hides: the Add Comment link}
.comt td a{visibility:hidden;}
* hiding friend name links also hides all links in comments.
- RESIZE COMMENT IMAGES -
JB{resizes: images posted in comments}
.comt td td td img {width:300px; max-width:300px; _width:300px !important;}
JB{resizes: linked images including friends profile pic}
.comt td td td a img {width:90px; max-width:260px; _width:90px !important;}
JB{resizes: online now image}
.comt td td td .ImgOnlineNow {width:80px!important;}
JB{resizes: top 8 friend pics}
.comt td td td td img {width:80px!important;}
* the “_width:” is for IE only
- ADDONS & EXTRAS -
JB{moves comment timestamp down}
.blacktext10 {position:relative; top:20px;}
JB{adds comment spacer line}
.blacktext10{border-bottom:1px solid; border-color:black;}
JB{add background image to timestamp}
.blacktext10{background-image:url(url_to_pic.gif);}
JB{center Displaying XX of XX comments View Edit All Comments}
.comt td b {text-align:center;}
JB{comment section scrollbar color}
.comt {
scrollbar-face-color: 000000;
scrollbar-highlight-color: 000000;
scrollbar-3dlight-color: 000000;
scrollbar-shadow-color: 000000;
scrollbar-darkshadow-color: 000000;
scrollbar-arrow-color: FFFFFF;
scrollbar-track-color: FFFFFF;
}
- SELECTORS FOR MORE ADVANCED CODERS -
JB{all text in comments}
.comt td td td, .comt td td td b {}
JB{Add Comment link (all links)}
.comt td a {}
.comt td a:hover {}
JB{links in comments and friends name}
.comt td td td a {}
.comt td td td a:hover {}
JB{Displaying XX of XX comments View Edit All Comments}
.comt td b, .comt td b a, .redtext {}
.comt td b a:hover {}
JB{View All of names Friends link}
.comt td a.redlink {}
.comt td a.redlink:hover {}
JB{name has XXX friends}
.comt td .btext, .comt td .redbtext {}
Hey, I was wondering which section the codes for step numbers 2 and 3 go in. Like…About me, Intrest, I’d Like to meet etc.
Can you please get back to me by my e-mail.
Please and thank you!
:D,
Key
If you check out my page you’ll see that my progile isn’t very long and the comment table is about 500px below the rest of the profile. I tried eding the code and it won’t budge. Whatthefuxup? Someone help me.
Fixed :)
Dear key,
I’d like to meet.
I have a private profile so you can’t see what my profile looks like but I did create a temp one trying to figure out the coding.
http://www.myspace.com/101431528
Mine is completely complex and I don’t know html or div at all. The girl that did mine quit doing them and I get no replies on the help forums.
I want to put my comments in a DIV in between the section labeled “Who I’d like to meet…” with my top friends graphics and the section titled ‘All my MySpace friends Rock’. I just want the div to be about twice the height of this box but the width of the other full size Divs. I want the thing to scroll but I don’t it to automatically resize graphics or anything. Is this impossible? :) I can send you the coding that is in there if you can let me know if you can help me - frankly I’ve pretty much given up since no one will answer me lol
Not that I know of. Just place the code for the comment box between the other codes where you want it placed.
Now for another problem.
In MSN my myspace page looks fine. When using firefox the comment div is in a different spot on the page. And most of my coding doesn’t work. Is there any way to fix tht?
This is a great tutorial.
I use it all of the time.
THIS TUTORIAL HAS THE APPROVAL STAMP OF FOBB MOBB INCORPORATED
(Good ish, thanks a lot)
Okay, I have been trying to put my comments into a div box for the past two days, and cannot get it to work. This is the best tutorial I have found, but I still cannot get it to work. My question is, does all three of these codes still go into the ‘who i’d like to meet section’ if I’m working with a div code that is using the ‘intrest and music’ sections? Should I place them in this space…
COMMENTS GO HERE
Thank you for any help,
Ashley
Sorry, I didn’t know that would code it, but it is the divide box 5 code
This is the greatest work on all of myspace.
I’m really having trouble with putting the comments on my profile. I would like to know where the codes to steps 2 and 3 go.
Hi, I used this code on my band’s page. It looks fantastic and works extremely well, except for one thing - a mysterious, almost invisible 100 x 100px square has appeared in my profile and is affecting all the content (links, image rollovers) it overlaps with. You can see it more clearly in the screenshot:
http://www.fonkmacheen.ukonlin.....enshot.jpg
Any thoughts?
when I choose the “with top 8″ option, the “me has XX friends” is pushed so far up it gets cut off. any suggestions?
It means there’s flash embeded somewhere and typed incorrectly. Can I just get my top 8 in a div? I don’t want the comments.
I DON’T UNDERSTAND .. I MADE A UNICODE BEFOR.. ? I DON’T KNOW HOW TO PUT THIS TOGETHER I BEEN LOOKING ALL OVER FOR A SCROLL BOX FOR ONLY MY COMMINTS ..=( THIS SUCKS
awesome tutorial!
just 2 questions though: how do i change the font-size of the comments? and can i remove my friends’ name in the comments as well (not only in the top8)?
Thanx a lot anyway, my profile looks a lot better now! :)
the tutorial works, but not exactly for what I wanted it for. if you go to my profile (linked in name, just fyi :), the comments in the scroll div stretch it out and make a side scrollbar necessary. I don’t have any big images in my comments, and I’ve been trying for forever to resize the comment tables. but I can’t. does anyone know how I can resize them?
it worked on one profile but now i’m creating another and i want my comment div to be like 300px wide without scroll but the comments just keep going.help?
http://www.myspace.com/frightdevin
I have a question. The tutorial is great, but is there anyway to define the width of the comment text, so that it has a word wrap effect. Ideally, I want to get rid of the horizontal scrollbar in the div. Thank you.
to above look in main tag code for .comt {width:somethingpx; height:somethingpx; overflow:auto;
Hi
Very informative this site!
I’ve been all over this forum, read everything, kinda get it.. sort of.. lol. All I want to do is widen the text in my comments to about the same width as my friends area.. I don’t want a scroll box, or comment box, and don’t need comments in a separate div unless that’s the only way to do this. I just to widen the comment text width, nothing else. Can you check my code? Do I have something in there preventing me from doing this? Can you advise? Thanks in advance :-)
Ok so I tried out this tutorial because I have been wanting to do this forever and I can’t get it to work right. I can get it to display the box where it should show comments but nothing shows up inside. Just a copyright myspace thing … Any ideas???? I am completely clueless as to why it is showing the div for the comments at the bottom but nothing inside of it. PLEASE HELP!!!!!1!!1!!
Im not exactly sure where steps 2 and 3 are supposed to go… can anyone give me some feedback? would be appreciated
make that step 3 only =]