I do not have time to troubleshoot people's code. (Hopefully I will again in the future).
I do not have much time to answer questions (but if it is a quick answer, that only takes me a few minutes, I will try to answer).
I really recommend the following site, for myspace customizing questions: Official Myspace Customizing Forum
That is the most reliable source, and the people I know who enjoy helping, and are quite good at it, tend to hang out there.

Wednesday, February 28, 2007

myspace profileinfo profile image last login hide style

MySpace Top Left ProfileInfo Table

Quick Links to Code Blocks. Those not interested in Explanations, who just Want Code, can use the below quick links.
Split Headline into Multiple Lines
Hide ProfileInfo Space Completely
Hide ProfileInfo Space AND Replace with single Image
Replace Name With Image
Import ProfileInfo Profile Image, Mood, Name, Headline into a Div Overlay
Resize Profile Image:
Tool to Generate Code to Replace Profile Image with another Image
Code and explanation to Replace Profile Image with another Image

Hide Quotes around Headline without Hiding Headline or Profile Data Text
Prevent Wrap of "View my Pics|Videos and/or Mood
Hide "View My Pics|Videos" KEEP Mood
Keep Only Mood, Hide Everything Else in ProfileInfo
Hide ONLY Text Next to Image
Style Text Next to Image
Hide Text Next to Image Keep Headline
Hide Text Next to Image Keep Headline and online icon
Hide Text Next to Image including Headline and quotes and Center remaining Content

Spoof Text next to Image, Keep Last Login (or not)
Hide Gender and Age Keep Last Login (Location and Online Icon can be hidden or kept)
Hide Headline, Gender and Age Keep Last Login (Location and Online Icon can be hidden or kept)
Hide Last Login, keep location, gender, age, online icon
Replace Mood Image With Custom Mood Image
Style the Mood Text (both word MOOD and text that indicates mood)
Hide the word "Mood:" (just the word Mood and the :)



This is the space which includes the name, profile image, headline, sex, age (not on artist page), location, last login, mood thing, and links to view pictures and videos.

For the band page this space also includes the genere and page views. The mood thing doesn't show up on the band page.
For styling information (including hiding), for this space, on the band page go here:
Band Myspace Page Profile Image ProfileInfo

I have removed the diagram from this article. Instead I use a real myspace page, with the needed style commands added, to show the layering and classes.
I refer to the diagram the page creates, in this article.
Regular MySpace Page Showing Structure, Layout, Classes
[The above page is best viewed in FireFox, as IE does not recognize the border-spacing attribute. You can download FireFox using the icon on my sidebar.]

On the standard page, the whole block has been placed in class="profileInfo".
The table which is assigned class="profileInfo" is itself three tables deep.
I can address it as follows:
(If you refer to the diagram on the myspace page I link to above, you can see a visual of what I am explaining).
table table table.profileInfo
or even just
table.profileInfo
or
body table tbody tr td table tbody tr td table.profileInfo

The words shown in red, do nothing to make the path more explicit, so I don't use them. Some people do, which is fine. For the most part they are harmless.

The whole page is in a body, so using it does not do anything to make the address more explicit.
There has to be a tr and a td between the table and any content, so they don't make this address anymore explicit.
tbody (and thead) are not used in the myspace page code, so the default of tbody is always assumed, and having it in the address string adds no value.

Some address the class this way
.profileInfo
I prefer not to. In the past myspace has extended the use of a class to more elements. Code which utilized a more explicit addressing method was less likely to
In General the more explicit your addressing, the lower the risk of a myspace code change breaking your code. It also leads to more readable code.

On the myspace page, I link to above, I have added additional classification to the headline.
<font class="H">HEADLINE</font><font class="T"> 

On the standard page I was forced to use the <font> tag. On the Band page the choice is not as limited. This allows me to make the HEADLINE independently addressable, allowing me to hide the stuff around it (including the quotes), without hiding the HEADLINE.


Split Headline into Multiple Lines
On the standard page, the only tag we can add to the headline is the font tag. Others are replaced with dots.
Therefore we can not use the carriage return tag.

We can make use of the font tag, to force line breaks.
If the font is set to display:block (instead of display:inline) it will force a line break.

The below example will break the headline into three lines.
In this example I put the middle line in a font block, which I declare display:block.
This forces a carriage return before and after the block.
There are two code blocks.
The first one goes into the headline:
A Nerd from<font class=B> Ka-Troo </font>Here to Help You
The next code block is the style block, and can go at the top of the about:
<style>
.i display:none;}
font.B {display:block;}
</style>


Style Text Next to Image
Style text Next To image.

First put code in the headline:
<font class=H>YOU HEALINE TEXT HERE<font class=T>
Next put the style block at the top of the about me section
<style>
font.H {color:hotpink; font-size:19px; font-family:comic sans ms}
font.T {color:purple; font-size:11px; font-family:Arial Narrow;}
</style>


Hide Text Next to Image (age, gender/sex, location, last login)
<i class="off">
!-Hide text next to profile Image Including Headline-!
!-online icon is NOT hidden
!-code author:Eileen <a href="http://xiii.us/v/">MySpace Code and Tutorials</a>
</i>
<style>
table.profileInfo table td.text {visibility:hidden}
table.profileInfo table td.text span.msOnlineNow,
table.profileInfo table td.text img {visibility:visible;}
</style>


If you wish to keep the Headline you will need code in the headline section, so you can address the text under the Headline independently of the headline.

Hide Text Next to Image Keep Headline
First put this in the Headline:
<font class=H>PUT YOUR HEADLINE TEXT HERE</font>
Now put this in the about me section:
<style>
{! hide and minimize location age last login !}
table.profileInfo table td.text {visibility:hidden; font-size:1px;}
{! recover profile image !}
table.profileInfo table td.text a img {visibility:visible;}
{! recover headline; assumes font.H defined in headline !}
table.profileInfo table td.text font.H {visibility:visible; font-size:13px;}
</style>


Hide Text Next to Image Keep Headline and online icon
First put this in the Headline:
<font class=H>PUT YOUR HEADLINE TEXT HERE</font>
Now put this in the about me section:
<style>
{! hide and minimize location age last login !}
table.profileInfo table td.text {visibility:hidden; font-size:1px;}
{! recover profile image and online now icon !}
table.profileInfo table td.text span.msOnlineNow,
table.profileInfo table td.text img {visibility:visible; font-size:9px;}
{! recover headline; assumes font.H defined in headline !}
table.profileInfo table td.text font.H {visibility:visible; font-size:13px;}
</style>

Hide Text Next to Image including Headline and quotes and Center remaining Content
<i class=i>
<a href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy9tcy9wcm9maWxlSW5mbw==">Remove Profile Info Text</a>
</i>
<style>
.i {display:none}
{!hide quote which is all that is left of the text block!}
table.profileInfo table td.text {visibility:hidden;}
{! recover profile image !}
table.profileInfo table td.text a img {visibility:visible;}
{! adjust table and cell widths so content centers !}
table.profileInfo td, table.profileInfo table {width:auto !important;}
</style>
If you also want to center the nametext you can add a left margin.
align:left is hard set in the code, and my attempts to override it did not work.
But this does work (if added to the above style block:
table.profileInfo span.nametext {margin-left:50px;}
However you have to adjust the px value based on the length of your nametext.

Spoof Profile Data (age, gender/sex, location, last login)
Use the above code block.
Put this in the headline:
<font class="H"><img src="http://i12.tinypic.com/6belgli.gif"><font class="T">
REPLACE the URL with the URL of your own image, unless you want to use my Text

For another method, which does not require an image (but has its own potential issues)
joyboner.com
For a cleaned up version of the concept used by joyboner
(And I was very impressed with how well this one was cleaned up, so much that I now consider this superior to using a spoof image):
Maybe Best Code for Spoofing Text next to Image if you are willing to hide the online now icon

Resize Profile Image:
<style>
{!-Resize Profile Image, change px width to size desired-!}
table.profileInfo table td.text a img {width:300px !important}
</style>

Hide ProfileInfo Space Completely
<style>
table.profileInfo {display:none;}
</style>
If you do not want to remove the space it occupied, then replace {display:none} with {visibility:hidden}

The above will remove MOST of the space. There is still the space left by the carriage returns between the tables. If you want your contact table to move up, completely, you also need to eliminate the carriage return, OR you can just hard-set the size of the carriage return, and move up the contact table. The below code block has this functionality added to it:
<style>
{!- eliminate profileInfo table -!}
table.profileInfo {display:none;}
{!- control size of carriage return -!}
br {line-height:12px;}
{!- move up contact table over carriage return-!}
table.contactTable {position:relative; top:-12px; margin-bottom:-12px;}
</style>

Prevent Wrap of "View my Pics|Videos and/or Mood
IF you want to make the cell showing the mood and/or "View my Pics/Videos" spread out to the end of the table:
<style>
table.profileInfo table td {white-space:nowrap;}
</style>
OR, if the above causes the headline not to wrap in FireFox You can instead increase the size of the clear gif spacer, until their is room for the mood.
The cause of the mood wrapping, is that the colspan of 3, may not come out to enough space, if your profile Image is small, and your text to the right has enough width, to force the 3 cell to the right, too small.
(I am still convinced that one of those cells is just a programming bug, based on what used to be there, and the code they later added).
But either way, you can expand the clear gif, and expand the three cells.
<style>
{! increase size of spacer cell !}
table.profileInfo td img {width:90px;}
{! prevent above from effecting profile img !}
table.profileInfo td a img {width:auto}
</style>


Replace Name With Image
<a class=i href="http://xiii.us/ms/profileInfo">Replace Profile Name Text With Image code by Eileen</a>
<style>
.i {display:none;}
table.profileInfo td.text {background-image:url(URL-OF-IMAGE-HERE);
background-position:left center;
background-repeat:no-repeat; height:42px}
table.profileInfo span.nameText {visibility:hidden;}
table.profileInfo table td.text {background-image:none; height:auto}
</style>
Replace URL-OF-IMAGE-HERE with the url of your own image.
Replace 42 with the height of your image.

Hide ProfileInfo Space AND Replace with single Image
Place the below code at the very top (or bottom) of either your about OR meet section.
<a class=i href="http://xiii.us/ms/profileInfo">Replace Profile Name Text With Image code by Eileen</a>
<style>
.i {display:none;}
table.profileInfo td.text {background-image:url(URL-OF-YOUR-IMAGE);
background-position:left center;
background-repeat:no-repeat; height:42px}
table.profileInfo span.nameText {visibility:hidden;}
table.profileInfo table td.text {background-image:none; height:auto}
</style>
Replace the url image with the URL of your own image.
Replace the height and width with the size of your URL image.

Hide "View My Pics|Videos" KEEP (Do Not Hide) the Mood text and Image

MySpace made some changes, that make the code for this way cleaner then it previously was.
<i class="off">
!-Get rid of "view my pics|videos" KEEP mood-!
!-code author:Eileen <a href="http://xiii.us/v/">MySpace Code and Tutorials</a>
</i>

<style>
.i {display:none;}
{!-prevent wrap of mood if longer than profile image-!}
table.profileInfo table td {white-space:nowrap !important; }
{!-hide view my line without hiding mood -!}
table.profileInfo table td {text-indent:-1313px;}
table.profileInfo table td.text {text-indent:0px;}
table.profileInfo table td b,
table.profileInfo table td img,
table.profileInfo table td span.searchMonkey-mood {text-indent:0px;}
</style>


Below is my older version of the code, which shows how complex the task was before myspace added the class to the mood text.

[note: DOES NOT WORK IN OPERA and SOME Versions of SAFARI.]
The below code block can go wherever you keep you style blocks. If you do not already have a place designated for this, you can place this at the top of your about me. It has its own style tags, so don't nest it inside other style tags.
<i class="off">
!-Get rid of "view my pics|videos" KEEP mood-!
!-code author:Eileen <a href="http://xiii.us/v/">MySpace Code and Tutorials</a>
</i>
<style>
{!-prevent wrap of mood if longer than profile image-!}
table.profileInfo table td {white-space:nowrap !important; }

{!-get rid of the view my ... NON IE browsers -!}
table.profileInfo table tr:last-child {display:none;}

{!-needed to get rid of the view my .. IE. Change color to suit your space -!}
* html table.profileInfo {background-color:white !important;}
* html table table table.profileInfo table td {border-bottom:2px white solid}

* html table table table.profileInfo table td { line-height:0;}
{!-undo effect on text next to profile image-!}
{!-You may need to increase the below px value-!}
* html table table table.profileInfo table td.text {line-height:13px;}

{!- center the mood within the cell -!}
table table table.profileInfo table td {text-align:center !important; margin-right:auto !important; margin-left:auto !important;}

</style>
Replace the word "white" with the color of your own background.
This is what is covering the "View My |" in IE.

Or you can use a solution which gives the whole Mood Block its own background (This will work better if you have a transparent table background with a patterned background showing through. In this case change White to the color you want behind your mood. Transparent does NOT work with the IE solution.

I have another solution which involves stuffing the "View My Pics|Videos Under the contact table, I will add it here later

Hide ProfileInfo Everything Except the Mood text and image.
The below code block can go wherever you keep you style blocks. If you do not already have a place designated for this, you can place this at the top of your about me. It has its own style tags, so don't nest it inside other style tags.
<i class="off">
!-Get rid of "view my pics|videos" KEEP mood-!
!-code author:Eileen <a href="http://xiii.us/v/">MySpace Code and Tutorials</a>
</i>
<style>
{!-eliminate most of the profileInfo content-!}
table.profileInfo td.text {display:none;}
{!-irritating empty cell inhibits Opera solution-!}
table.profileInfo table tr:first-child td {display:none;}

{!-set width and height; you may choose to use numeric height and width values-!}
table.profileInfo, table.profileInfo table, table.profileInfo td {width:auto !important; height:auto !important}

{!-prevent wrap of mood if longer than profile image-!}
table.profileInfo table td {white-space:nowrap !important; }

{!-get rid of the view my ... in Mozilla and FF and some Safari browsers -!}
table.profileInfo table tr:last-child {display:none;}

{!-needed to get rid of the view my .. IE. Change color to suit your space -!}
* html table.profileInfo {background-color:white !important;}
* html table table table.profileInfo table td {border-bottom:2px white solid}
* html table table table.profileInfo table td { line-height:0;}

{!-do we care about Opera? does not handle last-child how about overflow-!}
{!-set height of mood; I like to do this for all browsers-!}
table.profileInfo table td img {height:20px;}
{!-a little extra space here helps-!}
table.profileInfo table td {border-spacing:3px;}
{!-hide bottom cell-!}
table.profileInfo table {height:24px !important; overflow:hidden;}

{! safari? Supposedly last-child works but my tests failed -!}
{! I may need to return to the crunch and stuff solution I had before !}

</style>
You can also add relative positioning to the mood image to better center it on the text, after altering its size.
Import Mood text and image Into Div Overlay.
Recover the Entire Profile Info area.
If you have used my Div Overlay Strategy:
First remove this line of code:
table.profileInfo {display:none;}

Now Add this block of code:
<style>
{! recover ProfileInfo !}
table.profileInfo, table.profileInfo table td img {display:inline !important;}
{!-Position, change px values to suit. You may change left to right-!}
table.profileInfo {position:relative; top:0px; left:0px;}
</style>
You should be able to see the profileInfo section. It should be located just above your Core Div.

Now use the code block to Hide Everything in the ProfileInfo except the Mood.
Keep Only Mood, Hide Everything Else in ProfileInfo

Next Position the Mood. You can either use relative or absolute.
The Mood is NOT logically inside our div, as was the other content we placed.
However it is now sitting center on the top of your div.
Relative position may be more accurate than absolute, depending on where you want to place the thing.

Hide Quotes around Headline without Hiding Headline
Hiding the quote things, while having Text (not an image) in the Headline.
The first quotation can be ditched, while keeping text in the headline, but the 2nd one was a problem.
There is no place to enter any code, to do anything, between that 2nd quote and the the text next to the picture (age, sex and such).

The best I could do, and still keep text in the headline, was to give it a background color, which matched the text next to the picture.
Then I could, via padding and margin camouflage the quotes on both sides.

Put this in the headline:
<font style="color:white">MY HEADLINE </font>
Next put this in the About Me (or wherever you keep the style blocks):
<style>
table.profileInfo td.text font {color:white; background-color:black; padding-right:10px; margin-right:-5px; padding-left:10px; margin-left:-5px;}
</style>

Replace Profile Image
Place this code at the very top of your "About Me" section.
<a class=i href="http://xiii.us/ms/profileInfo">
replace profile image myspace customize code by Eileen</a>
<style>
.i {display:none;}
table.profileInfo td.text a img {width:148px; height:136px; visibility:hidden;}
table.profileInfo table {background-image:url("http://a454.ac-images.myspacecdn.com/images01/121/m_1dc793a3ca43ff7031c72a6726ef5df5.gif");
background-position:1% 1%;
background-repeat:no-repeat;}
table.profileInfo table td {background-color:transparent !important;}
</style>

For a tool that will generate this code, with your own image, and the correct px values, CLICK HERE

Or you can cut and past the above block, Replacing the image with your own.
Replace the width and height with the width and height of the image you want to use.
This is to reserve the space. Then I turn the default image invisible, and place your new image as a background to the table.

Import ProfileInfo Profile Image, Mood, Name, Headline into a Div Overlay
If you only want to import a subset of the profileInfo, start by bringing in the whole block, then hide the stuff you don't want to see.

The exact code you need, to recover this area, is dependent on how you hid it.
The below block should work:

<span class="off">START block to bring ProfileInfo Into A Div Overlay</span>
<style>
{!-recover the profileInfo area. This works with most hide methods I have seen -!}
table table table.profileInfo, table table.profileInfo table {display:block !important; visibility:visible !important}
table table table.profileInfo table td img {display:inline !important; visibility:visible !important;}
table table table.profileInfo td {height:auto !important; line-height:12px !important}
table table table.profileInfo span.nametext {line-height:24px;}

{!-Position, change values to suit your profile-!}
table table table.profileInfo {position:absolute; top:300px; left:50%; margin-left:100px;}
</style>
<span class="off">END block to bring ProfileInfo Into A Div Overlay</span>
The below block first recovers the block, then hides everything except the default profile image (your picture). This works if you only want to display the picture.
<span class="off">START block to bring default picture into div Overlay</span>
<style>
{!-Recover profileInfo block-!}
table table table.profileInfo, table table.profileInfo table {display:block !important; visibility:visible !important}

{!-Position, change values to suit your profile-!}
table table table.profileInfo {position:absolute; top:300px; left:50%; margin-left:100px;}

{!-hide name -}
table table table.profileInfo .nametext {display:none;}
table table table.profileInfo br {display:none;}
{!-render most of the profile Info gone -!}
table.profileInfo table td {display:none;}
{!-render td.text hidden, but not gone-!}
table.profileInfo table td.text {display:inline !important; visibility:hidden;}
{!-display image-!}
table table table.profileInfo table td img {display:inline !important; visibility:visible !important;}

</style>
<span class="off">END block to display only default picture </span>

Spoof Text next to Image, Keep Last Login
This involves using an image to spoof the text which is normally under the headline (next to the profile image).
However, instead of deleting the default text, we will cover everything with our image EXCEPT the last login. (You can choose to show more, but it is tricky. Because of the gap between the last login and the rest of the data this works ok for showing only last login).

First put this in your headline:
<img class=H src="http://i12.tinypic.com/6belgli.gif"><font class=F>
Replace my image with your own.

Put this at the top of your Bio:
<i class=off>!Style block to go with additional code in headline.
Spoof text next to profile Image, keep last login.
Author:Eileen (spiff-myspace.blogspot.com)
</i>
<style>
img.H {position:absolute;
margin-bottom:-50px;
background-color:pink;
margin-left:-20px;}
</style>
Hide Gender and Age Keep Last Login (Location can be kept or hidden)(Online icon can be kept or hidden)
You can keep or hide the location with this code block.
The idea is that you can choose what to show, as long as the items you want to show are all next to each other (one on top of the other with nothing you want to hide in-between them).
If you do not want a Headline, Just leave blank where I have "YOUR HEADLINE HERE".

First put this in your headline:
<font class=HT><font class=H>YOUR HEADLINE HERE</font><font class=T>
The next block goes at the top of the "About Me" Section.
<a class=i href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy9tcy9wcm9maWxlSW5mbw==">
mySpace Remove age, gender, location Only</a>
<style>
.i {display:none;}
{! reserve space for the text block, shift UP slightly !}
{! height should be height of block AFTER unwanted data is clipped off !}
font.HT {display:block; width:155px; height:120px; position:relative; top:-15px;}
{! height must be enough to hold the full text block BEFORE clipping any off !}
font.T {display:block; width:155px; height:180px; position:absolute}

{! IE only set negative margin to width of headline.}
* html font.T {margin-left:-70px;}

{clip down to what we want to show T R B L}
{decrease the 80 to show location or if your online icon is clippd off}
font.T {clip:rect(80, 150, 200, 0);}

{move it up}
font.T {margin-top:-70px;}

{!OPTIONAL hide hanging quote !}
table.profileInfo table td.text {visibility:hidden;}
table.profileInfo table td.text font, table.profileInfo td.text img,
table.profileInfo td.text span.msOnlineNow {visibility:visible;}

</style>

Hide Headline, Gender, and Age; Keep Last Login (Location and Online Icon can be hidden or kept)
Put this in the headline:
<font class=HT><font class=T>
Put this in the About Me:
<a class=i href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy9tcy9wcm9maWxlSW5mbw==">
Hide Headline, Age, Gender, Keep Last Login</a>
<style>
.i {display:none;}
{! reserve space for the text block, shift UP slightly !}
{! height should be height of block AFTER unwanted data is clipped off !}
font.HT {display:block; width:155px; height:100px; position:relative; top:-45px; }
{! height must be enough to hold the full text block BEFORE clipping any off !}
font.T {display:block; width:155px; height:150px; position:absolute; font-size:11px; }

{clip down to what we want to show T R B L}
{increase or decrease values as needed}
font.T {clip:rect(80, 150, 200, 0);}

{OPTIONAL move it up}
font.T {margin-top:-20px;}

table.profileInfo span.msOnlineNow {position:absolute;}

{!OPTIONAL hide hanging quote !}
table.profileInfo table td.text {visibility:hidden;}
table.profileInfo table td.text font, table.profileInfo td.text img,
table.profileInfo td.text span.msOnlineNow {visibility:visible;}

</style>




Hide Last Login, keep location, gender, age, online icon
Put this in the headline:
<font class=HT><font class=T><font class=H>"YOUR HEADLINE HERE</font>

Put this the about me:
<a class=i href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy9tcy9wcm9maWxlSW5mbw==">
Hide Last Login Only MySpace</a>
<style>
.i {display:none;}
{! reserve space for the text block, shift UP slightly !}
{! height should be height of block AFTER unwanted data is clipped off !}
font.HT {display:block; width:155px; height:120px; position:relative; top:-15px;}
{! height must be enough to hold the full text block BEFORE clipping any off !}
font.T {display:block; width:155px; height:200px; position:absolute; font-size:11px}

{clip down to what we want to show T R B L}
{increase or decrease values as needed}
font.T {clip:rect(0, 150, 113, 0);}

{move it up}
font.T {margin-top:6px;}

table.profileInfo span.msOnlineNow {position:absolute;}

{!OPTIONAL hide hanging quote !}
table.profileInfo table td.text {visibility:hidden;}
table.profileInfo table td.text font, table.profileInfo td.text img,
table.profileInfo td.text span.msOnlineNow {visibility:visible;}

</style>


Replace Mood Image With Custom Mood Image
<a class="i">
<a class="i" href="views-under-construction.blogspot.com">custom mood myspace code and tutorials by Eileen </a>
<style>
table.profileInfo table td img {width:0px; height:0px; background-color:transparent; padding-top:19px ; padding-right:19px ;
background-image:url(http://i38.tinypic.com/2wna25l.jpg)}

table.profileInfo table td.text img {padding-top:0px !important; padding-right:0px !important; background-color !important; width:auto !important; height:auto !important;}

* html table.profileInfo table td a {line-height:40px}
* html table.profileInfo table td.text {position:static;}
* html table.profileInfo table td img {padding-top:0px; padding-right:0px; width:300px; height:195px;}
* html table.profileInfo table td img {position:absolute;}
* html table.profileInfo table td.text img {position:static;}
* html table.profileInfo table td img {clip:rect(0, 20, 20, 0);}
table.profileInfo table td {white-space:nowrap;}
</style>
<i class="i">END code to apply custom Mood</i></a>

[notes for myself to use when I automate this:
to figure out the stretch factor:
if I want 40 across I need to stretch to 40 * 7.5 = 300
if I want 26 down I need to stretch to 26 * 7.5 = 195
To clip top left:
{clip:rect(0, 40, 26, 0);}
]

Style Mood Text
You must be willing to use the SAME style for both the Text which indicates the Mood (such as "Happy") AND the text which says "View My" and the "|" between pics and videos.
At least in IE (in FireFox it is possible to do ONLY the text which shows your mood).

It is also necessary to have an UnDo effect (reverse effect) for multiple other text elements, if you alter the style of the text which shows your mood.
I show this in the example below.

Place this code at the top of the about section, or wherever you are placing style blocks:
<a class=i href="http://xiii.us/ms1/">
myspace codes samples tutorials by Eileen</a>
<style>
table.profileInfo table td {color:magenta; font-size:16px; font-family:comic sans ms; font-weight:bold;}

{! word MOOD !}
table.profileInfo table td b {color:green; font-size:12px; font-family:impact; font-weight:normal;}

{! headline and text under headline !}
table.profileInfo table td.text {color:black; font-size:12px; font-family:courier; font-weight:normal;}

{! if you want your healine styled different than text under it then wrap your headline text inside font class=H and use the below to style the headline only !}
table.profileInfo table td.text font.H {color:blue; font-size:18px; font-family:Arial Black; font-weight:bold;}

{! to style the view my differently in FireFox !}
table.profileInfo table tr:last-child td:last-child {color:yellow; font-size:10px; font-family:arial}
.i {display:none;}
</style>
In addition if you are using the last line, to style the headline different, you want to place this in your headline:
<font class=H>YOUR HEADLINE TEXT</font>


Hide the word "Mood:" (just the word Mood and the :)

Place this code at the top of the about section, or wherever you are placing style blocks:
<a class=i href="http://xiii.us/ms1/">
myspace codes samples tutorials by Eileen</a>
<style>
{!Hide word MOOD !}
table.profileInfo table td b, .i {display:none;}
</style>


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

How do I recreate age sex location in myspace
Hide only the word "Mood" and the ":"
style mood
hide your profile image
resize your profile image
Hide text next to profile image
Change text next to profile image
put an image in my headline
replace name with image
hide information next to default picture
hide gender and age keep last login and location

Labels:

Tuesday, February 27, 2007

mySpace URL userProfileURL style hide image

mySpace URL space, Styling, Hiding, Moving, Replace

Some quick links in case you don't want to read the whole article, and really learn about this space:

How the URL Space is Structured and How it Fits into the Page Structure
Remove the URL Space
Hide only the URL space Header, Keep your URL name
Replace the URL Space with Image
Replace the URL Space with Image myspace 2.0

How the URL Space is Structured and How it Fits into the Page Structure
To understand the laying (div, table, cell, class) of this space, refer to this page.
MySpace page showing Layering of Div, Table, Cell, Class
Scroll down to the URL space (left side under the contact table).
Look at the key, to the right.
The table, which is the core of the URL space, is assigned class="userProfileURL".
Notice that the class is not restricted to the table.
Two Rows (tr) have been assigned the same class="userProfileURL").

The url box is built using a combination of these levels:
table table table.userProfileURL
This is the class. This is the best way to address this area for hiding, unhiding, replacing with a picture, and anything else you may want to do with it.

table table table.userProfileURL td: this is where the blue background, which serves as a border, is set.
table table table.userProfileURL table tr or
table table table.userProfileURL table tr.userProfileURL
There are two of these. This is where the white background is defined (this is one of two places where the tr is used to create the background color, the other is the bottom menu. I usually ditch this along with the grey background to the bottom menu like this:
tr {background-color:transparent;}
However, if I have done the above, to ditch the gray behind the bottom menu, and I still want the white that goes with the URL, I can add this line
table table table.userProfileURL table tr {background-color:white}
or just
tr.userProfileURL {background-color:white}

The URL box text is in its own div, this makes it easy to remove
table table table.userProfileURL table div {display:none;}
OR
table.userProfileURL tr.userProfileURL {display:none;}
If you only want to make the text transparent, and do not want to remove the space it occupies, then instead of {display:none} use {visibility:hidden}
Remove the URL Space
<style>
{! ditch the URL and the space it occupied !}
table table table.userProfileURL {display:none;}
{!-eliminate whitespace caused by carriage returns and clear Gifs -!}
table.contacttable {margin-bottom:-20px;}
</style>
IF you have removed your contact table, replace table.contactTable with table.profileInfo, in the above code block. You want to use the class just ABOVE the location where the URL is being removed from.

Hide only the URL space Header, Keep your URL name
<style>
table.userProfileURL table table {display:none;}
</style>

Replace the URL Space with Image in mySpace 2.0
Put this code in the css area of the customize profile section:
{!background image in URL box; code author Eileen xiii.us }
{!change height and width as needed !}
{!side effect: effects positioning of url links!}
span.urlLink {width:150px; height:30px; background-image:url("YOUR URL");
background-position:center center;
background-repeat:no-repeat;}

{! if you do not want to show existing url image !}
span.urlLink a.url {background-image:none;}

{! if you do not want to show url link text !}
span.urlLink a.url {text-indent:-1313px;}

{! end code to put image in url box !}




Replace the URL Space with Image
place the code at the top of the about me.
<span class="off">!-Replace URL space with an Image-!
!-if this code stops working check <a href="http://xiii.us/v/">here for myspace code fixes and updates</a>
</span>
<style>table.userProfileURL
{background-image:url("http://i1.tinypic.com/6bc3p13.jpg");
background-repeat:no-repeat; background-position:center center; width:302px; height:30px;}
table.userProfileURL div {display:none }
table.userProfileURL td {visibility:hidden}
</style>
IF the above code does NOT work, and you suspect the reason is an over riding command, which uses the keyword important, than try the below code block:
<span class="off">!-Replace URL space with an Image-!
!-if this code stops working check <a href="http://xiii.us/v/">here for myspace code fixes and updates</a>
</span>
<style>table.userProfileURL
{background-image:url("http://i1.tinypic.com/6bc3p13.jpg") !important;
background-repeat:no-repeat !important;
background-position:center center !important;
width:302px; height:30px;}
table.userProfileURL div {display:none !important }
table.userProfileURL td {visibility:hidden !important}
</style>


Hide URL on Band Page
For the band page it is a little more difficult. I really thought myspace would apply the new classes to the band page by now, which is why I didn't cover this sooner. But the question showed up in a forum, and I ended up posting the code there.

I have a few solutions here, pick your side effects:
The text is easy, it is in a div.
<style>
table table table table div {display:none;}
<style>
The above effects that div in the comment space, that has class commentlinks. You can recover that if desired. I would just assume keep it hidden, as good as an idea as it is, it is more trouble than it is worth.

Now for that thin blue border (which is really a background to a cell).
It is the background coloring at this level
table table table td

If you make it transparent, you effect the general table and the shows, in a way that is not easy to recover.
But you can try it and see what you think:
<style>
table table table td {background-color:transparent}
</style>
OR instead of getting rid of the blue border thing, one can instead just cover it. I think that this solution is actually the best choice:
<style>
table table table table div {display:none}
table table table.contactTable { position:relative; top:0px; margin-bottom:-45px; }
</style>


Thank you for visiting; Have a nice day


hide myspace url bar

remove url space completely


Labels:

myspace contact table contactTable custom hide move style

MySpace contact table, applying Custom Contact Table, Hiding Contact Table


Contents
Structure and General Stuff about the Contact table
Quick Contact Table Color Change
Custom Contact Table
Hide/Remove Contact Table
Alter Size of Contact Table
Style Contact Table Header

Structure and General Stuff about the Contact table
how to address:
table.contactTable

The most common customization applied to the contact table, is to apply a custom image.
Because the text, on the default contact table is really an image, there is no way to change the color (that works cross browser, there are filters which work in IE).
Because it is so ugly, the best solution is often to just hide the default images, turn the background coloring transparent, and place a custom image as a background.
The custom image should contain any text for labeling the links.

Quick Contact Table Color Change
However, a quick solution to the ugly color, for IE only, may be a filter.
This will turn the actual text images (what you see as the links) transparent, while turning the transparent part of those link images, the color of your choice.
<style>
{!remove ugly color from contact table IE only!}
table.contacttable a img {filter: mask(Color=pink)}
</style>
Change pink to a color which blends in with your profile
Custom Contact Table
Replace the url with the url of the background image you want to use for your contact table.
This code can go in the "About Me" section (or the "Bio" section for the Band page).
<i class="i">
START code to Apply Custom Contact Table
All rights reserved. You may not remove my credits.
You may not re-publish this code.
</i>
<a class="i" href="xiii.us/ms/contactTable">MySpace Custom Contact Table </a>
<a class="i">
<style>
.i {display:none;}
{! below should be set to the height of your image !}
table.contactTable {height:150px !important;}
table.contactTable, table.ContactTable table,
table.contactTable td {background-color:transparent; border:none !important;}
table.contactTable table td a img, table.contactTable .i, i i.x { opacity:0.001 !important; filter:alpha(opacity=0.001) !important }
table.contactTable {background-image:url('http://i3.tinypic.com/82b11ki.gif');
background-repeat:no-repeat;
background-position:center; }
{! use below line ONLY if you want to hide the Contacting header!}
table.contactTable td span {visibility:hidden;}
</style> </a>
<i class="i">
END code to apply Custom Contact Table</i>


how to address:
table.contactTable

The most common customization applied to the contact table, is to apply a custom image.
Because the text, on the default contact table is really an image, there is no way to change the color (that works cross browser, there are filters which work in IE).
Because it is so ugly, the best solution is often to just hide the default images, turn the background coloring transparent, and place a custom image as a background.
The custom image should contain any text for labeling the links.

Quick Contact Table Color Change
However, a quick solution to the ugly color, for IE only, may be a filter.
This will turn the actual text images (what you see as the links) transparent, while turning the transparent part of those link images, the color of your choice.
<style>
{!remove ugly color from contact table IE only!}
table.contacttable a img {filter: mask(Color=pink)}
</style>
Change pink to a color which blends in with your profile
Hide/Remove Contact Table
If you want to remove the contact table:
<i class=i>Apply Custom Contact Table
<a href="http://xiii.us/ms/contactTable">MySpace Contact Table Code by Eileen</a>
</i>
<style>
.i {display:none;}
table.contactTable {display:none;}
</style>

Alter Size of Contact Table
<i class=i>START CODE to style size contact table</i>
<a class=i href="http://xiii.us/ms/contactTable">
Customize, style, size myspace contact table code tutorial by Eileen</a>
<style>
.i, .clearfix i i i {display:none;}
table.contactTable,
table.contactTable table {width:200px !important; height:auto !important;}
table.contactTable table td {width:auto !important;}
{!-contact table clear gifs -!}
table.contactTable table td img {width:0px; height:1px}
{!-size link images in contact table-!}
table table table.contactTable table td.text a img {width:95px; height:20px}
</style>
<i class=i>END CODE to style size contact table</i>


Style Contact Table Header
This code can go at the very top or very bottom of the about or meet section.
<a class="i" href="views-under-construction.blogspot.com">custom mood myspace code and tutorials by Eileen </a>
<style>
.i {display:none;}
table.contactTable span.whitetext12 {font-size:20px; color:green ;}
</style>
You can change the font-size and color.
You can add a font-family and other font properties.

Labels:

interests interestsAnddetails table hide custom customize myspace

MySpace Interests Table (interestsAndDetails) Hide, customize, custom



Remove Interest Table Row Headers
Remove Interest Table Row Headers
Custom Div Above Interests
Custom Div Above Interests, with Interests Hidden

Please refer to the following myspace page to see how the interests table is structured, and how its structure fits in with the complete page structure.
The below link goes to a real myspace page, with style code added to show the parent relationships, laying, classes, and other attributes which can be used to manipulate this table.
Regular MySpace Page Showing Structure, Layout, Classes
The above page is best viewed in FireFox or Opera. IE does not recognize the border-spacing attribute, making it more difficult to see the layering. You can download FireFox using the link in my SideBar
By referring to the diagrams in the above link I can easily figure out the needed codes to style this space.

The interests table is at this level:
table table table.interestsAndDetails
It can also be addressed in many other ways, some of which are:
.interestsAndDetails
td td table.interestsAndDetails
table td table td table.interestsAndDetails

I prefer this:
table.interestsAndDetails

To change the coloring, I first recommend eliminating all of the existing color, then assign the color you want at the table.interestsAndDetails level (myspace assigned all of their color at lower levels).
You can put this code wherever you keep your style blocks. If you do not have a specific place for this, you can put this code at the top of the about me:
<style>
table.interestsAndDetails td, table.interestsAndDetails table {background-color:transparent !important;}
table.interestsAndDetails {background-color:pink}
{! if you want to get rid of the blue line under the header !}
table.interestsAndDetails td {border:0px !important;}
{! or instead if you just want the border a different color !}
table.interestsAndDetails td.tdborder {border:2px solid !important; border-color:magenta !important;}
</style>
Of course you can change pink to the color you want your own interests table.
If you now want a border around the outside of the table, add this to the above style block
table.interestsAndDetails {border:2px solid; border-color:magenta;}
If you want a border to separate the header from the rest



If I want to eliminate the entire table, and effect nothing else in the profile, I can use this:
<style>
table.interestsAndDetails {display:none}
</style>
This will leave some space due to the carriage returns above and below the table. These can be eliminated by either resizing the carriage return (if you want to effect the space between all tables), using a margin bottom on the table just above the interests table, using a negative margin-top on the table just below the interests table, or relative movement up, of the table just below.

In the below I use a margin-top on the table just under the interests table. The reason I choose this, is because the music player is above. The music player can NOT be addressed without effecting other objects on the page.
<style>
table.interestsAndDetails {display:none}
table.userProfileDetail {margin-top:-12px}
</style>
If you have removed your details table, replace it, in the above code, with the table which currently resides just below the location you removed your interests table from.

Styling the text in the interests section
If you only want to change all the text, to the same color (keeping the default font sizes):
<style>
{! color ALL text in interests section !}
table.interestsAndDetails td * {color:hotpink !important}
</style>
For more diverse styling:
The below code block styles all of the text in this section. Before each line there is a comment indicating what is effected by the line of code.
You can replace the fonts and colors with the style you want.
<style>
{! style main interests heading !}
table.interestsAndDetails td span.whitetext12 {color:hotpink !important; font-size:22px !important; font-family:impact; background-color:lightgreen}
{! style row headers !}
table.interestsAndDetails td span.lightbluetext8 {color:darkblue !important; font-size:16px !important; font-family:Arial; background-color:yellow}
{! style the rest of the text !}
table.interestsAndDetails td, table.interestsAndDetails td a {color:green !important; font-size:12px !important; font-family:Comic Sans MS; background-color:lightblue;}
</style>
For a list of available fonts go Here
For a list of additional font attributes you can use in the style line go Here
Remove Interest Table Row Headers
<style>
table.interestsAndDetails table td:first-child{display:none}
{! IE6 the best we can do is to remove text and minimize row!}
table.interestsAndDetails table span.lightbluetext8 {display:none}
table.interestsAndDetails table td {width:auto !important}
</style>



Eliminate some Interests Table Rows
IF you do not put data into a specific row, the row should not show up. However, if you have code in it, it will show up.
And sometimes, it just shows up.
To eliminate a single row, it takes two lines of code.
Place this code at the BOTTOM of the row just above the row you want to eliminate.
<table class="off"><tr><td>
Place this in the row you wish to eliminate:
</td></tr></table>

(There is a way to eliminate the "General" row, but because it takes a chunk of code, and a new class, and is best accomplished by just not putting data into that space, I will leave that out for now.

Custom Headers
If you want ALL Custom Headers, I suggest you make a complete custom Interests Table.
To learn how to do that go Here: Creating a Custom Interests Table
If you want SOME custom headers:
It is easiest to change the row headings which are BELOW the General, so I will cover those first.
To change any single heading, without effecting the others, place this code in the section ABOVE the heading you wish to change:
<table class="off"><tr><td>
AND Place the below block at the TOP of the Row you are changing:
</td></tr></table></tr></td>
<tr><td><span class="lightbluetext8">CUSTOM HEADING</span></td>
<td width="175" bgcolor="d5e8fb" style="WORD-WRAP: break-word">
Your data for this section goes here

Changing the Heading for the General Interests Column
If you want to change the heading for the "General" interests column, it gets more complicated. Because there is no data entry point, BEFORE this title is created, we have to enter our code AFTER the creation of this title.
Therefore we have to create a new class, so that we can hide the old "Genreal" heading without hiding our new heading.

Place this block at the TOP of the General Interests Row:

<span class="off">!-START code for custom General Interests Row header-!</span>
<style>
table.interestsAndDetails table {display:none;}
table.interestsAndDetails table.myI2 {display:block;}
</style>
</td></tr></table>
<table class="myI2" bordercolor="000000" cellspacing="3" cellpadding="3" width="300" align="center" bgcolor="ffffff" border="0">
<tr><td valign="top" align="left" width="100" bgcolor="b1d0f0" NOWRAP><span class="lightbluetext8">

Your CUSTOM HEADING

</span></td>
<td width="175" bgcolor="d5e8fb" style="WORD-WRAP: break-word">
<span class="off">!-END code for custom General Interests Row header-!</span>
Data to go with your Custom Heading goes here

If you want to change to main heading (the heading that says "Your-Name's Interests), you also have to re-create the "General" heading. This also requires that you assign a new class to the interests table (the default class interestsAndDetails will be used to hide the residue text from the old header).
Therefore, if you have used my style block above, you must replace table.interestsAndDetails with table.myInterests

Place this code at the top of the General Interests Box:
<span class="off">!-START code for custom General Interests header-!</span>
<style>
table.interestsAndDetails {display:none;}
table.myInterests {display:block;}
</style>

</td></tr></table></td></tr></table>
<table bordercolor="6699cc" cellspacing="0" cellpadding="0" width="300" bgcolor="ffffff" border="1" class="myInterests">
<tr><td class="text tdborder" valign="middle" align="left" width="300" bgcolor="6699cc" wrap="" style="WORD-WRAP:break-word">&nbsp;&nbsp;&nbsp;
<span class="whitetext12">

YOUR CUSTOM TABLE HEADER

</span></td></tr>
<tr valign="top">
<td class="tdborder">
<table class="myI2" bordercolor="000000" cellspacing="3" cellpadding="3" width="300" align="center" bgcolor="ffffff" border="0">
<tr><td valign="top" align="left" width="100" bgcolor="b1d0f0" NOWRAP><span class="lightbluetext8">

YOUR CUSTOM ROW HEADING

</span></td>
<td width="175" bgcolor="d5e8fb" style="WORD-WRAP: break-word">
<span class="off">!-END CODE FOR CUSTOM INTERESTS HEADER-!</span>

YOUR GENERAL INTERESTS HERE

Custom Div Above Interests
This code goes at the TOP of the General Interests Box:
<a class=i href="http:xiii.us/ms/interests">Custom Div above Interests Table</a>
<i class=i>!-Create Custom Content above Interests Table-!</i>
<i class=i>!-Close out default Interests Table-!</i>
</td></tr></table>
</td></tr></table>
<i class=i>--!Begin CUSTOM Div!--</i>
<div class="myDivL1" style="align:center; border:3px DarkBlue solid background-color:lightblue; width:300px">

YOUR DIV CONTENT HERE

</div>

<i class=i>!-ReOpen Interests Table, Create Headers-!</i>
<table class="myInterests1" bordercolor="6699cc" cellspacing="0" cellpadding="0" width="300" bgcolor="6699cc" border="1">
<tr>
<td valign="middle" align="left" width="300" bgcolor="6699cc" wrap="" style="WORD-WRAP:break-word">&nbsp;&nbsp;&nbsp;
<span class="whitetext12">MY INTERESTS</i>
</td>
</tr>
<tr valign="top">
<td>
<table class="myInterests2" bordercolor="000000" cellspacing="3" cellpadding="3" width="300" align="center"
bgcolor="ffffff" border="0">
<tr>
<td valign="top" align="left" width="100" bgcolor="b1d0f0">
<span class="lightbluetext8">General </i>
<td width="175" bgcolor="d5e8fb" style="WORD-WRAP: break-word">
GENERAL INTEREST DATA
</td>
<span class="i">END Create Custom Content above Interests-!</span>

<style>
.i {display:none}
table.interestsAndDetails {display:none;}
div.myDivL1 {position:relative; top:-15px;}
</style>

Custom Div Above Interests, with Interests Hidden
Put this code at the very top of your General Interests Section:
<a class=i href="http://spiff-myspace.blogspot.com">
MySpace Code Tutorials by Eileen</a>
</td></tr></table>
</td></tr></table>
<div class="myDivI">
CUSTOM DIV CONTENT HERE
</div>
<table style="display:none"><tr><td>
<table><tr><td>
<style>
table.interestsAndDetails{display:none;}
.i {display:none}
</style>

Thank you for visiting; have a nice day


color interests table background
change color of interests table to blue
how do I change the color of the interest table
use to color myspace interests table

Labels:

mySpace userProfileDetail Details Detail Table

Here is a picture of the table, showing the table structure, classes, and other features which can be used to address the table and items within it.

Table (No Class)
table.userProfileDetail
td (no class)
td.text
td.tdborder
span.text
span.whitetext12
span.lightbluetext8

Because the myspace code changes frequently, and it is difficult for me to keep these diagrams up to date, please refer to the following myspace page:
MySpace Page with Style Added to Show Layering and Classes

The simple stuff:
Hiding the entire Details Table (and removing space it occupied)
Insert this code anywhere EXCEPT within another style block. The style tags are included. If you are not sure where to insert this code, place it at the END of your about me section (the very end, after everything):
<style>
table.userProfileDetail {display:none}
</style>
If you want to hide the table, and NOT remove the space it occupies, replace the {display:none} with {visibility:hidden}

There is a carriage return between each table.
Removing a table with {display:none} removes all the space the table occupied, but does not remove the carriage return(s) between the tables.

I usually first set the carriage return height, since it varies from platform to platform.
If I have kept my interests table, and I want to remove my detail table AND the carriage return I do this:
<style>
table.userProfileDetail {display:none}
table table br {line-height:13px;}
table.interestsAndDetails {margin-bottom:-13px;}
</style>

MISSING Carriage Return: Myspace has removed the carriage return which was between the detail and school tables.
I guess you can add a margin Bottom to the Details Table like this:
<style>
table.userProfileDetail {margin-bottom:13px}
</style>

A few months ago an additional table row and cell showed up at the top of the interests table.
The default myspace code is not structured correctly, and the side effect is this extra table cell causing whitespace between the table header and the detail data..
I expect this to go away at some time.
But for now, if you want to eliminate it, you can do so by moving up the inner table.
This is the table show with the solid hotpink border in the above diagram.
The distance is not exactly the same in FF as it is in IE (same resolution/dpi).
But it is close enough.
<style>
{!- eliminate extra whitespace near top of detail table -!}
{!- remove this line when the bug goes away and you notice overlap -}
table.userProfileDetail table {background-color:transparent; position:relative; top:-10px; margin-bottom:-10px; _top:-5px; _margin-bottom:-5px}
</style>
This will probably change, so if you notice that the top of your details, is overlapping your header, take the above block out.

You may, at some point, notice that the fonts in your detail table have changed over night. I highly suspect that they are going to put a span of class text in here.
They already have one in the code.
But due to the poor structure of the code, the span class text only effects the empty extra cell just under the header (the one the above code block hides).

Setting Color and Fonts
The first thing I do is remove all of the default coloring.
Then I just add the color I want.

The following diagram shows several colors and fonts. If you see something on the image, which I have in YELLOW, and you want it a different color, then change the YELLOW in my code the color you want.
Do the same for the other colors and fonts you see in the below code block, to create a block that works on your page:

<style>
{! remove default color and borders !}
table.userProfileDetail, table.userProfileDetail table, table.userProfileDetail td {background-color:transparent !important; border:0px !important;}

{! background to table !}
table.userProfileDetail {background-color:yellow !important; }

{! if you want to collapse borders !}
table.userProfileDetail table {border-collapse:collapse}

{! border to table !}
table.userProfileDetail {border:3px solid !important; border-color:pink !important;}

{! style row headers !}
table.userProfileDetail span.lightbluetext8 {color:darkgreen ; font-weight:bold; font-family:comic sans ms; font-size:15px;}

{! style table header !}
table.userProfileDetail td span.whitetext12 {color:silver; font-size:20px !important; font-family:arial !important; font-weight:bold;}

{! style row data !}
table.userProfileDetail table td {color:hotpink !important; font-size:13px; font-family:courier new;}

{! style row data which is also a link !}
table.userProfileDetail table td a {color:maroon !important; font-size:12px; font-family:arial black;}
</style>
I had borders for the inside cells, with the data. However, since myspace added that extra cell (due to a code bug) it looked tacky.
However, if combined with my code to crunch the extra cell it does not look so bad.



Creating a Custom Detail Table
You can create a custom detail table, by hiding this table, and then creating a custom table under your interests table.
Code:
<span class="off">START Create Custom Interests Table</span>
</td></tr></table>
</td></tr></table>
<span class="off">--!Begin CUSTOM Table!--</span>
<br>
<table class="MyDetails" style="width:300px">
<tr>
<td valign="middle" align="left" colspan="2" style="width:100%">
My Details
</td>
</tr>
<span class="off">--!Begin Data Column!--</span>
<tr>
<td valign="top" align="left" style="width:80px;" >
HEADING 1
</td>
<td style="width:220px;" >
DATA 1
</td>
</tr>
<span class="off">^^!END Data Column 1!^^</span>

<span class="off">--!Begin Data Column 2!--</span>
<tr>
<td valign="top" align="left" style="width:80px">
HEADING 2 </span>
</td>
<td style="width:220px" >
DATA 2
</td>
</tr>
<span class="off">^^!END Data Column!^^</span>

</table>
<span class="off">^^!CLOSE Custom Table!^^</span>
<table style="display:none"><tr><td>
<table><tr><td>

<span class="off">!-start STYLE block to go with Custom Detail Table -!</span>
<style>
{!- hide default Detail Table -!}
table.userProfileDetail {display:none}
{!- Borders and Background. Change Colors or other Style -!}
table.myDetails {border:2px blue solid; background-color:lightblue; border-collapse: collapse;}
table.myDetails td {border:2px white solid; }
</style>
<span class="off">END Create Custom Interests Table</span>


If you have groups, and you want to bring those back, you have to manually add the code to do so.
You can add this BEFORE the block to create the custom details table, within the same section in your interests table.
Skem 9, Bring Back Groups

Labels:

Monday, February 26, 2007

mySpace Band Page Shows; structure, addressing, styling and positioning

Band Page UpComing Shows, Styling, Hiding, Displaying on a Div Overlay



Quick links to the content on this page:
Shows General Structure Stuff
Hide Shows
Replace Shows Header With Image
Shows: Sizing and Spacing of Show Table and Columns
Shows: Coloring, Borders, Fonts
Upcoming Shows: Import into Div Overlay
Upcoming Shows: Replace with Image

To see a diagram of the show space please see the following myspace page.
I have added styling to the page to show the table layering and parent relationships, along with classes and other attributes which can be used to manipulate the space.
Regular MySpace Page Showing Structure, Layout, Classes

Shows General Structure Stuff
The shows are this deep:
table table td.text div

However they added in more div elements, at exactly the same level, so now the best way to address the shows is this:
tble table td.text div table

If you have used my div overlay strategy, they can also be addressed like this:
table div.myCoreDiv table td.text div table

Unless you have added a custom div, to the right column, the only other div elements, effected by the address
table table td.text div
are
1) the div in the friendSpace which now contains the view friends links
2) The div of class commentlinks in the comment space
3) POSSIBLY the online now icon div. MySpace sticks this there ever so often, but it has not shown up for over a month now.
4) There are now two additional div elements at this level
- music player div
- a tracking empty div under the music player


This makes the div around the shows, no longer uniquely addressable.


The "Upcoming Shows" header is in class whitetext12.
It is the ONLY element addressed like this:
div table td.text span.whitetext12
(I took a shortcut and started with the div. This can be done if you are certain it is not causing an additional conflict which would not otherwise occur).

If I wanted to be more explicit, thus reducing the potential of conflict I would not leave any layers out of my address:
table table td.text div table td.text span.whitetext12

Leaving out the td between the first two tables does not add any additional risk, since it has no class assigned, and there is ALWAYS a td between two table layers. I leave out the tr for the same reason. It is only when it has a class assigned that it may add value to include it.
(Or when overriding styling which has used the more explicit addressing. This seems to matter more in some browsers than in others. Safari seemed to care more than any other browser I tested with).

Hide Shows
You can put this code at the end of your Bio:
<i class=i>!!START code to Hide Shows !!</i>
<a class=i href="http://xiii.us/ms/band-shows">
myspace band page shows style code by Eileen</a>
<style>
.i, table table td.text div table {display:none;}

{! ONLY if you have NOT used my control spacing code !}
table table td.text object {margin-bottom:-16px}
table table td.text object object {margin-bottom:0px;}
table table td.text table object {margin-bottom:0px;}

</style>
<i class=i>!!END code to Hide Shows !!</i>

Replace Shows Header With Image
First make your own image, using paint, paintshop, photoshop, or other drawing program.
You can then apply the image, in place of the "Upcoming Shows" Header, as follows:
<a class=i href="http://xiii.us/ms/band-shows">
mySpace band shows replace header code by Eileen
</a>
<style>
.i {display:none;}
{!hide coming shows header!}
td.text div table td table td.text span.whitetext12 {visibility:hidden;}
{! place image to use as new header !}
td.text div table td table td.text {background-image:url("http://i32.tinypic.com/znvj45.gif");
background-position: left center;
background-repeat: no-repeat;
}
</style>
Replace my image with your own (or you can use mine if you want).
Place code at the bottom of the Bio section.

Shows: Sizing and Spacing of Show Table and Columns
Once portions of the page have been rendered {display:none} and the shows have been rendered {display:block} the sizing and spacing which was previously applied is GONE. It is very tedious to get it back.
Commands were used, to get the original spacing, which do not necessarily have a cross-browser css override.

To get reasonable sizing and spacing I must now hard set every detail of the show space.

First I set the width of the complete space:
<a class="i" href="http://views-under-construction.blogspot.com">
mySpace Band Shows Code tutorials by Eileen</a>
<style type="text/css">
.i {display:none;}
{! set width of shows !}
table table td.text div {width:auto}
table table td.text div table,
table table td.text div table td {width:380px;}
{! default undo on inner cells and tables !}
table table td.text div table table td,
table table td.text div table table td table {width:auto}
{! unDo on friend and comment inner divs !}
table table.friendSpace div,
table table td.text table.friendSpace td.text div,
table table.friendsComments td.text div {width:auto}
</style>
Set the width of the inner show cells
First I do the Header row:
<a class="i" href="http://views-under-construction.blogspot.com">
mySpace Band Shows Code tutorials by Eileen</a>
<style type="text/css">
.i {display:none;}
{! set Upcoming Shows Header width !}
table table td.text div table table td.text {width:290px !important;}
{!-the below line has a necessary hard to explain effect-!}
table table td.text div table table td {width:25% !important}
</style>
Now for the date,time, venue, and location columns
I can not address the actual cells individually, so I will concentrate on the text inside them.
I do a sort of set it all, and gradually override
i.e.
table table td.text table table td font
Effects all three columns.
However I can set it, then override for venue and date/time, causing it to control the location width. If it is too large, the location may overlap the edge of the div, so be careful with the values.
table table td.text table table td font a
Only effects the venue.
table table td.text table table table td
cells containing date and time. There are two of these cells in a single row in a table. If I set them to 70% the first one (the date) will take up the 70% leaving less space for the time.
table table td.text table table table td font
Effects both date and time. I end up setting this to auto, because any hard value set will try to effect both the date and time. I need something to override what I set for location.

I ended up with this:

<a class="i" href="http://views-under-construction.blogspot.com">
mySpace Band Shows Code tutorials by Eileen</a>
<style type="text/css">
.i {display:none;}{!-set width of location column -!}
table table td.text div table table td font {display:block; width:130px !important}

{!-set width of venue column-!}
table table td.text div table table td font a {display:block;
width:120px !important; padding-left:5px; padding-right:5px;}
{!-UnDo above on view all-!}
table table td.text div table table td span.whitelink font a {display:inline; width:auto !important}

{!-set width of date time column-!}
table table td.text div table table table {
width:128px !important; }
table table td.text div table table table td font {width:auto !important; padding-right:1px; padding-left:1px}
table table td.text div table table table td {width:70% !important;}
</style>


Shows: Coloring, Borders, Fonts
The below color styling assumes that you have turned all of the default coloring transparent. If you have not add this:
<a class="i" href="http://views-under-construction.blogspot.com">
mySpace Band Shows Code tutorials by Eileen</a>
<style type="text/css">
.i {display:none;}
{!remove upcoming shows default coloring!}
table table td.text div table,
table table td.text div table td {background-color:transparent}
</style>

Border Around Columns
I get the best results if I form this border with background coloring. I place the border color as the background at one level, and then set another background color at a deeper level. I ended up getting the best result with this combination:

<a class="i" href="http://views-under-construction.blogspot.com">
mySpace Band Shows Code tutorials by Eileen</a>
<style type="text/css">
.i {display:none;}
{! create column border using background color !}
{! inner border color !}
table table td.text div {background-color:pink}
{! inner background color !}
table table td.text div table table td {background-color:lightgrey}
</style>

Shows: Set the Font size and Family

<a class="i" href="http://views-under-construction.blogspot.com">
mySpace Band Shows Code tutorials by Eileen</a>
<style type="text/css">
.i {display:none;}
{! set show font size, font color, family !}
table table td.text div table * {color:maroon; font-family:comic sans ms; font-size:11px;}
{! set font size of date and time smaller !}
table table td.text div table table table * {font-size:9px;}
</style>

Upcoming Shows: Import into Div Overlay
IF you used my div overlay strategy, which allows for the import of the top left content (profile views, profile image, last login, location) the below code block will NOT work. You need to use the code block I provided in the article for that specific div overlay strategy.

Otherwise, IF you are using a div overlay strategy, which does NOT place your custom divs, so they are at or below this level:
table table td.text div table
The below code should work for you.
<a class="i" href="http://views-under-construction.blogspot.com">
mySpace Band Shows Code tutorials by Eileen</a>
<style type="text/css">
.i {display:none;}
{! recover and position shows !}
table table td.text div table {display:block;}
table table td.text div {position:absolute; top: 550px; left:32px;}
{! Reverse effect on Friend and Comment Divs !}
table table td.text table.friendSpace td.text div,
table table.friendsComments td.text div {position:static;
overflow:hidden; height:auto}
</style>


IF the above code does not work, please check with the source of your div overlay strategy to see what they recommend.

Replace Shows with Image
You can place this code in any slot, that accepts html, such as the Bio.
<a class=i href="http://xiii.us/ms1">MySpace Band Page Code Tutorials</a>
<style>
.i {display:none;}
table table td.text div table {background-image:url(http://i30.tinypic.com/2uiu048.png);
background-position:center top;
background-repeat:no-repeat;
width:191px; height:178px;}
table table td.text div table table {display:none;}
</style>
Replace my image with your own image.
Replace my width and height with the width and height of your image.

Labels:

Saturday, February 24, 2007

Cremation is not a Reversible Process

As my siblings and I were signing papers, to have our mother cremated, we were told the following:
“I am required by law, to inform you, that cremation is not a reversible process”.
My response was:
“Really”, and I acted somewhat surprised.
At that moment we (my siblings and my self) began laughing.
We all picked up little pamphlets on funeral etiquette while we were there.

Saturday, February 17, 2007

What to do with the MySpace Comment Area

This post has been removed.

[note added May 25 2007: I just realized that there are some links pointing here, one in a comment I made in some discussion group, that I don't have the power to change].

I am moving many of my myspace code to different blogs, and may take this blog in a different direction.

Index to my Myspace Stuff

Hiding Myspace Comments

Scrolling Comments

Centering Comments

Friends and Comments Side By Side Center Bottom

Show only 1 (The last one) Comment

styling (sizing, colors, background, borders) the comment (friendsComments) space

codes ? Is not code plural already? Prior to myspace I had never seen the word code pluralized to codes, when discussing software source code (or is it source codes?)

Friday, February 16, 2007

Center Friends And Comments Myspace

To move the Comments And Friends bottom Center, put the following at the bottom of the "To Meet" section:
To move Friends Center (on the Band Page) use the same code, but place it at the end of the "Bio" section.

<a class=i 
href="http://xiii.us/ms/friends-comments-center">Center Friends And Comments MySpace</a>
<style>.i {display:none}</style>
</td></tr></table>
</td></tr></table>
</td></tr></table>
<table><tr><td>
<table class="off"><tr><td>
<table><tr><td>

Labels:

Thursday, February 15, 2007

Center Only Comments MySpace

Centering Comments while Keeping default friend space to the right.

I highly recommend upgrading to myspace 2.0
This task is way easier in myspace 2.0

I have moved the myspace 1.0 solutions to the bottom of this article.

Centering Comments using MySpace 2.0


Select "Customize Profile"


Select "Change Layout"


Select a layout which has a bottom centered section.

Now put your mouse over your comments, notice that it shows with a grey film and a move cursor.
Drag it to the bottom.

Publish changes.

Now you have you comments centered at the bottom.

If you compare this to the instructions below, for doing this in the older version of myspace, you should see why I recommend upgrading to myspace 2.0


Centering Comments using MySpace 1
I have 4 solutions. Each one has different limitations, and in almost all cases the person applying the code must adjust the pixel (px) values based on their own page (and again when changing the page).

The solution which works the best for you depends on how your page is laid out, and what side effects you are willing to accept.

To Determine which solution to use, refer to below chart.
Consistent, as used in the below, means Consistent across the different browsers, resolutions, dpi settings you expect your page to be viewed.
A: Distance from Top of Page to Bottom of Left Column.
I see no need for a solution which uses this distance. It is so rarely consistent and NEVER smaller or more consistent than B. I replaced all use of distance A with a solution which uses Distance B.

B: Distance From Top of Comment Space to Bottom of Left Column.
I use this distance in solutions 1 AND 2. Solution 1 does NOT allow me to widen the comment table to more than 475px. IF you do NOT WANT TO WIDEN your comment table, and distance B is small (zero or negative), AND you want to keep your bottom links OR you are using a background color for your main table; Then solution 1 should work well for you.

IF you do want to widen your comment space, AND do not mind removing your bottom links AND have made the main table background transparent; then Solution 2 is a better choice.

C: Distance from Bottom of Left Column to Bottom of Blurbs.
Solution 3 Uses this distance. IF you want to widen your comment table AND (Keep Your bottom links OR have a background color for your main table) AND distance C is consistent this may be your best solution.

D: Distance from Top of Page to Bottom of Blurbs.
I use this distance in solution 4. IF you can make Distance D consistent, then this is a good choice. This does allow you to keep your bottom links, and background coloring to the main table.


Solution 1
This one is dependent on Distance B.

Negatives:
Can not widen the comment space wider than 475px without messing up page alignment


Positives:
Less dependent on measurement (for relative or absolute placement) over areas which vary a lot in px size between browsers, resolutions, dpi settings etc ...


IF YOU DO NOT WANT TO WIDEN THE COMMENT AREA THIS IS USUALLY THE BEST SOLUTION.

This solution uses relative placement to shift the comment table to the left AND down (if needed). The distance Down is the distance shown as B in the picture.
Insure you shift it down, enough to accommodate the different browsers and resolutions you expect your page to be viewed.
<span class="off">!-Start Block to Shift Comments To Center-!</span>
<style>
{!-Change the top px value as needed. This is distance B on the chart-!}
table.friendscomments {position:relative; right:180px; top:5px;}
table.friendscomments {width:475px !important;}
table.friendscomments td, table.friendscomments table {width:100% !important}
table.friendscomments table table td {width:auto !important;}
</style>
<span class="off">!-END Block to Shift Comments To Center-!</span>
You can try increasing the width of table.friendscomments.
As you do, you will notice the following:
- In IE it shifts the whole profile to the left.
- In FF it shifts the left column to the left, widening the gap between the right and left columns.

Solution 2 (Modified to use Distance B instead of Distance A. Thanks to Ralf for making me aware that absolute positioning could be used without setting a top value or changing the vertical position of the element).

Use absolute placement to move the comments horizontally only; maintaining their current vertical position.
IF distance B is positive, create a top margin in the comment space, equal to or greater than distance B.


Negatives:
Requires that the bottom links be removed. WARNING: I have recently learned that some profiles are being deleted due to hiding the bottom links. For this solution I recommend AGAINST hiding the bottom links. I will have new code for this soon.

If you have used background coloring for your main table, you comment space will now stick out below that table, giving an "off" appearance. However, you can fix this by using the body background color which is the same.


Positives:
This strategy takes far less code than 3 or 4.
This strategy relies on Distance B, which is usually the smallest and most consistent of all the distance choices.
If your friend space (or other content in your right column) grows, it will automatically push the comment space down to accommodate.
Logically removes the comments from right column, so they can be made wider without distorting the page alignment.


Preparation:
Measure Distance B.
If it is negative, and you expect it to remain negative, then no use of this distance is required
If it is positive, you will need to use this as a top margin to the comment space.
I have this values shown in Bold, in the below code.
Set it to 0 if your value for B is Zero or negative.

<style>
{!-use top-margin to move comments down distance B -!}
table.friendsComments {margin-top:255px;}
{!-Move comments to center and widen-!}
table.friendsComments {position:absolute; left:50%; margin-left:-350px; width:700px !important}
{!-widen sub-tables in comment space-!}
table.friendsComments table, table.friendsComments td {width:700px !important}
{!-adjust td level which holds actual comment-!}
table.friendsComments table table td {width:auto !important}
{!-remove bottom links-!}
table div {display:none;}
{!-restore ad banner and main content divs-!}
div table div, table table div {display:block}
</style>



[Solution 3 Pending]

Solution 4 This strategy relies on distance D.

First move the entire block (Friends, comments, calendar) to the bottom center. I do this by closing tables (and re-opening them to maintain balance). This causes the section to fall into place, just underneath the bottom of the left column, and above the bottom links.
Next I use absolute placement to move the friends (and calendar if you have one) back to their original location. This causes the comment section to move up and place itself directly under then left column and just above the bottom links.

To determine the absolute placement for the friendspace measure distance D (as shown in the picture). My values ranged from 733px to 800px (using 2 computers, both IE and FF on each computer, with different resolution and dpi settings).
Because I have enough space in distance C (see picture) for my friendspace to fit, while allowing enough space to accommodate variance among the different computers/settings, this solution works pretty well for me.

I use 808px (to allow an 8px top margin).

Place this code at the bottom of the "To Meet" section. Modify the value shown in bold to suit your profile.
<span class="off">!-Start Code To Center Comments-!
!- First Center the whole block, friends and comments-!</span>
</td></tr></table>
</td></tr></table>
</td></tr></table>
<table class="myTclassFC"><tr><td>
<table class="off"><tr><td>
<table><tr><td>
<span class="off">!-Start style block to go with center comments-!</span>
<style>
{!-remove carriage returns between friend and comment tables-!}
table.myTclassFC br {display:none}
table.myTclassFC table br {display:block;}
{!-move friends back to their location on the right-!}
{!-the value of top is distance D shown in the picture-!}
table.myTclassFC table.friendspace {position:absolute; top:808px; left:50%; margin-left:-50px; _margin-left:-60px;}
{!-Adjust the top px value in the below line IF the length of your friends space is longer than length C in the picture. -!}
table.friendscomments {position:relative; top:0px; left:0px;}
{!-Increase width of comment table-!}
table.friendsComments {width:800px !important;}
table.friendsComments td, table.friendsComments table {width:100% !important}
.friendsComments table table td {width:auto !important;}
{!-Control size of pictures and links in comments -!}
table.friendsComments table table td img {max-width:100%;}
</style>
<span class="off">!-END block to center comments-!</span>
Results:
Computer 1 FF Computer 2 IE
different resolution and dpi


Same solution as above, but with a calendar
If you used the solution above (solution 4), and you had a calendar showing, it is probably now sitting just above your comments (bottom center).

You can use the same technique to move the calendar that was used to move the friends.
The calendar does NOT have its own class, but it is the only table, at this level:
myTclassFC table
Which does not have its own class.
Therefore I can address it this way, and then reverse the effect at levels
myTclassFC table.friendsComments
myTclassFC table.friendSpace

Now it is easier to see why I used the class, and explicitly specified it when I moved the friendSpace.

Look at the following page:Page showing Comments Bottom Center and Calendar Top Right

To make this layout work, I choose to keep, on the right side of the profile, only those items which sized consistently in the multiple browsers, resolutions, and dpi settings I was using. Anything that has the size defined, based only on px values, will do this.
I moved my Blurbs (About Me) to the Left Column. I replaced my Blogs with a picture.
I then turned my Extended network invisible {visibility:hidden}, to make room for my calendar.

I then pasted in this style block (it can go almost anywhere, I put it at the bottom of my meet section, just below the style block for centering comments:
<span class="off">!<style>
{!-move Calendar Top Right in place of Extended Network-!}
.extendedNetwork {visibility:hidden;}
.myTclassFC table {position:absolute; left:50%; top:165px; margin-left:-50px; _margin-left:-60; border:3px silver solid}

{! maintain static position of other stuff effected by above !}
.myTclassFC table.friendscomments, .myTclassFC table table {position:relative !important; top:0px; left:0px; margin-left:0px; border:none;}

{!- no code required here for table.friendSpace only because we have already positioned it-!}
</style>


[Note: All of the above assume the left column is longer than the distance from the top of the page to the bottom of the blurbs (the right column minus friends and comments). If this is NOT the case, then you may want to consider a layout more like this:
Friend And Comments Side by Side
or This
Center Friends and Comments]

Thank you for visiting, have a nice day

codes ? Is not code plural already? Prior to myspace I had never seen the word code pluralized to codes, when discussing software source code (or is it source codes?)
Center friends comments only
Can I center my comments on myspace, Yes
You can center friends comment table without centering friends
Center comments without hiding bottom links
center comments show bottom links

Labels:

Tuesday, February 13, 2007

mySpace Scroll Comments FriendsComments Box

Put Friends and Comments in Scroll Box

Friends And Comments in Scroll Box Bottom Center
The below code works for either the Band/Artist page OR the standard page.
It does move the whole block (friends and comments) bottom center.
You can re-position them using absolute or relative placement.
<i class=i>
<a href="http://xiii.us/ms/center-friends-and-comments"</a>scroll center friends and comments</a></i>
</td></tr></table>
</td></tr></table>
</td></tr></table>
<div class="myDClassFC">
<table><tr><td>
<table class="off"><tr><td>
<table><tr><td>

<style>
.i {display:none;}
div.myDClassFC {height:400px !important; overflow:scroll !important; overflow-x:hidden !important}
</style>

<i class="i">!-END Block to put Friends and Comments in a Scroll Box-! </i>

If you want scrolling in both directions change hidden to scroll.
Hidden does not work in some browsers.
If you want the scroll bar to not show, when the content is shorter then the allocated space, change overflow:scroll to overflow:auto (overflow:auto did not work in all browsers I tested in, overflow:scroll had better cross browser compatibility.
Also, overflow:none did not work in Safari and some versions of Mozilla (linux/unix).
So I avoid it.

The coding I use above is to achieve the closest to ideal I can in the most common browsers, while still having reasonable appearance in other browsers.


Keep Friends and Comments to the Right, and Put them in a Scroll box


This codes does NOT work on the Band Page. This does work on the Standard Page.
Place this code at the end of the meet section.
<i class="off">!-START Block to put Friends and Comments in a Scroll Box-! 
</i>
</td></tr></table>
</td></tr></table>
<div class="myDClassFC">
<table class="off"><tr><td>
<table><tr><td>

<style>
div.myDClassFC {height:400px !important; overflow:scroll !important; overflow-x:hidden !important;}
</style>

<i class="off">!-END Block to put Friends and Comments in a Scroll Box-! </i>

If you only want your comments in the scroll box, you must remove your friendSpace (OR upgrade to myspace 2.0).
Add this code block.
<style>
table.friendSpace {display:none;}
div.myDClassFC br {display:none;}
table.friendsComments br {display:block;}
</style>


Put Only Friends in Scroll Box (Band Page Only) Friends Stay Right
<i class=i>
<a href="http://xiii.us/ms/center-friends-and-comments"</a>friends only in scroll</a></i><i class="off">! Put Friends In Scroll, Band Page -!</i>
</td></tr></table>
</td></tr></table>
<div class="myDivF" >
<table class="off"><tr><td>
<table><tr><td>

<style>
.i {display:none;}
div.myDivF {width:440px; height:200px !important; overflow:scroll !important; overflow-x:hidden !important;}
{!-make friendSpace about 25px less wide than div to accomodate scroll bar-!}
table.friendSpace, table.friendSpace td, table.friendSpace table {width:415px !important}
table.friendSpace table table td, table.friendSpace table table table {width:auto !important}

{!-clean up positioning-!}
div.myDivF {position:relative !important; top:0px !important; left:0px !important;}
table.friendSpace {position:absolute; top:0px; left:0px;}
</style>
You can change positioning from relative to absolute.
Put Only Friends in Scroll Box (Band Page Only) Friends Moved to Bottom Center
<a class="i" href="http://xiii.us/ms/center-friends-and-comments"</a>myspace band page center and scroll friends. code by Eileen</a></i>
</td></tr></table>
</td></tr></table>
</td></tr></table>
<div class="myDivFC">
<table><tr><td>
<div class="myDivFriendsOnly">
<table><tr><td>
<table><tr><td>

<style>
.i {display:none;}
br {line-height:13px;}
table.friendSpace {margin-top:-26px;}
div.myDivFriendsOnly {height:200px !important; overflow:scroll !important;}
</style>



If you want to add additional styling, to control the size of images and objects in the comment space go here:
Setting and Controlling size of Friends Comments

Full Solution with Styling to Put Comments in Scroll Box
NOTE: This HIDES the friend space, and assumes NO Calendar displayed on page and NO video below the meet area.
IF you have other code in your profile, which alters the table structure, and does not balance open and close tags, then this code has a high probability of not working for you. Balance matters.


Due to the new myspace classes, is no longer necessary to hide (or stack) the default comment space header. However, I still think it looks much better if I use a custom header, and hide the default.
This way I can have the comments scroll, and leave the header in a fixed position.

Place this code at the end of your Meet Section:
<span class="off">!-Start Custom Code To Center and Classify Friend and Comment area--!</span>

<style>
{!-Size outer Comment Div; This is not the scroll piece, this contains the header and the inner div-!}
.myDclassCH {color:darkred; font-size:16px; width:800px !important; background-color:lightgrey; border:2px darkred solid;}

{!-Size Inner Comment Div; This is the Scroll Div -!}
.myDclassFC {width:100%; height:600px !important; overflow:scroll !important; background-color:E2E2E2; border-top:2px darkred solid;}

{!- Position Div; You may change relative to Absolute. Do NOT remove the word position. You may change relative to absolute. -!}
.myDclassFC {position:relative !important; top:0px !important; right:0px !important; left:0px !important;}

{!- eliminate the default header -}
.friendsComments table, .friendsComments td {background-color:transparent; border:none;}
.friendsComments .orangetext15 {display:none; }

{!^END BLOCK TO eliminate Default Header ^!}

{!-style comment content cells -!}
.friendsComments table table td {border:1px silver solid !important; padding:2px; }

{!-Hide Friend Space, you can remove this line, but you can NOT move the friendSpace out of the scroll box. Hide it, or have it in the scroll box.-!}
.friendSpace {display:none;}

{!-Eliminate space caused by Carriage Returns between tables-!}
.myDclassFC br {display:none;}
{!-restore Carriage Return -!}
.myDclassFC table.friendsComments table table br {display:inline; line-height:10px;}

{!-set Widths for Comment Space-!}
.myDclassFC table.friendsComments {width:100% !important; }
.myDclassFC table.friendsComments table {width:100% !important; }
.myDclassFC table.friendsComments table table td {width:0px !important;}

</style>

<span class="off">!--Close all but one layer of Tables. --!</span>
</td></tr></table>
</td></tr></table>
</td></tr></table>
<span class="off">!!Start Opening same number of tables we closed.!!</span>
<table class="myTclassFC"><tr><td class="text">
<span class="off">!-Create Div to use for scroll box-!</span>
<div class="myDclassCH">
<center>My Friend's Comments</center>
<div class="myDclassFC">
<span class="off">!!Finish Opening same number of tables we closed.!!</span>
<table style="display:none;"><tr><td>
<table><tr><td>
<span class="off">!^^END CUSTOM BLOCK for Bottom Centered Scroll Comment Area ^^!</span>

IF you want to control the size of images, in your comment space, see this article:
Controling size of images in comment space

Labels:

Sunday, February 11, 2007

mySpace show only Last Comment shorten friends comments

MySpace Show only Last Comment; Show only One Comment


This is not the same as the previous solutions for this, which all involved showing a set px length worth of comments.

This solution will show just 1, the last one, Comment. It is not dependent on the comment size.
(The solution to show only ONE comments, does not work in IE6. I have not tested it in IE7 but based on what I read it should work. It works in Opera. It did not work in the beta version of Safari. It did work in mozilla.)

The first solution does NOT work in IE6, but with more people switching to IE7 that is not as big a concern as it was previously.
(I haven't tested in IE7, but based on what I have read this should work in IE7).
I have tested in FireFox, Safari, Opera, Mozilla.

This solution works on the standard page AND on the Artist/Band page.
Put this code at the end of the "who I'd Like to Meet" or "Bio" section.
<i class="i">!-Show ONLY last Comment-!
!-Does NOT work in IE6
!-<a href="http://xiii.us/ms/comment-last/">myspace show only last comment </a>
</i>
<style>
i.i {display:none;}
table.friendsComments table table tr:first-child {display:block;}
table.friendsComments table table tr {display:none;}
</style>

If you want code which works in IE6 OR if you want to show more than One but less than 50 comments you still need to use the solution which shows a fixed px height worth of comments.

You need to know the height of your friend Space.

The below block works on the artist page OR the standard page. However, it does move the friends and comments bottom center.
Put this code at the end of the "who I'd Like to Meet" or "Bio" section.
<i class="i">!-Show ONLY Some  Comments-!
!-<a href="http://xiii.us/ms/comment-last/">myspace show only last few comments </a>
</i>
<style>
i.i {display:none;}
div.myDclassFC {width:450px; height:600px; overflow:hidden;}
</style>

</td></tr></table>
</td></tr></table>
</td></tr></table>
<div class="myDclassFC" style="border:0px silver dashed">
<table class="myTclassFC"><tr><td class="text">
<table class="off"><tr><td>
<table class="off"><tr><td>
<i class="off">END Block to Put Comments in Div</i>
Above, where I have 600; you need to replace the 600 with a value which represents the height of your friend space PLUS the height of comments you wish to keep.

The below block works on the standard page and on artist pages which do NOT have the comments bottom center as a default (i.e. NOT the band page).
The below block works on the artist page OR the standard page. However, it does move the friends and comments bottom center.

Put this code at the end of the "who I'd Like to Meet" or "Bio" section.
<i class="i">!-Show ONLY last few Comments-!
!-<a href="http://xiii.us/ms/comment-last/">myspace show only last few comments </a>
</i>
<style>
div.myDclassFC {width:450px; height:600px; overflow:hidden;}
</style>

</td></tr></table>
</td></tr></table>
<div class="myDclassFC" style="border:0px silver dashed">
<table class="myTclassFC"><tr><td>
<table class="off"><tr><td>
<i class="off">END Block to Put Comments in Div</i>
Above, where I have 600; you need to replace the 600 with a value which represents the height of your friend space PLUS the height of comments you wish to keep.

The above also hides the bottom "Add Comment" link. We could display that if we wanted, but it is pointless. There is a link at the top which does the same thing.
To the page owner, the top link is to view or edit comments. To those visiting your page the link is to view or add a comment.

The same concept is explained on the page I link to below, sometimes having more explanations helps:
Hide Comments, Some or All

Thank you for visiting; Have a Nice Day

Show only last comment
How to adjust number of comments on MySpace
The myspace Comment space is grouped with the friendSpace in such a way that makes it difficult to separate the two. It is not impossible, but more tedious than it is worth.
If you want to view hidden comments, or view comments on a private profile, I ask why? viewing hidden comments is easy, there is NO way to completely hide the comments if the profile is not private. All it takes is a simple command to view them. But I don't understand why people bother. Just don't have any comments. Set them to be approved before posting and then never approve any. Problem Solved, no comments for anyone to see.
how only last comment myspace
Do you want to show only the last myspace comment
bbz hide only some comments
show only last comment
shorten comments

Labels:

Saturday, February 10, 2007

By Popular Request, What to Do with the MySpace Ad Banner

Ad banner article merged with another article and moved here
Ad Banner Un-Hiding, recovering, Understanding

Sunday, February 04, 2007

Hiding the Default Myspace Page

[note added April 1 2007: it was this post, and the google query which led to my doing this, which started my myspace code tweak addiction. It was researching the answer to the particular google query, that lead to my having dreams about the layers and levels of the tables in the myspace code, and all the different ways to tweak them]

I am returning to an earlier theme, and creating a blog post based on the search engine queries which have been hitting this page.

The query of choice for this post is: "comment out" myspace
(In computer language talk, “comment out” means to enclose the code in comments so as to render the code non executable).

I wonder, was the person who entered this query looking to "comment out" myspace, so as to render the default code non functional?
Or were they looking for a way to comment the code they were adding?

I will cover both here.

MySpace does not allow any sort of "normal" or "standard" html or css syntax. This was the first thing I learned after I got over the barrier of figuring out where I was supposed to enter my customization code.

So I (and a few others who care to comment their code) have adopted the following techniques:
1) for html use a span, and assign it to class="off"
i.e.
<span class="off">COMMENT HERE</span>

2) Within a style block the following sort of works. It is more picky than the above, as to exactly what characters I can use within my comment.
{ your comment here }
If it evaluates to nothing understandable, by css, it is ignored.
Don't use the apostrophe or a single double quote. I am sure there are other characters which have caused a problem. I don't remember them right now.

Often people like to use the above as if their own initial is a class.
Or people who have seen someone else do a comment this way, will just copy the letter the other person used.

Hiding Page Content

If one didn't care about hiding the ad banner, or importing any of the default page content, it is very easy.
<style>
table, div {display:none !important}
</style>

I suppose you could still even get a div overlay onto the page, as long as you do it in such a way as to close ALL tables, so that your div was sitting above the table structure. Then your div would be at a parallel level to the display:none statement, so you could recover it.
But I don't cover div overlays in this article, so I won't go into that.

Hide Everything Except the Ad Banner
<style>
table table {display:none !important}
table div {display:none;}
div table div {display:block;}
</style>
The music page takes more code, due to that maroon nav bar. It has no class and is at a level where rendering it display:none would make it impossible to recover the ad banner. Put this code in your Bio:
<style>
table table {display:none !important; }
table div {display:none;}
form {display:none;}

div table.navigationBar {display:none;}
div table div {visibility:visible; display:block;}

div table {visibility:hidden;}
div table {height:auto !important; margin-bottom:-30px;}

table td{background-color:transparent;}
</style>

Now when you create your div overlay, I recommend that you still put your overlay one table deep, and then declare your div class display:block.
(I cover this in my div overlay article).

Related Articles:
Simple Div Overlay MySpace Band Page

Simple Hide Routines Friends And Comments without leaving excess whitespace

Band Page Top Area and Menus Including Maroon Nav Bar

Simple Hide Routines Right Side, Blogs, Extended Network


[ANOTHER BLOGGER BUG :-(
Posts sometimes loose ability to accept comments if I back out, without saving, while editing my posts. At first I thought I had modified while having comment ability turned off, I have now verified this is not always the case. Feel free to leave me a comment on another post.]

Saturday, February 03, 2007

If The Smiley Talks, Exit Page



The myspace advertisement collection has introduced a new member; The New talking Smiley ad. Unlike the old talking smiley ad, this one does not wait for the cursor to cross the ad path before blurting out its message. Visually obnoxious was not enough, the ads had to evolve so they could assault my senses in new and clever ways.

I say fight back. Please join me in my protest. Silence the Smileys. If the Smiley talks, Exit Page.
(I no longer watch Television stations which have sound effects on those pop up ads which pop up during the show.)

Someone else had another idea
Petition OnLine, A Petition to have smiley ads removed from MySpace

Consumers really have a lot of power, properly used, it can be the most powerful force in the marketplace.

Note:[added the next morning]
I just got a double smiley assault on myspace. One from the top banner, and one from the side banner. They were not even in sync, and it was like a very bad smiley duet.

Silence the Smileys.

[Update Sunday Evening after the Colts won the SuperBowl: The Smileys have been very quiet today, I have been in the myspace editor and mail several times today, and have not heard a single Smiley. Maybe they read my post :-) ]

Friday, February 02, 2007

MySpace Bottom Menu Links Copyright Hide or Style

Bottom Menu and copyright

WARNING, do NOT remove the bottom links. There have been reliable reports of myspace deleting profiles for having the bottom links/copyright hidden.

To get an idea of how the bottom area is set up, please see the following diagram:
(If you open this in another window, you will be able to read this article while viewing the diagram).
myspace.com/drhoovey" target="_blank"
The area you want to look at is at the very bottom of the page.
The key is to the left (starting top left).

Looking at this space one can see that it can be addressed like this:
table div

To get just the menu and not the copyright thing, like this:
table div div

I left the td out of the above addressing method. It is not necessary here, and really adds no value at all.
(If it were in a class it would possibly make the address more explicit. If I were working with code from multiple sources I might want to use it to enhance compatibility with multiple addressing methods.)

Now look up at the top of the page
Either of the two above address methods also effect the ad banner.
The ad banner is generated on multiple code paths one at level
div table div div
the other
div table div
I am not sure which one you are seeing. The myspace page is updated real-time. Refresh a few times, and see if the ad banner depth changes.


A LOT of code being given out to hide the bottom link/copyright space hides the ad banner.
Most that hides 100% of the ad banners has been fixed. Much that hides 50% of the ad banners is still being given out.

I removed the code to hide the bottom links. MySpace has indicated that they do not want these removed. If you have hidden them, and can not figure out how to recover them, you can post a question to the following forum, and someone there will help you:

mygen.uk.co where people will answer your questions

Or you can post here, but I have not had the time I used to have to monitor and answer questions on this blog.

Style the Bottom Links, Color, Font, Background color
<i class=i>
<a href="http://xiii.us/ms/bottom">set color font style bottom links copyright</a>
</i>
<style>
i.i {display:none;}
{!-Style the link area and the pipes between the links-!}
table div div {color:hotpink; font-face:impact; font-size:9px; background-color:FCEAF8; width:800px !important; padding-bottom:2px}
{!-The actual links-!}
table div div a {color:hotpink !important; font-face:impact !important; font-size:11px !important;}
{!-copyright-!}
table div font {color:hotpink; font-face:impact; font-size:13px; background-color:lightgrey}
</style>

Prevent Bottom Link table From stretching the full width of browser Window and Center
Due to the way they defined the width of the table, which holds the bottom links, combined with their centering method, this table will stretch the entire length of the browser window.
This often leaves a quirky looking stripe at the bottom.
You can gain control of this. However, once you do, getting the size exactly correct is a chore.

The following code will change the width, from 100% to auto (as much space as it needs) and then center the block.
If you then want to control the width, it is best done by altering the width of the div inside this table.
<style>
table {width:auto !important; height:auto !important;}
body {text-align:center;}
table {margin-right:auto; margin-left:auto;}
</style>
The above code has potential systemic centering/alignment effects on your profile. I like the effects. Each profile is different.

Below is a more complete solution, for centering and controlling the width of the bottom links. It had code to reverse the side effects on other page elements.
I have commented each line so you can see what is going on, and remove the lines you do not want or need.
<i class=i>
<a href="http://xiii.us/ms/bottom">
mySpace Control width of bottom links code by Eileen</a></i>
<style>
.i {display:none;}
{! prevent bottom link table from stretching 100% !}
table {width:auto !important; height:auto !important;}
{! prevent music nav bar from getting smaller caused by above !}
div table {width:800px !important;}
{! fix effect of above line on other divs !}
table div table {width:auto !important;}

{! center in non-IE browsers !}
table {margin-right:auto; margin-left:auto;}
{! needed to center in IE browsers !}
body {text-align:center;}
{! force size of bottom link table by sizing div !}
table div {width:800px;}
{! fix effect on other divs !}
table table div {width:auto}

{! fix effect of above centering on select thing !}
div table div div select {position:absolute !important; top:0px; left:3px;}
{! fix effect of fixing select thing on google form !}
div table div form {position:relative; left:60px;}

</style>


Replace Bottom Links and Copyright With Image
<a class=i href="http://xiii.us/ms/bottom">custom image in place of bottom links code by Eileen</a>
<style>
.i {display:none;}
table div {background-image:url('http://i10.tinypic.com/639n3br.jpg');
background-position:center center; background-repeat:no-repeat; height:60px}
table table div, div table div {background-image:none; height:auto}
table div div, table div font {visibility:hidden}
div table div div, table table div div, table table div font {visibility:visible;}
</style>
Replace my image (the .jpg file) with your own.
Change height:60 to the height of your image.
It is best not to mess with width.

Thank you for visiting; Have a nice day


-Hide the End Links
-myspace codes to hide copyright
-myspace code to hide bottom links
-hide extra gray bottom space of myspace
-hide writing on bottom of myspace
-hide thin white line at bottom of profile
Will myspace soon prevent us from removing the bottom links and copyright? One would think that they would want us to keep the copyright, but I didn't see this anywhere in the rules?
They don't state that we have to keep the google search, yet I have seen evidence in their code that they are trying to make it much more difficult to remove this.

hide bottom links and bars

Labels: