MySpace Online Now Icon Code Fix

Re-Designing the MySpace OnLine Now Icon, a New Approach

Working code for a Custom myspace online now Icon

If you are looking for code to fix your custom online now icon, so that it behaves as the online now icon should, you have come to the right place (at least for now).

The code in this article works (it is the ONLY online now icon code, I know of, which works). [Still working when tested on 7 Oct 2007 . . .]
This icon works the Standard Page.

MOST of the code in this article works on the Band and other Artist pages.
Any code line using profileInfo does not work on the Band page.

At the time I am writing this, I did search cyberspace, and I did not find another solution which accomplishes all of the following goals:
- Replace the online now Icon, with a custom Icon, which will show up ONLY when myspace thinks I am online. (when the default icon would otherwise show up)
- Have the Custom online now icon show up in ALL page locations where the default online icon would otherwise be shown. (friend and Comment Spaces)
- Do both of the above in IE and FireFox and Mozilla

If you do not want to read the entire article, you can use the below links to jump to the content you are interested in
Install Custom Online Now Icon (animated)
Install Custom Online Now Icon (non-animated)
Change Color of online Now Icon (IE Only)
Install Permanent online Now Icon above last login
Learn about how the online now icon is implemented and Why most solutions don't work
Custom online now icon Blog Page
Hide YOUR online status from others
Hide online Icon
pre-made Custom OnLine Now Icons (This takes you to another site. I have given them permission to use my code with their custom icons.)
At this time [8 Oct 2007], This solution DOES work.
However, I have seen myspace attempt to modify their online now icon strategy multiple times in the last few days [1 Oct, 2 Oct, 3 Oct 2007], to a strategy which will render this solution broken. They implemented the same strategy for a few days in early September. Each time they back out their changes, again rendering this solution functional. I will publish new code when myspace keeps their code in place long enough for me to be reasonably convinced they are not going to back it out.


You MAY NOT copy this code and publish it for use by others. You MAY use this code in your profile. Keep my headers with it so others, who may see the code in your profile, know that they do NOT have permission to publish this solution. (More on why I feel I own the rights to this solution at the bottom of this post)

Custom Online Now Icon Animated
This code replaces the online now icon in ALL locations on your page. In the friend and Comment sections also.
If you install this code, and do not see your icon, be patient. If myspace would not otherwise show their icon (that ugly orange and green thing) than this one won't show either. They are often slow to detect when you are online, and even slower to detect when you are no longer online. If you want an image which is always there, instead of one that behaves like an online now icon, scroll to the last solution on this page.

This solution is very optimized for a 20px X 80px image. If your image is not this size, post a question, and I will do the math to get the right values for your image.
This Solution has been Tested in Firefox, IE6, Mozilla (on Unix)
The Code It goes almost anywhere. If unsure where to put it, put it at the very top of your about me section, or bio (if using a band page).

<span class="off">
!-Custom OnLine Now Icon 
!-Solution Source: <a href="http://xiii.us/v">MySpace Code</a>-!
!-Solution Optimized for 80x20 icon.  You WILL need to adjust size, clip and margin values for other icon sizes-!
</span>
<style>
{!-apply background image; replace with url of your image -!}
img.ImgOnlineNow {background-image:url(http://i2.tinypic.com/4q5x18z.gif);
 background-repeat: no-repeat;}
img.ImgOnlineNow {height:0px !important; width:0px !important; padding-top:20px; padding-right:80px; background-position: top right;}

{!-IE solution -!}
{!-All Rights to this Solution Reserved. You may use it.  You may NOT publish it.}
* html img.ImgOnlineNow {padding-top:0px; padding-right:0px;}
* html img.ImgOnlineNow {width:105px !important; height:52px !important;}
{!-The margin values may need adjustment-!}
* html img.ImgOnlineNow {position:absolute; margin-left:-45px!important;}
* html table.friendsComments img.ImgOnlineNow {margin-left:-65px !important;}
* html table.friendSpace img.ImgOnlineNow {margin-left:-65px !important;}
* html img.ImgOnlineNow {clip: rect(0px, 105px, 21px, 26px)}
</style>
<span class="off">! END code for Custom online Now Icon !</span>

Non Animated Online Icon
This one works with any size icon, without the need to alter any values. However, it does not animate in IE (it does in FF). If your image is an animated gif, and the first frame is not what you want to see in IE, then use solution 1 instead.
The Code It goes almost anywhere. If unsure where to put it, put it at the very top of your about me section, or bio (if using a band page).

<span class="off">
!-Custom OnLine Now Icon 
!-Solution Source: <a href="http://xiii.us/v">MySpace Code</a> For Updates-!
</span>
<style>
{!-Size img setting either width and/or height to 0-!}
img.ImgOnlineNow {width:0px !important; height:0px !important;}

{!-apply background image if FF.  This will NOT SHOW in IE-}
img.ImgOnlineNow {padding-top:20px; padding-right:80px; background: url("IMG-URL-HERE"); 
background-position: center center;
background-repeat: no-repeat;}
{!-remove padding in IE-!}
img.ImgOnlineNow {_padding-top:0px; _padding-right:0px;}

{!apply background image in IE. Image will not animate in IE!}
img.ImgOnlineNow {_width:1px !important; _height:1px !important; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src="IMG-URL-HERE")} 
</style>

I do not have a code generator for this, nor do I plan to write one (unless I get an overwhelming response asking me to do so). Seriously, it is so easy to just cut and paste, and then replace the IMG-URL-HERE with the URL of the image you want to use.

Hide YOUR online Icon
IF you want to hide when YOU ARE online, you do this via a setting:
"Home" » "Account Settings" » "Privacy Settings" and choose "Hide Online Now Icon"
You may need to repeat this, every so often. MySpace has this tendency to reset stuff back to default values. If you think it needs to be re-set, yet it looks like it is set, change it back and forth and then save changes.

Hide online Icon
If you only want to remove the icon

<style>
{! hide online now icon all occurances !}
img.ImgOnlineNow {display:none;}
{! and in case mySpace brings back the code they had a few days ago !}
{! the profileInfo code line has no effect on band page !}
table.profileInfo table div img {display:none !important}
table.friendsComments table div img {display:none !important}
table.friendSpace table div img {display:none !important}
</style> 

Or, If you want to display some of the icons, and turn others off, use the below code. Remove the lines for the icons you want to keep.

<style>
{! hide online now icon!}
{! icon next to profile image !}
table.profileInfo img.ImgOnlineNow {display:none;}
{! icons under friend picture in friend space !}
table.friendSpace img.ImgOnlineNow {display:none;}
{! icons under friend pictures in comment space !}
table.friendsComments img.ImgOnlineNow {display:none;}
</style>

More stuff that was once on the top, that I don't think people Care about
The Concept behind my online now icon solution, and why it works like the online now icon.
Notice the code had 2 solutions coded. One for IE, one for FF and some other browsers.
In IE I use filters in one solution (which do not work in FF).
My other IE solution uses a combination of enlarging, clipping and positioning. This did work well in FF, but did NOT work in Mozilla (for some reason Mozilla left traces of the clipped portion, and re-colored it to black, not good looking).

For non IE browsers (tested in FF and Mozilla) I use padding. This was the cleanest, but with so many users using IE, it was not a suitable stand alone solution.

Change Color of online Icon
Another IE solution to Change the icon color
This one applies a filter which changes the color of the icon.
This only works in IE. This is very simple. Your icon in FF will remain unchanged.

<span class="off">
!-Custom OnLine Now Icon 
!-If this code stops working check <a href="http://xiii.us/v">MySpace Code</a> For Updates-!
</span>
<style>
{!-add filter in IE-!}
img.ImgOnlineNow{filter: mask(Color=pink)}

</style>

Choose your own color, and replace the Pink

Permanent Icon Above Last Logon
And I almost forgot; some people really do want just an icon, that is always there, and has nothing to do with the online status. I have better code (that anything I found) for that as well.
NOTE: The icon installed, with the below code is NOT an online now icon. It is just an icon. It is always there. The below code does NOT work on the Band Page
But if All you want is a static image, placed where one of the online now icons resides with the online icon hidden, here is a solution.
The below code installs this icon:
You can replace the URL with your own.

<style>
{!-place image as a background to the clear gif in the cell which is between the profile picture and the profile data-!}
table.profileInfo table td.text img {background-image:url("http://i13.tinypic.com/4unmxqg.gif");
background-position:bottom right;
background-repeat:no-repeat;}

{!- size and position the image 
- height determines vertical positioning
- margin-right determines horizontal position. 
- DO NOT add a top value to the positioning -!}

table.profileInfo table td.text img {height:45px; width:90px; position:absolute; right:50%; margin-right:150px;}

{!-unDo effect on main image.  You can set width to the value you want your main profile image to be.  The percent thing works well on FF, not so well on IE-!}
table.profileInfo table td.text a img {position:static; margin-right:0px; margin-left:0px; width:100%; height:auto}

{!-turn off default ugly online now icon-!}
table.profileInfo img.imgonlinenow {display:none;}
{!-and just in case mySpace brings back the code they had a few days ago-!}
table.profileInfo table div img {display:none;}

</style>

How the online icon works, and why most solutions do not work
When myspace detects you are online, they place the code, for the online now icon image, directly into your profile code. They do the same thing for each of your friends. For each friend, they check to see if the friend is on line, and if they are, the code for the online now icon gets inserted into the code which is generated to display your page.
When you refresh your page, the code is re-generated.
The online status is check again.

The image is in class="ImgOnlineNow". This class is used ONLY for this image.
The image is in a cell which is SHARED with other page elements.
The cell is ALWAYS there.

Any solution which does this:
.ImgOnlineNow {visibility:hidden}
OR this:
.ImgOnlineNow {display:none}
(any number of elements may be listed in front of .ImgOnlineNow)
is HIDING your icon ALL THE TIME.

Any solution which places a background image, as a background to the table cell (usually td.text) is placing an image, which is ALWAYS there.
The cell is always there. It does NOT go away when myspace detects that you are no longer online.

Why does my solution work?
I do NOT render the online now icon either hidden or display:none.
I use the actual online now icon, as my container for my background image.
Since the onlinenow icon image goes away, when the system detects I have logged off, my custom icon (which is a background image to the default icon) also goes away.

I was NOT the first to think of this part of the solution. Others attempted this before me.

Think of the image as taking up two layers.
One layer being a space, to accomodate the image, that can be assigned its own background. The other layer being the visible image.
FF allows the first layer, to be larger than the visible image, via padding.
IE does not, it places the padding OUTSIDE.
The alphaimageloader filter will allow a background image to be larger than the visible image it is applied to.
But it destroys animation.
(I think it is the best solution for non animated images).

What I did, was to take advantage of a clear segment of the default icon.
Instead of shrinking the icon to 0, I stretched it.
Then I applied the custom background image to a top corner, where it was only covered with a clear segment of the default icon.
Then I clipped off the visible part of the default icon.
This did require that I do re-positioning, because this shifted my icon to the right.
The clip also requires absolute positioning, so it is difficult to adjust things, for large icons. But it worked very well for an icon with a height of 20px.

What new strategy is MySpace about to Implement and Why will it break my Solution?
The new strategy (which is similar to a very old strategy which was used prior to my own MySpace days) involves the use of a div.
The div is ALWAYS there. It does NOT go away when you are no longer online.

This will cause a custom icon to start showing up, on many pages, which have very old code for a custom online now icon
Why?
Because there will now be a div, at the same level, it was prior to Feb 2007.
This means that all of those old solutions, which place a background image to this div, will start working (well sort of).
When not online the custom icon will show up
When online the custom icon will still be there, but behind the default icon.

No longer is the image in class "ImgOnlineNow". The image has no class.
I can still address it, because no other image is at the same exact level.
So those who read code, will quickly give out new "hide online now icon solutions".
Will this solve the problem?
If you want a permanent custom icon, in place of an online now icon, this will solve the problem.

Will my current solution Work?
No.
While more elegant, simpler solutions will exist for a custom permanent icon, it will be more difficult than before, to implement a custom online now icon.

Basically this is the algorithm which the myspace solution will be using:
IF not online, place clear gif inside div
If online, place onlinenow image inside div

No class is used, that distinguish one image from the other
They are at the exact same depth.
So how can I differentiate?

I do have an IE only solution for the new strategy. I am not going to reveal what it is yet. I am trying to come up with a cleaner solution.

I also have ideas that represent a paradigm shift from what people now perceive as a custom online now icon.
However, I am not going to put any significant effort into my solution until I am more certain myspace is really going to use the new strategy.

Why I feel I own the rights to this Solution
Many tried before me to come up with a working solution. I know this, because I came across multiple solutions, which did NOT work. They had instead resorted to a permanent style icon, and felt they could fool people into thinking it was behaving like an online now icon. The authors of such solutions must know that their solutions created an icon which was always there. Yet it was being published as an online now icon. Why?
I really believe I am the only one who thought of techniques to make the custom icon ONLY show up when the default online icon otherwise would, which worked in IE.
And as obvious as the solution may seem, I am the one who thought of it.

More Notes:
As I was doing some research, to see if anyone else had come up with the same solution I have, I did come across what may be the original source of the "fake online now icon" (The one that is always there). This may have originated from a teenager who posts to the myspace customizing forum.
He had posted it to the forum, and had it coded for IE only.
He had another solution for Non-IE browsers, which is the SAME padding solution I am using for non-IE browsers.
So while I have not found anyone else who has either of my IE solutions, I did find someone else who had published the non-IE padding solution months before I did.
He calls himself "The Odd One".
His MySpace Page
The mySpace Discussion where I discovered that I was not the first one to use the padding solution for non IE browsers:
Febuary Myspace Forum online now icon solution
So while I did think of the NON-IE padding solution myself (I had not yet seen his post) I was not first.

Code for a 40X80 Icon, Standard Profile only

<span class="off">
!-Custom OnLine Now Icon 
!-Solution Source: <a href="xiii.us/v">MySpace Code">MySpace Code</a>-!
!-Solution Optimized for 80x20 icon.  You WILL need to adjust size, clip and margin values for other icon sizes-!
</span>
<style>
{!-apply background image; replace with url of your image -!}
img.ImgOnlineNow {background-image:url(URL-OF-YOUR-IMAGE-HERE); background-repeat: no-repeat;}
img.ImgOnlineNow {height:0px !important; width:0px !important; padding-top:40px; padding-right:80px; background-position: center center;}

{!-IE solution -!}
{!-All Rights to this Solution Reserved. You may use it.  You may NOT publish it.}
* html table.profileInfo table td.text br {line-height:20px;}
* html table.profileInfo table td.text img.ImgOnlineNow {margin-top:-15px;}
* html img.ImgOnlineNow {padding-top:0px; padding-right:0px;}
* html img.ImgOnlineNow {width:105px !important; height:110px !important; }
* html img.ImgOnlineNow {background-position:top right;}
{!-The margin values may need adjustment-!}
* html img.ImgOnlineNow {position:absolute; margin-left:-25px!important;}
* html table.friendsComments img.ImgOnlineNow {margin-left:-65px !important;}
* html table.friendSpace img.ImgOnlineNow {margin-left:-65px !important; margin-top:-20px;}
* html table.friendSpace table table a img {margin-bottom:20px;}
* html img.ImgOnlineNow {clip: rect(0px, 105px, 41px, 26px)}
</style>
<span class="off">! END code for Custom online Now Icon !</span>

Calculating values for larger icons:

customHeight = height of custom image
customWidth = width of custom image

onlineHeight = height to set imgOnlineNow to, to insure we have enough clear area for our image
onlineWidth = width to set imgOnlineNow to, to insure we have enough clear area for our image

Set size of onlinenonlineWidth image as follows:
onlineHeight = customHeight * 2.5
onlineWidth = customWidth * 1.3

The clip property px arguments are in the following order:
top, right, bottom, left

They are calculated as follows:
clipTop = 0
clipRight = onlineWidth or (customWidth * 1.3 )
clipBottom = customHeight
clipLeft = clipRight - customWidth

Keep in mind that the clipped portion does effect position.
The amount clipped off the left = clipLeft
Therefore the IE left positioning needs to be an amount, of clipLeft, further to the left.

IF your image is larger than 40px high I recommend moving it to another page location, and NOT keeping it just above the last login.
I also do NOT recommend placing a custom online image in the friend and/or comment sections, which is larger than 20px by 80px.

Because clip requires position:absolute; any space needed for the icon, must exist even if not online.
This means if I want a very large online now icon on the top of my page, I either need an alternate image when I am not online OR I will have a blank gap when I am not online.

Below is an example of placing a very large custom online now icon just under the top navigation menu.

My Custom image:
http://i16.tinypic.com/8b4miwp.gif

The size of the image is:
height:100px
width:800px

For non IE (Internet Explorer) browsers, I need to size the default online now image to zero, and apply padding to accomodate a background image.

For IE I need to size the default online image large enough, that I can clip a clear portion, which is the size of my custom image.
I calculate the size needed for IE, as follows;

customHeight = 100
customWidth = 800

onlineHeight = 100 * 2.5 = 250
onlineWidth = 800 * 1.3 = 1040

Now I calculate the clip values for IE
clipTop = 0
clipRight = onlineWidth = 1040
clipBottom = customHeight = 100
clipLeft = clipRight - customWidth = 240

The following code block will cause the custom icon to show, just under the top navigation bar, ONLY if the default icon would otherwise show.
If the default icon would NOT otherwise show, this space will be blank. The below code block does NOT work on the Band page. (It can be modified to work on the band page).
Place this code in the about me section, at the top or bottom.

<span class="off">
!-Custom OnLine Now Icon 
!-Solution Source: <a href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy9vbmxpbmUtbm93LWljb24=">
Custom online now icon code by Eileen</a>-!
Display a 800 x 100 px online icon, just under the top nav bar 
ONLY if the default online icon would otherwise show.
</span>
<style>
table.navigationBar {margin-bottom:110px;}
{!-apply background image; replace with url of your image -!}
table.profileInfo img.ImgOnlineNow {background-image:url("http://i16.tinypic.com/8b4miwp.gif"); background-repeat: no-repeat;}
table.profileInfo img.ImgOnlineNow {height:0px !important; width:0px !important;
 padding-top:100px; padding-right:800px; background-position: top right; }

{!-Positioning-!}
table.profileInfo img.ImgOnlineNow {position:absolute; top:165px; 
left:50%; margin-left:-400px; _margin-left:-640px}

{!-IE only sizing and clipping -!}
{!-All Rights to this Solution Reserved. You may use it.  You may NOT publish it.}
* html table.profileInfo img.ImgOnlineNow {
padding-top:0px; padding-right:0px;}
* html table.profileInfo img.ImgOnlineNow {
width:1040px !important; height:250px !important; }

* html table.profileInfo img.ImgOnlineNow {clip: rect(0px, 1040px, 100px, 240px)}
</style>
<span class="off">! END code for Custom online Now Icon !</span>

Notice that for one of my margin-left settings, I put an underscore in front of the word margin (_margin-left). Only IE recognizes this.
Due to the clip, I needed to more the image an extra 240px left. This is how much was clipped off of the left side of the image. For positioning, the system behaves as if the clipped off portion, were still part of the image.

Clip will work in FireFox, but because the padding solution is much cleaner, and clip did NOT work in some minor browsers (and padding did work), I only use clip for the IE solution.


Custom online now icon Blog Page
This one is more complicated, unless one wants a permanent icon (one that is there even when not online).
The permanent icon is actually easier on the blog page, than the standard page.
To create an icon, for this space, that only shows when online, may not be possible.
However,
It is possible (and I know how) to do a NOT ON LINE icon where the NOT is covered, when you are actually online (or at least when myspace detects you are online).
But I haven't written the code yet, and am not sure there is enough demand for it, to make it worth my time. In IE one could cover the word NOT with the color of their choice, however in FireFox (and other browsers) the options are more limited, (pretty much to green or orange).
If enough interest is expressed, I could come up with this code.

Code For the permanent icon, which HIDES the default online icon and places another icon in the same place.
This Icon is there even when you are NOT ON LINE.
Place this code in the blog customize section. No style tags are needed (they are provided when myspace parses the information).
Replace my image (shown in bold below) with the image you want to use).
If your image is larger than 20x80, you will need additional code.

table.profile div {background-image:url(http://i15.tinypic.com/61vugio.gif);
background-position:center center; 
background-repeat:no-repeat}
table.profile div img {display:none;}

Thank you for Visiting; Have a Nice Day :-)

If Google has taken you to this page, and this is not what you are looking for, do not blame me. Every Query I list below, is covered in this article.
-MySpace online now icon code is not working
-my online now icon does not go away
-how long does it take for the online now icon to go away when I log off
-Where do I put the online now icon code
-where do I get working online now icon code for myspace
-where do I get online now icons for myspace
-troubleshoot online now icons myspace
-troubleshoot change online now icon
-myspace online now html codes
-how to change online now icon on myspace
-How to put a custom online now icon on band page
-troubleshooting online now code
-why wouldn't my online now icon work?
-myspace says online now after i sign off