MySpace Calendar Structure Styling Moving Div Import

[note: This block was re-written May 20 2007 to take advantage of new myspace Classes]

PseudoCode
1) Classify where possible, to narrow down the potential area effected by the code changes.
a) Find the closest point, where myspace allows the insertion of data.
b) Close out cells, rows and tables to get to the desired point to add in a Div
c) Create the Div
d) Re-open the same number of tables, rows, cells closed in (a)

2) Use style commands to make room in the area where you want to place your calendar. You can use relative positioning to move down the items in either the top left or top right of the page.

3) Use style to resize the calendar to fit in the new location

4) Use style to move the calendar to the new location.
Code to place calendar in Top Left Corner

<span class="off">BLOCK:1Insert Custom Class and Div</span>
</td></tr></table>
</td></tr></table>
<div class="myDclassFC">
<table style="display:none"><tr><td>
<table><tr><td>
<span class="off">!^End Classify Div Block^!</span>

<span class="off">! Style Block to Move/Format Calendar !</span>
<style>
{! BLOCK:2 !}
{! size calendar to fit in the left column !}
.myDclassFC table, .myDclassFC table table {width:300px !important;}
.myDclassFC table table td {width:100px !important}
.myDclassFC table table td.text {width:200px !important}
.myDclassFC table table table {width:100px !important;}

{! reverse above effect on comment space !}
.myDclassFC table.friendsComments, .myDclassFC table.friendsComments table {width:430px !important;}
.myDclassFC table.friendsComments table td, .myDclassFC table.friendsComments table table  {width:100% !important}
.myDclassFC table.friendsComments table table td {width:0px !important}

{! BLOCK:3 !}
{! move down top left content to accommodate calendar !}
{! top px value and margin-bottom px values should BOTH be set to the expected height of your calendar.  You will need to change this if your calendar grows !}
.profileInfo {position:relative; top:250px;   margin-bottom:250px;}

{! BLOCK:4 !}
{! position calendar top left !}
.myDclassFC table {position:absolute; top:175px; _top:185; right:50%; margin-right:75px;}

{! BLOCK:5 !}
{! maintain position of other stuff effected by above !}
.mydclassfc table table, .mydclassfc table.friendspace,
.mydclassfc table.friendscomments
 {position:relative !important; top:0px; left:0px; right:0px; margin:0px;}

{! BLOCK:6 !}
{! Style stuff to improve calendar appearance !}
{! because myspace did not line the header up well to start with, this looks better if you use table and cell background colors to form borders !}
.mydclassfc table {background-color:lightblue;}
.mydclassfc table table td {background-color:lightgreen}
.mydclassfc table table table, .mydclassfc table table table td {background-color:yellow;}
</style>
<span class="off">!^End Style Block to Move/Format Calendar^!</span>

Remember to adjust px sizes to accommodate your own calendar length and profile.
The same concept is used to move the calendar to the top right. Instead of moving down the profileInfo, you would move down the item in your top right corner. In the default profile this is the extendedNetwork (or the video slider if you have chosen that option).

The below blocks are replacements for pieces of the above code. They go between style tags, and replace a similar block in the above code.

Replace [Block 3]code which makes room, for the calendar, in the top left; with code which makes room in Top Right

{! BLOCK 3 !}
{!move extended network down to make room for calendar!}
.extendedNetwork {position:relative; top:300px; margin-bottom:300px;}

OR

{! BLOCK 3!}
{!move video slider down to make room for calendar!}
td.text object, td.text embed {position:relative; top:300px; margin-bottom:300px;}
{!undo effect on any objects in your blurbs!}
td.text table.blurbs object, td.text table.blurbs embed {position:static}

AND
Replace [BLOCK 4]Code which relocates calendar to top Left, with code to relocate calendar to Top Right:

{! BLOCK 4!}
{!position calendar top right!}
.mydclassfc table {position:absolute; left:50%; top:175px;  margin-left:-50px;}

OR if you want to locate the calendar between the contact table and the url box:
Replace [BLOCK 3] AND [BLOCK 4] with this:

{! BLOCK 3 !}
.contactTable {margin-bottom:300px;}
{! BLOCK 4 !}
{! position calendar after contact box on left !}
.myDclassFC table {position:absolute; top:510px; _top:515; right:50%; margin-right:75px;}

This is dependent on a static size of the ProfileInfo area in the top left. You do control this size via your content, and can control it further by assigning a height to the .ProfileInfo class.

The calendar resizing block [Block 2] can be omitted if you choose to locate the calendar top right. You may choose to keep this block and modify the values. This does give you more control over how the calendar looks. It has a tendency to resize weird if anything related to its position and/or size are changed, unless you hard-set the values (as I have done above).

The formatting block [Block 6] should be modified to your tastes. Look at how it effects your calendar, if used as coded. From there you will see which colors you want to change to suit your own profile. I used color names (instead of numbers) so you can easily see which area is effected by which color.

myspace codes to move the calendar (Well I have always just called it code, but the use of this word with plurality seems to be coming more and more common.)

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


-I have myspace calendar codes.