Simple change to core myspace code, Significantly simplifies page customization.

More Classes.
It was that simple, and it took myspace years to figure it out.

[note: (added July 11 2007)
More new classes. More of my old code is obsoleted. Not a problem. The classes are a good thing, they make customizing easier for the many, which is more important than the egos of the few.]

Those who wrote codes for the various "profile pimping" sites figured it out (or stole the code from someone else who had figured it out).
The geeks who hang out in the customizing forums figured it out.
High school kids figured it out.

Many of us came up with myspace customizing code, which involved first creating a custom class, and then using that class to manipulate the items on the page.
Creating custom classes often involved sticking messy code in the various data input points, which closed layers of open tables, opened a class, then re-opened the closed tables.
Some times this involved closing tables, after the table headers had been created, and then re-creating the headers after creating the desired class.
At times this involved opening divs which we would never have an opportunity to close (counting on the div to automatically close when the containing table closed).
I doubt this code would ever pass a reasonable code verification check. But it worked (at least on most browsers :-).
In cases where we could not create a class, because there was no point to input code where the class was need; customization often involved addressing an element based on how many tables deep the element was. This often meant the change effected more than the desired page element, and more code was then needed to reverse the undesired side effects.

None of this was technically complex, but it was all very tedious for those of us who had to work around the existing core code.
However, for myspace, all it took was a few very simple, very low risk (if any risk) changes to the core code.
So what took them so long?

What finally motivated myspace to make this needed change?

Was it the malicious hackers. Those who were so intent on bombarding myspace with spam advertisements, that they hacked into various "pimp your myspace sites" and put their garbage into the code, so they could take over pages and send out spam message after spam message?
(Those letter verification things, that I hate, really would have cut down on a whole lot of this).

Was it that some of these sites were actually making revenue off of their advertising, and myspace wanted that revenue for themselves?
So myspace decided to write their own code generator.
Did it take the creation of their own code generator to realize the significant value added by a few simple classes.
So little code, so low risk, and so useful.

While I love the new classes, and consider them a significant improvement; I am NOT at all impressed with the new myspace code generator. But if it took their own generator, to give them the incentive to add more classes, then I am glad they wrote one. The code generator is archaic in design and functionality.
Myspace has all the power to make their code generator the easiest one to use, but so far they have failed to take advantage of this power.


Now I am asking myself what to do with the obsolete myspace codes I have posted on a few of my blogs.
I can remove it all.
I can update it to use the new classes (meaning far less code to do simple things).
[I decided to modify my code, and I am about half done.]

The first change to the new class names happened some time tonight.
They corrected their spelling, I had to again change my code.
Now instead of
.intrestsAndDetails (which I kept typing wrong anyway)
They have
.interestsAndDetails

Really they should separate these two, which is no higher a risk, and no more work, than correcting the spelling. (It is a class name, it doesn't have to be spelled like the words of the stuff it represents).

Custom Banner Top MySpace

Add a Custom Banner to the Top of The MySpace Page

My code for a custom Top Banner, for BOTH myspace 2.0 and myspace 1.0, has been moved here:
Add a Top Banner to MySpace 2.0 OR Myspace 1.0, standard page, artist page, band page

IF your banner consists of something other then an image you will need to create your own code. I am not able to detect the needed values, to generate the code for you.

First Create a div block, that contains the content of your top banner
The div can contain any html content that myspace does not filter.
You can put a flash object, links, and more inside this div.

<div class="iTopB">
YOUR CONTENT HERE
</div>

Next we use a style block, to position the Div, and create the needed space for the div.
IF you are using myspace 2.0, omit (leave out) the style tags, and put the style code lines in the css area.
For all others, keep the style blocks.

<style>
{! code author:Eileen; http://xiii.us/ !}
.i {display:none;}
{! create space for top banner !}
body {margin-top:130px;}
{! position div !}
div.iTopB {position:absolute; top:0px; left:50%; margin-left:-400px;}
</style>

IF your div does not position on top, but positions elsewhere on your page, this is likely because you have some style code, that is assigning some parent element (parent to the div) as the positioning reference container.
In IE, have a position statement, on a parent table OR div (and possibly other elements as well), will cause that element to act as the container for position reference.
In non IE a table position statement won't cause the table to act as the positioning container. However, a div position statement will.

In myspace 1.0, and artist pages, there is a solution for this.
We can take our top banner div, and place it OUTSIDE of the bio/blurbs content area, so that any positioning on that table, does not effect the positioning of the top banner.
[This will not work in myspace 2.0, you are not allowed to close off element structures that you did not also open.]

<a class=i href="http://xiii.us/eGen/topB.php">Top Banner MySpace"</a>
</td></tr></table></td></tr></table>
<div class="iTopB">
YOUR CONTENT HERE
</div>
<table class="i"><tr><td><table><tr><td>

==== old article below, much of it is still relevant for myspace 1.0. However, now that I am recommending that everyone upgrade to myspace 2.0, I do not plan to maintain the below code, as myspace makes future changes to 1.0 ============

Most of these solutions work on
- Regular Page
- Band Page
- Film Page
- comedy page

For a Code Generator (which will determine the correct values after you enter the url of your image, and banner location):
Click Here for Top Banner Code Generator

A banner can be added to multiple locations in the top page area,



For those who are interested in an explanations, so you can create and/or modify the code, read the article below.
This will also give you the needed code to place an object (such as a flash swf file) in the top area.

For those who do not want to read through my Explanations and just want some quick code blocks, you can use the below links to jump to the desired page content:

Using the Top of your Background Image as a Top Banner
Placing Custom Banner OR other content (Div, Object, Marquee) at the very TOP of the page, above Ad Banner
Place Banner just under Ad Banner, Keep Google Search Form
Placing image just above the main navigation bar
Placing image just above the main table

Full Example: placing image Under Main Navigation Bar, and placing multiple links on the image
Placing Custom Banner Under the Music Nav Bar
Banner Under Top Menus, Where image border alignment with border around main table is Important

There are multiple techniques one can use to place a custom banner near the top of the Page.

Placement Strategies
There are two basic placement strategies.
(There are more, but only two I recommend, for the top space)

1)Absolute Placement:
I recommend this IF you are very close to the top of the page.
OR (you need to make links AND are still reasonably close to the top of the page.)
OR alignment with your background image is MORE IMPORTANT than alignment with your top menu area (default page content).

2)As a Background Image to Something which is already on the page.
Before the most recent round of core code changes, I recommend this if one was going lower than just below the ad banner, and wanted very accurate placement.

using the top of your background image as a top banner
The below code only creates a margin above the top Ad Banner. It is useful if you want to draw your top banner directly into your background image.

You can place this code at the very top of the about or bio section:

<a class="i">START CODE TO MAKE TOP MARGIN ABOVE AD
<a href="xiii.us/ms/ad-search-menu">MySpace Top Banner</a>
<style>
.i {display:none}
body.bodyContent {margin-top:60px !important}
div.clearfix i i.i {margin-top:0px !important }

{! IF you have a Comedy page, you also need the below.
   value needs to be 160 plus top margin !}
div.profileWidth table div ul, div.clearfix i i.i {top:220px !important;}

</style>
END CODE TO MAKE TOP MARGIN ABOVE AD </a>

Putting your own image, marquee, or flash or other content at the very TOP of the page
This code works on the Standard Page, Band Page, Comedy and Film Page.

This code is designed to place the banner (or div content), logically OUTSIDE of the table you are placing the code in. I do this, because too often people have utilized a position command on the table. In these cases, the banner was unable to position outside the table, in IE.
This solution also has code to prevent some very common page customizations from rendering the top banner not visible.
This is the reason my solution, has much more code than most solutions.
But it does work in more cases, with more profiles, than the other code I have seen published.

It is VERY IMPORTANT that this code get placed AFTER any content, in either the To Meet or Bio or Heroes (only if you are not showing groups) or Any of the General Sections on the Band Page

IF in doubt, as to where you can place this code, place it at the END of the Bio or Meet section; UNLESS you already placed structure altering code (opened or closed a div or table) in this space.

<i class=i>!!! Start Code To Apply Top Banner !!!!</i>
</td></tr></table>
</td></tr></table>
<a class="i" href="http://xiii.us/ms/top-banner" title="myspace top banner">
Custom top banner code by Eileen</a>
<div class="xiiiTopBanner" style="position:absolute; top:0px; left:50%; margin-top:0px; margin-left:-410px; z-index:9 !important">
<img src="http://i10.tinypic.com/639n3br.jpg">
</div>
<style>
.i {display:none;}
{!-Create space for image above body-!}
body.bodyContent, body, i i i.x {margin-top:100px;}
{!-The below value needs to be 160 + the height of your top banner -!
div.profileWidth table div ul, div.clearfix i i.i {top:260px !important;}
</style>

<table class=i><tr><td>
<table><tr><td>
<i class=i>!!! End Code To Apply Top Banner !!!</i>

IF you have a block of code, other than just an image (such as a marquee, sliced image OR flash object, or Other), you can still use the above technique.
Just replace what I have placed inside the div.myBanner (I have only an image inside) with your own code block. Your block may consist of an object, another div, a table structure or other.

Placing image just Below the Ad banner
On the standard page, there is a rumor that it is against the terms of service to move the ad banner down. I have not seen this in the terms. The language they use is "obscure". Therefore I would not move it down too far. Use your own judgment.

Because the ad banner is EXACTLY 90px in height, we can measure accurately from the top of the page, to the placement point for our banner.

Therefore I still use absolute placement.

[note: in FF there are an extra 10 pixels above the ad. The extra 10 pixels are caused by a form, that is not used, but is in the code, and takes up space in FF but not IE.
You can eliminate the form.]

Place Banner just under Ad Banner, Keep Google Search Form
Works with Standard Page, Band Page, Comedy and Film Page.

The below code keeps the google search form, and places your banner just below the ad banner.

<i class=i>!!! Start Code To Apply Top Banner !!!!</i>
</td></tr></table>
</td></tr></table>
<a class="i" href="http://xiii.us/ms/top-banner" title="myspace top banner">
Custom top banner code by Eileen</a>
<div class="xiiiTopBannerUA" style="position:absolute; top:90px; left:50%; margin-top:0px; margin-bottom:0px;  margin-left:-410px;">
<img src="http://i10.tinypic.com/639n3br.jpg">
</div>
<style>
.i {display:none}
{!-make room Under Ad -!}
div.profileWidth div.clearfix div {margin-bottom:105px !important;}
div.profileWidth div.clearfix div div, div.profileWidth div.clearfix div.profile, div.profileWidth div.clearfix i i.i {margin-bottom:0px !important}
{! the below value needs to be 160px + height of your banner !}
div.profileWidth table div ul, div.clearfix i i.i {top:260px !important;}
</style>
<table class=i><tr><td>
<table><tr><td>
<i class=i>!!! End Code To Apply Top Banner !!!</i>

Using Either of the code blocks above, the image can be turned into a link by replacing this line:
<img src="http://i10.tinypic.com/639n3br.jpg">
With This:
<a href="http://spiff-myspace.blogspot.com"><img src="http://i10.tinypic.com/639n3br.jpg"></a>
Replace both the URL for the link, and the URL for the image, with your own data.

IF you are placing the ad banner, below the Google search, or below any of the top menus, I recommend a different strategy.
The below code blocks all use the background image strategy.
(Links can still be added, but as a separate step).

The following page elements can be easily hijacked for use as a custom banner.
Please see my top banner code generator:
Click Here to Use the Top Banner Code Tool
I have updated the code in that tool, and removed it from this article.


Turning images into a Link
My tool places image banners, which go below the google search (or lower) using a background image property.
This means it is more difficult to tun them into a link.

To turn the image into a link, we are going to use a clear gif, and place the gif over the image, and turn the image into a link.
Because the link image will be clear, it is not as critical that its placement is perfectly aligned.
I will use the same clear gif that is already used on the default myspace page.

The distance, in pixels, from the top of the page, to the bottom of the music navigation bar (where we placed the image) is about 215 pixels.
It varies from 209px to 221 (I measured in IE and FF and in multiple resolutions).
I do NOT want to cover the links on the maroon bar, that is more important than slight overlap into the table space below the image.
Based on this, I am going to use 222px. I will also make my clear gif about 20 px less than the height of my image.

Placing the image just above the main navigation bar

The following page elements can be easily hijacked for use as a custom banner.
Please see my top banner code generator:
Click Here to Use the Top Banner Code Tool
I have updated the code in that tool, and removed the code from this article.

I will update the tool to handle link images very soon.


==== the stuff below this line has not been updated based on the latest code changes. It may or may not still be valid ========================

Get measurements for Links
If you do not know how to do this, and do not have a tool to do this easily, I have created a grid with a clear background. You can temporarily place this grid on your page, to get measurements.
If you want to use my grid, add this code block (it is temporary, you will remove it later).

<div class="grid1" style="position:absolute; top:0px; left:0px; z-index:0">
<img src="http://i11.tinypic.com/4pczehk.gif"  >
</div> 

You may need a higher z-index if you have used z-index for your image.
Here is a picture of what my page looks like, after I have placed the image, and placed the grid on top of the image:
As seen in FF at 96 dpi
As seen in IE at 96 dpi
As seen in IE at 120 dpi
Notice the differences in how the image sits, with relation to the grid.
Notice that in all three cases, the image sits neatly under the main nav bar, even in the case where the navigation bar wrapped to the next line.

Because we are going to place our clear gifs (which will become our links), with reference to the whole page, and not an inner div, we need to measure from top AND center (not left or right).
We also need to know the height and width of the area we are going to link.

I will measure for 4 links. I have the 4 areas outlined in violet on my image.
In each case I am going to use a large area in the center of the image, but insure that I don't include any area which overlaps my top menu.

I get the following:

top	center of page to edge of link area	width	height
200	330 left to left edge	550	75
300	300 left to left edge	140	70
300	120 left to left edge	140	70
300	200 right to right edge	140	70

Hint on getting measurements:
If I place an image, left:50%, it places the left side of the image center.
with the rest of the image off to the right.
If I then add a margin-left, it moves the image to the RIGHT, the amount of that margin (creating a margin on the left side). If I make the margin-left negative, it move to the left.

Now that I have my measurements, I can add in my links.

I am going to put each link in a div. I will give each div 2 classes. On class will be used by all my links which use the clear gif image. The other class will be unique to the specific link.

The below code has all 4 links, each in a div.
Then I have the style block.
I undersized my link images, to account for variance in the 4 platforms I was testing with. (Keep in mind, that this variance would be in our actual image placement, and not our clear gif link images, had we used absolute placement for our main image).

Here is the code:

<span class="off">!-Create my Links using Clear Gif Image-!</span>
<div class="myL myL1" >
<a  href="http://xiii.us/ms1">
<img  src="http://x.myspace.com/images/clear.gif">
</a></div>

<div class="myL myL2">
<a  href="http://xiii.us/ms1">
<img src="http://x.myspace.com/images/clear.gif">
</a></div>

<div class="myL myL3">
<a  href="http://xiii.us/ms1">
<img src="http://x.myspace.com/images/clear.gif">
</a></div>

<div class="myL myL4">
<a  href="http://xiii.us/ms1">
<img src="http://x.myspace.com/images/clear.gif">
</a></div>

<span class="off">!-Use style to position and size-!</span>
<style>

div.myL {z-index:8}

{!-position and size link 1-!}
div.myL1 {position:absolute; top:200px; left:50%; margin-left:-320px;}
div.myL1 img {width:540px; height:70px}

{!-position and size link 2-!}
div.myL2 {position:absolute; top:300px; left:50%; margin-left:-300px;}
div.myL2 img {width:140px; height:50px}

{!-position and size link 2-!}
div.myL3 {position:absolute; top:300px; left:50%; margin-left:-120px;}
div.myL3 img {width:140px; height:50px}

{!-position and size link 2-!}
div.myL4 {position:absolute; top:300px; right:50%; margin-right:-200px;}
div.myL4 img {width:140px; height:50px}
</style>

Images of Results:
The grid and purple dashes around the clear gif images are TEMPORARY.
They would be removed from the final page.
in IE 96dpi
in FF 120dpi

My other tests came out somewhere in the same range, I just wanted to show a few differences. Note that I sized my clear gif images so that they were within acceptable bounds, and did not overlap the nav bar above or below my custom image.
Also keep in mind, that whatever inaccuracies we have to tolerate, for the placement of our clear gif, we would have to tolerate for our visible image, if we used strategy 1.

Another interesting thing to note, from the above pictures, is the difference in how the main navigation bar behaves, when it does not all fit within the 800px of width; versus how the maroon music nav bar behaves.

If you want to prevent the main navigation bar from wrapping, it is possible (within limits.
I explain it in this article: MySpace Top Menu Styling

To remove the blue (red on mouseover) from the link images, add this code:

<style>
{! remove border from link images !}
a img {border:none !important}
</style>

Banner Under Top Menus, Where alignment with border around main table is Important
In this example I use the main table as the container for the background image.
This method is preferred if you want the banner image within a border which is shared with the main content (and not with the ad/menu area).

If you do NOT have a band page, it works well to put the background image and border two tables deep instead of one. (On the Band Page, the freindsComments are themselves two tables deep, and outside of the main two deep table).
This can be done without effecting the bottom link area.
It does require that you remove the clear gif spacer to the left, or things will look out of balance. However, for a non BAND page, which wants a top banner, under the top menu area, and in perfect alignment with the main page content, this is probably the best solution

======[add code here for two table deep solution]=======

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

Queries hitting other pages of mine, which should be hitting this page:
- myspace header ad banner codes.
- how to put a banner under the advertisements on your myspace
- how to put a picture above band profile
- how to put a photo at top of band page code
- how to add myspace headers like bands have
- how to push down your myspace to add a top banner
- Are we allowed to add a custom banner to the top of the page and push down the ad? I don't know. I have not seen in the rules were it says that we can not.
- How to create space above ad advertisement for custom logo
- mySpace top banner code is easy to apply.
-add cusom size banner top myspace bands layouts
- get custom banner under myspace links

ad banner un hide vanishing hidden fix

The Vanishing MySpace Ad Banner

I am merging a couple of my articles which relate to the mySpace ad banner.
I am ashamed to admit this, but the first article I wrote on the subject, started out as an article on how to hide the ad banner. Later, when myspace changed their code, and the "Vanishing Ad Banner" became a side effect of other code, I wrote an article on the causes and fixes.

While one of my personalities has a high respect for rules my other personality often struggles with the concept unless it can clearly identify a victim.
The first article I wrote, related to myspace; showed how to hide everything except the ad banner. I was getting several hits a day, via google, by people who seemed interested in reading about hiding, obscuring, moving, and covering the ad banner.
So in the interest of appealing to my readers I covered the subject.

In the process I became quite knowledgeable about the ad banner, how it is generated, how to hide it, move it, change it, tweak it, and how to recover it if one has installed code which has accidentally removed it.
A few months ago, this knowledge became very useful, as myspace saw fit to change the depth of the ad banner multiple times. They not only changed the depth, they added multiple code paths, resulting in multiple ad banner depths.
As a result, code which was never intended to hide the ad banner, was causing it to vanish.

There are several fallacies around the ad banner.
Fallacy One:
If my ad banner shows some of the time, It can not be my CSS which is hiding it.
FALSE
If your ad banner is gone, about 30% or more of the time, it is very highly likely the css code you have installed.

Fallacy Two:
MySpace won't really remove my page if I hide the ad banner.
FALSE
They need no reason to remove your page, and pages are often removed when this is the only violation.

Fallacy Three:
It is o.k. to Hide the ads at the bottom of the blog and photo pages
FALSE
Read the Terms of Service.

Fallacy Four:
There is no way to hide the bottom links and copyright without hiding the ad banner.
FALSE

For code to hide the bottom links, and/or copyright, which does NOT obscure the ad banner
MySpace Bottom Links and Copyright Hiding, Formatting

I highly suspect we will soon see advertisements at the bottom of our standard pages as well. I observed an attempt by myspace to implement this a few months ago. Basically they broke a few things, and after moving the code block several times that day, they eventually moved it back to the way it was the day before.

Understanding the Ad Banner
For a diagram please refer to the page I have linked to below. The page is set up so that it shows the div, table and cell boundaries along with most of the classes.
Because it is a real page, with style applied, it automatically updates when myspace makes code changes.
MySpace page showing div table cell class layout
The above page is best viewed in FF, due to IE not understanding the border-spacing property. But it is still ok in IE and other Browsers. I used margins.]

You want to look at the top of the page (assuming the myspace page actually came up, which is seeming less and less likely these days).
The key is to the left (The Key is not part of the standard page, I added it).

Notice that the ad banner is this deep:
div table td div
OR is it this deep?
div table td div div
Refresh the page a few times, does the ad banner change depth?

I noticed the first div in Early to Mid May. I noticed the 2nd one in early June (4 June 2007 to be exact).
At the time, I was calling the symptom the "Vanishing Ad Banner".

IF your ad banner is gone (sometimes or always) and you want to restore it, you need to either remove or override any and all of the following:

The most common forms of the guilty code lines:
table div {display:none} or {visibility:hidden}
div div {display:none} or {visibility:hidden}
table div div {display:none} or {visibility:hidden}
div table td {display:none} or {visibility:hidden}
div table div {display:none} or {visibility:hidden}
table td {display:none} or {visibility:hidden}

Any of the above with a tbody inserted after the table, are equivalent. (Since myspace doesn't use thead or tbody).
Any of the above that have the word "body" added to the front are equivalent. (All of these are in the body).
Any of the above with a tr inserted after the table (or after the tbody if that is also used) are also equivalent.
i.e.
body div table tbody tr td div
or
body div table tbody tr td div div

If you have any of the above, with either {display:none} or {visibility:hidden} you are potentially hiding all or some of the myspace advertisements. This does put you at risk of having your myspace page deleted.

Any subset of the above will also hide the ad banner, if there is nothing else to override it.

body
div
table
table td
div table
table div
td
tr
The list can get quite long I won't list them all.

To fix the problem you must either remove the guilty code or add an override line.

The following code block will override most of the lines which hide the ad banner.
Put this at the END of the "Who I'd Like to Meet" or "Bio" section.

<style>
div table div, 
div table div div, 
div table td div, 
div table td div div, 
div table tbody tr td div,
div table tbody tr td div div,
body div table div, 
body div table div div, 
body div table div {visibility:visible !important; display:block !important}
</style>

I am sort of suprised that myspace has not added this to the style block they now have at the end of the code. They did get body, and html, but seem to have missed a huge chunk of what they could do here.

MySpace could so easily fix the problem themselves.
Since they are in control, maybe they can put the ad div in a class, not very deep at all, so that the ONLY way to address it is:
div.adClass
ok, there is always
body div.adClass
But they can minimize significantly the ways of addressing the thing.
Then, at the end of the code, they can have an override style block.
Most Anything we can do with style, they can override with style. They have the power of being able to go first and last.

Since the information I have provided, for people to use in the recovery of an ad banner which has been accidentally hidden; can be used to actually hide the ad banner; I feel obligated to warn you of the potential consequences, and to make a last ditch effort to persuade you that you really want to “embrace” rather than “obscure” the ad banner. Remember, Advertising is what drives internet innovation.

WARNING: Obscuring the myspace ad banner can result in having your page profile deleted by the myspace police (it is their space, they have this right).
If you do not believe me Please read the myspace terms of agreement (that long list of rules, that we all read before checking the “I Agree” box).

My I instead Suggest one of the following approaches:
1) The Ad Banner Collage camouflage technique:
myspace page using ad camouflage background

2) Attention grabber placed elsewhere on the page to draw the eye away from the Ad Banner. With all the flashing ads, you need to insure that this is even flashier.

3) Instruct your viewers to scroll down immediately upon entering your page. This is what I use on my personal page. (OK sometimes I admit to replacing the ad with a spoof ad, but only when I get assaulted by noise making advertisements. In one case I did replace the ad banner with a smiley with duct tape over his mouth).

4) Block the ads on your own computer. This will not have any effect on how others see your page (unless they are using your computer). The myspace ad banner police will see the ad banner, so your page will not be deleted (at least not for using this technique to "hide" your ad banner).
See the following:
my space discussion forum on hiding the ad banner

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

Queries hitting other pages of mine, which should be hitting this page:
-myspace ad banner codes.
-customize myspace ad banner.
-recover hidden ad banner.
-div help to not hide ad banner