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>