MySpace Band Page Top Left Profile Info, Styling, Hiding, etc

If you want to style (hide, move, import) the profileInfo area, on the Standard page (non artist/band) go Here ProfileInfo:Layout, Styling, Hiding, moving etc ...
That article has a nice diagram showing the classes and layout of this space. It has -multiple examples showing how utilize the classes and layering and other attributes to manipulate this space.

Some Quick Links if you are not interested in my Explanations (although reading them may help you to come up with your own code in the future).
Hide entire Top Left Section
Hide Name
Replace Name with Image
Hide Genre
Hide Profile Image
Move Profile Image
reSize Profile Image
Hide Text next to Image(last login, location, profile views, online now)
Hide Text next to Image AND center image, view my pics|videos
Hide Headline, Location, Last Login, Profile Views and View My Pics|Videos
Hide Last Login (only)
Style Profile Info (color, font)
Replace headline, location and profile views with your own text

The Band Page is Different
-It has no profileInfo class (I have been hoping for one).
-It does not have the extra unused cell
-It uses a different colspan for the "view my pics|videos".
-It has both the headline and the genre inside both a font and a strong tag (which is good for addressing them), and has assigned some very dark green color to them, which looks black on a white background. (Try a black background and the green is obvious).
- Mood thing doesn't seem to show up, although it is on the home page, and can be set.
- It accepts html in the headline, which allows one to add further classification to the space (the standard page only takes the font tag).

Otherwise, it is similar.

To see a diagram, which shows the structure of this area, and how it fits into the full page:
myspace page showing structure and classes

There is not enough classification to uniquely address most of the elements in the top left (profile info) area, without effecting other page elements.

However, I can add further classification to this space, by using the headline area.

Here is an example of a page, where I have, by closing and re-opening tables, added more classification:
Click here to see Sample Page
Here I have closed a few tables, added in a P (paragraph) and then re-opened the tables, adding class H to one of them.
(The reason I used a P instead of a div, was due to very limited space).

Notice how my structure is effected.
I can now isolate the top left section from the rest of the left side (sort of).
This is useful if I want to hide this block, without effecting the General section.

Hide entire Top Left Section
i.e. to hide the entire Top left section (above the contact table) I can do this:
Put this in the headline:

</table></table><p><table class=H><td><table><td> 

Now put this at the top of the Bio:

<a class=i href="http://xiii.us/ms/band-profileInfo">
style or hide default image area myspace music page code by Eileen</a>
<style>
table.H, .nametext, font strong{display:none;}
div.clearfix i i, .i {display:none;}
table table table table td.text img {display:none;}
table table p table table td.text img, table table td.text table table td.text img {display:block;}
table, td {height:auto !important; }
table table br {display:none}
table table td.text br, table table p td br {display:inline; line-height:13px}
p {margin-top:-13px;}
</style>

I tried several strategies, while this one did not have the least code, it did have the least effect on other page elements.

Some Other Useful Code Blocks:
Hide Name

<a class=i href="http://xiii.us/ms/band-profileInfo">
style or hide default image area myspace music page code by Eileen</a>
<style>
{!-hide name-!}
span.nameText, x.i i, .i {display:none}
</style>

Replace Name with Image
Set Height to the Height of your image, Set width to the width of your image, and replace the URL of my image with the URL of your image.

<i class=off>! replace nameText with image !
! <a href="http://spiff-myspace.blogspot.com">myspace code tutorials author:Eileen</a>
</i>
<style>
table table table td.text span.nameText {
height:50px !important; width:100px;
display:block;
background-repeat:no-repeat;
background-position:center top; 
background-image:url(http://i3.tinypic.com/4p1qxk5.gif); 
font-size:0px !important;
text-indent:-1313px;}
div.clearfix i i, .i {display:none;}
</style>

Hide Genre

<style>
{! hide genre !} 
table table table td.text font strong{display:none}
{! recover headline !}
table table table table td.text font strong{display:inline}
</style>

Hide Profile Image

<style>
{! remove profile image !}
table table table table td.text a img {display:none;}
{! recover contact table link images !}
table table table.contactTable table td.text a img {display:block;}
{! recover right side images !}
table table td.text table table td.text a img {display:block;}
</style>

Move Profile Image

<style>
{!<a href="http://xiii.us/ms/band-profileInfo">MySpace Band Move Image</a>!}
table table table table td.text a img {position:absolute; top:0px; left:50%; margin-left:-420px;}
{! recover contact table link images !}
table table table.contactTable table td.text a img {position:static; margin-left:0px}
{! recover right side images !}
table table td.text table table td.text a img {position:static; margin-left:0px}
</style>

You need to change the positioning values.
If you have added images to your general area, you need to put them in a class, so that you can address them for override positioning.
reSize Profile Image

<style>
{!<a href="http://xiii.us/ms/band-profileInfo">MySpace Band Resize Profile Image</a>!}
table table table table td.text a img {width:90px; height:auto}
{! recover contact table link images !}
table table table.contactTable table td.text a img {width:auto; height:auto}
{! recover right side images !}
table table td.text table table td.text a img {width:auto; height:auto}
</style>

Hide Text next to Image AND center image, view my pics|videos
Start by putting code in the headline to add additional classification. This is the only way we can separate the "view my pics|videos" from the general table.
This also gives us greater control over text next to the image.

Put this in the Headline:

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

Put this at the top of the Bio:

<a class=i href="http://xiii.us/ms/band-profileInfo">
mySpace band page Customizing Tutorials by Eileen (Top Left Profile Info)
</a>
<style>
{! use ONLY WITH additional code in the Headline !}
{! hide text next to profile image !}
{! center name, genre, image, view-my-pics-videos !}
x.i i i, .i {display:none}
p  p {display:none}
p table {width:100%; margin-top:-13px;}
table table table table td.text {width:auto; text-align:center}
table table table table td.text img {display:none;}
table table table table td.text font strong {display:none;}
table table table table td.text a img {display:block; margin-right:auto; margin-left:auto}
table table table td.text {text-align:center}
div.clearfix i i, .i {display:none;}
</style>

Hide Text next to Image(last login, location, profile views, online now)
Put this in the Headline AFTER any Headline text you want to show:

"<div class="H">

Now put this at the top of your bio section (or wherever you are keeping style blocks):

<style>
div.H {display:none}
{! remove quote. Use only if you have no headline text displayed !}
table table table table td.text font strong {display:none;}
</style>

Hide Headline, Location, Last Login, Profile Views and View My Pics|Videos
Due to this being at the exact same level as the General Table, I have to add additional classification to make this work.
I can do this in the General Section, but this would require that I re-create multiple headers and cells within that space.
I can do this in the Headline.
I choose the Headline.
Step 1) Install this code in your headline:

</td></tr></table><table class="T"><tr><td >

Step 2) Place this block at the top of the Bio (or where ever you keep your style blocks):

<span class="off">!-Below style block works with additional code added to headline-!</span>
<style>
{!-text next to and under profile image-!}
table.T {display:none;}
{!-hide quote-!}
table table table table td.text font strong {display:none;}
</style>

If you combine the above, you can hide the entire space.
Step 1) Install this code in your headline:

</td></tr></table><table class="T"><tr><td >

Step 2)Place this block at the top of the Bio (or where ever you keep your style blocks):

<span class="off">!-Below style block works, to hide the profile Info area (top left) with additional code added to headline-!</span>
<style>
{!-text next to and under profile image-!}
table.T {display:none;}
{!-hide genre and quote-!}
table table table td.text font strong {display:none;}
{!-band name-!}
span.nameText {display:none}
{!-clear gifs-!}
table table table td.text img {display:none;}
table table table.contactTable td.text img {display:block;}
table table table  td {height:auto !important;}
{!-anything on right side of profile-!}
table table td.text table td.text img {display:block;}
</style>
<span class="off">!-End block to hide Profile Info (top left)-!</span>

Hide Last Login (only)
This requires that we add a div and p (paragraph) to the area, so that we can get the needed positioning and then clip off the last login.
(Clip requires position absolute, we need the div to create the outer container so that when we do the position absolute we have a reference point).

You WILL NEED TO ALTER px values. The values used, worked perfectly on my test page. The actual values needed depend on the amount of space taken up by the text in your space, along with the size of your image.

Place the following code in the Headline:

YOUR HEADLINE"<div class=H><p> 

Now place this code at the top of the Bio:

<style>
{!<a href="http://xiii.us/ms/band-profileInfo">MySpace Hide Last Login</a>!}
{! assumes you created div.H and P in the headline !}
{! insure that online now icon does not change position of last login !}
div.H img {position:absolute;}
{! set a known px size, so that the size does not fluctuate as much cross browser!}
div.H p {font-size:11px}
{! set div height to the height the text content currently takes up !}
div.H {height:200px; position:relative; top:0px;}
{! clip of last login and top hanging quote !}
div.H p {position:absolute; top:0px; left:0px; clip: rect(20px, 200px, 130px, 0px)}
</style>

Getting Clip Values correct:
rect (top, right, bottom, left)
Top: clips off of the top. If too much has been clipped off the top, decrease this value.
Bottom: If too much has been clipped off of the bottom, INCREASE this value.
If too little has been clipped of decrease the value.

Right: This should be the width of the P (paragraph)
To temporarily see what is going on, you may want to add this line (put it inside the style block)

div.H p {border:2px green solid;}
This will allow you to see the boundaries of the Paragraph you are clipping.


Style Profile Info
The below style block will make the area look like this:

Match the coloring/styling on the diagram, with what I use in the code, to see how to style each section.

<style>
{!-The text next to picture, all in class td.text-!}
table table table table td.text {color:red !important; font-family:comic sans ms; font-size:11px;}
{!-name above picture-!}
span.nametext {color:blue !important; font-size:18px; font-family:courier new; background-color:pink}
{!-genre and headline-!}
table table table td font strong {color:hotpink;font-size:8px; font-family:impact;  border-bottom:3px green solid}
{!-headline NOT genre in case you want them different-!}
table table table table td font strong {color:hotpink;font-size:8px; font-family:impact;  border-bottom:3px green solid}
{!-links; this effects many other links on the page-!}
table table table a {color:violet !important; font-size:14px; font-family:impact}
</style>

Replace headline, location and profile views with your own text

If you want to fake the number in the profile views, this solution will do this.

Step 1) Create an image which contains the text. The image should be about 130px high and 180px wide.
You can use any drawing tool for this (paint, photoshop, paintshop). There are also some online sites you can use for this step.
(I will add some later).

Step 2) Save your image to www.tinypic.com
You can use another site to host the image, however you must have a very tiny name.
They band page headline does have many characters to work with.

Step 3) Place this code in the headline:

<img src="URL-OF-IMAGE"/>

Place this code in the bio:

<style>
font strong img {background-color:white; width:180px; height:130px; position:absolute; margin-left:-10px; margin-top:-20px;}
</style>

Although I think the above is cleaner, another way to fake the profile views is to create a paragraph (or div) which has the desired number of views, give it an opaque background, and place it over the existing profile views.

Each profile is different, so the values needed will vary from profile to profile.
The below code worked on my own test page.

Place this in the headline:

<div class=P>profile views: 666</div>

You have some room for headline text after the above code, but not much. You can replace the div with a P to gain more space for headline text.
Place this in the bio:

<style>
div.P {display:block; background-color:yellow; height:40px; width:160px; }
div.P {font-size:13px;}
div.P {position:absolute; margin-top:75px; _margin-top:90px; _margin-left:-10px;}
</style>

change Yellow to the color of your own background.
You may need to adjust the margin values.

Thankyou for Visiting; have a nice day

codes ? Is not code plural already? I have been a software engineer for several years now, and before myspace existed, I had never seen the word codes in reference to software code.
MySpace band page last login
How to hide the last login on the band page myspace