myspace code stuff for stuff in top right of default profile

Status Box (what used to Be Extended Network Box)

2007-05-27T16:28:00.007-07:00

On you home page you should see this:

The text you enter in the Status Field will replace the "In Your Extended Network" in the box on the upper right of your page. It is only good for text. At one point I was able to put swf files, pictures, and other things in this area. But now I only recommend using this for text.

How to Fix Problems caused by putting certain images and other content into the Status Area.
If you have placed an image (or other content) into this area, and it covers (or pushes out of view) the Update button, you can fix this as follows:

Step 1: Update
You can access the update function by placing the following javascript command into the url address area:
javascript:ShowContent('StatusChange');

What the above command will do is to put you into the "update" mode.
However, in some cases, even when in this state the "clear" is not visible.

Step 2: Clear
To do the clear, we use another javascript command
javascript:AutoFillForm('(none)');HideContent('statusChoices');

This will clear the status box, and put in (none).

Step 3: Submit
If you can now see the [Done] button, push it.

If you can not see the [Done] button, you can submit another javascript command to submit.
javascript:document.forms[0].submit('')

The javascript commands go in the address bar of your browser:
The javascript command needs to be placed in the address area of your browser.
Here are some pictures of a few browsers, showing where to put this command:

Turn Extended Network Box into a Link

2007-05-27T16:28:00.005-07:00

For a newer (maybe easier) solution to this you can now utilize the status field, which you set on your home page (the page you get to when you hit the home link while logged in.)
To see many of things you can use this new status feature for go here: Utilizing the Status Box (what was once the Extended Network box)

If you prefer the old fashioned method (or if you can not fit the code you want in the status box, of if myspace blocks the ability to put code into the status box) below you will find my old solutions.

Code to put a clear gif in the location of the extended network.
This is designed to be used after you have placed a picture in the extended network area using the table background property.
Put a Picture in Extended Network box

This does not work well if you want multiple links on the picture, unless the area for each link is large enough to accomodate the differences in position across platforms (or you only expect your page to be viewed on a single platform, resolution, browser, dpi).

The below code will place a link, and a clear gif, over the top of the extended network box.
The extended network box sits at about 180 pixels from the top. On one platform I found it sat closer to 190, and it varied from 175 to about 190. (Testing in different resolutions, browsers and dpi settings). I am going to use 190, because in all platforms I tested, 190 fell either just below the top of the extended network, or so slightly above the top it was negligent for a clear gif. It is because of the variance in the exact position, that I prefer to start by placing the picture as a background. This way the picture is placed, using the auto sizing and placement which occurs based on the myspace table structure.

I am going to use a clear gif which is available on the myspace server (it is the same one used throughout the default code).
I will size it based on the picture I have placed in my extended network, making it slightly smaller to accommodate the difference in the exact placement across platforms.

You will want to modify the height, to the height of your actual picture (or slightly more or less depending on how large you want the link area). If you used the default extended network height the value given should work for you. You can put this code in the about me. Do NOT put it between style tags.

<div class="myDclassClearGifExtNet"; style="position:absolute; top:185px; left:50%; margin-left:-40px;">
<a href="URL YOU WANT TO LINK TO">
<img src="http://x.myspace.com/images/clear.gif" style="width:400px; height:70px; background-color:transparent; border:none">
</div>

You may want to change the transparent to a color, or add a border, until you have the placement correct.

Custom Table Above Blurbs (About Me)

2007-05-27T16:27:00.008-07:00

This article has been moved:
My Space Put Custom Content Above Blurbs

I am trying to move all my content to one blog, to better enable the use of the built in search functionality.

Blurbs, About Me, To Meet

2007-05-27T16:27:00.005-07:00

This article has moved:
Blurbs about me AND to meet Styling, Hiding etc ...

The Friend Space

2007-05-27T16:25:00.003-07:00

For a perspective of how the friends space fits into the whole page see MySpace Page Layout

table.friendspace	Turquoise Solid Border
Level BELOW table.friendspace
td (or td.text)	thin red dashed
table	hotpink solid
table td	black dashed
table table	purple solid
table table td	blue dashed border
table table table	violet solid border
table table table td	green dashed border
a (LINK)	thick blue border
span.orangetext15	green background
span.btext	lightblue background
span.redbtext	red background
.redlink	background pink

Above 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.

<style>
{!-Size main friendspace table-!}
.friendspace {width:300px !important;}

{!-Size sub-tables and cells -!}
.friendspace table, .friendspace td {width:100% !important}
{!-Size level that holds each friend-!}
.friendspace table table td {width:25% !important; margin:0px; border:0px; padding:0px;}
.friendspace table table table {width:100% !important; margin:0px; border:0px; padding:0px;}
.friendspace table table table td {width:100% !important;}

{!- set to 1/4 of full table width-!}
.friendspace img {width:75px !important}
{!-names above friend pictures.  I keep these small.  FF has wrap issues-!}
.friendspace table table td a {font-size:9; font-family:Arial Narrow}

{!-ditch picture border-!}
.friendspace a img {border:0px !important;}

{!-Gets rid of some excess space-!}
.friendspace br {line-height:2px;}
</style>

The next style block sets colors and fonts:

<style>
{!-ditch the orange behind the header, also effects another table-!}
.friendspace table {background-color:transparent;}

{!-style header-!}
.friendspace .orangetext15 {color:lightgreen; font-size:16px; font-family:Impact}

{!-the sub-header-!}
.friendspace .btext {color:Green; background-color:lightgreen}
{!-If I want the number styled different than the text-!}
.friendspace .redbtext {color:black; border:1px green solid; font-size:15; font-family:Impact; background-color:white}

{!-view all friend link-!}
.friendspace a.redlink {color:darkgreen !important; font-size:13; font-family:Comic Sans MS; background-color:yellow}

{!-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}
.friendspace table table td {background-color:lightblue !important; border:0px !important}
</style>

The Result of the Above Styling:

Other related articles:
Hiding Friends and/or comments
Replace Friend Space with Picture

Moving Friends To Bottom of Page (Under Commnets)

2007-05-27T16:25:00.001-07:00

I would have never considered doing this, had someone not asked me how.

To do this, your friend space MUST be of a known and static height.

This solution assumes the height, of the friendspace, is 250px. If yours is larger, change the 250 to the value you need.
The friendspace is NOT static in size. A friend can change the size of their picture and mess up your measurements. Allow some extra space for this.

Place Friends Bottom Right (under comments)

<span class="off">!-START Block to Place Friends Bottom Right-!</span>
</td></tr></table>
</td></tr></table>

<div class="myDclassFC" style="position:relative; top:0px; ">
<table class="off"><tr><td>
<table><tr><td>

<style>
table.friendspace {position:absolute; bottom:0px; right:0px;}
table.friendsComments {margin-bottom: 250px;}
</style>

<span class="off">!-END Block to Place Friends Bottom Right-!</span>

Place Friends Bottom Center (with comments centered above the friends)

<span class="off">!-START Block to Place Friends Bottom Center-!</span>
</td></tr></table>
</td></tr></table>
</td></tr></table>

<table><tr><td>

<div class="myDclassFC" style="position:relative; top:-20px;">

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

<style>
table.friendspace {position:absolute; bottom:0px; right:0px;}
table.friendsComments {margin-bottom: 250px;}
</style>

<span class="off">!-END Block to Place Friends Bottom Center-!</span>

Replace Friend Space with Picture

2007-05-08T20:58:00.000-07:00

Replace Friend Space With Picture

New Solution based on new myspace classes

<style>
.friendSpace td {display:none}
.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>

Putting Custom Text, links, video or other content in Blog and/or Extended Network

2007-04-22T14:50:00.000-07:00

There is no direct access to the table cells, which contain the extended network and blogs, to modify or add text.

There are 3 strategies which can be used to place custom content in these areas

1) Table Cell Background Image
via style, we can change attributes of the table.
One attribute we can change is the background.
Changing the background to an image, combined with turning the default content invisible we can get a custom image into the area.
This is only an image, This technique (alone) does NOT work if you want to turn the picture into a link, or put in content other than a picture.

You can use this technique combined with a clear gif, to turn the area into a link.
You can turn text into an image if you want text in this area.

Code To Put Picture in Extended Network

Turn Extended Network Into Link

2) Absolute Placement
Another method I have used (and seen other's use), is absolute positioning.
I recommend this ONLY IF
1) YOU ARE KEEPING YOUR BLOGS.
AND
[ 2) You have multiple links in the picture, and/or they are small enough in area, that the exactness of the link area is more important than the exactness of the picture (or table) placement.
OR
3) You are trying to place other content, such as a video or slide show.
]

Why?
Because getting horizontal (left/right) positioning correct, so it is correct across multiple platforms (browser, resolution, dpi) is difficult (maybe not possible).
So there will be some variance. Even vertical alignment is difficult to get perfect. But since we are measuring from the top of the page, and placing the item very close to the top of the page, it works well enough.

The below code will place a video in place of the extended network:
[If you are not keeping your blogs, and you care about left/right alignment, this may not be the best solution.]

<style>
.extendedNetwork {visibility:hidden; height:310px !important}
</style>
<div class="myDclassExtNet"; style="position:absolute; top:190px; left:50%; margin-left:-40px;">
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/pn2aGpje5QA" width="320" height="240">
<param name="movie" value="http://www.youtube.com/v/pn2aGpje5QA">
</object>
</div>

(myspace will change the code, but that is fine, I just start with the above and let them add in what they want.
I used youtube in the above example.
For a guide on how to create the correct code, for various video sites, go here: Video Posting Guide
Here are some screen shots of how this came out. I am showing shots from multiple platforms, to show the difference.

Notice the difference.
In this case I did use the extreme of the differences I expect to see. One picture is IE and 120dpi The other is FF and 96dpi (I am finding the dpi matters more than actual resolution, although there is resolution variance as well).

There are some things I can do to decrease the differences.
I can decrease the font of the top menu, so that it does not overflow to a 2nd line.
I can increase the width of the top menu, to prevent overflow to a 2nd line.

However, if I really want accuracy, in alignment, I choose a strategy which is far more complex, and far more accurate:
[note: The next strategy, only works IF you have either removed the blogs or replaced them with something of static px size].

3) Remove the Blogs and/or Extended network, Move up Blurbs, place your desired text at the top of your Blurbs.
This method is actually my favorite. It has more flexibility for creating links out of the content.
To remove blogs and extended network, and move blurbs up, see this:
Move blurbs up to replace area taken by blogs and extended network
The above strategy gives the flexibility to place a variety of content in this area, including flash, links, text (which has not been made into an image) and more.

Put Picture in Blog Area

2007-04-22T14:49:00.001-07:00

This article has been combined with another article and moved here:
Blog Table Styling, Hiding, etc ...

Hiding Blog and Extended Network

2007-04-22T14:32:00.000-07:00

Hide Blog and Extended Network and remove space it occupied

<style>
table.latestBlogEntry {display:none;}
table.extendedNetwork {display:none;}
{!-Optional: control size of carriage return so our movement up is more accurate-!}
br {line-height:12px;}
{!-move up blurbs, about me due to carriage returns between tables just removed-!}
table.blurbs {margin-top:-24px;}
</style>

The reason for the relative movement up, is due to carriage returns between the tables.
It is a small enough distance, it should not cause a large discrepancy between browsers and resolutions. Setting the size of the carriage return (br) helps consistency.

Hide Only Blog

<style>
table.latestBlogEntry {display:none;}
{!-OPTIONAL control size of carriage return, br-!}
br {line-height:12px;}
{!-move up blurbs, about me, over space left by carriage return between tables-!}
table.blurbs {margin-top:-12px;}
</style>

Hide Only Extended Network

<style>
table.extendedNetwork {display:none;}
{!-OPTIONAL control size of carriage return br-!}
br {line-height:12px;}
{!-OPTIONAL move up blogs to cover space left by carriage return between table-!}
table.latestBlogEntry {margin-top:-12px; }
</style>

Hide Extended Network Box and DO NOT REMOVE space it occupied

<style>
table.extendedNetwork {visibility:hidden;}
</style>

I sometimes use the above when I want to put my calendar in that location.
OR If you want to keep the border and just remove the text inside:

<style>
span.blacktext12 {visibility:hidden;}
</style>

Extended Network Box

2007-04-22T14:14:00.000-07:00

Picture in Extended Network Box


<style>
span.blacktext12 {display:none;}
.extendedNetwork {background-image:url("URL-OF-YOUR-PICTURE");
background-position: center center;
background-repeat:no-repeat;
height:348px; display:block }
{! change above px value to height of your picture !}
</style>

In some cases, due to other code, you may need to explicitly set the width and force it using keyword !important. In one profile I looked at, it was the bbz generator which had generated code requiring this. It only seemed to effect IE. But the extra code, forcing the width, won't hurt anything.

<style>
{!-Replace Extended Network with Picture-!}
.blacktext12 {display:none;}
.extendedNetwork {background-image:url("URL-OF-YOUR-PICTURE-HERE");
background-position: center center;
background-repeat:no-repeat;
width:435px !important; height:62px; display:block }
{! change above px value to height of your picture !}
</style>

Instead of background-repeat:no-repeat; you can choose other options. background-repeat options

Remove Extended Network box and the Space it Occupies

<style>
.extendedNetwork {display:none;}
</style>