myspace code stuff

Table of Contents to my Myspace Stuff

2007-10-31T23:59:00.000-07:00

myspace 2.0 contact table code generator, contact tables.

myspace 2.0 and Myspace 1.0 music player skins for standard and playlist players.

MySpace Page Customizing Article Contents

Music Player Skin Code Generator over 2000 plain color skins and over 1000 image skins

css mouse over hover effects

MySpace changes, problems, updates, code fixes related to recent changes

customized online now icon code that works

Page Layout, Layering, Classes

MySpace Page Layout Showing Divs, Tables, Cells, Classes (Regular and Band Page)

MySpace 2.0 showing layout, class info, id info, structure and more
MySpace 2.0 showing layout, class info, id info, structure and more, slightly better view of the page, but use the above link to see the key

MySpace Blog Page Customize Style

MySpace 2.0

I am updating my older articles, to all include the information for 2.0.
Here are some links to some myspace 2.0 specific things.
MySpace 2.0 MySpace 2.0 show only last comment, show fewer then 50 comments
MySpace 2.0 Put friends in scroll box
MySpace 2.0 put comments in scroll box, scrolling comments
MySpace 2.0 Div Overlay
MySpace 2.0 Add a Custom Section

MySpace 2.0 Skinny Profile
MySpace 2.0 music player, playlist and single song player, resizing, styling
MySpace 2.0 top section, profileInfo, mood, contact table, default image, basic info, mood, view pics|vids; hide stuff, style stuff, custom mood, custom online now icon, custom contact links, url, hide individual elements in this space, or the whole space
Huey's Blog, he is way ahead of me in publishing basic 2.0 tweeks. Sometimes we cover the same material, but we often end up with different solutions (because there are so many different ways to do stuff). So if one of our solutions does not work for you, try the other person's solution. If neither works, ask one of us.

DIV OVERLAYs

Div Overlay Tutorial MySpace Band Page

Simple Div Overlay Tutorial for MySpace Page

Simple MySpace Div Overlay using Floating Div blocks inside a Core Div

Turn your mySpace page into a Spoof Deleted or Error Page

Music Players and Videos

Music Player Skins apply You own or Use one of Mine

Minimize Standard Player to just the Start/Stop button, and move it to the top corner

Hide MySpace Music Player (includes Band 4 Song Player)

Resizing and Moving the MySpace 4 song music player

Video Posting Guide Blogger and mySpace

Top Page Area

Top Navigation Menu Bar, Style, Hide

Top area, Ad Banner, Short Cuts, Google Search Form

Place a Custom Top Banner MySpace

Band Page Top Area and Menus Including Maroon Nav Bar

Ad Banner Un-Hidding if Hidden, Understanding, Styling

LEFT

MySpace Left Side Styling Hiding

Top Left ProfileInfo MySpace Profile Img, Last Login, Location, Age, Sex, Styling

mySpace Band Page Top Left Profile Image, Location, Last Login, Customize and Style

Contact Table Custom Myspace

mySpace URL box userProfileURL hiding, styling

mySpace Interests Table Hiding, Hiding Rows Labels, Styling (coloring/sizing)

mySpace Details Table userProfileDetails hiding, styling, creating custom Details Tables

RIGHT

mySpace Right Side Hide and Style Routines

Status /Extended Network box in top Right, style, replace with image

MySpace Blog latestBlogEntry, hiding, styling, importing into Div

Create Custom Table (Div or other Content) above Blurbs

Blurbs (About Me/To Meet) Styling, hiding, etc ...

Calendar MySpace Styling Hiding Moving

MySpace Friend Space, Styling, sizing, coloring, hiding, moving

MySpace Scrolling friends Comments

Styling myspace friendsComments, sizing, coloring, font, hiding, moving

Center Friends AND Comments

MySpace Center Only Comments

Friends and Comments Side By Side Bottom Center

BOTTOM

MySpace Bottom Links, copyright cc, Gray background

Create Custom Content at Bottom of Page, just above Bottom Links

Band Page

I cover the Band Page Specifics in many of my other Articles, if the Element is on Both the Band Page and the Standard Page.

mySpace Band Page Shows Hiding, Styling, Moving, importing into Div Overlay

Band Page Top Area and Menus Including Maroon Nav Bar

mySpace Band Page Top Left Profile Image, Location, Last Login, Customize and Style

URL myspace Band Page
Band Page General Section, member since, style

Div Overlay Tutorial MySpace Band Page

OTHER

Minimize or make myspace page skinny

One column Centered Layout

Picture placement and Alignment MySpace, Blogger, other web pages

image effects change image when hovering over

MySpace Eliminating Excess White-Space

Section and Table spacing

Firefox Marquee Bug, Direction Up or Down

I hate splinks for many reasons

The latest Myspace Changes, problems, fixes

2007-07-11T20:07:00.000-07:00

In an effort to maintain fewer blogs, I am merging my content.
This article has been moved here:
MySpace code changes problems fixes

General Answers to Questions Hitting this Blog via Google Queries

2007-06-20T17:51:00.010-07:00

[note added Aug 24 2007: This list won't get any longer. Google Queries are no longer hitting this Blog, not any, it fell way out of the rankings. So I probably going to post to one of my other blogs that has a better ranking.]

I have decided, that if a Google Query, puts my blog in the number one slot, and I don't have the answer to the query currently in my blog, and I know the answer, I will attempt to answer the question in this thread.

Query: "why are the bottom links on the right side myspace".

I see this symptom a lot.
The cause is the opening of tables, without closing them, usually done at the end of the meet section. Often this code is given out as a means of putting the friends and comments in a div, sometimes used to hide them, or move them.

Hint: AVOID CODE which Opens Tables with out Closing the same number of Tables.
This throws your profile off balance.
When the code encounters a close table tag, designed to map up to a specific table, it instead maps to the table your own code has inserted.

It is not necessary to code this way, to accomplish any of the tasks I have seen this code being used for. So unless the goal was to suck the rest of the page into the blurbs section (suck it all the right side, and have it all effect by any style you assign to your blurbs section) REMOVE the code.
Whatever you are trying to accomplish, there is probably better code available.

MySpace layout

2007-06-20T17:51:00.009-07:00

In an attempt to consolidate my work, this article has been merged and moved here:
MySpace table structure layout showing classes, cells, divs and the location of other attributes which are usable in style commands

MySpace Top Menu

2007-06-20T17:51:00.007-07:00

Customizing the Top Menu:

This article has been moved here:
MySpace Top Menu Styling or Hiding

Absoute Placement woes

2007-06-20T17:51:00.005-07:00

When customizing a myspace page, Absolute Placement Should ONLY be used when you can reasonably Control the size and placement, of the content you are measuring, to do the placement.

Often I see posts (in various forums) indicating that someone's page looks great on their computer, but their friend claims it is mis-aligned when viewed on the friend's computer. Sometimes they are using the same browser other times they are not.
Sometimes it is different operating systems.
[if it is a different browser issue; on the same computer, often this is due to problems with incorrect tag nesting and div sizing (and how each browser handles the error conditions), but I am not covering that in this article, so I will move on.]

Sometimes the problem is caused by an assumption that all one has to do, to get absolute placement correct, is to play with (and adjust) the numbers until it looks right. This is only true if all those viewing the page are using the same browser, resolution, and dpi settings.

The problem is, the myspace default page content is NOT sized using set pixel sizes and absolute placement. It is sized using table cells which auto expand to accommodate content. Font sizes are often not set by px height, carriage returns are often not set to a specific px height, and column width sizing (which effects column height for many types of content) is not consistent. The size of the content is often dependent on a combination of the following:
Resolution
DPI setting
Browser software
and more ...

[note to self: add some examples here, showing how, even with minimal page content, the absolute position of the content can vary significantly.]

This does not mean that I never use (or recommend) Absolute placement, as a way of placing objects on the myspace page. It is only when it is mixed with placement dependent on other things, that it becomes a problem. In this case I recommend keeping the actual px values as small as you can, and doing the movement over a path that is sized as consistently as possible. (i.e. when given a choice of paths, pick the one with the most consistent sizing).

Things you do NOT need Absolute (or Relative) Placement for
1) Centering Friends And Comments (This can be done by closing and opening tables)
(Centering just the comments is one which does need absolute or relative placement)

2) Putting a Video or Link in place of the Blogs and/or Extended network (With one exception)

3) Putting a Link or custom text (which is not an image) in place of the URL box.

4) Getting a Custom Div to place itself neatly under the Ad Banner (and any top menus you choose to keep) and neatly above the bottom links.

When Is Absolute (or Relative) Placement A good Solution Choice?
1) Where there is not a better way to accomplish the task
2) When the measurement, required for the movement, is over a small and/or consistently sized area.
i.e. Measurement from the top of the page, to place something just below the ad banner or top menu usually works o.k. However watch the top menu, it sometimes goes to a 2nd line increasing its depth. I usually set the font very small to avoid this.

i.e. Moving a block up slightly. Often this is easier than trying to remove all the carriage returns and clear gifs causing whitespace.

If you find that you must use absolute (or relative) placement, to move an object, There are some ways to control the sizing problem.
1) Add code to control the size of the objects you must measure over. The size of the carriage return tends to vary a lot. It can be hard set using line-height.
The height of table cells can be hard set using line-height.
The height of tables can be set, as long as you allow for all the expected content.
In many cases you can override the auto sizing of the content, and control the size to some degree.

2) Keep the px values small (if possible).

3) Measure from the closest outer container possible. Container nesting often improves appearance.
There may be a way to create an outer container using the existing table structure, and then place items within the container, using absolute placement relative to the container instead of the page body.

For example, if I want to create a custom Div, I can create my initial Div, such that it naturally falls just under the Ad banner (or the top menu if I choose) without any reliance on absolute positioning. I do this by closing tables, placing my div, and re-opening tables. If I style the div correctly, I can now use this div as the outer container, and position my remaining objects within it, using it as a reference point.
top:0px; right:0px
Now represents the top right corner of my outer div, instead of the top right corner of the page.

Note: If you are placing a div directly under the advertisement, or even the block containing the ad banner and google search, AND removing the bottom links, Absolute placement does work well. The ad banner is sized, using an exact px height.
Just make sure you use code to hide the bottom links, which does not mess with the ad banner.

[more later ...]

Controlling Size of Pictures (and picture links) in Comment Space

2007-06-20T17:51:00.003-07:00

[Modified 5 Sep 07; online icon code change by myspace.]

Controlling the picture size, when the picture is a link, and having the solution work in both FF and IE.

The simple solution (which does not work well for comment images which are links in IE) is this:

<style>
{!-expand width of inner comment space to 100% of friendsComments-!}
table.friendsComments {width:100% !important; }
table.friendsComments table {width:100% !important; }
table.friendsComments table table td {width:0px !important;}

{!-Control size of pictures and links in comments -!}
table.friendsComments table table td img {max-width:100%; _width:300px;}
{!-prevent friends pictures from expanding to 300px in IE -!}
table.friendsComments table table td a img {_width:90px;}
{!-prevent object sizes from messing with column widths -!}
table.friendsComments object {max-width:300px; _width:300px;}

{!-make ugly online icon small-!}
table.friendsComments div img{width:50px;}
</style>

The weakness is that in IE ALL of your comment images, which are also links, size to the same size as the friends picture. This means small (unless you want your friend pictures large.

A more Complex Solution
[NOTE do not use this solution right now. It has multiple comment conditions it does not work well with, and the chances of someone leaving you such a comment are actually quite high. It need to be wrapped in div, with overflow set to hidden. In this case it hides an area with no content anyway, so it is moot (unless someone leaves you a very long text comment without reasonable whitespace).
I plan to fix this next weekend, no time right now.
Or you can use it, and wrap your own div around it or not. ]

[July 13 2007: added a line to prevent the center tag from messing this up in IE]
[July 30 2007: fixed for issue of multiple images floating left in same comment.]
[July 30 2007: Noticed issue with browser needing to sometimes be refreshed to apply the needed style, after following a link and returning. As a result of this I now only apply the complex sizing logic to link images. There is no reason to add the extra "risk" and complexity to images which do not require it.]

Use this solution only if it is important to you that link images, in your actual comments, be allowed to expand to a larger size than your friend's picture.
If you are content to have ALL link images small (friend's pictures and images left in your comments) the solution above is better.)

Problem: IE does not understand max-width (or max-height).
IE sort of understands percent sizing. If I hard set the width of a column, and then set an img width to 100%, it will not make the img wider than the width the column is set to.
However it will sometimes widen the column, as if the image needed all that space.

for example:
Set column width to 300px
Set img width to 100%
Put in an img which is 700px wide.
What happens?
The img sizes to only 300px, but the column still widens to the full 700px (or at least thinks it is that wide as it builds the page).
So while it does control the image size, the column doesn't understand (at least initially), and expands anyway.
I was able to fix this problem through the use of float, however the fix seems to fail to take sometimes, until the browser is refreshed.
This has been tested in limited situations.

<span class="off">
! START CODE to Control Size of Images in Comments.  Allow link images to expand to larger than friend picture.
! If you change the table width (now 450) change the picture width (now 350) to at least 100 less.   
</span>

<style>
{!-set width of comment space, hide width overflow-!}
table.friendscomments {width:450px !important; }

{!-allow inner table and cells to expand to full width-!}
table.friendscomments td, table.friendscomments table {width:100% !important}

{!-so IE knows how wide 100% is-!}
* html table.friendscomments table table td {width:350px !important;}
{!-FF likes this better,  Does IE override the above? sort of-!}
table.friendscomments table table td {width:auto !important;}

{!-force right column at least this wide in IE-}
table.friendsComments .blacktext10 {width:350px !important; }

{!-set comment img width FF-!}
table.friendsComments table table td img {max-width:100% !important;}

{!-set comment img width IE-!}
* html table.friendsComments table table td img {width:350px !important;}
* html table.friendsComments table table td a img {width:100% !important;}

{!-cause content to float left, solves issues with center tag and more -!}
* html table.friendsComments table table td * {position:relative; clear:left; float:left;   }

{!-I hate this thing, you can size it instead of removing it-!}
table.friendsComments div img {display:none;}

</style>
<span class="off">!-END block to control size of images in Comments-!</span>

Example of a Page Where I have this working

Friends and Comments Side by Side Center Bottom

2007-06-20T17:49:00.005-07:00

Friends and Comments Side By Side Bottom Center

i.e. like this:

This solution assumes the following:
1) NO Calendar Displayed (if you do have one, it will show up above the comments, with the comments below it).
2) You do NOT have a video displayed, below the "to meet" section. (This is the myspace default location for video placement).
3) Your Friend section is SHORTER than your Comment section.
4) Your table layer structure has not been modified (via the closing and opening of tables). If you have other code which closes and/or opens tables this MAY not work. it depends on how well balanced you solution is.

Remove any other code you have for changing the position of the friends and/or comments. You do not need to remove style code which modifies the coloring or fonts.

This solution has the following features:
1) Comments and Friends place directly below your other content, and above the bottom links/cc stuff.
2) There is no need to adjust px values, either based on your profile, or as you add additional content
3) This works with multiple browsers and resolutions.
4) The div, containing the friends and comments self sizes, based on the width of the viewers page
5) You can alter the percent values, if you want the friend section narrower than the comment section, or the other way around.

Will we ever encounter a situation which causes overlap?
Yes, The friends and comments, may overlap in the center, if the viewers page is to narrow. However, if they widen the page, the friends and comments will re-adjust themselves. IE does not allow percent sizing for images and objects, so I had to choose a size.

Place this code at the bottom of the "who I'd Like To Meet Section":

<span class="off">!-Start Code for Side by Side Friends and Comments-!</span>
<style>
div.mydclassfc {position:relative; top:0px; width:100%; }
div.mydclassfc table.friendspace {width:50% !important; position:absolute; top:0px; right:0px;}

{!-size and position comments; -!}
.friendscomments {width:49.5% !important; }
.friendscomments td, .friendscomments table, .friendscomments table td {width:100%}

{!-Change border px size to 0 if you do not want a border around your comments;
  or if you only want a line separating comments change border to border-bottom -!}
.friendscomments table table td {border:1px silver solid !important; margin:1px; width:auto !important}

{!keep friend space limited to the width of right side;
   control width and height a friend picture can take !}
.friendspace img {max-width:96%; _width:80px;}
.friendspace td, .friendspace table {width:100% !important;}
.friendspace table table td {width:25% !important;}
.friendspace table table table  { width:100% !important; height:165px !important; padding:0px; margin:0px; }

{!-control size of images and objects in comments-!}
.friendscomments a img {max-width:100%; _width:95px;}
.friendscomments img, .friendscomments object {max-width:100%; _width:250px;}

{!-align top of comments with top of div by removing br -!}
div.mydclassfc br {display:none;}
div.mydclassfc table br {display:inline;}

table.mytclassfc {width:99% !important; margin-left:9px;}

</style>

</td></tr></table>
</td></tr></table>  
</td></tr></table>
</td></tr></table>

<table class="mytclassfc" ><tr><td>
<table style="width:100%" ><tr><td>
<div class="mydclassfc">

<table style="display:none"><tr><td>
<table style="display:none"><tr><td>
<span class="off">!-END Code for Side by Side Friends and Comments=!</span>

Band Page Code
While the above code does work on the band page, the below code is optimized for the band page.
I also switched the friends and comments, so the friends are now left, and the comments right.
Place this code at the bottom of the Bio section:

<a class="i http://xiii.us" href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy9tcy9mcmllbmRzQ29tbWVudHMtc2lkZUJ5U2lkZQ==">
Side By Side Friends And Comments Code by Eileen</a>
<style>
.i {display:none;}
div.mydclassfc {position:relative; top:0px; width:100%; height:auto;}

{! determine how much of the available width friendSpace should take !}
div.mydclassfc table.friendsParentTable {width:49% !important; position:absolute; top:0px; left:0px; }

{! sum of above and below percent should be just under 100.  If you change the below percent width, also change the left percent to about the same !}

{!-size and position comments; -!}
.friendscomments {width:49% !important; position:relative; left:50% }
.friendscomments td, .friendscomments table, .friendscomments table td {width:100%}

{!-Change border px size to 0 if you do not want a border around your comments;
  or if you only want a line separating comments change border to border-bottom -!}
.friendscomments table table td {border:1px silver solid !important; margin:1px; width:auto !important}

{!keep friend space limited to the width of right side;
   control width and height a friend picture can take.
   You may want to make your friendSpace even smaller. !}
.friendspace img {max-width:96%; _width:80px;}
.friendspace td, .friendspace table {width:100% !important;}
.friendspace table table td {width:25% !important;}
.friendspace table table table  { width:100% !important; height:165px !important; padding:0px; margin:0px; }

{!-control size of images and objects in comments-!}
td.columnsWidening img, td.columnsWidening a img, td.columnsWidening object, td.columnsWidening embed {max-width:100%; _width:260px;}
{!if you choose to allow enough space for a 400px width comment content you do NOT need the above, and can avoid the IE issue with needing to enlarge tiny images!}

{!-align top of comments with top of div by removing br -!}
div.mydclassfc br {display:none;}
div.mydclassfc table.friendSpace br,
div.mydclassfc table.friendsComments br {display:inline;}

table.mytclassfc {width:99% !important; margin-left:5px;}

</style>

</td></tr></table>
</td></tr></table>  
</td></tr></table>
</td></tr></table>

<table class="mytclassfc" ><tr><td>
<div class="mydclassfc">
<table><tr><td>

<table class="friendsParentTable" ><tr><td>
<table style="display:none"><tr><td>
<table style="display:none"><tr><td>

<span class="off">!-END Code for Side by Side Friends and Comments=!</span>

If you want to re-size your friendSpace further, to allow more room for your comments, see this article:
Friend Space sizing and Styling

My Space Picture Page

2007-06-20T17:48:00.001-07:00

[Aug 25 2007]
The most recent changes to the picture page code has rendered some of the information on this page false.
I will update this soon. The search is no longer in the span, as it was, and now I am not successfully hiding it.
=====

Due to changes to this area, some of the code being given out to hide some of the top menus, on the picture/photo page, is also hiding the ad banner.
(I was made aware of this when someone asked me to help them recover their ad banner, and I looked at the code they were using). I have no idea when the code change occurred, because this is the first time I have looked at the picture page code.

I made a copy and added some of my own style to better see how the page was laid out.
The below diagram does NOT show all the div and table layers (that looked way too messy). It does show the key levels, along with some other details related to addressing page elements (span, classes, etc ...)

Style Stuff used in diagram
div div	purple solid
div div div div div	black dashed border
table	light pink solid
table table	blue solid
img	magenta border
span	background lightgreen
form	background silver
td td td span	background orange
td b	background white
Classes
div.international	black background
img.googleLogo	red border
span.feature_headtext	Tan Background, blue text
a. BreadcrumbLinkTopRight	dark Green Solid background. There are 2 of these, if you try to move this using absolute positioning, it will stack.
div.feature_subheadLeft	lightblue background, blue text
td.txtRed	arrow things, red border
span.photoCaption	Yellow Solid Border (coloring comes from style set at level span
div.googleafc
div.horz	hotpink background (bottom advertising)
div.googleleafc	white dashed border

Not on the above Diagram:

Blue Line near Top	Defined in a linked style sheet. It is the top border of div id=feature_subheadContainer
Stuff that shows up when you have multiple pages
div.pagingContainer
div.pagingLeft
div.pagingCenter
span.currentpage

Using the above diagram, the code needed to modify the style of the page, can be more easily seen.
I can see that a lot of the page is 5 divs deep, so if I try to hide at this level, I will loose a lot of content, including the ad banner.

I can see that the bottom advertisements are packed neatly into their own class. I can easily bring them back, if I hide at a higher level.

I like what I see with the span (the lightgreen background).
I see a huge ugly area I can eliminate.
I can also see tha tthe use of the span, within my picture area (it is used for the caption and the "X Comment(s)"), has either a class, or a unique way I can address the item. Also this is an option:

The darkgreen area, that has a few links in it, I think it is really poorly place.
Ideally I would like to keep those links, but not there. In the end I choose to cover them, due to limitations on places to put code.

The top menu, above the ad, is a problem area. I don't like it. I would like to get my ad up closer to the top of the page, so my own picture content moves closer to the top.
But there is NO addressing difference, between the Ad Banner and that Top menu.
I could shrink the font, but that means hard setting it at the level of my pictures (if I want captions or links there). I could move up the page body, pushing it off the page. That worked in FF, not IE. In the end I choose to keep it, but eliminate the gif next to the International.

Hide the blue line
<style>div{border-top:0px !important}</style>

Hide the span stuff (shown with light green background on diagram.
It won't hide the picture captions unless you also use the keyword important.
<style>span {display:none}</style>
Unhide the span stuff we want to keep
The "X Comment(s)
<style>td td td span{display:block}</style>
The span in the bottom advertisements
<style>div.horz span {display:block}</style>
OR Instead this:
<style>span{display:none}table span{display:block}</style>

Hide some ugly img stuff, and then unhide our pictures
<style> img {display:none}table img {display:block}</style>

background color, same for div and table.  Some of it needs !important.
<style>div, table {background-color:D9D9D9 !important}</style>

background image for page
<STYLE>body{background:url(URL-OF-YOUR-PICTURE)}</STYLE>

background Music for page  (Works in IE only and ONLY IF the user has multimedia options, with "play sounds in web pages" set to Yes.  I wish this was the case with all sounds coming from the internet :-).
<bgsound src="URL OF YOUR MUSIC" loop="-1" />
Keep in mind that it must be a short URL address.  If this line goes over 70 characters it truncates, and this will not work.
For this purpose I got my own domain name.  

The below statement only effects FF (not IE).  
Move the body up to take up the space the top menus used to occupy
<style>body{position:relative; top:-26px; margin-bottom:-26px}</style>

Move up the table to take the up the space of the menu parts we were able to hide, but not eliminate the space for.
(I only recommend using the below lines as the captions to clear gif files, 
or a photo you do not expect anyone to click on to view on its own page).
I also recommend only using these lines if you have a way to turn off style, 
or are certain you know what you are doing.
If the task requires a set of commands, 
one to DO something, and another to unDO the effect on something else, 
apply the unDO first.  
Keep in mind that the effect of the DO or unDO will each individually 
effect the page for the individual picture if that picture is clicked.

Hide the lower top menu and the bottom links, un-hide level we want to keep
<style>div div div {visibility:visible; font-size:10px}</style>
<style>div div{visibility:hidden; font-size:0}</style>

If you turn the main top menu (the one below the google search) invisible, you may want to move up the table with the pictures in them.
<style>table {position:relative; top:-35px}</style>
Account for the movement we did up and a bunch of that extra space that was already there.  
If you make this value too large, it effects the bottom ad stuff.
In IE I actually got it to crash when I tried to move something outside of its outer container.
<style>table{margin-bottom:-50}</style>
Prevent movement of 2nd level tables
<style>table table {position:static; margin-bottom:0px}</style>

On my own page, I decided to just remove the links to add a comment and the "X comment(s)" thing, and allow the user to click on the picture if they want to do that.
I ended up with these 6 lines of code.
The first 2 I put as captions to actual pictures.
The last 4 I put into the captions of a row of clear gifs along the bottom of the page.

<style>div, table{background:silver !important;border-top:0px}</style>
<style>br {line-height:2px;}</style>

<style> .feature_subheadLeft, span {display:none} </style>
<style>div{border-top:0px !important}</style>
<style>td b, a.BreadcrumbLinkTopRight{display:none}</style>
<style>img{display:none} table img{display:block}</style>

An Example of a page where the above lines were applied:
Click Here

WARNING: remember to close your style tags.At first I thought I could use this to manipulate my page, such as changing how many pictures in a row and such, while allowing me to squeeze in more style commands. Don't Do It. Unless you can turn off style (such as with FF), it can inhibit your ability to do further edits to that particular picture caption, meaning it is difficult to go in and add back the style tag.

Some other ideas:
Put a row of clear gifs on the top or bottom giving you caption space to put in style commands.
This works best, and the bottom, combined with hiding the "Add Comment" and "X Comment(s)" stuff (Users can always click on a picture to get to this functionality).

If you keep the "Add Comment" and/or "X Comment(s)" then you can still use a row of clear gifs, you can put them along the top. On one page I was able to use relative positioning to move the table up, and the "Add Comment" and "X Comment(s)", for the row of clear gifs, ended up under the ad banner. (I guess the ad banner is of some value, besides making the service free*).

For some additional stuff related to the picture page:
Hiding Comments for Individual Pictures:
Click Here, skbryan.com

Some other useful codes:
www.skem9.com picture page There is some stuff there I don't have here.
DO NOT USE THIS LINE: div div div {visibility:hidden}. The rest of the stuff should be fine.
(If anyone has a logon to the skem9 page, maybe someone can inform the page owner of this issue. I don't want to create an account there right now.)

Center Myspace Profile into ONE column

2007-04-18T19:05:00.001-07:00

[ This article has been moved here:
Centering Myspace Profile into One Single Column]

I have gone from an attempt to split my articles out into multiple blogs, back to an attempt to combine them all into one blog.
This reminds me of the trends I see in the work place, with the various work groups.

Center Friends and Comments

2007-04-18T19:03:00.002-07:00

If All you want to do is center the friends and Comments put this at the bottom of your "who I'd like to meet" section:

</td></tr></table>
</td></tr></table>
</td></tr></table>
<table class="myTclassFC"><tr><td>
<table style="display:none"><tr><td>
<table><tr><td>

If you have used the myspace "add video to my profile" the video will move bottom center with the friends and comments. This can easily be avoided by either
1) Putting the video at the end (within) the Meet Section.

2) Creating a custom space under the Meet section, BEFORE the above code block (the one to center the friends and comments) and placing your video there.

Other solutions I have seen for centering Comments:
Placed at the bottom of the Meet section:

</td></tr></table>

This one is given on so many different web pages That I do not know who to credit for it. It was the recommended solution in the myspace customizing forum at one time. But for some reason they changed it to one I think is really bad (but if it works for people, and they like it, then what I think shouldn't matter.)
This one really did work fine. It was this solution which led me to the one I now use. It may be unbalanced, But I believe it is still better than the one currently shown in the myspace customizing forum. (If they are still showing the one which does absolute placement with huge px values.)

The reason I recommend against the solution which just picks up the friend and comment section, and then places it back down using absolute placement, is because VERY FEW pages have consistent enough sizing for this to work. If your page does, then maybe this is the best solution for you.
But I recommend reading this first:Absolute Placement Woes

Calendar, Moving and Formatting

2007-04-18T19:03:00.001-07:00

[Article moved here:MySpace Calendar Structure Styling Moving]

Hide Friends and Comments Show Calendar

2007-04-17T23:08:00.000-07:00

Here I use the same concept I used in all of my other solutions related to friends and comments.
[This block was re-written May 20 2007 to take advantage of new myspace Classes]

<style>
.friendSpace {display:none}
.friendsComments {display:none}
</style>

If you now want to relocate the calendar go HERE

MySpace band Page Hide Everything Code

2007-04-10T21:52:00.000-07:00

The Code on this page, is intended for use IF you do NOT want to display any of the default page content.
The hide methodology used here does NOT allow for default content to be imported back into the page.
IF you want to display any of the default page content (besides the ad banner) use my other strategy.
My other strategy can be found here:
Band Page Simple Div Overlay

The below will hide everything except the ad banner.
It does leave about 30px of extra space under the ad banner, which can be eliminated by using a negative top margin on your div.

<i class="off">!-Hide Everything except Ad Banner, remove most of the space-!
!-Code Author:Eileen <a href="http://spiff-myspace.blogspot.com">myspace code and tutorials</a>
</i>
<style>
{!-display custom div, replace myDiv with class of your custom Div-!}
table div.myDiv {visibility:visible !important; display:block !important}
{!-Ad banner-!}
div table div {visibility:visible !important; display:block !important; margin:0px !important; padding:0px !important; }
{!-most page content-!}
table table, table div, img, form  {display:none !important}
div table div div select {height:0px !important; width:0px !important; padding:0px !important; position:absolute !important; }
div table.navigationbar {display:none;}
div table {visibility:hidden;}
table, tr, td {background-color:transparent}
</style>

Now if you want to do a div overlay you can put the code in any section.
However you MUST take the div up to no more than one table deep.
i.e.
You can use the below code, and put it in any section:

<i class="off">! Div Overlay Shell to use after hiding everything more than one table deep.
author:Eileen <a href="http://spiff-myspace.blogspot.com">myspace code tutorials</a>
</i>
</td></tr></table>
</td></tr></table>
</td></tr></table>

<div class="myDiv" style="height:auto; width:800px; border:1px black solid;">

Div Content in here

</div>
<table class="off"><tr><td>
<table class="off"><tr><td>
<table class="off"><tr><td>

Band Page Hide Friends and/or Comments

2007-04-08T21:14:00.000-07:00

With the new classes, this is really the EXACT SAME CODE as used for the non band page (it was not before).

Hide Friends and Comments:

<style>
.friendSpace {display:none}
.friendsComments {display:none}
</style>

Hide only Friends:

<style>
{! Hide Friend Space !}
.friendSpace {display:none}
</style>

Next re-create what you want to keep.
If all you want is a link, to view your friends, create one.
This can be done several ways.
The quick easy way is to add this to the end of the "To Meet" section:

<a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=6221">View All Friends</a>

Replace Tom's Friend ID (6221) with your own. You can replace the View All Friends with any text you want.

Or, you can create a custom table, just under your bio section, which neatly displays a link to view your friends, and even a header if you want, very similar to what would be left behind if you did a "Hide all of friend space except header and link".
Put this code at the end of your Bio Section:

<span class="off">!--Create Custom Table Under Meet Table With a Custom Link --!</span>
</td></tr></table>
</td></tr></table>
<br>
<table style="border:1px green solid; width:435px; "><tr><td>
<a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=6221">Click Here to View My Friends</a>
</td></tr></table>
<table style="display:none"><tr><td>
<table><tr><td>
<span class="off">!^^END CUSTOM BLOCK ^^!</span>

(Change Tom's friend id, 6221, to your own. Change color and border as desired. For no border change 1px to 0px.)

OR, if you must, you can remove everything except the friends area header and bottom link to view all friends.
But I think it looks much better if you just remove these, and put in your own link (as shown above).

Band Page Hide Friends Show Comments

2007-04-08T21:07:00.000-07:00

[This post has not been updated to reflect the new classes.
Please see this: Hide Friends Show Comments
It is for the non artist page, but with the new classes, it does work for the artist page as well.

==== My Old Code is Below, I was really proud of myself for figuring out how to get the friends into their own class Before myspace gave them a class. But now it is moot. ==================

I start by placing this at the bottom of the band bio section: (This does NOT go between style tags)
Code Block A

</td></tr></table>
</td></tr></table>
</td></tr></table>
<div class="mydclassfc" style="width:500px; visibility:visible; border:1px silver solid; margin:1px ">

<table class="mytclassf" ><tr><td>
<table style="display:none"><tr><td>
<table><tr><td>

(You can alter the color, width and margin px values, to suit tastes)

Next I hide my friends. Because they are in their own class it is easy.
Place this block just above the other block, also in the band bio area.
Code Block B

<style type="text/css">
{!! hide friends !!}
.mydclassfc .mytclassf {display:none}
</style>

If I want a scroll box for my comments, I can add this:(adjust height to suit your page. I used a very low number because I had so few comments and needed overflow to get a scroll box.)
Code Block C

<style type="text/css">
{!! Turn Comments into Scroll Box!!}
.mydclassfc {height:300px; overflow:auto;}
</style>

Another block I recommend using, is a block to prevent large comment pictures from throwing your comment width off.
Code Block D

<style type="text/css">
{!! control comment picture size !!}
.mydclassfc img {max-width:100%; }
* html .mydclassfc  img {width:259px;}  
* html .mydclassfc  a img {width:60px;}
.ImgOnlineNow {width:40px;}
</style>

You can combine all the style blocks (blocks B,C,D) into one, using one set of style tags (open tag on top, close tag on bottom). Or just paste each block I give you separate. Either way works. It all goes in the bio section.

One can use absolute placement to place the comment scroll box anywhere on my page. However I only recommend this if you understand how it effects the rest of the page. It is like picking the box off of the page, allowing all the table margins to re-adjust themselves as if it were not on the page, and then plopping it down on top of whatever is there.
Because our bottom menu is NOT in our div, it will move up, and you may find your comment box sitting on top of it.
However, IF you are using absolute placement for a large percent of the page, the strategy works well.

Another idea is to move the box using relative placement.
This one can leave significant whitespace, where the box was previously located. Sometimes this can be solved by using a negative bottom margin. However I have seen issues with this between the different browsers and resolutions.

If you only want to move the box left or right, relative placement works well, without the whitespace problem.

If you hide your friends, you may want to add a link to view them.
If you are not going to relocate your comment box, it might work best to just put a link to your comments directly above the box.
To do this modify code block [A] as follows:

</td></tr></table>
</td></tr></table>
</td></tr></table>
<span class="myfriendlink"><a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=6221">
LINK TO FRIENDS</a></span>
<div class="mydclassfc" style="width:500px; visibility:visible; border:1px silver solid; margin:1px ">

<table class="mytclassf" ><tr><td>
<table style="display:none"><tr><td>
<table><tr><td>

Change Tom's Friend ID (6221) to your own.

Here is the code combined into one block as I have used it on this example page:
my band test page
Notice that I only close two sets of table/row/cell rather than three, as I do above. The difference is that this will place the comment div to the right instead of bottom center. If you want it bottom center close three groups as I do in the above code.

This code goes in the bio section. If you don't have firefox use Safe Mode. Otherwise I recommend turning off style during the preview/submit process.

<style type="text/css">
{!! that ugly grey backgroundto bottom menu, remove this line if desired!!}
table tr {background-color:transparent}
{! effects url box background as well !}

{!! hide friends !!}
.mydclassfc .mytclassf {display:none}
{!! Turn Comments into Scroll Box!!}
.mydclassfc {height:300px; overflow:auto;}
{!! control comment picture size !!}
.mydclassfc img {max-width:98%; }
* html .mydclassfc  img {width:259px;}  
* html .mydclassfc  a img {width:60px;}
.ImgOnlineNow {width:40px;}

{!additional size control !}
.mydclassfc table {width:100%} 
</style>

</td></tr></table>
</td></tr></table>
<span class="myfriendlink"><a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=6221">
LINK TO FRIENDS</a></span>
<div class="mydclassfc" style="width:100%; visibility:visible; border:1px silver solid; margin:1px ">

<table class="mytclassf" ><tr><td>
<table style="display:none"><tr><td>
<table><tr><td>

(If you use this code block, change Tom's id to your own.)

Another idea for adding links to sections you have removed, is to add in a custom top menu.
I tend to prefer this strategy.
adding a top menu
However if you use it with the band page, you need to adjust the values.
You need to place your menu about 15 additional px from the top.
You should play with the px values to see what works on your page.
The idea is to move up the existing top menu bar, making room for a custom top menu bar in its place.

Hide Friends

2007-04-08T13:51:00.001-07:00

[note: a change occurred to the friend view link this morning. I will not have time to update this article until later tonight. For specifics see this:
myspace code changes fixes updates etc ...

========== original article below =============

Even if You want to keep the Links, to View All Friends, and/or a Header to the area, I still recommend you start with the below block (which hides the entire area)

<style>
{! Hide Friend Space !}
.friendSpace {display:none}
</style>

<a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=6221">View All Friends</a>

Replace Tom's Friend ID (6221) with your own. You can replace the View All Friends with any text you want.
--OR Creating A Custom Top Menu
--OR If you want the link to have its own "box" (or table) you can do something like this, at the end of the To Meet area

<span class="off">!--Create Custom Table Under Meet Table With a Custom Link --!</span>
</td></tr></table>
</td></tr></table>
<br>
<table style="border:1px green solid; width:435px; "><tr><td>
<a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=6221">Click Here to View My Friends</a>
</td></tr></table>
<table style="display:none"><tr><td>
<table><tr><td>
<span class="off">!^^END CUSTOM BLOCK ^^!</span>

(Change Tom's friend id, 6221, to your own. Change color and border as desired. For no border change 1px to 0px.)

Hide Comments

2007-04-08T13:48:00.001-07:00

--Hiding Comments

<style>
.friendsComments {display:none}
</style>

You can provide a Link to View/Add Comments by placing this code at the end of your "who I'd Like To Meet" Section:

<a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=6221">View Comments</a>

And/OR a link to Add a Comment:

<a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=6221">Add Comment</a>

If you want to keep the default header/link stuff, that comes with the comments; it is possible, however tedious. This means that instead of just using display:none on the whole area, I have to hide at a level lower than the level the links reside. This takes MORE code than just creating our own header and link; and gives you less control over how the area looks.

--Hide Comments, leave view all and add comment links
This line:"Showing X of Y Comments (view all/Add Comment)"
Is addressed like this:
.friendsComments table td b
Within that line, the actual view/add are defined as links.
Therefore, I can ditch the "Showing X of Y Comments" and keep the View Add (without the /).

<style>
{! Get rid of inner comment table stuff !}
.friendsComments table table {display:none}

{! render the rest of it not visible !}
.friendsComments table {visibility:hidden;}

{! ditch the friendsComments Header and the space it took up !}
.friendsComments .orangetext15 {display:none}
.friendsComments table, .friendsComments table td {height:auto !important; line-height:0px; border:none; padding:0px; margin:0px;}

{!! USE ONE OF THE BELOW TWO BLOCKS !!}

{! 1:keep the view all  and  Add Comment links.  Postion them left !}
.friendsComments table td b a {line-height:15px; visibility:visible; position:relative; float:left; padding-right:20px; }

{! 2:Instead I may just want to keep an Add Comment Link !}
.friendsComments table td a {line-height:15px; visibility:visible; position:relative; float:left;  }
.friendsComments table td b a {display:none;}

{! ditch a little whitespace !}
.friendsComments {position:relative !important; top:-20px !important; margin-bottom:-20px;}
</style>

Notice how much code this takes, compared to the above solution.

For a similar solution for the friend space go here:Options for Hiding Friend Space

Band Page Friends and Comments

2007-04-08T00:49:00.001-07:00

The thing I liked about customizing the Band Page (over the standard page) was that it is much easier to separate the friends from the comments.
Well, that was before they introduced the new classes.
Now Getting the two into separate classes has already been done by mysapce, and there is no need to do it myself.
This change also made it easier to write code which worked well on both the regular page and the artist page.

Therefore, I recommend using the following codes (written for the standard page and tested on the pand page)

Hide Friends and Comments
Hide Friends
Hide Comments

I was really proud of myself when I had figured out how to get the friends into their own class, prior to myspace introducing the friendspace class. But now it is moot. So why do I hang onto my old code? I suppose there is a chance the classes will go away? Not likely. And if they do there will be so many other changes that I am certain this code will no longer work.
=============My Old Stuff is Below, Don't use it. It works, but there is really no longer a need for the code to be this complex ================================================================
Unlike the standard page, I can put the friends into their own class.

If you want to hide BOTH the friends and comments, do this (code goes at Bottom of Bio section):

</td></tr></table>
</td></tr></table>
<div style="display:none;">
<table><tr><td>
<table><tr><td>
<table><tr><td>

If you want either the view friends link, or the add/view comment links I recommend and you want them under the meet section (where the friends and comments are being removed from) I recommend starting with the below block.
If you prefer to put these links in a top menu go here: adding a custom top menu

If you want the links in the location the friends and comments have been removed from :
Code to hide friends and Comments and create links in their place:

</td></tr></table>
</td></tr></table>
<span class="myFriendlink"><a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=6221">View All Friends</a></span>
<br><br>
<span class="myCommentLink">
<a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=6221">View  Comments / Add Comment</a></span>
<div style="display:none;">
<table><tr><td>
<table><tr><td>
<table><tr><td>

You can add a style block to style the links.

Here is some style code you can use. You probably want to change the colors and sizes. This block can go either above or below the block added in the previous step.

<style>
.myfriendLink a {color:purple; font-size:20px; background-color:yellow; float:left}
.myCommentLink a {color:hotpink; background-color:lightgrey; float:left}
</style>

If I do not want to remove BOTH friends and comments, but want to remove only ONE of them, change location, or change how they look;
I start by placing this at the bottom of the band bio section: (This does NOT go between style tags)
Code Block A

</td></tr></table>
</td></tr></table>
</td></tr></table>
<div class="mydclassfc" style="width:500px; visibility:visible; border:1px silver solid; margin:1px ">

<table class="mytclassf" ><tr><td>
<table style="display:none"><tr><td>
<table><tr><td>

(You can alter the color, width and margin px values, to suit tastes)

The above block does the following:
1) Close 3 layers of table/row/cell
(we can instead choose to close 2 or 4 depending on the desired behavior, if I do NOT want to move the friends bottom center, but want to keep them right, I only close 2 layers).
2) Open a Div which will contain my Friends and Comments but not my bottom menu unless I choose to close 4 layers in step 1.
3) Open 3 layers of tables.
4) assign a class to 1st table opened in step (3) this class will hold my friends, but not my comments.
My friends are a class of their own, but also a subClass of the friend and comment class (the class I name mydclassfc).

What I do next depends on what I want to do. I have several options:
1) Keep comments and hide friends: hide friends show comments
2) Keep friends and hide comments: hide comments show friends
3) Move friends and comments as a block (Use solution for hiding friends, but don't hide the friends, and then add absolute or relative placement to the mydclassfc.)
4) Move friends to one part of page, and comments to another (I have done this, but I have not written it up yet, for the band page. It is actually easier to do on the band page than the standard page. But it does have limitations)
5) Put friends in scroll box (without comments? Possible, but I don't see a real need for this. Do others?)
6) Put comments in scroll box (without friends?, This I see a demand and use for. However so far my tests are not showing that this is going to happen. I got it to work in one browser, but not in both IE and FF)
7) Put both in scroll box. (Use comment in scroll box solution and skip the part to hide the friends)

Center Comments Only keeping Friends in Right Column

2007-04-07T17:13:00.001-07:00

Article moved here:
MySpace Comments Center Only Comments, Leave Friends Right

Scrolling Comment Space

2007-04-07T17:11:00.000-07:00

The article, to create a Scroll Scrolling Comment FriendsComments Box Space on MySpace has been moved to here:
for MySpace FriendsComments Comment Space Scroll Box Space Code click Here