Views Under Construction

myspace 2.0 show only last comment

noreply@blogger.com (u∃∃l!∃) — Sun, 15 Mar 2009 16:53:00 +0000

Show only Last Comment in Myspace 2.0

I highly recommend upgrading to myspace 2.0. This task, and most others, are so much easier in myspace 2.0

Place the following code in the CSS area of Customize Profile:

{! show only most recent comment code by Eileen xiii.us !}
div.commentsModule div.moduleBody ul.moduleList li {display:none;}
div.commentsModule div.moduleBody ul.moduleList li:first-child {display:block}
.i {display:none;}
{! end code to show only most recent comment !}

If you found my code useful, you can help others who search for this solution in google, by adding the following block to your about me or interests area.
This will not show a visible link on your myspace page, it will only be visible to those who read your code.

<a class=i href="http://xiii.us/ms1/">myspace 2.0 show only last comment</a>

If you want to show fewer then 50 comments, but show more then one, it is a bit trickier.
Myspace removes any attempt to use the + within the css area, which would have been idea for this task.
IE does not recognize the nth child selector and most people use IE.

If you want to show X pixels worth of comments, that is easy.
This is still superior to the similar technique used in myspace 1.0 because we can really start measuring at the top of the actual comments, eliminating the need to know the height of anything above the actual comments.

The following code will show 200px worth of actual comments (not including any of the headers).

{! show fewer then 50 comments code by Eileen xiii.us !}
div.commentsModule div.moduleBody ul.moduleList {height:200px; overflow:hidden;} 
.i {display:none;}
{! end code to show only most recent comment !}

Change the 200 to the px height of comments you want to show.

myspace 2.0 friends in scroll box

noreply@blogger.com (u∃∃l!∃) — Sun, 15 Mar 2009 03:05:00 +0000

MySpace 2.0 put Friends In Scroll Box

This is way easier then myspace 1.0, and you do not have to put friends and comments in the same scroll box.

To put ONLY the friends in a scroll box, use one of the following blocks of code.
One puts only the friends in, leaving out the header and links.

The others include the header and/or links.

Change the height value, to the height you want your scroll box.

The code goes into the css area:

{! Friends in Scroll Box Code by Eileen xiii.us !}
div.friendSpaceModule div.moduleBody ol.moduleList{
height:60px;  
overflow:scroll; 
overflow-x:hidden;} 
{! end Friends in Scroll Box !}

If you want to include the " .. Has X Friend" and the links; inside the scroll box (instead of outside the scroll box) but do NOT want to include the section header
(the "Friend Space (Top X)")
Use this code:

{! Friends in Scroll Box Code by Eileen xiii.us !}
div.wrap div.friendSpaceModule div.moduleBody{
height:60px;  
overflow:scroll; 
overflow-x:hidden;} 
{! end Friends in Scroll Box !}

If you want to include the Section header as well, inside the scroll box, use the following code instead:

{! Friends in Scroll Box Code by Eileen xiii.us !}
div.wrap div.friendSpaceModule {
height:60px;  
overflow:scroll; 
overflow-x:hidden;} 
{! end Friends in Scroll Box !}

If you found my code useful, you can help me by adding the following block to your about me or interests area.
This will not show a visible link on your myspace page, it will only be visible to those who read your code.

<a class=i href="http://xiii.us/ms1/">myspace 2.0 friends in scroll box</a>

mySpace 2.0 put comments in scroll box

noreply@blogger.com (u∃∃l!∃) — Sun, 15 Mar 2009 00:25:00 +0000

myspace 2.0 comments in scroll box

I highly recommend upgrading to myspace 2.0, it is MUCH easier to customize than myspace 1.0.

I only want to scroll the actual comments, not the header, or the text that says "displaying X of Y comments" or the "View All" and "Add Comment" link.

Put the code into the CSS area.

{! Scroll Comments code by Eileen xiii.us !}
div.commentsModule div.moduleBody ul.moduleList {
height:60px; 
overflow:scroll; 
overflow-x:hidden;} 
div.wrap .i {display:none;}
{! END Scroll Comments code !}

Change the 60 to the height you want to use for your scroll box

If you want to put the "displaying X of Y comments" and the "View All" and "Add Comment" links in your scroll box, then use the following:Put the code into the CSS area.

{! Scroll Comments code by Eileen xiii.us !}
div.wrap div.commentsModule div.moduleBody {
height:60px; 
overflow:scroll; 
overflow-x:hidden;}
div.wrap .i {display:none;} 
{! END Scroll Comments code !}

Change the 60 to the height you want to use for your scroll box

If you want to include the Comments header as well, then use the following code:

{! Scroll Comments code by Eileen xiii.us !}
div.wrap div.commentsModule {
height:60px; 
overflow:scroll; 
overflow-x:hidden;}
div.wrap .i {display:none;} 
{! END Scroll Comments code !}

Change the 60 to the height you want to use for your scroll box

If you found my code useful, you can help me by adding the following block to your about me or interests area.
This will not show a visible link on your myspace page, it will only be visible to those who read your code.

<a class=i href="http://xiii.us/ms1/">myspace 2.0 comments in scroll box</a>

myspace 2.0 Customize Blurbs Section

noreply@blogger.com (u∃∃l!∃) — Sat, 14 Mar 2009 19:07:00 +0000

Explanation of Blurb Table Location and Structure

Please refer to the following myspace page to see how this table is structured.
This is a real myspace page, with style code added to show the parent relationships, laying, classes, and other attributes which can be used to manipulate the blurbs div.
Regular MySpace Page Showing Structure, Layout, Classes
The link will try to open into a new window. This allows you to view the key on this page, while viewing the above myspace page, at the same time (in different windows).

Key to the above page:

div.blurbsModule

a (link) no class assigned

span no class assigned

a (link) has unknown class or id

div no class assigned

div has unknown class

div has unknown id

div.moduleTop

div.moduleMid

div.ModuleMid1

div.moduleMid2

div.moduleBody

div.moduleBodyEnd

div.moduleBottom

div.blurbAboutMe

div.blurbLikeToMeet

h4

h2

h3

Using the above key (along with the myspace page the key is applied to) I can then easily figure out the needed code, to customize the blurbs section.

Remove Blurb Header and the space it occupies

{! hide Blurbs header !}
{! code by Eileen; terms of use: xiii.us/tou !}
div.blurbsModule h3 {display:none;}

Remove About Me and To Meet Headers and the space they occupy

{! hide About Me and Meet header !}
{! code by Eileen; terms of use: xiii.us/tou !}
div.blurbsModule div.moduleBody h4 {display:none;}

If you want to remove ONLY the About Me header and keep the To Meet Header, use the below code instead.

{! hide About Me header !}
{! code by Eileen; terms of use: xiii.us/tou !}
div.blurbsModule div.moduleBody div.blurbAboutMe h4 {display:none;}

If you want to remove ONLY the To Meet header, and keep the About Me header, use the below code:

{! hide About Me header !}
{! code by Eileen; terms of use: xiii.us/tou !}
div.blurbsModule div.moduleBody div.blurbLikeToMeet h4 {display:none;}

Header Banner for Blurbs Section
If I want to place a header banner, in the blurbs, above the blurbs title, I can do this by applying a background image to the div.moduleTop within the blurbs section.

{! apply a top banner to blurbs module !}
div.blurbsModule div.moduleTop {
background-image:url(YOUR-URL-HERE);
background-position:center center;
background-repeat:no-repeat;
height:60px;
width:400px;}

Replace the 60px with the height of your image, and the 400px with the width of your image.

The above, combined with the code for hiding the existing headers, will leave you with a custom blurbs header, and no other headers.

Or you can replace the Blurbs header with a Custom Image:

{! Custom Image as Blurbs header !}
{! code by Eileen; terms of use: xiii.us/tou !}
div.blurbsModule h3 {
background-image:url(YOUR-URL-HERE);
background-position:center top;
background-repeat:no-repeat;
height:60px;
width:400px;}
div.blurbsModule h3 span {display:none;}
}

I will add more stuff here later, as I come across specific questions, related to customizing the stuff in this space

myspace 2.0 div layout (div overlay)

noreply@blogger.com (u∃∃l!∃) — Thu, 05 Mar 2009 04:12:00 +0000

myspace 2.0 Div Layout (div overlay) tutorial

The term div overlay was adopted due to very early versions of this type of layout, being a literal overlay (it sat over the existing page content and covered it).

None of my div layouts examples are really overlays. Instead I remove the existing content that I do not want to show.
I then place what I want to show, on top of my div, or directly under it.

To get clean positioning, and allow the bottom links to move down naturally as my div grew; I would close off three layers of existing tables before creating my div.
This placed my div outside of most of the existing table structure, while causing a large portion of the default page content to fall logically inside my div, making it very easy to position this content in the correct location on my div.

Now that myspace is filtering out code, that closes structures without first opening them, this strategy no longer works.

Rather then come up with a new strategy for myspace 1.0, instead I am recommending that people just upgrade to myspace 2.0.

Below is my preliminary write up for a strategy that works very well with 2.0.

I don't have time to get this article all nicely formatted right now, so I will just publish the steps, I used, as I built my prototype.

===================Start Instructions for Div Layout/Div Overlay in Myspace 2.0 ====

Installing a Div Overlay in 2.0

This is MUCH easier then it was with Version 1, and requires much less code.

Select "Customize Profile" from the Profile menu
Select "Change Layout"
Select the layout, that looks like this:

Next select
"Modules"

Hide all modules that you do not want to show on your div overlay.
do NOT hide your blurbs, we are going to use this for our content, we will hide the blurb headers, in a later step.

In my example I hid all of the sections except the
blurbs
comments
music player
friends

Notice that the top area (where your profile image, contact links, online, mood, status, headline reside) can not be hidden using the "Modules" function.

However, we can hide all of it, or elements within it using CSS.
[note: You may opt to not show some personal information such as age, last login. If you choose this the word "private" will show next to the header for that content. We will hide this later.]

Now drag the blurbs to the top (if they are not already there), placing them just below the top area.

Although the core of our content will go into the blurbs, we will use a higher level element for our positioning.

I will use div.contentMid2. This is the inner most div, which includes all of the content, I want to use, within my div overlay, including the top area, which they now call the "Basic Information Module".

To get an idea of where this div lays, in relation to the other elements, go here:
Page showing div layers, classes, ids of myspace 2.0

It is the thick silver solid border, notice it includes the area with the thick purple border (the top profile info area) AND the thick hot pink dashed bordered area, which contains the rest of the profile content.

This also allows me to use div.contentMid and div.contentMid1, to create interesting background looks, such as framing.

Hidding additional Elements:
We will do this in the css section.
To get to the css section select {} CSS
An edit box will show up, that you can enter CSS in.
Enter only the lines, for the stuff you want to hide.
I HIGHLY recommend including the comment, I provide, with each line. This will make it much easier for you to alter your code later.

Before placing the below code into your css area, please add this:


{! Hiding elements to prepare for Div Layout, code By Eileen !}
{! for terms of use please see xiii.us/tou !}
{! http://xiii.us/tou !}
{! views-under-construction.blogspot.com !}
{! http://xiii.us/ !}
.i {display:none;}

If you use the above code block, none of my credits will show up on your visible myspace page. However, I do require that my credits stay with my code.

To hide the People you may Know (which recently showed up, sometime in March)


{! hide people you may know !}
div#module-1 {display:none;}

To hide the ENTIRE top section use this:


{! Hide Basic Information Module !}
div.basicInfoModule {display:none;}


{! Hide EVERYTHING in the Basic Info Module EXCEPT the profile Image !}
div.basicInfoDetails {display:none;}

Now you can still hide the profile image like this:


{! hide profile image !}
div.photo {display:none}

You may instead choose to hide individual components within this space.


{! Hide Name !}
div.basicInfoDetails h2 {display:none;}

{! Hide contact Links !}
ul.contactLinks {display:none;} 

{! Hide url !}
span.urlLink {display:none;}

{! hide headline OR mood and status !}
div.basicInfoModule blockquote p {display:none;}

{! hide status !}
span.status {display:none;}

{! hide mood !}
span.mood {display:none; }

{! hide the View My: photos Videos !}
div.pageLinks {display:none;}

{! hide only the words "View My:" !}
div.pageLinks em {display:none;}

{! hide pictures link; also hides Video link if Blogs are Hidden !}
div.pageLinks li.odd {display:none;}

{! hide only the blogs link IF blogs are hidden!}
div.pageLinks li.even {display:none;}

{! hide only videos link !}
div.pageLinks li.last {display:none;}

To hide the entire section, that contains the age, gender, location, last login, online icon, use the following


{! hide age, gender, location, last login, online !}
ul.profileUserInfo {display:none;}

The above hides the title to the information as well.
IF you do not want this information viewable, with style turned off, you can hide some of these elements using the edit profile tool. However, this tool only hides the information, it does leave text on your profile, indicating the information is private.

To hide only specific elements within this section:


{! hide Age AND Gender AND the slash between them !}
li.tags {display:none;}

{! hide Age !}
span.age {display:none;}

{! hide gender !}
span.gender {display:none;}

{! hide location !}
li#adr {display:none;}

{! hide last login !}
li.lastlogin {display:none;}

{! hide online icon !}
ul.profileUserInfo li img.ImgOnlineNow {display:none;}

{! hide those images, that show up under the contact links !}
ul.profileUserAlbum {display:none;}

-------------------------
Because I want to import the top area content, into my div overlay, I am instead going to assign it position absolute.
I will add in the actual position values later.


{! default image !}
div.photo {background-color:transparent; position:absolute}
{! display name !}
div.basicInfoDetails h2 {position:absolute;}

ul.contactLinks {position:absolute;}
span.urlLink {position:absolute;}

{! status !}
span.status {position:absolute;}

{! mood !}
span.mood {position:absolute; }

{!  View My: photos Videos !}
div.pageLinks {position:absolute;}

{! hide only the words "View My:" !}
div.pageLinks em {display:none;}

---------------------
Now we will hide the header text in the blurbs section, so we can use that section for our custom content.


{! hide blurbs header !}
div.blurbsModule h3 {display:none;}

{! hide about me header !}
div.blurbAboutMe h4 {display:none;}

{! hide entire meet section !}
div.blurbLikeToMeet {display:none;}

OR choose to use this section and hide only the header


{! hide Meet Header !}
div.blurbLikeToMeet h4 {display:none;}

--------------------
Unless you choose to hide, the entire top area, you likely have a lot of extra space above your blurbs. This is caused by a combination of padding and min-height settings, used for the elements we removed content from, without actually removing the whole element.
--------------------
The next block of code, removes this extra space, placing the blurbs directly under the top menu, and in the very top left corner of div.contentMid2.

There are ways to do something very similar, that use far less code.
One could use a negative top margin OR position:relative, to accomplish very close to the same positioning. But there are likely to be alignment issues, across different browsers and resolutions.

IF your div is a static known size, you could use position:absolute, to place the blurbs exactly into the top corner of the div.contentMid2.
In this case, you would assign a known height to div.contentMid2, so that when the blurbs are positioning absolute, the bottom links do not move up.

However,
I am going to avoid using position absolute for either the blurbs OR div.contentMid2.
I want to allow the bottom links, to naturally move down, based on the size of the content inside our div.

I also want to place the comments at the bottom, and without using a scroll box for them.
I want my bottom links to move down.
For this reason, I can NOT assign a set height to my div.contentMid2.

So I am going to use a block of code, that serves to reverse the style, that is causing this extra space.


{! myspace 2.0 div layout preparation code by Eileen xiii.us/tou !}
{! remove extra space caused by padding, margins, min-height settings !}
div.basicInfoDetails {min-height:0px; padding:0px;}
div.profileDemographics {min-height:0px; padding:0px; height:0px; width:0px;}
div.basicInfoModule {margin:0px;  height:0px; padding:0px; min-height:0px; }
div.basicInfoModule div.moduleBody {height:0px; min-height:0px; margin-top:0px; margin:0px; padding:0px; }
div.contentMid2 {padding:0px;}

{! override default padding in blurbs module !}
div.blurbsModule {margin:0px; padding:0px}
div.blurbsModule div.moduleBody, div.blurbsModule div.moduleMid{padding:0px;}

----------------------------------------------------
Now I need to assign a position statement, to div.contentMid2. The purpose of this statement is to cause this div, to act as the reference point, for the page elements, I want to import into my div.
Because these elements, reside logically inside div.contentMid2, they can be positioned, measuring from the top left corner of this div.
I find this more accurate, cross platform, then trying to position from the top center of the body.


{! myspace 2.0 div layout preparation code by Eileen xiii.us/tou !}
{!!! Cause any absolute positioning, to position relative to div.contentMid2 !!!}
div.contentMid2 {position:relative;}

Now the top left corner of our custom div area, and the top left corner of div.contentMid2, are in exactly the same position.

(I put a magenta border around my core div, so that I can see exactly where its boundaries are. I usually leave this there until I am done building the div. It helps with trouble shooting if things do not place correctly.)

---------------------------------------------

NOTE: IF your content area (core div) is wider then 800px, you will need to add code to accomodate this. The myspace default sizing needs to be overridden at multiple levels.
I am using a width of 920px


{! set width of my core div, and surrounding divs !}
div.wrap, div#row1, div.contentMid2, div.contentMid, div.contentMid1, div.myCoreDiv  {width:920px;}

NOTE: IF you want to keep the top area (ad/search/menu) a width that is less wide then your core div, you will need additional code to accomodate this. Because of the padding the myspace has applied to the google search area, notice I have set it to width LESS then the width I am using for the top area. I could have removed the padding instead, but this looked slightly better.


{! control width of top area, when making the rest of the page wider !}
div.globalWidth, div#leaderboard {width:800px; max-width:800px; }
div#googlebar {width:770px}

----------
At this point, any default page content, that you want to import into your custom div, should be on your visible page, below your blurbs.
[Although your blurbs are hidden, they should be just under the top menu.]

The one exception to this, is any content from the top section (BasicInfo/ProfileInfo area).
If you assigned position:absolute to these elements, they will be sitting, overlapping the top of your blurbs.
Otherwise, they will be above your blurbs.

-----------------------------------------------

NEXT we start building our custom div in our blurbs section.

Go to
Profile -> Edit Profile

Click on "About Me"

In the About Me box start your div


<a class=i href="http://xiii.us/v/">myspace 2.0 Div overlay code/tutorial by Eileen</a>
<div class="myCoreDiv">

put your div content here

</div>

----

Now save

(I put a magenta border around my core div, so that I can see exactly where its boundaries are. I usually leave this there until I am done building the div. It helps with trouble shooting if things do not place correctly.)

You can put the border, around your div, by adding this to the css section:


div.myCoreDiv {border:2px magenta groove}

----

The first kind of div I am going to do is a very simple "Core Image" type div.
For this I use a core image, that I draw using a draw tool (I use paintshop).

I am using the image found here:

http://i287.photobucket.com/albums/ll142/mpskin/0layouts/madeline/madeline-house-front.png

This is what I will call my core image.

I will place the image in my core div.

I now have this code in my about me section:

<div class="myCoreDiv">

<img src="http://i287.photobucket.com/albums/ll142/mpskin/0layouts/madeline/madeline-house-front.png">

</div>

------
Now we need some style for our div. I am going to add a border, you do not have to do this.
I am also going to add a text-align command, to cause my core image to center.

Code I now place in the css area:


div.myCoreDiv {border:3px magenta groove; text-align:center;}

---
Anything you did not hide, from the top area, will now show ON TOP OF your core image. We will place it in its desired location later.
Anything else you did not hide, will show BELOW your core image. We will move these elements onto our div as well.

I have left spaces, on my core image, to place my content.
Now we are going to import the content we want to show, onto the div.

First the Name.

The name is adressed like this:
div.basicInfoDetails h2

I am going to add a top value, and a left value, width, and text-align.
I want the name to center in the top left section of the top left window, on my image.
To insure this, I am going to set the width of the name, to the length of that window section.

width:200px;

I will then add text-align so that the name centers within this space
text-align:center;

Then I will position the element, in the top left corner of the window, measuring from the top left corner of my core div.
top:137px; left:68px;

I end up with this:


div.basicInfoDetails h2 {width:200px; text-align:center; position:absolute; top:137px; left:68px;}

------

Now for the photo
I want the photo to center under the name, so I will use the same concept.
I will size the element that holds the photo, div.photo, the length of the window section, and use text align to cause the photo to center in that space.


div.photo {width:200px; text-align:center; position:absolute; top:160px; left:68px;}

----
Next I will place my contact links.

This will position the contact links:


ul.contactLinks {float:none; position:absolute; top:150px; left:290px; width:150px; height:90px;}

It is important to set the width, as the default width is actually much wider then the links themselves takes up.
I used the above size, because I am about to add a custom contact table, which uses the above size.
To do this, I also need to space my links, within this space.

To get a custom contact table you can go here:
custom contact tables myspace 2.0

This will also allow you to enter a custom image, to use for your contact table.

Make sure you check this
- I have used position absolute to position my contact table

---
Next I will place the pictures and video links (and possibly the blogs link)


div.pageLinks {position:absolute; top:264px; left:290px; width:150px; background-color:mistyrose; color:purple; font-family:comic sans ms; font-size:13px;}
{! position picture link !}
div.pageLinks li.odd {float:left; padding-left:13px;}
{! position video link which may also be odd depending on blogs link !}
div.pageLinks li.last {float:right; padding-right:13px;}

This should be enough for you to get the idea of how to do this, I may add more information later, if I have time, and people want me to
I will probably clean this up when I have more time, so it is easier to read.

myspace 2.0 BasicInfoDetails Profile Info area

noreply@blogger.com (u∃∃l!∃) — Tue, 24 Feb 2009 23:57:00 +0000

Hiding The content in the Basic Info/Profile Info area of the MySpace 2.0 Profile

This content can NOT be hidden using the built in myspace profile Customize/Edit tool.
However, it can be hidden using simple css.

{! hide profile image !}
div.photo {display:none}

To hide the ENTIRE top section use this:

{! Hide Basic Information Module !}
div.basicInfoModule {display:none;}

OR instead just hide the individual elements within the basic info module:

{! Hide Name !}
div.basicInfoDetails h2 {display:none;}


{! Hide contact Links !}
ul.contactLinks {display:none;}


{! Hide url !}
span.urlLink {display:none;}


{! hide headline OR mood and status !}
div.basicInfoModule blockquote p {display:none;}


{! hide status !}
span.status {display:none;}


{! hide mood !}
span.mood {display:none; }


{! hide only time mood updated !}
div.basicInfoModule div.basicInfoDetails span.date {display:none;}


{! hide only the mood status view more link !}
div.basicInfoModule div.basicInfoDetails span.view a {display:none;}


{! hide the View My: photos Videos !}
div.pageLinks {display:none;}


{! hide only the words "View My:" !}
div.pageLinks em {display:none;}


{! hide pictures link; also hides Video link if Blogs are Hidden !}
div.pageLinks li.odd {display:none;}


{! hide only the blogs link IF blogs are hidden!}
div.pageLinks li.even {display:none;}


{! hide only videos link !}
div.pageLinks li.last {display:none;}

Show a different image on your page, then the image used as your default display picture:
Put this code in the css area of the customize section:

{! Use different images for Display Pic on page, and Default image !}
{! code author:Eileen !}
div.basicInfoModule div.photo {background-image:url(http://i287.photobucket.com/albums/ll142/mpskin/face1.png);
background-repeat:no-repeat;
background-position:center top; width:177px; height:180px;}
div.basicInfoModule div.photo a, .i {display:none;}

<a class=i href="http://xiii.us/ms1/">myspace 2.0 Basic Info, Profile Info area</a>

myspace 2.0 adding a custom section

noreply@blogger.com (u∃∃l!∃) — Tue, 17 Feb 2009 02:05:00 +0000

Adding a Custom Section (Div) to myspace 2.0

The cleanest way to do this is to create an App, for your section. However, since this takes more skill then the average myspace user has, I will skip this method and present another method.

This is not that different from how it was done in myspace 1.0, conceptually it is very much the same, and in many ways easier.

First create your desired section inside either your interests OR blurbs section.
Do not add any style into this section, just html (and no inline style inside the tags).

Your open and close tags must map up (this is a new edit rule introduced with myspace 2.0).

First I create my custom Div in my Blurbs (or Interests) section

<i class=i>START CODE to to create custom div
Code Author:Eileen; for terms of use see page:
<a href="http://xiii.us/v/">MySpace 2.0 Code by Eileen</a>
<a href="http://xiii.us/eGen/mpSkin.php"> Music Player Skins</a>
</i> 
<div class="myidiv1">

Custom Div Content Here

</div>
<i class=i>END Custom Div</i>

I place this code at the end of my meet. This code could go anywhere in my blurbs.
If you save at this point, my links and comments will show. We will hide those in our next step.

Next we add in the needed style to style and position our custom div
This code must go into the css area, in the customize profile section.

{! style to position custom div myidiv1 !}
.i {display:none;}
{! change the 400 to the height of your div !}
div.column1 {position:relative; 
padding-top:400px;}
div.myidiv1 {position:absolute; 
top:0px; left:0px; 
height:400px; width:100%;
font-size:13px; 
color:magenta;
font-weight:bold;
font-family:comic sans ms;}
{! alter above style values as desired !}
{! end style for div myidiv1 !}

Of course you can alter the values as desired.
You may also have elements within your div that need style. That style will also go into this section.

If you wanted to put this section at the bottom of the right column, you could instead use this style block:

{! style to position custom div myidiv1 !}
.i {display:none;}
{! change the 400 to the height of your div !}
div.column1 {position:relative; 
padding-bottom:400px;}
div.myidiv1 {position:absolute; 
bottom:0px; left:0px; 
height:400px; width:100%;
font-size:13px; 
color:magenta;
font-weight:bold;
font-family:comic sans ms;}
{! alter above style values as desired !}
{! end style for div myidiv1 !}

If I wanted to put the section between two other sections, within the right column it is slightly more complicated, unless you want the section directly above or under the blurbs. In this case you could isolate the outer most div of the blurbs, and use that as your positioning reference.

When deciding where to put the code for your custom div; if possible, choose a section which is in the same column as the area where you want to place this custom section.

If you are going to place the section somewhere other, then the top or bottom of the same column as the interests or blurbs; accurate positioning is tricky (and subject to easily breaking).

My example will assume that we want to place the content in the same column as my blurbs.

I am using the layout that has two columns.
The right column is in class column1 (it has other class names as well, but column1 addresses it uniquely.)
If you are not using the same layout, your column may have a different class.

I may add more examples later, you can request a specific scenario if you want.

L and L Design and Remodeling

noreply@blogger.com (u∃∃l!∃) — Thu, 05 Feb 2009 19:39:00 +0000

L and L Design and Remodeling, Issues with this Contractor

I am looking for advice on dealing with a contractor.

I had floors installed,
744 sq feet of Wilsonart flooring installed by L&L design&Remodeling for $8800 (supposedly a "promotional" price).

After they installed the floor, I noticed some minor issues, but still paid them.
They were supposed to return, the following Friday, to fix the issues.

Between the time they left, and the Friday (they were supposed to return) I noticed more issues with the flooring.

To insure that I was not just being too picky, I had multiple people (not experts, but people with some experience) look at the flooring.

All agreed that the job was done with poor craftsmanship, while I paid a price that should have been purchasing an expert installation job.

The contractor failed to show up as scheduled, and I called, and another date was arranged.
The next date came, and at least this time they called me, to indicate they were snowed in and could not show up.
I was told they would call me again that Friday, no call was received.
It has been almost a week.

I have Aspergers (a mild high functioning autism), and am somewhat phone phobic (probably part of the Aspergers) so this level of conflict and phone calls does exceed my comfort level. (I did manage to call the sales guy/job supervisor the first time he didn't show up, as my friends sort of pressured me to do this.)

I was looking to see if the company had an email I could use, to avoid calling.
But all I have is the email of the sales person/job supervisor (who at this point I am not sure I want to deal with anymore).

I did leave an email for the Wilsonart company who made the flooring, and asked if these problems were normal. They did have someone contact me, but there was really nothing he could do at this point, but he did want me to keep him informed as to the resolution.

So I am not sure what to do.

1) Ignore it, one of my friends doesn't think it is that bad, and that I could just take a mallet to the "bumps" and pound them down.

2) Wait until L&L Design & Remodeling has their web site up, so I can contact them (it says it should be up in 7 days).

3) Have a friend call them for me (I have one who said they will, my other friends are just sort of pressuring me to make the call).

For anyone that knows about installing "floating" floors, on an un-level surface, is this something that is even recommended?

I told the salesman that I had read that installing floating floors on unlevel surfaces was not recommended. He insured me that the padding underneath would solve that issue.

But even the un-level issue, does not account for the gaps between some of the connections that are not over an unlevel area (I can easily slip a piece of paper between some of the planks) or the welts (bumps) at some of the connection points.

There is also some rather large gaps in some corners, which are filled in with clear caulking.

In one case instead of going under the baseboard, and leaving the tiny gap for expansion, they went up to the baseboard, and then filled in with clear caulking (and since the boards don't all actually go all the way to the base board, it shows a ragged edge).
This was the issue I noticed right away, that they were going to come back and fix.

Some images:

myspace 2.0 Application Modules Customize Code

noreply@blogger.com (u∃∃l!∃) — Thu, 29 Jan 2009 23:31:00 +0000

For a diagram showing the classes, and layout, of an application module
Click Here
The above link goes to a real myspace page, where I have applied style.
If myspace changes their code, the page should reflect changes.

Key to the above page:

div.
mdpapplicationModule

a (link) no class assigned

span no class assigned

a (link) has unknown class or id

ul has class or id

div no class assigned

div unknown class

div has unknown id

ul.links

div.moduleTop

div.moduleMid

div.ModuleMid1

div.moduleMid2

div.moduleBody

div.moduleBodyEnd

div.moduleBottom

div.toolbarEnd

h4

h2

h3

myspace 2.0 skinny profile

noreply@blogger.com (u∃∃l!∃) — Fri, 26 Dec 2008 08:04:00 +0000

This may be the one task, I have found, that is not easier in myspace 2.0 then it was in version 1.
However, it is still reasonable to do.

IF you want the profile skinnier then 720px (the width of the ad banner), unless you are willing to keep the entire top area, sized to at least 720px wide, you need to do a "pick up and plop" (otherwise known as absolute positioning) with the top ad banner.

The following code block makes the profile 550px wide, including the top menu and search area.

Place this code into the css area of the customizing section (select customize profile from the profile menu, then select css).

{! skinny profile 550px wide code by Eileen !}
ul#rightNav, ul#leftNav {border-right:0px;}
div#leaderboard {position:absolute; top:0px; right:50%; margin-right:-370px}
h2#mslogo.global {display:none}
div.wrap {width:550px; margin-right:auto; margin-left:auto; margin-top:90px;}
div#header {background-color:transparent;}
div#googlebar {background: transparent url(''); width:550px; height:50px; position:relative;  margin-top:-10px;  _margin-top:-15px; margin-right:auto; margin-left:auto; border:3px green dashed;}
form#formSearch_Header { margin-left:auto; margin-right:auto}
div#googlebar div.global  {position:absolute; top:0px; left:36px;}
div#topnav {background:transparent; border:0px; width:550px; }
ul#leftNav li, 
ul#rightNav li {background-color:transparent;  width:auto; margin:0px; padding:0px; border:0px;} 
ul#leftNav li *, 
ul#rightNav li * {color:black; font-size:8px; font-family:comic sans ms; font-weight:bold; margin:0px; padding:0px; border:0px;}

I HIGHLY recommend applying a music player skin, or at least resizing the player, to fit into the narrow column.

You can get the code to resize and/or apply a skin to the music player here:
myspace 2.0 music playlist music player skins, resize, and position player code

You may also want a skinny contact table, you will find the code for that here:
myspace 2.0 custom contact tables, resize contact table

music player myspace 2.0

noreply@blogger.com (u∃∃l!∃) — Thu, 11 Dec 2008 02:28:00 +0000

mySpace 2.0 music player

Quick links to subjects in this article:

Changing the size of the Player
Alternative to hiding the player
MySpace 2.0 Hide Player While Still Allowing it to Play
Is the Bottom or Right Edge of your Player Clipped off or Hidden? Click here for the Fix.

Changing the Size of the Music Player
For changing the size of the music player, you can now use my music player skin tool.
myspace 2.0 music player skins and code
If you want to make the player smaller, I recommend using this tool:
myspace music player, style, size, color, skin, position, playlist or single song player, myspace 2.0 or myspace 1.0
The templates include
For the single song player:
- on/off button and volume only, 40x51

For the multi song playlist player:
- 40x40 on/off button only (volume removed, so hopefully it is high enough and not too high)
- 110W x 42H on/off button, back/forward buttons and volume
- 295W x 31H (same size as mini player) shows on/off, forward/back, volume.
- 294W x 97H shows the album image, song name, on/off, forward/back, volume.
- 295W x 295W shows 5 songs in the scroll area, along with a full scroll bar and the playlists link at the bottom. This is the longest size that works with a custom skin for myspace 1.0, in IE. Making the player longer exposes a bug in the IE browser, related to the player flash implementation.

If enough people want another size, I will add a new template.

Or, you can size it using the below code and altering the height values to meet your needs.

When sizing the player by only changing the size of the object you get the following effects:
-If the player is sized smaller, some of it is clipped off of the bottom and/or right.
If the player width is sized larger, it stretches (distorts).
However, you can alter the player height, and make it longer, without it distorting. In this case, it will show additional songs.

Code for myspace 2.0
Put this code into the css area
Change BOTH 600 values, to the height you want your player to be.

{! START size music player code by Eileen !}
div.musicPlayerModule div.moduleBody{height:600px;}
div.musicPlayerModule object[id] {height:600px;} 
{! END size music player !}

It takes more code in myspace 1.0 and is much more likely to not work, when myspace makes some slight change. (and I highly recommend upgrading to 2.0)

<i class=i>START code to Size Music Player.  
Code Author Eileen</i>
<a class=i href="http://xiii.us/eGen/mpSkin.php">myspace music player customize, skin, size, opacity, position, myspace 2.0, myspace 1.0, playlist, single song player"</a>
<style>
.i {display:none;}
table table div object {height:600px !important;}
table table table div object,
table table td.text div object,
table div table div {height:auto !important;}
</style>
<i class=i>END code to Size Music Player</i>

You can put this code into any section that accepts style blocks.
Do not next inside another style block.
Do not remove my link or credit (they will not show up on your visible page).

Alternatives to Hiding the Music Player

I highly recommend against hiding the music player. Sometimes people use their computer to listen to their own music. Giving people the option to turn the player off is a very good idea.

Instead I recommend that you size the player small, and put it in the top or right left corner.

You will find the code to do that here:
size myspace music player tiny, and put in top corner of page.

Hiding the player while still allowing it to play
If you must hide the player, while keeping the music playing, you can use this code:
Place this code in the css section of the customize profile section:

div.musicPlayerModule {position:absolute; 
top:0px; left:0px; 
height:3px; width:1px; 
overflow:hidden;}
div#musicPlayer {position:absolute; 
top:0px; left:0px; opacity:0.001; 
filter:alpha(opacity=0)}

Fix issue with some of the player being hidden (caused by myspace default code)

This is caused by a bug that myspace introduced to their code. I really thought they would have fixed this by now.

Forcing the size of the player, or the immediate containing 2 divs, does not seem to fix the problem, as it did before.
Due to the way they have sized the columns, it is now necessary to override their column sizing, in order to prevent the right side of the player from being clipped off, if the column is not at least as wide as the player.

If you increase the size of the left column, you must also decrease the size of the right column, or it will "float" BELOW the left column, instead of beside it.

If you have the 2 column layout, this code allows the full width of the music player to show correctly:

{! adjust column widths to fix music player from having right clipped off !}
{! code author Eileen !}
div.wrap div.profileLayout div.column0 {width:300px;}
div.wrap div.profileLayout div.column1 {width:400px;}
{! adjust above width values so that sum is not greater then width of profile !}
{! end code to adjust column widths !}

If you are not using the same 2 column layout I used, you may have different class values for the effected columns.

mySpace Version 2 Customize Top Section, Mood, Online now Icon, contact Table, url, image, last login, location

noreply@blogger.com (u∃∃l!∃) — Fri, 21 Nov 2008 01:59:00 +0000

MySpace 2.0 (V2)(v.2) Customize the top area

All rights reserved.
You may use my code for the following:
- to customize a myspace page
- for any other use please ask. I usually say yes, if the use adds value (such as use with layout art and use in other tools.)
But I like credit.
- Do NOT remove my credits (you may add your own if you add value).

For a tool that will generate the needed code, for either an online now icon, which will allow you to show one icon when online and another when not online, go here:

http://xiii.us/eGen/olSkin.php

The online icon code is pretty easy and straight forward, I am sure it can probably be found on lots of sites by now (it is much easier then in version 1).
However, showing one icon when offline, and another when online, and allowing for transparency, does take more complicated code. So please do not copy my code to other sites. You may use it, on your profile.
If you want to make icons to work with the code, ask me, I am willing to share with those who are adding value (such as creating images).

This article is a work in progress. I just wanted to get some code out here, to refer people to, who were asking how to do this stuff.

Custom Mood:

Replace the image, with the image you want to use, then insert the following block of code into your css edit area.

{! start Custom Mood !}
div.basicInfoModule div.basicInfoDetails span.mood img {height:0px; width:0px; display:inline;}
div.basicInfoModule div.basicInfoDetails span.mood img { padding-right:30px; padding-top:30px; background-image:url(http://i38.tinypic.com/2wna25l.jpg); background-repeat:no-repeat;}
i.iix {display:none;}
{! end code for custom mood !}

If your image size is larger then the 30x30, adjust the padding px sizes, to accomodate your image.

Custom online now icon:
Replace the image, with the image you want to use, then insert the following block of code into your css edit area.

{! start code for custom online now icon !}
img.ImgOnlineNow {height:0px; width:0px; 
padding-top:20px; 
padding-left:80px; 
background-image:url(http://i2.tinypic.com/4q5x18z.gif); 
background-repeat:no-repeat;}
i.iix {display:none;}
{! end code for custom online now icon !}

Custom OFF and ONLINE icons

I have an updated version of this code, that does allow for the online icon to contain transparency. Instead of covering the offline icon, as my earlier version of the code did, it will actually remove the offline icon, when the online icon is displayed. This allows for more transparency in the online icon.

The newer code can be found here:
online now icons myspace 2.0, offline icons myspace 2.0

This will display one image when you are offline and another when you are online.
This requires an image, where the bottom 20px represent the image you want to show when offline, and the top 20px represent the image you want to show when online.
If using transparency, the online portion of the image needs to cover all the visible areas of the offline icon (unless you want these areas to show while online).


{!start code for custom online/offline icon!}
{!code author:Eileen views-under-construction.blogspot.com !}
{!do not remove my credit, do not re-publish my code, see above website for terms!}
li.offline {display:none;}
ul.profileUserInfo li {background-position:left bottom; height:20px; width:80px; background-repeat:no-repeat;} 
ul.profileUserInfo li img{ padding-top:20px; background-repeat:no-repeat; background-position:left top;}
ul.profileUserInfo li, 
ul.profileUserInfo li img {background-image:url(http://i287.photobucket.com/albums/ll142/mpskin/0-0/onoff/scroll-gold.png);}
ul.profileUserInfo li#adr,
ul.profileUserInfo li.tags,
ul.profileUserInfo li.lastlogin {background-image:none; width:auto; height:auto;} 
{!end code custom off/online icon !}

Style the contact table:
The easiest improvement to make to the default contact table, is to remove the ugly images, and then style the text.

The following code block will remove the images,style the text, position the link within the li (solves some alignment/spacing issues), apply background color:

{! contact table customize!}
{! code author:Eileen; views-under-construction.blogspot.com !}
li.i.clearfix {display:none;}  
{!OPTIONAL: color and border to contact table!}
ul.contactLinks {background-color:mistyrose; border:2px magenta solid;}
{!Size contactLinks div, override padding!}
ul.contactLinks {width:100px; height:60px; padding:0px;}
{size of individual li elements around each link}
ul.contactLinks li {position:relative; width:100%; height:33%;  text-align:center;}
{!apply to all contactLinks!}
ul.contactLinks li a {background-image:none; padding:0px; font-family:comic sans ms; font-size:11px; margin-right:auto; margin-left:auto;}
{!apply style for link pseudo-classes!}
ul.contactLinks li a:link, 
ul.contactLinks li a:active, 
ul.contactLinks li a:visited  { color:purple;  }
ul.contactLinks li a:hover {color:green; text-decoration:none;}
{!OPTIONAL color center link a different color!}
ul.contactLinks li.addToFriends {background-color:silver;}

Custom contact table:
To find custom contact tables, and code generator for use with your own custom contact table, go here:
myspace 2.0 custom contact tables, custom contact table code generator

There are so many different ways to do this.
If you are NOT moving the table (or moving it a very small distance, using margins) I recommend placing your custom table image, as a background, to the ul.contactLinks
element.
(I used the li element instead, because I later plan to add the option to move the table.)
However, if you want to move the contact table/links,
my preferred method is to use the top li element to hold the contact table image, and then place the additional li elements so that the correct portion of the background shows through.

(Due to the existing core myspace code, moving the ul element, has issues. )

The following block of code applies a custom image, to the contact table, and removes the existing text and image. This code will keep the table in the default position. The custom image should be 100x90 pixels, with each link 100x30.
This is slightly longer then the default contact table, and will push down the picture area, slightly.

This code goes in the css section, of the customize profile section:

{! start code for custom contact table !}
{! code author:Eileen; views-under-construction.blogspot.com; all rights reserved; !}
ul.contactLinks {width:100px; height:90px; overflow:hidden;  background-image:url(http://i287.photobucket.com/albums/ll142/mpskin/0-ct/100x90/scroll-pink-candy.png); background-repeat:no-repeat;}
ul.contactLinks li {  height:29px; width:100%; margin:0px; overflow:hidden; display:block;}
ul.contactLinks li a { background-image:none; height:28px;  width:100px; float:left; text-indent:1313px }
{! end code for custom contact table !}

Replace my image with your own. (or you may use my image if you want.)

The next block does not relocate the table, but uses code that will make it easier to later relocate the table. This is the version currently being used in my code/contact table tool. There are so many ways to code this, that each time I write the code, I do it slightly different.


{! START custom contact table/links skin !}
{!xiii.us/eGen/ctSkin.php code author:Eileen all rights reserved!}
ul.contactLinks {position:relative; height: 90px; width:100px;}
ul.contactLinks li.message {overflow:hidden; background-image:url(http://i287.photobucket.com/albums/ll142/mpskin/0-ct/100x90/nature/butterfly-on-green.png);height:90px; width:100px; position:absolute; top:0px; left:0px; }
ul.contactLinks li.addToFriends {overflow:hidden; height:30px; width:100px;position:absolute; top:29px; left:0px;}
ul.contactLinks li.comment {overflow:hidden; height:30px; width:100px;position:absolute; top:60px; left:0px;}
ul.contactLinks li a {display:block; background-image:none; padding-left:1313px; width:100px; height:30px;}
{! END custom contact table/links skin !}

The next code block allows you to re-position the contact table, using absolute positioning within the modulebasicInfo div, and measured from the top left corner of that div.
This code goes in the css section, of the customize profile section:

{! start code for custom contact table !}
{! code author:Eileen; views-under-construction.blogspot.com; all rights reserved; !}
ul.contactLinks li.message
{display:block; position:absolute; top:0px; left:0px; height:90px; width:100px; background-color:transparent;}
ul.contactLinks li.addToFriends {display:block; position:absolute; top:30px; left:0px; height:30px; width:100px; }
ul.contactLinks li.comment {display:block; position:absolute; top:60px; left:0px; height:30px;  }
ul.contactLinks li a {padding:0px; position:absolute; top:0px; left:0px; width:100px; display:block; }
div.modulebasicInfo {position:relative; }
{! end code to customize contact table !}

Replace my image with your own. (or you may use my image if you want.).
Alter the top and left values so that each link positions where you want it.

[More custom contact table options coming later, so little time, so much code in my head ...]

URL style

After applying the custom contact table, I realized the url looked really bad, I could add it to the top of the contact table, hide it or move it.
Instead I will ditch the ugly orange icon, and modify the text font to blend in.

{!url link!}
{! code author Eileen; xiii.us; views-under-construction.blogspot.com !}
{! however easy the code was to write, if you got it from me, do not remove my credit !}
span.urlLink i.icon {display:none;}
span.urlLink a.url {background-image:none; color:gold; font-size:8px; font-family:comic sans ms;}

OR I can completely hide the url:

{! hide url myspace 2.0 code by Eileen !}
span.urlLink {display:none;}
{! end code to hide url !}

[More code coming soon, so much code in my head, so little time.]

Elections, who to vote for, what to vote for?

noreply@blogger.com (u∃∃l!∃) — Mon, 03 Nov 2008 19:54:00 +0000

As usual, I find myself mostly undecided, with just over 24 hours before my ballot is due.

As with most elections, the advertising and Campaigning is mostly full of partial truths, designed to mis-represent reality.
However, unlike most elections, the hate and scare tactics seem to have reached a new level.

I do not agree with any single candidate on all of the issues which are important to me.

I despise earmarks (or any other type of unrelated rider attached to bills).
One candidate states he will veto any bill with earmarks, but then votes in favor of a bill that is stuffed with hundreds of pages of riders, some of which are clearly earmarks.

I despise, and see a significant problem with any model where socialized costs contribute to privatized profits. If my taxes pay the bill, the cost is socialized.

I do not believe in unregulated capitalism, as there are too many ways to profit without actually adding value. In many cases profit can be obtained while taking away value.
Give me a capitalism where profit = value added, charity is given by the person who earned the money being given, and a set of simple equal tax laws that actually have some correlation to an individuals probable demand on (or benefit from) tax funded services; and I will become a devout Capitalist.
But until this style of capitalism can be achieved, I will tend toward some level of what many call "creeping socialism" but I prefer to call "plugging the holes in Capitalism".

I believe that corporate greed is going to ruin this country. The shipping of jobs over seas is a huge risk to this country's economic stability. The huge (and increasing gap) between top management and those who invent the products and do the work is a risk. The benefits top management gets from short term stock price gains over long term stability is a risk, and leads to behaviors that put long term company stability at risk.

But how big a risk, should something be, before Government steps in, and implements policies that put the Good of the Country above the freedom of the Corporation?
Can we even trust Government to implement policies that really achieve this, when the tendency seems to be policies they claim should achieve this, but actually benefit some companies (those who have purchased our politicians) at a cost to others.

So who to vote for?
One candidate wants to change the way wealth is re-distributed (although some continue to argue as if he is introducing the socialist idea of wealth redistribution to a system which does not already contain this.)
He wants less re-distribution to the top, and more to the bottom.

I am in favor of less to the top.
I am NOT in favor of more to the bottom.

As for the other candidate, I believe he wants to keep the tax/benefit burden pretty much like it now is.
He does want to tax medical insurance, paid for by the employer, and then give us all $5000. In my case, this is probably a net gain, at least short term.
But it seems like a rather complicated way of moving money around.

I think that Medical Insurance companies are a problem, and add no value at all.
They bully suppliers (much like WalMart does).
They have forced the wages of those who actually provide the care down, while reaping huge profits for themselves.

Maybe McCain's plan will help. We can all take our $5000, and shop for Medical Insurance, basing our purchase decision on how much of the money collected actually goes to care, and how much to overhead.

Obama's message is mixed. He seems in favor of a Government program here, but I am not clear on exactly what it is.

I really like that Obama feels that corporations should NOT be allowed to take away our retirement benefits.
(I am a victim of this very corporate behavior, where something is stated as a benefit, and then after working for the company for 15 years, the rules change, and a major portion of the benefit goes poof. I know the fine print indicated it could, but based on the past track record of the company, it was not illogical for me to assume the benefit would remain.)

I like that Obama is against corporate tax loopholes. In fact, he even indicated a willingness to LOWER the corporate tax rate, if the loopholes were removed.

I still have no idea why we are STILL in Iraq, and prefer a policy that gets us out quickly to one that keeps us there longer.
If our purpose is to protect a key resource, for the sake of defense, then lets openly state that, and explain to the people why it is needed.
If our purpose is to fight terrorism, I am not sure Iraq is where we belong.
If our purpose was to overthrow their evil government, we have already accomplished that. Leaving Iraq is NOT the same as having left Vietnam when we did. We clearly gave up in Vietnam. Maybe we are just finished with our key mission in Iraq.
(I can't know if we are done or not, if I do not really understand what the mission is.)

I am against the government printing so much money that it devalues the money I have worked hard to save.
I think the law should require the government to give me (and others who have money saved) a share of the money they print, to bring my own savings up, an amount based on inflation, so its actual purchasing value remains the same.
Printing money to bail out large corporations, is a way of re-distributing from me (and others who have saved) to the top.
However both Presidential candidates voted in favor of a bill to give billions to the top. Then the Fed LOWERED interest rates.
Should not the shortage of money to borrow INCREASE the value of MY SAVINGS?.
Should the interest on my savings now go UP, instead of down?

Even more important then who I vote for for President, is who I vote for as a Senator.
I live in a very Blue state.

I have the choice between an incumbent Republican who not only voted for the bail out bill, but did so because of certain earmarks (he sent me a letter explaining why he voted for the bill); and a Democrat who I know very little about.
Often I vote based on balance of power, which would lead me to vote for the Republican.
However, I decided to vote out all incumbents, especially those who voted in favor of the bail out bill.

I also have several measures to decide on.
I usually vote no on these, because they are put together in a complicated fashion. I feel that laws do NOT need to be so complex, that they are difficult to understand.
However, one measure will get my yes vote.
I am in favor of being able to deduct 100% of my federal tax bill from my state taxable income.

MySpace Music Player Skins, Ad Free, No PopUps, Skin or color your music Box, standard player and Band Player

noreply@blogger.com (u∃∃l!∃) — Wed, 14 Nov 2007 06:16:00 +0000

MySpace Music Player Skins

Some quick links to various elements of this article:

Music Player Skins and Skin Code generatorIssues with scroll boxesUpdates, related to Myspace changes which effect music player skinsMy Rights related to Music Player skin CodeIf You want to Offer Music Player Skins on Your Site Click Here
Simple Band Player improvement; Allowing your background to show through your playerTutorial for Band Player Skins I suggest reading the above article even if you use the tool to generate your code.
How the Skins Work, and Some HistoryWhy does the Music Player Skin code on Most Sites have a Bug?
Using the old "official" Myspace Skins

Updates, related to Myspace changes which effect music player skins
The code in my music player skin code generator, has been updated as follows:
- Includes code for myspace 2.0
- Includes several different cropped player options, for showing only part of the player.
- should not break any scroll boxes, as long as you are using a standard size skin
(295 x 51 for the single song player; 295 x 400 for the playlist player)
If you are using one of my cropped player options, and you have scroll boxes, you need to read this:

- I have added hundreds of new skins for both full sized and cropped down size players.

- I had to remove the border option, the myspace code changes broke this functionality. However, I plan to add it back for use with myspace 2.0.

- I removed the custom size option, and instead opted to provide templates for the most popular sizes.

- I fixed the custom positioning option. I don't know when I broke it, but it didn't work for a while.

Fixing Issues with scroll boxes
IF IF you are using a standard size skin (295 x 51 for single song, or 295 x 400 for playlist multi song player) you should NOT have a scroll box issue on your page. If you do, please leave me a message, so I can look at the problem.
IF you are using myspace 2.0 you should NOT have a scroll box issue. If you do, please leave me a message, so I can look at the problem

IF you are using myspace 1.0 AND a cropped (downsized) version of the player, you may have a problem with scroll box code, caused by the music player skin code.

If the scroll box is for your friends and comments, comments, or any of the content below the meet section, go here for code that does not conflict with the music player skin code:
Scrolling Comments, friends and Comments, code that does not conflict with music player skin code

If you have added a scroll box, you need to do a few things to fix your scroll box:

1) Insure your scroll box has a class. This way you can apply style to the scroll box, that will not effect anything else.

2) When you assign the style to the scroll box, use explicit addressing. The more explicit the addressing, the higher the precedence (with classes carrying 10x the weight of elements)

3) whenn assigning style to the scroll box use !important for height and weight.
Because myspace used inline style, I had to use !important to override that style.
Therefore I had to use !important to override my music player skin code, on other divs.
For this reason you must use !important to override the music player skin code, for your scroll box.

Below is an example, of a scroll box, which has the class and style assigned.

<div class="myScroll">
scroll box content here
</div>

<style>
table td table td div.myScroll {height:200px !important; 
width:200px !important;
overflow:auto !important;
background-color:pink;
border:3px hotpink solid;
display:block;
visibility:visible;}
</style>

My Rights To most of the Music Player Skin code Being Used
Custom myspace music player skins were my idea, and it was my effort that enabled almost every site, currently offering these skins, to offer them.
Yet only a few sites have chosen to credit me for my work.
Why?

I say thank you to those sites, and they will have my on-going help and support.

As for those who feel it is just ok to take someone else's idea, for your own profit, think about it. Could you have figured out how on your own, with out having seen someone else's code? Would you have thought it could be done, and then figured out how to do it? If the answer is yes, then why did you not offer skins before my code got published?

Despite the popularity of myspace customizing sites, and the multiple questions asking how to color the player in various forums, NO one had offered skins, or posted code for making skins, before I published my code.

What does a site lose, if they credit me?
Why not credit me?
What does a site gain if they credit me?
At least two sites lost my referrals, I was referring people to those sites for either a useful service they offered or for their art. (lolspace is one of these sites)
I won't steal your skin art.

Why do the kids that post to createblog, feel a need to claim that they wrote the code, when they don't even know enough about the code to edit out the style lines related to my credit, although they did remove my actual credit?
I highly suspect that this was the first place my code was published, without my permission. From there it spread quickly.

For those who did write their own code; I am not claiming any rights to your work.
(I do know of one other source of original code for this. The coder did things differently, as I would expect from someone doing this on their own. But this is NOT the code I see on the layout sites offering skins.)

For those who started with my work, and then made little tweaks, you are using a derivative of my work, and crediting me would be the ethical thing to do.
I try to do the same if I use any content (such as images) which is either someone else's work, or a derivative of someone else's work.
(But often I do not know who is the author of the work.)

How do I know that the sites offering skins are using either my code, or a derivative of my work?
Two coders would not make exactly the same decisions, when there are several other ways to accomplish the task. For some of my later versions I added in multiple useless code lines and code line segments, which are showing up in other people's work.

How does a teacher know when two students copy each other's work?

While I was the first to publish myspace music player skin code, I was not the first to offer a skin code generator. A site called Jombley beat me to that. However, their generator, generated my early version of the code. This was the version with the left side div bug. It was also the version where I used a work around, to get around a bug in a beta version of safari I was testing in.
They had taken my code, and wrapped a generator around it.
Their generator does do some unique things that mine does not do, and mine does some things that theirs does not do.
(I would promote their site and link to their generator, if they bothered to credit me for the code.).

Music Player Skins for the Standard Page Music Player, skin it, border it, fade it, color it, size it, position it. More Skins and Skin Look options than Any Other Side. Code kept up to date with myspace changes. No visible ad placed onto your myspace page.

Image showing skin applied to the Band Player:

Credit for the above image goes to Giulio Genua.
Giulio has agreed to design skins for others who add him as a friend on myspace. Contact Giulio for more information.

Add color or skin to myspace music player (band player or Standard player)

Offering Music Player Skins on Your Site

Ask me.
I can help you set up your skins so they link to my code generator.

However, this is not a requirement.
The only requirement is that, if you are using my code (even if you modified it slightly) that you credit me on any page you offer the skins, and somewhere in the skin code itself.
The credit on your site, needs to be a link.
The credit in the code does not need to be a link (unless you are also forcing a link back to your own site).
For myspace 2.0 putting in an actual link now requires a separate block of code, placed into the content area, instead of the css area.

IF you do link to my generator, you get the following benefits:
- I update the code when myspace makes changes (and they do this a LOT)
- Code is generated for myspace 2.0 and myspace 1.0
- Users can adjust opacity and add additional options.
- I help users if they have conflicting code. This also helps me find the types of other things users have added to their profiles, that cause such conflicts. As I find these things, I often tweak my code, to prevent the problem.

Terms are negotiable.

How the Skins Work, and Some History

I first considered writing code for music player skins, long before myspace offered them. However, there is a reason that my code, was not widely used, prior to that point in time.

My very early music player skin code, did involve making a copy of the player.
I used to explain why, but choose to remove that content.

Question for those who think that music skin code was so easy to come up with that they have the right to just use it, without crediting the source they either completely copied or made a derivative of:
What did myspace change, in their own core code, that made this task no longer require I make a copy of the player?

This is where I had the story about the friend of mine, and the problem they had with their player, that first alerted me that myspace had made a change, that made skinning the player easier. The same story can be found on createblog.com. However there, it is slightly modified. What is hilarious is that the person claiming this to be their experience, combined my code, with other code, of a completely different style, and one code block actually rendered the other code block broken. In another case, on createblog, the thief used the wrong picture with the code block. I had an image to go with one code example, and they used that image with my other code example.
Why do people do this? Why do people feel they are entitled to claim other people's work as their own?
Profit? In the case of createblog, I don't think those posting my work, and claiming it as their own, make any profit. So why? What is the motive?

The 2nd version of my code (the first version which did not involve copying the player), is the version found on many sites which offer skins. It is in tact, with my original bug.
A few sites have managed to fix the bug on their own. A few others copied my fix (along with its useless content).
A few sites had the bug for months, and then recently fixed it.

Why would this site (wootfreelayouts), credit me initially, (after I told them that their explanation of how the skins worked was incorrect), and then later remove that credit?
They did this several weeks before they actually fixed the bug they copied from me.
Even after they fixed the bug, they had a derivative of my work.
My work is what made their skin business possible.

Why do most sites, offering skins, have a bug in their code?
I overlooked a few things when I initially created the code. I didn't even use the most obvious code. I made a few obscure decisions for obscure reasons (one reason was related to a beta version of Safari that I was using.)
One of those decisions resulted in a bug.
I call it the left side div bug.
I had never seen a left side app (I am not sure if they existed yet).
However, as soon as my code became widely used, reports of the bug started to show up.
I quickly fixed the bug in my copy of the code.

When I initially fixed the bug, I left in a segment, that was useless. I did find a few sites with this version of my copied code, that included the code fix, along with the useless segment of code. (thelolspace.net and a few others)

Why did I use -moz-opacity?
For those who wrote their own code, or slightly modified mine, why did you keep -moz-opacity? If you came up with it on your own, why?
Why not opacity?
(ok, those who read this article before I deleted that information, or those who go through the trouble to dig it out of the google archive can read my explantion.)

The use of the two together is moot.
The same goes for -khtml-opacity and Safari.
opacity works in all but the very old versions of FireFox, Mozilla, and Safari, just as well as -khtml or -moz opacity.

Applying the older "official" myspace Skins

This by-passes the menu, that most people no longer have:

The following link takes one directly to the stop for applying the skin
Apply Skin 1:Default Skin
Apply Skin 2:Zune
Apply Skin 3:large Zune
Apply Skin 4:Boy with Boom Box
Apply Skin 5:Girl with Boom Box
Apply Skin 6 Lime Digital Player

If you are stuck with a skin you do not like (some people installed a skin before the option went away), and you want to remove it, use the 1st link in the list above.
This will restore the default skin.

Applying a Band Player Skin IF you have a Div Overlay
The location for this code, depends on your div overlay strategy.
If you are using MY strategy, place this code block just AFTER the
!----START CUSTOM CONTENT ----!
which should be in your band members block.

<a class=i href="http://xiii.us/ms/music-player-skin">
MySpace music Player Skin Code by Eileen</a>
<div class="mPlayerDiv">
</div>

Next Place this at the very top of the influences (or wherever you are keeping style blocks.
Modify the top and left values to suit your own profile.
These values should be the same for the div as they are for the object.

<a class=i href="http://xiii.us/ms/music-player-skin">
MySpace music Player Skin Code by Eileen</a>
<style>
div.mPlayerDiv {position:absolute; top:145px;
z-index:8;
 left:410px; width:450px; height:345px; background-image:url(http://genuabuilders.com/host/mp02.jpg);
background-repeat:no-repeat; background-position:center center;}
.i {display:none;}
 object,  embed {-moz-opacity:0.4}
object {filter:alpha(opacity=40);  width:450px; position:absolute; top:145px; left:410px; z-index:9}
</style>

If you are using someone else's div overlay strategy, the technique is the same.
However, most of the other strategies I have seen do require that you position from top center of the body, instead of top left of a containing div.
In this case you will need your position statement to look more like this:

{position:absolute; top:Ypx; left:50%; margin-left:-Xpx}

As long as you position the mPlayerDiv exactly the same as you position the object/embed; your skin should come out in the same location, as your player.

Applying a Band Player Skin IF you Do NOT have a Div Overlay
[I deleted this code, I need to re-write it based on lots of myspace changes since I wrote this article]

========================================================================

Some sites using my code without my permission:

sunshinee.com (most obvious case of code theft, related to my mini player code whih I offer here: Reduce Music Player to Just the Start Stop Button.)

wootfreelayouts.com (used to credit me but stopped. I believe this was on the advice of the person who provides the skins to multiple sites. Admitting I was the author, without meeting my requirements for properly crediting me, put them at risk.)
oh-lyts.com
musicplayerskins.net
freeglitters.com
www.static-layouts.com
myspacelyts.net
snazzyspace.com
totallylayouts.com
dolliecrave.com
thelolspace (obvious derivative of a later version of my work)

All of these sites, and many more, are profiting from MY code.
Is that fair? Legal?
Do they Care?
Is there anything I can do?
Does anyone else Care (I have concluded no).

note to self: Try to use your power for good and not evil. Two wrongs do not make a right.

Skins found in My Music Player Skin Libraries (all found with my music player skin generator which can be found here:
Eileen's MySpace Music Player Skin Code Generator

Hearts and Heart Pattern music player skins:
This library includes several heart patterns, many based on photographs of fabric and other products containing hearts.
Some were made by manipulating images found in the public domain on photobucket.
Some were custom designed for me by a friend.

Rainbow, Tiedie, Neons, Flashing bright Colors:
This library includes some images which I took from the public domain on photobucket.
Some I obtained by taking photos of some of my TieDie clothing.
Some were made using animationshop and paintshop.

Cute Music Player Skins and Cartoon Music Player Skins:
This includes many cartoon characters, along with dinosaurs, and photos of cute animals..
In many cases I searched for the popular cartoon character in a music setting, such as playing an instrument, singing or dancing.
A few involve photographs of products such as Speakers, which included the character.
This library includes several popular cartoon characters, along with cute photos of animals.
Ths library includes, but is not limited to:
mickey mouse, stitch, lilo, flinstones, sponge bob, boots (from Dora), sylvester, tweety, winnie the pooh, anime, cheshire cat, stewie from family guy, lots of hello kitty, betty boop, goofy, simpsons, mario, marvin the martian, precious moments, snow white, sleeping beauty, south park, walle, yogi bear, taz, tinker bell, loony tunes, curious george, cookie monster, elmo, candy, stuffed bears and other stuffed animals, airplanes, cars, happy faces and more.

Artists and Celebrities
This includes both images of music artists, other celebrities, and album art.
I decided which artists to make skins of, by going through the top music charts, both on MySpace, and on the Radio.
The collection includes, but is not limited to:
Jonas Brothers, Kevin Jonas, Miley Cyrus, Hannah Montana, Aly and AJ, Cream (album art), Akon, Lil Wayne, Kelly Clarkson, Killswitch engage, misfits, Jesse McCartney, tia tequila, Pink Floyd (album art), Kardinal Offishall, Cold Play, Aubrey oDay (Danity Kane),T.I. TI, Dylan Sprouse, Cole Sprouse, Sprouse Bros, Yo Gotti, Jodin Sparks, Madonna, Katy Perry, Kid Rock, Mason Musso (Metro Station), natasha bedingfield, pussy cat dolls Nicole Scherzinger, Ray J, Taylor Swift, Trace Cyrus,
Amy, tool, linkin Park, Sick Puppies, Vin Diesel (and many more).

Music Player Skins for the Standard Myspace Page
color or skin the myspace Band Player

MySpace Music Player Skins Position Myspace Music Player

noreply@blogger.com (u∃∃l!∃) — Mon, 12 Nov 2007 01:41:00 +0000

Positioning the Myspace Music Player

How to position the myspace music player using my music player skin code tool

The Tool these Instructions go with can be found here:
MySpace Music Player, Skin, Color, Size, Position and More

This Article is being written at this time, Check Back Later. Feel Free to use the Tool linked to Above, even Without the detailed instructions I will publish here, it works quite nicely.

Multiple MySpace Music Players On One Page

noreply@blogger.com (u∃∃l!∃) — Sat, 10 Nov 2007 19:45:00 +0000

How to Place Multiple MySpace Music Players on One page by extracting the object source

This is for the Standard Page Player NOT the Band Player
(it is against the myspace terms of service to do this for the band page player).

Step 1)
View Source

Step 2)
Search for this word:
lads

You will find a line of code that looks like this:

var s = "http://lads.myspace.com/mini/mini.swf?b=MTE5NDA1NjI1&o=ODU4ODE3NTc=&d=MTIxNzg3NzAzMw==&i=MzI4NDgwMDMy&a=RmFsc2U=&u=LTE=";

You want everything that is between the quotes

http://lads.myspace.com/mini/mini.swf?b=MTE5NDA1NjI1&o=ODU4ODE3NTc=&d=MTIxNzg3NzAzMw==&i=MzI4NDgwMDMy&a=RmFsc2U=&u=LTE=

Now you want to use the below code block and REPLACE YOUR-URL (both occurrences) with the above string.

<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="all" height="51" width="295" data="YOUR-URL">
  <param name="wmode" value="transparent" />
  <param name="allowScriptAccess" value="never" />
  <param name="allowNetworking" value="all" />
  <param name="movie" value="YOUR-URL" />
</object>

I end up with the following:

<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="all" height="51" width="295" data="http://lads.myspace.com/mini/mini.swf?b=NTAxNTU1NTQ=&o=MTY1MDY3NTAy&d=MTIxNDUzMzE0Nw==&i=MzI4NDgwMDMy&a=RmFsc2U=&u=MzI4NDgwMDMy">
  <param name="wmode" value="transparent" />
  <param name="allowScriptAccess" value="never" />
  <param name="allowNetworking" value="all" />
  <param name="movie" value="http://lads.myspace.com/mini/mini.swf?b=NTAxNTU1NTQ=&o=MTY1MDY3NTAy&d=MTIxNDUzMzE0Nw==&i=MzI4NDgwMDMy&a=RmFsc2U=&u=MzI4NDgwMDMy" />
</object>

You can now place this object code, where you want this player to show up on your page.

If you want to apply a skin, you need to wrap the object code in a div, give the div a class, and apply the skin to the div class.
(I might help you with this if you ask.)

Once you are finished, you can then change your default player to a new song, and repeat the process.

I have tested this with up to three players. (2 players copied and placed using the above code, and the other set as the song to show on my profile).

The above strategy can also be used to send the player to others, post in a comment, send in a bulletin and more.

Comcast Voice Over IP WARNING Do Not Purchase

noreply@blogger.com (u∃∃l!∃) — Wed, 17 Oct 2007 18:10:00 +0000

WARNING: If you are Considering Comcast Voice Over IP

Incoming Calls have a HIGH rate of just not coming through.

Initially I saw it as a relief from the flood of sales calls, and thought maybe my entry on the "do not call" list was finally taking effect.
Then I realized that people who had tried to call me, had been sent to voice mail, and my phone never even rang, to indicate an incoming call.
I also tried tests from my own cell phone, and the result was I was sent to voice mail without my phone even ringing.
My internet connection was working just fine at the time, for other internet activity.

The above problem has cleared up, I am not longer experiencing missed calls (that I know of). The sales calls continue to flood in.

Your Number will be Sold to Telemarketers possibly FASTER than you can get the number distributed to your own Friends and Family.

Before I had even distributed my new number to my friends and family, I started getting sales calls.
The sales calls have been flooding in at an increasing rate.

I did add the new number to the do not call registry, but that process takes longer than it took Comcast to have my number distributed to several Telemarketers.

I even got a sales call from a Comcast Competitor, for satellite Television. I was very tempted, but I boycott companies which do phone solicitations and NEVER allow the actual phone solicitation to lead to the my helping a company profit.
Why?
This is one of those externalities that companies are not required to pay for.
They NEVER compensate me for the time lost due to the interruption.
They take up the time of hundreds of people, and if they get just one sale after thousands of calls, they still profit. As for those who didn't buy; we are a non factor, something they care nothing about.
Do they care that I must turn off my ringer, which results in my phone being of minimal value to me. No they don't. They only care about that sale they might make.

My Advice:

DO NOT PURCHASE Voice Over IP from Comcast Cable
The price goes up to $44.99 very quickly. Vontage is so much cheaper.

So for now, the only service I really need from comcast in the internet (no one else is fast enough, in my area, at this time).

Finding a simple Counter Dilema

noreply@blogger.com (u∃∃l!∃) — Sun, 23 Sep 2007 00:03:00 +0000

My Counter Dilema, Deceptive advertising.

[update: I was actually impressed with the service I got from amazing counters, once I had emailed them. This doesn't address the issue of the deception in the sponsor choices, but at least they were quick to respond to my email, and willing to help me obtain a sponsor I was comfortable using.]

I recently did a comparison of several internet counter services. I was looking for simple counters, which did NOT include tracking. These exist and often consist of a simple image file (gif or png); which is updated by the site, each time the file is accessed.
I needed counter code which would not be rejected by sites which filter out script code and many useful dynamic html commands.

Any page which started throwing pop-ups was ruled out (I have some pop-up blocking turned on, and I don't want to do any further blocking).
Any page which started sending out irritating noises was ruled out. I use my computer to listen to music.

At one point I thought I had found the perfect counter site.
The site didn't send me into pop-up hell, or make irritating noises as the pages of their competitors seemed to.
They had a good selection of counter designs, including one which looked like LEGO (my favorite toy).
They offered a simple counter option, which consisted of a simple png file, so it was not going to be rejected by myspace and other web page hosting services which reject counters with any real content to them.

Of course I understand that advertising is what makes the service free, so I accepted that I would have to take an ad with my coutner.
I did not like the initial sponsor my counter was assigned. So I selected the option to choose a new sponsor.
Selecting a sponsor is a semi-random process, where I continually select new sponsor until I get the one I want. Several came up multiple times, before the list had completed. So maybe it is random with different probabilities assigned to different sponsors.
Going through their list of sponsors, I found several I actually do business with.
I even found a sponsor, for cupons, to a site owned by the company which employs me. But I continued through the list.
At one point I thought I found the perfect sponsor, there was a choice to choose the counter site (the one I was on) as my sponsor.
I thought this would be perfect; if someone is clicking on a link, next to my counter, why not take them to a site where they can get the same counter.

So I selected the counter site, and proceeded to the step which generates the code.

What did I notice?
While my sponsor link did say "amazing counters" hidden in there was an ad for Dell Computers. My counter image (which is much larger than my sponsor link) was turned into a link to a Dell Computer site, even after I did NOT select Dell as my sponsor.
While I have no real issue with advertising Dell Computers (although it is a major competitor of the company which employs me), I did not like the sneaky way it became my true sponsor, AFTER I choose to select something else.
Why was the counter site sneaky about this? Why even have amazing counters in the sponsor list, if selecting this leads to the assignment of a different sponsor?

After realizing that my sponsor was Dell, and not amazing counters (as I had selected) I went back to the sponsor selection.
I proceeded to look for a specific sponsor I had seen earlier in the list. After HUNDREDS of clicks, it did not come up again. I was about to give up and select another sponsor, which I was ok with.
I selected ToysRUs-cupons. Did this link take me to a site associated with ToysRus? Of course not. It was a general cupon site, with Dell on the top of the list.
If one scrolled down, ToysRus cupons were available, as were several of the other companies, I had seen cupon links for in the "select sponsor" process.
In the meantime, I had become just irritated enough, that I had used the "send us a message" functionality.
I went back to the "select sponsor" and continued the process.
Eventually, it came up, what I thought was a link to the company I work for (or at least their online shopping service). Maybe I hadn't noticed the word cupon after it before, and maybe that was what I saw before.
I went ahead and tried out the link (if I was going to have this link on my site, I needed to check it out). At least it was what it claimed to be, and the first cupons offered, were for the shopping site which sells the products made by the company I work for. (The links to get Dell cupons were off to the side).

Dilema 1)

Will I continue to have amazing counters as the counter service I recommend to people?
It is still my favorite online counter service. (OK, sneaky sponsor assignment is less undesireable than pop-ups and noise).

I could write my own counter service, and offer it to those who ask me where to get counters. But not today, and it will take a significant chunk of time to come up with a variety of counter designs.

If I do decide to write my own, For the short term, do I continue to use amazing counters?
Do I continue to recommend amazing counters.?

Dilema 2)
Assuming I continue to use amazing counters;
Do I select a sponsor which offers cupons for products sold by my own employer, or a site which pushes products made by the competition?

There was a time when this answer would have been obvious to me. There was a time when I cared if the company, which employs me, did well. There was a time when if the company did well, all the employees were rewarded.
But the company has made many changes.
The company no longer treats the majority of its employees as valued assets.
No longer do the majority of the employees have any vested interest in the performance of the company. There is a new philosophy that only a small handful of employees are really adding much value at all, and the rest of us are easy to throw away and replace.
They pay me (and pretty well). I do the work I am assigned, and struggle to maintain the same level of work habits I had when I felt more valued. I owe them honest work in return for that pay. My loyalty goes no further.
But for some reason, I just don't feel right having a major competitor as my counter sponsor, although I feel free to do so.

(I know it is easy to alter the code, and remove the sponsor, but I want to stay within the terms of service, if I am going to install code from another site).

positioning and moving myspace apps

noreply@blogger.com (u∃∃l!∃) — Thu, 13 Sep 2007 18:54:00 +0000

Moving, Sizing and Coloring myspace Apps

I highly recommend upgrading to myspace 2.0. In 2.0 you can position your apps by dragging then, in the provided myspace profile customize tool.

You can also address each app independently for styling.

I will add instructions here, related to how to locate the id of a single app (in myspace 2.0) if anyone is really interested.
For now I am not sure what people are interested in, and my time is limited.

The below code is still relevant for myspace 1.0 and Artist/band pages

Styling Apps, General Information and Limitations
Moving Apps, General Information and Limitations
Code Examples
Sizing Apps
Coloring a Right Side App to blend in with your profile
Move a Single Left Side App To Top Left
Move a Single Right Side App To Top Right
Move a Single Right Side App To Top Center
Move a Single Right Side App To Top Left
Move a Single Right Side App Above About Me

Styling Apps, General Information and Limitations
MySpace recently (May or June 2008) added a class to the App tables.
This makes styling them much easier, however, the apps are all still in the SAME class, therefore All Right side Apps must have the same style as each other right side apps. The same goes for Left side Apps.

All Apps can be addressed like this:
table table table.userProfileApp

Right side apps can also be addressed like this:
table table td.text table.userProfileApp

This means that we can address the right side apps independently of other elements.
We can address Left side apps, and then do an override for right side apps.

Sizing Apps
The below code block, will alter the width of ALL right side apps.
This code is useful in a skinny profile.

This will distort how some apps appear. We can resize the app container, but we have no control over the actual iframe content. If this content assumes a larger app frame size, it may distort.
This has been tested, and worked well on the truth box app on my own profile.

This code can be placed at the very top OR very bottom of the about me or to meet section.

<a class=i 
href="xiii.us/ms/moving-apps">Size MySpace Right Side Apps Code By Eileen
<style>
x.i i, .i {display:none;}
table table td.text table.userProfileApp, 
table table td.text table.userProfileApp * {width:300px !important;}
table table td.text table.userProfileApp div,
table table td.text table.userProfileApp div * {width:auto !important; }
table table td.text table.userProfileApp div div img,
table.userProfileApp div.xiii {width:6px; height:7px}
table table td.text table.userProfileApp div {height:13px !important;}
</style>
</a>

Coloring a Right Side App to blend in with your profile

<a class=i 
href="xiii.us/ms/moving-apps">Size MySpace Right Side Apps Code By Eileen
<style>
x.i i, .i {display:none;}
{! change magenta to the color you want to get the desired look !}
table table td.text table.userProfileApp {background-color:magenta !important;} 
table table td.text table.userProfileApp *,
table.userProfileApp div.x i i.i {background-color:transparent !important;}
{! you can adjust the below value as desired, depending on how much blend you want !}
table.userProfileApp {opacity:0.6; filter:alpha(opacity:60)}
</style>
</a>

Moving Apps, General Information and Limitations

- You must have ONLY ONE App on the Right, and/or One on the Left
OR
- You must be willing to move the Apps as a group.

- The App should be a static size, OR you must allow enough room for the largest size you expect the App to expand to.
(Some Apps are very dynamic in length).

Move a Single Left Side App To Top Left
Suppose I want to move a Left side App to the very top of the Left Side?
First I create space for the app, above the profileInfo table.
Then I use absolute (or relative) positioning to move the App into the space.
My first example will use absolute positioning.
Because, in this case, I am moving over elements which are very static in size, this works well.

Place this code at the top of your about me (or any other section which accepts html code)
You will need to alter the px values, based on the size of your app.

<a class=i href="http://xiii.us/ms1/">
MySpace Code and Tutorials by Eileen</a>
<style>
{! move left side app to top of left column !}
.i {display:none;}
{! create space above profileInfo for app !}
table.profileInfo {margin-top:280px;}

table table table.userProfileApp {position:absolute; top:170px; right:50%; margin-right:80px}

{!reverse effect on right side apps!}
table table td.text table.userProfileApp {position:static; margin-right:0px;}
</style>

Move a Single Right Side App To Top Right

Place this code at the Bottom of the To Meet

<a class=i href="xiii.us/ms1/">
MySpace Code and Tutorials by Eileen</a>
<style>
{! create space above main table !}
table.extendedNetwork {margin-top:400px}

.i {display:none;}
{! move right side app to top right of page !}
table table td.text table.userProfileApp {position:absolute; top:170px; right:50%; margin-right:-385px ; }
</style>

Move a Single Right Side App To Top Center
Use the Below code block, for placing a right side app top Left, and alter the margin-right value to about -225px.

Move a Single Right Side App To Top Left
Place this code at the very Bottom of the To Meet

<a class=i href="xiii.us/ms1/">
MySpace Code and Tutorials by Eileen</a>
<style>
{! create space above main table !}
table table {margin-top:400px}
.i {display:none}
{! move right side app to top left of page !}
table table td.text table.userProfileApp {position:absolute; top:170px; right:50%; margin-right:-50px ; }
</style>

Notice that the above creates a blank space to the right of the App?
This was necessary because the right side apps are wider than the left column, and one can NOT make them smaller (due to the size of the iframe inside the app, and the fact that myspace blocks any code using the keyword iframe).

A solution to this problem, is to move other elements into this location.
I like to choose elements which are reasonably static in size.
My elements of choice tend to be the Status box (the old extended network) and the contact table.
The below code will move the status Box and contact table, to the right of the App (the one I just moved to the top left).

<a class=i href="xiii.us/ms1/">
MySpace Code and Tutorials by Eileen</a>
<style>
table.extendedNetwork {position:absolute; top:170px; right:50%; margin-right:-385; width:300px; height:200px}

table.contactTable {position:absolute; top:390px; right:50%; margin-right:-385px;}
.i {display:none;}
</style>

Move a Single Right Side App Above About Me

Solution removed, new solution coming soon
You can just use the solution for placing the app top right, and adjust the values.
This does assume a static blog size (or blogs removed).

Or just use relative movement to move it up.

More Examples Coming Soon(If I think there is enough interest to make it worth my time to write them up).

Thank you for Visiting, Have a Nice day

moving myspace truth box.
Put myspace truth box on top.
Move buy your friends app on myspace.
Truth Box and buy Your friends, moving them on myspace.

MySpace code Changes, Problems, Fixes

noreply@blogger.com (u∃∃l!∃) — Thu, 06 Sep 2007 18:23:00 +0000

24 February 2009
problems with code in headline:

On the the private profile, tag syntax, is being converted to the text equivalent.
This means it will show up as text, instead of behaving as tags.

I HIGHLY RECOMMEND upgrading to myspace 2.0
It has far better privacy options, including hiding last login.
Almost all customizing tasks are easy.

It is also easy (using an overlay strategy) to create a profile that looks different for friends and non friends.
Once you set it to make last-login private, you can still hide the text that says

last login:private

{! hide last login !}
li.lastlogin {display:none;}

put that in the css area

To hide the entire section, that contains the age, gender, location, last login, online icon, use the following

{! hide age, gender, location, last login, online !}
ul.profileUserInfo {display:none;}

The cool thing is, that even when users turn off style, or do a view source, they will only see that this information is set to private. They will not see the values.

So if hiding this information matters to you, you probably should switch to myspace 2.0.

I will write more about this after work today. But my guess is that someone (who does not have to work today) will have some solutions published sooner then I will.
Probably multiple people.

26 September 2008
Music Player Changes.
Depth has changed

band page:
table table td.text div div object
OR
table table td.text div div embed

Standard Page:
table table div div object
or
table table div div embed

object versus embed depends on browser.

I have not updated my code for the standard player yet, but this guy has:
Standard Player Hide
He covers both the official myspace way (which won't allow the music to play on your profile) AND the custom way, which allows the music to player on your profile.

The new music player gives users the option to add play lists, I like these.

Band Page Side Effect
If you have done anything with your shows, by addressing their div, this will now effect your band player
I highly recommend removing your shows from any scroll box.

If you want to place your shows, instead of addressing by the div, address by the table.
i.e.

table table td.text div table{ style in here }

You can address and move the music player by addressing the 2nd div
table table td.text div div {style in here}

I have updated the code here:
Band Page Music Player Hide, Move, Position, Color
But I still have more work to do.

Common problem on Standard pages
For people who have the bottom links hidden, addressing the
table div div
Remove that code, it will hide your music player.

Bug related to my music player skin code
Some versions of my code had an unDo at level
table table div div
That must be removed, now that the player is another div deep.
I added that for users who had applied custom div overlays, putting some of their custom div content at that depth.
These users will now need to insure that their custom div has a class, and apply the undo specifically to that class.

I have fixed this in my code generator.

What I plan to Fix
My music player skin generators, both standard and band to take full advantage of the new code. The bug in the standard player has been fixed.
Band player skins just got way easier.

For each blog article effected, I will remove it or update it (I haven't decided yet).

I have plans for this weekend and won't have much time to write code.

So much to do, so little time.

===============================================================================

June 19 2008
Major change to top menu area, gotta love it.

Seriously, I will come up with code fixes, sometime tonight.

For now I have to concentrate on the work I get paid to do
(which is not this, because this code always gets stolen, and serves only to profit others besides myself).

Jan 18 2008
Mucking with the select short cut thing again. As before, I recommend just getting used to the thing, it is not really that bad.
Several things still work to hide it or move it.
Margins, opacity, even left and right movement via position:absolute.
They put an important after the static, and I don't exactly understand why I can override that with more explicit addressing, yet not override the top:inherit.

For some tips on styling this thing, to make it more palatable, go here:
Style search and short cut things

Jan 13 2008
It is my Birthday Today. I am in DisneyLand.

Dec 1 2007
Since they didn't back out the junk they added around the extendedNetwork table ...
(maybe they are taking the weekend off) I will publish some fixes.

I have tried to do this in a way, which will still work if they back the change out.
IF you want to display the extendedNetwork (status feature box) and REMOVE the extra space created in that space
The below works well if you have used
table table table {style stuff in here}
to assign your borders and/or background to each of the content tables.

If you have assigned your desired border directly to
table.extendedNetwork
Omit (do not use) the line of code I have marked as OPTIONAL:
to assign borders and/or background to all of your main content tables.
This code does works even if you are displaying a Calendar.
Place this code at the end of the "To Meet" section:

<i class=i>Remove new junk around extendedNetwork
<a href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy9tcy9maXhlcw==">
mySpace code change fixes by Eileen</a>
</i>
<style>

.i {display:none !important;}

td.text table table {display:none;}
td.text table table.extendedNetwork {display:inline;}
td.text table.blurbs table,
td.text div.myDivFC table,
div.myDivFC td.text table {display:block;}

{! control space ! }
td.text br {display:none}
td.text table br {display:inline;}
td.text div.myDivFC br {display:inline;}
td.text table {margin-top:15px; margin-bottom:5px;}
td.text table table {margin-top:0px; margin-bottom:0px;}

{! OPTIONAL:border within extendedNetwork !}
table.extendedNetwork, table.extendedNetwork td {border:0px !important;}
</style>

</td></tr></table>
</td></tr></table>
<div class="myDivFC" >
<table class="i" ><tr><td>
<table><tr><td>

IF you want your extendedNetwork (status feature box) and any extra space created in that space, Gone
There are a few ways to get rid of this one.
Because I fully expect extra content to show up in the extra table they created below the status, I am going to recommend this one.
This Code will not remove, hide, or otherwise mess with your Calendar
Put this code at the bottom of the meet section:

<i class=i>Remove extendedNetwork ad junk around it
<a href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy9tcy9maXhlcw==">
mySpace code change fixes by Eileen</a>
</i>
<style>
.i {display:none !important;}
td.text table {display:none;}
td.text table.blurbs, td.text table.blurbs table,
td.text table.latestBlogEntry {display:block;}
td.text div.myDivFC table,
div.myDivFC td.text table {display:block;}

td.text br {display:none}
td.text table br {display:inline;}
td.text div.myDivFC br {display:inline;}

td.text table.blurbs, 
td.text table.latestBlogEntry {margin-top:15px; margin-bottom:5px;}

</style>

</td></tr></table>
</td></tr></table>
<div class="myDivFC">
<table class="i"><tr><td>
<table><tr><td>

Extra border or Background around extendedNetwork
In this case you have kept the extendedNetwork (where the status message is) but you have an extra border or space around it.

The table that mySpace added does NOT have any border or background color defined.
If you are seeing this, it is coming from your own style code.
The most common cause (that I have seen) is to have set some sort of style (border and/or background) for ALL tables which are three tables deep.

Look for this:

table table table { some stuff to assign border and/or background }

You may have something equivalent but with slightly different syntax:
td td table
table td table td table
body table td table td table
There are others as well.

Replace it with this:


table.profileInfo,
table.contactTable,
table.userProfileURL,
table.InterestsAndDetails,
table.userProfileDetail,
table.userProfileSchool,
table.userProfileCompany,
table.userProfileNetworking,
table.extendedNetwork,
table.latestBlogEntry,
table.blurbs,
table.friendSpace,
table.friendsComments,
table.myBlurbs { the same style stuff you had for table table table }

You have extra space above and below
My suggestion is to either accept the space for now, and wait;
OR to remove some of the carriage returns and take control over the space between the tables yourself.

An Inner border has showed up inside my Extended Network Space
This is likely caused by having assigned an outer border at level
table table table
Because the extendedNetwork was at this level, this did an override of the border being assigned to the extendedNetwork by the myspace code.
You can now remove the default border as follows:

<style>
table.extendedNetwork, table.extendedNetwork td {border:0px !important}
</style>

Nov 30 2007
extendedNetwork (where the status now goes) has the same issue as it had for a while yesterday. (See Yesterday's entry)
I am not going to bother writing code to deal with it until it remains in place for at least 24 hours. (Yes this means if it is there when I get up tomorrow, I deal with it).

There is an addition BR (carriage return) at the top of the right column. There was one in the old code, and there are now two.

Nov 29 2007
Problem with extendedNetwork is gone
-- problem which was there earlier --
An additional table has been added to enclose the extendedNetwork table (table.extenddNetwork}
The structure has an additional table under the extendedNetwork as well.
To see the structure look at this:
myspace page showing table structure

This is causing obvious extra space in profiles where the table has been removed.
It is not so obvious in other profiles.
This puts the extendedNetwork table (where our status now is) down another table deep.
table table td.text table table.extendedNetwork.
The table underneath extendedNetwork will take up space.
It has a few cells in it.

I am not going to give out any code to fix it until I see what they are doing.
My guess is that they will move up the extendedNetwork class.

~ Nove 2007 Music Player issues
Changes to the music player code have resulted in some people having their music player hidden behind other content (sometimes it is a clear layer of something, and the symptom is that the buttons do not work).
The fix is to add a z-index to the code line you use to position your player.

i.e.
table table div object, table table div embed {position:absolute; top:Ypx; left:whatever; z-index:9}

Based on this change, it is not much much easier to add skin or coloring to the player.
If interested see this:
Add color myspace music player

9 Nov 2007

Resizing Music Player

Broken. I have no idea when this change occurred. Instead of shrinking the player, the effect of a resize is now to trim sections off of the player, so that only a fraction of the player shows.
I don't know if there is a solution, as I don't have a lot of time to play with it right now.
For now, I have fixed the situation, on my own pages, by clipping the player down to just a button and placing it just to the left of the Ad banner.
I have the code here:
MySpace music player hide, resize, move

2 Nov 2007

Short Cut Links Change Again

Is it time to just embrace this little box, as we have come to do with the ad banner?
I see NO OTHER purpose for the code they added, except to prevent people from hiding this. They are attempting similar changes related to the google search.

This is the block I am now using on my profiles, which is working for me:

<style>
div table div div select {position:absolute !important;  top:-200px !important; left:0px !important; }
</style>

I have another way that involves clip, but it is also dependent on position absolute (which I suspect they are going to break when they add one more !important to their own code).

19 Oct 2007:

Short Cut links

Today's change may cause short cut links, which were previously hidden, to show up again.
For now you can hide them like this:

<style>
div table div div select {height:0px !important; width:0px !important; padding:0px !important; position:absolute !important; top:0px !important; left:0px !important;}
</style>

The above code is a slight overkill; but based on the code they added, I highly suspect that myspace does NOT want this hidden.
On the Band page this is necessary to hide the google search drop down. On the regular page the google search drop down is within both form and select tags.

Google Search

For some this may have been effected. However if you are hiding it at the form level the new code will not effect your hide code.

<style>
div table div form {display:none !important}
</style>

Another thing I noticed is more space in that area.
I got rid of that with this:

<style>
div table div {padding:0px !important; margin:0px !important;}
</style>

I noticed code that may bring back the google search stuff on some pages. It didn't effect my pages because I rendered it display:none at the form level, they seem to be hitting it at a lower level.

I am again some what baffled by the code they did add.
Why block me from the usual way I would eliminate the block, without really preventing me from doing so.

They could just tell us what we are allowed to do with this space.
The current understanding is that we can hide everything except the ad banner.
If mySpace wants us to not hide the google search, why not just tell us not to.
Yes, some will still do it; but others will respect the rule.

Once they decide on the rules; put this information in a message on our home page.

MySpace could also structure their own code so that the stuff they do NOT want hidden is at a higher level, with a unique class and ID assigned at the higher level.
Placing the ad banner that deep, and at potentially multiple layers, has caused a lot of un-intentional ad banner hiding.
The fewer layers, between the body and the ad banner, the fewer commands it will take to override the usual methods people use to hide this stuff.

As for what changed;
MySpace has added code at the bottom (after any point where we can insert an override) to do the following to the id associated with the select box.
visibility:visible !important
display:inline !important
position:static
width:125px

They further render the entire profilelinks id all of the following:
visibility:visible !important
display:inline !important
position:static
padding-right:25px

10 Oct 2007:
After some reasonable stability for a few days, I discovered that my demo pages, which show all of the table boundaries, nesting, parent relationships, classes and such just didn't look right.

I have added coloring for the new class which showed up, along with a few other things.
You will better understand the changes I am about to mention if you look at this page:
MySpace page showing layout and classes
[note: due to the border-spacing attribute, this page really is easier to read using FireFox. It is ok in IE, but the boundaries are not quite as clear. FireFox is Free and you can download it using the icon on the top of my side bar]

The first thing I noticed (which I have fixed) was that my borders were overlapping, and some were not showing at all. A quick look at the code revealed a new style sheet had been added.
In this style sheet I find the following command:
table {font:inherit; font-size:100%; color:inherit; border-collapse:collapse;}
That pretty much explains the symptom I am seeing.

Fix:
I added this

<style>
table {border-collapse:separate}
</style>

I did not need !important because their style sheet was added BEFORE my own code input points.
IF I know for sure I have not set the border-collapse property, to collapse, for other tables on my page, I might use !important with the above command.

One I had this fixed I was able to get a much better view of the page.

Some things that I notice:
There are additional Divs in the top area of the page:
- Just below the ad banner (class="clear")
- around the google search
- around the drop down menu they added to the left of the google search
- below the google search (class="clear")
- below the main navigation menu (class="clear")

The new shortcut thing is not in a form, and is at the same depth as one of the ad banners.
However it is a Select, so we can hide it that way, without hiding the ad banner.
i.e.

<style>
div table div div select {display:none;}
</style>

We now need !important to hide the google search form. The below will fix issues with the google search form, the new select and the extra space caused by margins assigned to that space:
i.e.

<style>
div table div form, div table div div select {display:none !important;}
div table div { margin:0px !important;}
</style>

These are the things I was able to quickly identify. I don't have any more time to spend on this tonight (I really wonder if myspace is a waste of time).

Looking at this style sheet, I am sure there are other symptoms.
But I don't have time to dig through it right now. The border collapse was the most obvious issue, actually causing major symptoms on my own pages.

If you have a specific symptom, you want me to look at, post a comment. If I have time later tonight, I will have a look.

2 Oct 2007: More playing around with the online now icon. Same code change that showed up in early September, and again Yesterday, but was backed out in both cases.
Later that eveningAnd they backed it out AGAIN.

1 Oct 2007: More playing around with the online now icon. The code of early last month was there for a while, and then "poof" it was gone.
(I have no idea how long it was there, but it wasn't there last night, and it was there tonight.)

This gives me an idea.
I should write a program to monitor the myspace code, that might even be fun.
Nah, probably a huge waste of time, as most things myspace related are.

30 Sep 2007: Background issues seem to be fixed but I don't trust them.
Although the background issues seem to be fixed (they moved the style sheet up to before our code insert points, and removed the bodyContent class from the command); I still recommend being explicit in your own command. This does the most to decrease the risk that myspace will be able to override your background color command:
body, body.bodyContent {background-color:hotpink !important}
put between style tags. Change hotpink to transparent or any other color you want to use.
This may seem like over-kill, but can I trust them to keep the class name the same?
Can I trust them to not again use the classname in their own code?
While they are not likely to use !important, they might. If they use it prior to my code, I am ok. If they use the class, and !important, and put it AFTER our code input points, we may just have to accept their taste in color.

26 Sep 2007:
Background Color Issues:
Are the engineers who work for myspace, not capable of seeing, the effect of having this line of code in their style sheet:
.bodyContent{background-color:#e5e5e5;}
(yea, they get to use the pound sign, but that is irrelevant to the problem. The color e5e5e5 is a light shade of grey, and this command is in a style sheet which is applied near the end of the page). I believe those who have used the "official" myspace profile generator, may load the custom style sheet, it creates, instead of the default, where I found this command.

They are using the class name, therefore they are addressing the element more explicitly than those who just use
body {background-color:pink}

How can we get our background color to override theirs?
Well, we have to use !important.
And to make sure I get a successful override, I will use the class, and !important.

body.bodyContent {background-color:pink !important}

Do I really get the last say?
No, because guess where they put this style sheet. They put it near the end.
But as long as THEY do NOT use the keyword important, I win. My color rules.

Is this a mistake or is this a ploy to force people to use their profile generator?
It seems to obvious to be a mistake. But if they wanted to force me to use their generator, why did they not put in the keyword !important?
I am baffled.
(I might just accuse their engineers of having competency issues, but for all I know there is some valid reason for this, that I am not seeing.)

View All Friends link is no longer in span class="redlink".
It is now in a div. No class was assigned (they did assign an id, but that is useless as far as customizing goes, since myspace filters out the pound sign.).
The div is at level
table table td.text table.friendSpace td.text table div
I can shortcut this.
I don't really expect the class friendSpace to ever end up used for a different table, so I will shortcut the above some.
The below code will hide the link

<style>
table.friendSpace table div {display:none}
table.friendSpace table br {line-height:1px}
</style>

Warning: if they change the online now icon, back to what they did a few weeks ago, this will hide the online now icon as well. If that happens, we can add code to recover the online now icons.

If you have code to position your shows (on the band page) there is a good chance that the code has re-positioned the friend view link as well.
This time I will use the longer method of addressing the friend link div. Sometimes overrides do not work, if the address string does not include the same parent elements as the command we are trying to override.

<style>
table table td.text table.friendSpace td.text table div {position:static !important}
</style>

If you are using code which has body and tdbody, or likes to jump over tables and through cells, when creating address lines; then try this:

<style>
body table tbody tr td table tbody tr td.text table.friendSpace tbody tr td.text table tbody tr td div {position:static !important}
</style>

This will take care of overriding the code where someone felt they needed to include even the elements which added no value, as far as making the address explicit; AND those which like to take shortcuts through the td, without including the parent table.

Counter Issues
I can't help people with this one. But I can verify that I have seen reports in multiple forums indicating it is a problem. I have also seen multiple hits to this blog, with "counter not working" in the query, which is another clue that multiple people are having the problem.
Since the counter is not something we can manipulate with css or html, I can not offer any sort of fix.
But may I suggest that you ditch their counter and install your own.

Sep 7 2007: online now icon returns to the February 2007 Code. So unless you have the very old online now icon code, your custom icons should work as they did prior to a few days ago. (Those are really just permanent icons anyway unless you used my code for this, or someone else really has a solution, that I have not found yet.)

Sep 5 2007: online now icon changes.
First:
If you have installed code to resize images in comments, to control width, this code is probably effecting the size of the online now icon (it may be huge in IE).
You can fix this by adding this line:

<style>
table.friendsComments div img {width:80px; height:20px;}
</style>

If you had the icon hidden, and still want it such do this:

<style>
{!-hide online now icon everywhere in profile-!}
table.friendsComments div img {display:none;}
table.friendSpace div img {display:none;}
table.profileInfo div img {display:none;}
</style>

Or if you don't want to mess with the spacing of stuff, this might be better:
<style>
{!-hide online now icon everywhere in profile-!}
table.friendsComments div img {visibility:hidden;}
table.friendSpace div img {visibility:hidden;}
table.profileInfo div img {visibility:hidden;}
</style>

If you want a custom online now icon, which is there only when you are online;
Well good luck. I had one for the old strategy, but I think I was the only one who used it.
I might try to figure it out for the new strategy, but I don't expect this new strategy to last very long.
I expect it to have security issues. (I will not be the one to exploit them).

If you just want an image, to display in the location of the online now icon, and have nothing to do with one's actual online status.

<style>
table.profileInfo table div {width:89px !important; height:28px !important; background: url("http://i15.tinypic.com/61vugio.gif");
background-position: center center;
background-repeat: no-repeat;}
table.profileInfo table div img {display:none}
</style>

Of course you can replace the image with a different one.
Just don't get one that actually says "online now"
change the height and width to match the image you choose.

If you want to replace the images in the friend and/or comment spaces, just repeat the above block, and replace table.profileInfo with
table.friendsComments
and/or
table.friendSpace
or just add them to the existing line.
Personally, since the image is always there, I wouldn't do that. I would just hide it in those spaces.

To see how the space to display the icon is structured:
(It is times like this when I am glad I have a dynamic drawing to show me how the page is structured:)
MySpace Page Showing Structure

Notice, even when not online the structure is there. It is under each friend image as well (in both friend and comment spaces).
Notice that it is now in a div, and that the div (with some image inside it) is there even if not online.
They use a clear gif if the user is not online.
So there is always a gif there, the choice the code makes, is which gif.

Aug 2 2007: Yes stuff changed last night (or early this morning). The Ad Banner problem is there even if profiles with NO customizations at all. This can not be caused by our customizations.

Update: This was fixed by the end of the day Aug 2. (I observed some interesting changes during the course of the day, as they attempted to fix the problem.)

July 11 2007: myspace introduced another round of changes.

IF you have the following problems, related to the newest changes, they can be easily fixed:

1) Your Meet, Friend, Calendar and/or Comment section is Gone (It is now hidden when it was not a few days ago)

[Update July 14 2007] This now only effects the Meet space. Myspace put back the end style tag at the end of the meet section. (I knew they would, and it has nothing to do with fixing people's page who failed to close their own style blocks).

2) Your Fonts in your Blogs, About Me, Meet, Networking, Companies are no longer as you had them set.

3) Your Div Overlay is Gone

Related to (1);
They removed the close style blocks at the end of the About and Meet sections.
If you did not close your own style blocks, you are now exiting the Meet and/or About sections with an open style block. This means that the myspace code, after this point, thinks it is inside the style block. This prevents it from working.

Fix:
Add a close style tag at the end of your About and/or Meet section (try both, it is harmless if it has no open tag).
This should un-hide anything which was hidden due to no close style tag.

Related to (2);
This one is caused by the addition of a span assigned to class text.

This can effect your fonts in multiple ways.
A) Your font may have taken on the style set in the linked style sheet (the one they pull in that is not in the code you see when you do a view source); which sets the style for class text.
If you have this font:
{ font-family:arial; color:ffffff; font-size:12px; }
Likely it is coming from this style sheet.

B)IF you have a different font, besides the one above, and it is not the font you had prior to the change; the likely cause is another style command in your own code.

Look for any style set using
.text
If you find this change it to td.text

Once you make that change, the text may now take on the font style shown above (coming in from the style sheet).

Now add the needed style command

You can do this multiple ways.

Fix
The best fix may be to just add in the style commands you need.

i.e.
table.blurbs span.text {your font stuff in here}
table.latestblogentry span.text {your font stuff in here}
table.userProfileCompany span.text {your font stuff in here}
table.userProfileNetworking span.text {your font stuff in here}

Example:
table.blurbs span.text {font-family:tahoma !important; font-size:13px !important}

You may (or may not) need to use the !important.
It depends on what you have currently setting the font.

IF they are all the same font, you can just do this:
span.text {font-family:tahoma !important; font-size:13px !important}

Trouble shooting idea
If you are having trouble finding the line of code that is setting your font, try doing this:
Find every line where you set a font.
One at a time, set the font color to hotpink and the size to 26. Save and view the page. See how it effects your page.
If doing this (to all your font set commands) does NOT effect the font you are trouble shooting, then it is likely being set from the style sheet.

Try inserting this at the top of the About and/or Meet
</span>
AND put this at the bottom:
<span>

This will take the Section out of the span class text.

Related to (3).
This is similar to (2).
The cause is the same.
In this case you may have in your code, something designed to hide stuff of class text.
You may have used a shortcut syntax, and instead of indicating
td.text
you may just have
.text

This will now effect all of the stuff recently added to span class text.
If it is hidden, you will not see it.

It is probably safe to go through your code and replace
.text
with
td.text
(because span.text was not introduced until July 11, I am certain that everywhere you had .text, prior to July 11, was meant to apply only to td.text).

OR
you may have hidden something using span

If you have any lines with
{display:none}
or
{visibility:hidden}
which have span listed as an effected element.

i.e.
xxx, yyy, zzz, span, jjj {display:none}
where xxx, yyy, zzz, jjj can be almost anything.
It may also be something like this
table table table span
or
td td td span
or table table td span
etc
If span is listed, and you are rendering the block {display:none} or {visibility:hidden} it can potentially hide anything in your about or meet sections.

Some other things you can do:
If the problem is only effecting the About and/or Meet sections you can just close the span tag at the top of the effected area:
</span>

Now for the Good:
More new classes.

We now have all of these classes:
profileInfo
NameText
contactTable
userProfileURL (new)
InterestsAndDetails (new behavior, now only assigned to Interests)
userProfileDetails (new)
userProfileSchool (new)
userProfileCompany (new)
userProfileNetworking (new)

extendedNetwork
latestBlogEntry
Blurbs
friendSpace
friendsComments

tdborder (new, assigned at the td level, in some cases td has both this class and class text)

text (now used as a span class as well as a td class)

whitetext12
lightbluetext8
orangetext15
blacktext10
blacktext12
whitelink
btext
redbtext
redlink

For a picture of the page, showing where each class is:
My Space Page showing Table Layout and Classes
The above is an actual myspace page with style commands inserted to show div, table, cell layout and classes.
It will automatically update when myspace makes changes to either the div/table/cell structure, use of span, or any of the classes that now exist.
(New classes will not show up as new classes unless I add style commands).

The text with the coral (salmon) colored background, is in span.text (meaning it is between span tags and the span is assigned to class text)
This is new, this text has style set in one of the style sheets that is pulled in when the code runs.
It is not set to !important in that style sheet.
You can override it with your own style command, as long as you address it correctly.
It will not override with just span
It will override with span.text

Still no class for the Calendar, one would be really nice.

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

Queries hitting other pages of mine, which should be hitting this page:
-did myspace change their code today?
-How do I hide that new shortcuts thing that just showed up
-How do I hide the short cut box on myspace
-codes to hide the shortcut links on myspace

myspace column spacing, centering

noreply@blogger.com (u∃∃l!∃) — Wed, 05 Sep 2007 06:00:00 +0000

The Best way (that I know of) to control the spacing and positioning of the page columns, is by controlling the size of the clear gif spacers, that myspace has placed to the left of each column.

To see where these To see where these gifs reside, refer to the following real myspace pages:
Regular MySpace Page Showing Structure, Layout, Classes

Artist (Band) MySpace Page Showing Layout, Structure, Classes

Both of the above pages have keys to the left, indicating what all the colors and formatting mean.

The clear gif files, I am speaking of, have orange dotted borders (as do all images, I did not identify a class for, on the diagram).

The ones we can use, to manipulate the positioning of our profile columns are seen to the far left, and one in the center.

The spacer clear gif to the far left, does throw the profile slightly off center.
But if one considers the similar spacing to the far right (not done with a clear gif) it may actually serve to center the profile.
(I haven't quite figured out what they are doing here).

The below code block removes the clear gifs I mentioned:

<style>
td {width:auto !important}
table td img {display:none;}
table table table td img, div table td img {display:block;}
table.profileInfo table td img {display:inline;}
</style>

If you only want to remove the clear gif in the center, and not the one to the left:

<style>
td {width:auto !important}
table table td img {display:none;}
table table table td img, div table td img {display:block;}
table.profileInfo table td img {display:inline;}
</style>

If you want to decrease the space between the tables, under and above:

<style>
table table br {line-height:2px;}
table table table br {line-height:15px;}
</style>

If you find that after removing the center clear gif, you still want the right column to move further to the left, I highly recommend that instead of just using relative positioning, you first try to alter the width of the left column.

<style>
{!hard set width of left column! }
table table table {width:300px;}

{!right column set and override above!}
table table td.text table {width:450px;}

{!undo for nested tables!}
table table table table, 
table table td.text table table,
td {width:auto !important;}
</style>

It is important that no content in the tables, takes up more than the alloted space, or it will stretch the table.

Some widths which are hard set in the code will be messed up, and some formatting will be lost.
The calendar has some issues. But I think overall this override is an improvement.

myspace layout classes tables page structure

noreply@blogger.com (u∃∃l!∃) — Tue, 04 Sep 2007 06:41:00 +0000

First some Basics:

Because we can not alter the mySpace code, at the point the code is actually being created we have to use the type of commands which OVERRIDE the code.
While this has lead to my learning CSS much better than I otherwise would have, this is NOT the way one would normally write code.
One would not create a table with a background color of Orange and an Orange border, and then later override this with background-color:transparent; border:none.

Within a style block one can redefine the formatting for a particular HTML tag, at a particular depth, and/or in a particular class and/or pseudo class.

A style block starts with a style tag, and ends with a close style tag
The style tag is HTML. It tells the browser to interpret the following lines as CSS instead of as HTML.

<style type="text/css">

STYLE COMMANDS GO IN HERE 

</style>

(often I am lazy and leave out the type, and so far this has worked for me. But it is a sloppy habit I should break).

To use Over Riding Style we need to know how to address the element.
This can be done with a combination of depth (parent-child relationships), style, and other html tags which identify an element.

The below picture shows the basic layout of the myspace pages.
Tables are shown with solid borders.
Cells (TD) are shown with dashed borders.
td.text is shown in red dashed
other td levels shown in black dashed
Divs are shown in thick yellow dashes.
img are shown with orange dashed borders (those very tiny images are clear gifs)

In the below picture I have rendered the following gone (so as to better show the outer structure)
table table table {display:none;}
object, embed {display:none;}

Things of Note:
- The right and left columns are cells
- The table which is one table deep has one row with 2 cells. The left most cell doesn't end up having any of our content in it, it is a spacer and contains a clear gif.
- The table which is two tables deep has one row with 3 cells. The cell in the center has no content (except a clear gif).
- The cell to the far right makes up the right column. It has a class assigned called text (unfortunately this class is used elsewhere, so while it helps with addressing it is not ideal).

The table in the center (the one holds our content)
It is 2 tables deep. It has one row and 3 cells. The leftmost cell makes up the left column of our page, the rightmost cell makes up the right column of the page.
The center column contains a clear gif spacer.

Now I will add to the picture, by removing the display none.

Instead of keeping a picture here, I have decided that I can render this image better, if I utilize a real myspace page.
I have taken a real myspace page, and have added the needed style commands to show the following:

div boundaries
table boundaries
cell boundaries
classes (assigned to cell, row, table, div, span )
other useful tags which we can utilize in our overriding style commands.

The page is best viewed in FireFox.
It does look ok in IE. However, the border spacing attribute could not be used in IE therefore I could not put as much space between the borders.
This makes it more difficult to see exactly where some boundaries are.

FireFox is Free, I recommend downloading it:
(I have a link to download firefox on my sidebar).

Below are links to myspace pages:
Regular MySpace Page Showing Structure, Layout, Classes

Artist (Band) MySpace Page Showing Layout, Structure, Classes

Both of the above pages have keys to the left, indicating what all the colors and formatting mean.

If you have any questions, you may post them here, and I will try to answer them.
(So far I have been able to answer most of the questions hitting this blog).

Later I will add some style to a film page as well, to show the same boundaries.

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

myspace page layout showing myspace classes and layering
myspace classes
explain what classes used in myspace
how can I make use of the new myspace classes

FireFox Marquee Direction Down Div Bug

noreply@blogger.com (u∃∃l!∃) — Sat, 01 Sep 2007 07:23:00 +0000

Interesting FireFox Marquee Bug (or is a Feature?)

[If you are just looking for sample code, to create a marquee, I have a sample. However it is designed to demonstrate a bug. If you want it to work correctly, you might want to remove the style block at the bottom of the code block.]

While I was trouble shooting someone's mySpace profile, I came across some interesting behavior, related to FireFox and the marquee tag.
I tested the behavior outside of mySpace, so this problem is not caused by anything in the myspace code.

For some reason, when used with direction=down (or direction=up); the marquee thinks it is inside an additional div.

On the page I was troubleshooting, the marquee was in a div. It was several tables and one div deep.
The code had a style block, which had the following line:
table div div {display:none;}

Initially I thought maybe I had missed a div layer, but if that had been the case, then why did it work with direction:left.

I ended up doing several tests.

It worked fine if I used direction=left or direction=right.
It failed to show the marquee if I used direction=down or direction=up.
If I removed the style command
table div div {display:none} it worked with direction=down.

Here is some very basic marquee code. (It is a complete html block, feel free to cut and paste it into an html editor and run it.)

First, run it as it is, it should work, the marquee should move left.
Next, change left to down. It will no longer work (in FF, it is fine in IE)
Then remove the line:
div div {display:none}
It should work.
Note that the marquee is only ONE div deep.

<html>
<div class="friends" style="height:450px; width:100px">            
<h1>friends</h1>            
<marquee direction=left height=380 width=100 >
<img 
src="http://i178.photobucket.com/albums/w275/madeline_fogg/80tom.jpg" />
<br>
<img 
src="http://i178.photobucket.com/albums/w275/madeline_fogg/80-dick.jpg" />
<br>
<img 
src="http://i178.photobucket.com/albums/w275/madeline_fogg/80-harry.jpg" /></a>
<br>

</marquee>
</div>

<style>
div div {display:none;}
</style>
</html>

Private MySpace Profile: Hide last login, name, location, status on MySpace Private Profile

noreply@blogger.com (u∃∃l!∃) — Tue, 28 Aug 2007 01:51:00 +0000

Hiding the Public Information (Last Login, Name, Age, Location, Status) on the public view of a Private Profile

I decided to publish this after seeing a few questions, on yahoo answers, where multiple answers indicated that this could not be done.
The solution is not all that complex. For the first one, it is a minor change, to code, that is very commonly used, to hide the same information on a public profile.
By adding a class, and then adding style, one can make the code effect, only the public view of a private profile.

Hide Only the Text Next to the Profile Image
(last login, age, location, name)
First Put this in your headline:

<font style="display:none" class="H">

next ONLY IF you want this information to show on the Private (friends only) view of your profile
Put this at the top of your about me:

<style>
font.H {display:block !important;
font-size:10px;
color:black;
background-color:white;
}
</style>

You can change font attributes, as desired.

If you want to hide much more, including your profile Image, status, and contact table

What this code will do:
1) On the Public view of your private profile (the one seen by those NOT on your friend List) the profile will look like this:

If you want, you can make your own images, which cover the content, instead of using mine.
HOWEVER you must find a place to host them, that makes the image name SMALLER than what you will get on tinypic, for at least ONE of the two images.
There is enough room to squeeze in one tinypic sized image.
(I may be willing to host a few more generic images to go into this location, if you ask me; but none with personal names or information on them).

2) On the Private view, the one your friends See the images which cover stuff, will be rendered display:none, and will not show up.

3) There is no room left in the headline for headline text, therefore you will need to make an image of any headline text you want to use.
We can apply this image as a background, to a font tag, we placed in the headline.

The view your friends see, looks like this:

STEPS

Step 1: Create any images you want to use.
- image to cover your picture, location, sex, age, last login, contact table.
Size image about 340px width by 313px height.
Needed size is dependent on the size of your profile image, so if you have a very large image, some adjustment may be needed
You May Use the Image I Provide If you Want To

- image to cover your status text on your Private profile Public View
Size image about 450px width by 90 px height.
You May Use the Image I Provide If you Want To

REMEMBER there is VERY LITTLE room, so using my very short named image for EITHER step 1 or 2 is highly recommended.

- image to use as headline text.
This also serves to cover up the hanging quotes, so I recommend using something here.
You will need to adjust the values in my code, if your image is not very close to 180px width by 30px height.
You will want to Make your own Image for This. You can choose to just Not Have Headline text, and provide No Image

images need to be saved to tinypic, or a site with equally small (or smaller) url names.

Step 2: Put This code in the headline, to apply the image, and position it to cover the information.
The below code uses my images.

<font class="h"><img src="http://xiii.us/p3.png" style="position:absolute;left:50%;top:175px;margin-left:-390px;" /><img src="http://xiii.us/p2.png" style="position:absolute; right:50%;margin-right:-400px;top:175px;" /></font><font>

STEP 3: Put the following code at the top of your about me:

<a class="i">
<a class="i" href="views-under-construction.blogspot.com">
Hide Last Login, Name, Location, Status, Age on Private Profile </a>
<a class="i" href="xiii.us/eGen/mpSkin.php">
myspace music player skins</a>

<style>
.i, .h img {display:none !important;}

font.h {display:block; height:30px; width:180px; background-color:white !important; position:relative; top:5px; background-image:url(http://i34.tinypic.com/30axi69.png);}

table.profileInfo table td.text {font-size:0px;}
table.profileInfo table td.text font {font-size:10px !important;}

</style>
</a>

Replace YOUR-URL with the url you used for your headline text.
You can use font.F to set the font color, size, other style for the text under your headline.
If you want to hide this text, on the Private view of your profile, add this line to the above style block:
font.F {display:none}

There are multiple other variations one can do using this technique.
If someone has a specific request, feel free to ask.
I can not guarantee I will create the code for it, but if I have time, I will try.

If this code causes a problem with your profile, please let me know.

Use a Different Backgrounds on View that Friends See, and View that Non Friends See

To get a background on the private Non Friend view, you must use the official myspace profile editor. This editor puts the code in a style sheet, that is applied to a private profile.

To cause a different background image to show in the friend only view, apply style to the about me section, to override the background in the style sheet.
Anything in the about me section will only be applied to the view the Friends See.

<a class=i href="views-under-construction.blogspot.com">
myspace private profile override code</a>
<a class=i href="xiii.us/eGen/mpSkin.php">
myspace music player skins</a>
<style>
.i {display:none;}
body.bodyContent {background-image:url(YOUR-URL) !important;}
</style>

MySpace Online Now Icon Code Fix

noreply@blogger.com (u∃∃l!∃) — Sun, 26 Aug 2007 17:19:00 +0000

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

Working code for a Custom myspace online now Icon

January 8 2009: MySpace changed the code for their OnLine now icon in BOTH myspace 2.0 and myspace 1.
Much of the code, on this page, is now obsolete (for a long time it was the only working solution for an icon that really only showed when myspace thought the person was on line.)
The new solution is much much much easier, and I am sure many sites will have code for it soon enough.

The code for myspace 1.0 is not that different from the code for myspace 2.0.

Code for both 1.0 and 2.0 can be found here:
myspace 2.0 custom online (online now) icon code

There is even an option to show an offline icon, when myspace thinks that you are not online, that is different from the one you show when you are online.
But this option does add extra space that some will not like (the extra space is equivalent to the size of your online icon.) There is a way to do this in IE that does not leave the extra space, if interested ask me. The trade off is that it will not work cross browser.

Fixes for some issues related to the new online icon code
The most common issue, people are now having, is that code to re-size the icon small (after sizing other images) is no longer working.
This is causing many pages to display the new online icon much larger then desired.

You can fix this using the following block of code:

<style>
span.msOnlineNow img {height:18px !important; width:18px !important;}
</style>

If you want to hide ALL online icons on your page:

<style>
span.msOnlineNow {display:none;}
</style>

If you are using myspace 2.0 do NOT include the style tags. The span class is the same in both myspace 2.0 and myspace 1.
You can also add !important, in version 1 myspace (important does not work in version 2, it gets the dot out treatment, messing up the style line completely)
This will give it a much higher precedence, and decrease the chances of an override by another style command.

It is possible that the above code will not work on some pages, that have rendered images display:block (or other visible display mode) using an address clause that will take a higher precedence, but this should be rare. Because the above addresses the element by class, any overriding code would have to be more explicit, and also have at least one class in the path.
If you want to make sure it works, the below line is much more explicit.

This code is for myspace 1.0

<style>
* span.msOnlineNow,
table.friendSpace span.msOnlineNow,
table.friendsComments span.msOnlineNow,
table.profileInfo span.msOnlineNow {display:none !important;}
</style>

The first clause is so it also works on artist pages.
The others are to insure the line has a higher precedence then other code you may have.

If you only want to hide the icon in your friendSpace this works (version 1 myspace):

<style>
table.friendSpace span.msOnlineNow {display:none !important;}
</style>

(version 2 myspace)


div.friendSpaceModule span.msOnlineNow {display:none;}

Or hide it only in your comment space (version 1 myspace):

<style>
div.friendSpaceModule span.msOnlineNow {display:none !important;}
</style>

(or for myspace 2.0)


div.commentsModule span.msOnlineNow {display:none;}

It is now possible to use the existing online text, and hide (or replace) just the image. You can choose to color and apply other style to the text without using an image.
The new code offers many more online icon customizing options then the previous code offered.

For instance, to hide only the icon, and keep the words (and style them)

For version 1.0 the following code can go into any section that accepts html

<style>
{! remove online now image !}
.i, span.msOnlineNow img {display:none;}
{! style online now text !}
span.msOnlineNow {font-size:13px; color:magenta; font-family:comic sans ms;}
</style>
<i class=i><a class=i href="http://xiii.us/eGen/olSkin.php">custom online now icons myspace 2.0 and 1.0</a></i>

For version 2 put the following code into the css area:

{online icon code by Eileen; http://xiii.us/eGen/olSkin.php; http://spiff-myspace.blogspot.com}
{! start code to remove online now image !}
.i, span.msOnlineNow img {display:none;}
{! style online now text !}
span.msOnlineNow {font-size:13px; color:magenta; font-family:comic sans ms;}

It is also possible (and easy) to only effect one or more of the following areas:
profile info area
friend area
comment area.

If interested in a particular online icon tweak, ask.
There is so much possibility here.

IF (and only if) you appreciate my taking the time to develop, test, and provide people with myspace code; then I would appreciate it if you would put the following into your interests or about me section.

It can go anywhere in the section. It will NOT show up on your profile, and should not effect how your profile looks.
If you want these links visible, ask me, most people don't like that, so I did not do it that way.

<a class=i href="http://xiii.us/eGen/olSkin.php" target="_self">custom online now icons and code myspace 2.0 and myspace 1.0</a>
<a class=i href="http://xiii.us/eGen/mpSkin.php" target="_self">music player skins and code, playlist and single song player, myspace 2.0 and myspace 1.0</a>
<a class=i href="http://xiii.us/eGen/ctSkin.php" target="_self">custom contact tables and code to apply your own contact table for myspace 2.0 and myspace 1.0</a>
<a class=i href="http://xiii.us/eGen/topB.php" target="_self">apply a custom top banner, myspace 2.0 myspace 1.0 band/artist pages</a>
<a class=i href="http://spiff-myspace.blogspot.com" target="_self">myspace code tutorials myspace 2.0 and myspace 1.0; standard, artist, band pages</a>

Thank you for visiting, and have a nice day

============================================================================
Code Below is Mostly all Obsolete, I will later take the time to go through each block and remove what no longer works. But anything addressing the class
imgOnlineNow will no longer work.
=============================================================================
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