Scrollable / Div Myspace Comments (complex)

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

<< Back to Code Directory