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.