Building a very simple Band Div Overlay.This Article is Obsolete.
Please go here:MySpace Artist Band/Music Page Div Overlay
I am keeping this older article in Tact for Historical reasons (and the fact many parts of it have been posted on createblog, and possibly other sites without my permission).==== old article below ============
This div overlay strategy does NOT hide the bottom links as most of them do.
WARNING it may be against myspace terms to Hide the Bottom Links. At least one profile has been deleted for this Reason. For this reason I have removed the code, for that option, from this tutorial.This tutorial is for the Band Page. If you are building an overlay for the Regular page go here:
Standard Simple Div Overlay MySpaceThe below strategy does the following:
- Starts with a Picture, where as much content as reasonable is drawn directly into the picture. You can draw in your links, logo, and anything else you want.
You can draw in boxes or leave blank areas to import content from the default page.
- Hides the default page content completely (except the Ad Banner, search/menu areas, bottom links)
You may opt to add additional code to remove the top menus.
If you use this strategy correctly, your div should adjust to accomodate any changes to the top menu area.
(This block can be used, to hide the whole myspace page, without using the rest of this tutorial.)
- Inserts your page image or div
- Shows you how to turn parts of the image into links
- Shows you how to import content from the default myspace page into your div overlay.
- Shows you how to add a custom scroll section to use for whatever.
- Shows you how to create a custom "add comment" box.
This example uses the band page. This concept works for the Regular Page or The Band Page. The exact code I use, is sometimes Band Page specific.
To see the page we will be building, in this tutorial
Click Here(The grid and borders are temporary, and removable).
As you follow this tutorial, You will create your own layout. (But if you like my template, you are welcome to use it.)
Notes:
1)
USE SAFE MODE, it really does simplify things. This option is next to the regular "edit page" option.
2) Do NOT count on Preview, it will NOT show you what your page will look like, when using custom style commands. You must submit and view your page to see the results.
3) IF your submit button does NOT show you can still submit. Paste this code into the address bar of your browser:
javascript:document.forms[1].submit()
Then hit return
The above works for both the Preview Button and the Submit Button.
(I tested this tutorial using safe mode, and it did NOT hide my preview or submit button).
Step 1: Create the Core of your overlay as a Single ImageUse a picture editing program (photoshop, paint, paintshop etc ...) to Create a picture of what you want your layout to look like.
Leave space where you want to do any of the following:
- pull in content from the default page.
- create content (Such as Text) in a separate div to place on your page
i.e. You will make a Picture to use as the core of your layout, leaving space on the picture anywhere you want to add content which is not actually part of your picture.
This core picture will become our building block. We can turn parts of this picture into links, and import default page content (or other content) into other parts of the page.
The following is a picture I created using paintshop. This will become the building base (core) for the div overlay I will create in this tutorial.
Click here to see the Image I will be using to build this Page withStep 2: Remove the default Content from the Main part of the page (This is everything between the top menu area and the bottom links).
-The top and bottom menus, and the search thing, can be removed here, or later if desired. Our div will position automatically if they are removed later.
-We will position the music player at a later step. For now it will just sit below your core.
-We will be able to recover other desired content later. For now remove even the content you want to pull back in. The Code below, to Hide the Content, is designed so that it is easy to import most of the default content back into your div overlay.
Place this code block in your "sounds like" Section. (It can go anywhere that takes style blocks, I use the sounds like section).
<i class=i>!START code in Influences !</i>
<i class=i>!START Style Block For Hiding Elements on Band Page!
<a href="http://xiii.us/ms/band-hide-all">MySpace Band Hide Everything</a>
</i>
<style>
.i, div.clearfix i i i {display:none}
{! fix a centering problem, and clear white space caused by clear gifs !}
td {width:auto;}
table td img {display:none;}
{! restore any images displayed inside our div. You may want to use block instead of inline for some images. !}
table td div.myCoreDiv img, table td div.myCoreDiv table td img,
table td div.myCoreDiv div img {display:inline;}
{!OPTIONAL restore image on maroon nav bar, we could use a.navbar img!}
div table td a.navbar img {display:block;}
{! removes most content and the space it occupied !}
table table table {display:none}
{! minimize the remaining main page content that can not be removed without effecting the ad and menus !}
table table td { height:0px; margin:0px; padding:0px;}
{! restore my div. !}
table div.myCoreDiv {display:block;}
{! restore div with Comments !}
table div.myCoreDiv div.myDclassFC {display:block;}
table div.myCoreDiv div {display:block;}
table table br {display:none;}
table table table br {display:block;}
{! OPTIONAL decrease space between bottom and bottom menu, and between bottom menu and cc thing !}
{! does not work in Safari !}
table div br {line-height:4px;}
{! reverse effect on custom div !}
table div.myCoreDiv br {line-height:11px;}
{! remove default background coloring !}
table table, tr, td {background-color:transparent !important}
{! ONLY if you want to remove the blue behind the ad banner AND the maroon !}
div.profileWidth table, div.profileWidth td {background-color:transparent !important}
div table {border-bottom:none !important;}
{! ADDITIONAL STYLE BLOCKS CAN GO HERE !}
</style>
<i class=i>!End code in Influences !</i>
Remove as much of the top menu area as desiredTo do this see the following article:
MySpace Band Page Top Ad/Search/Menu AreaThe First block of code, on that page, will remove ALL of the top area content except the ad banner. You can paste that block of code just under the above block.
Step 3: Close out open tables, Place Div, Re-open tablesWe place our Div at a level which is NOT 3 tables deep. The higher we can go in our structure (nested under as few tables as reasonable) the easier it is to avoid conflicts with the default page elements, and our code to remove them. I tested different levels, and found that if I kept the one main table open, and closed the others, it was the easiest to center my div, and have it place neatly between the top area and bottom links.
We will close 2 layers of tables, Place our Div, and then re-open the same number of tables we closed.
I put this code in the Band Members area:
<i class=i>!--START CODE IN BAND MEMBERS --!</i>
<i class=i>
!-Start Div Overlay Content Block-!
<a href="http://views-under-construction.blogspot.com/">
myspace code tutorials by Eileen</a>
!-Close 3 layers of cell/row/table. This puts our Div ONE table deep.
</i>
</td></tr></table>
</td></tr></table>
</td></tr></table>
<i class=i>!-Create and size our div. We will never close this div. It will close when the containing table closes-! </i>
<i class=i>!!! MODIFY width to the SAME width as your core image !!!</i>
<div class="myCoreDiv" style="position:relative; top:0px; width:900px; height:auto; border:2px magenta solid;">
<i class=i> when DONE editing CHANGE the border:2px to border:0px or change the magenta to the color you want your border.----!</i>
<i class=i> !----START CUSTOM CONTENT BLOCK 1----!</i>
<i class=i> !----END CUSTOM CONTENT BLOCK 1----!</i>
<i class=i>!-Open 3 layers of table/row/cell-!</i>
<i class=i>!-IF do NOT want any content from my Right side, I can use i instead of L1-!</i>
<table class="L1" ><tr><td>
<i class=i>!-The below class i hides the remainder of the general table-!</i>
<table class="i"><tr><td>
<table class="i"><tr><td>
<style>.i {display:none}</style>
<i class=i>END CODE IN BAND MEMBERS</i>
You will be adding your content blocks near the bottom (each one below the previous one, but above the "END CUSTOM CONTENT").
Style blocks, will go in the influences area.
Insert Core Image(s)Just below where it says "<span class="off">
!---START CUSTOM CONTENT -----------!</span>"
Insert your image, i.e.
<img src="URL OF YOUR IMAGE">
If you have multiple images, list them one after the other. (Assuming they are clean horizontal image slices).
Do not place a carriage return between the image tags, or you will have a gap between them in IE (not in FireFox).
You may place a carriage return inside the image tag.
Insure that the width of your image is the same as the width defined for the div. I have it set to 800px, so if that is not the width of your image, you will need to change the width value. (It should be in bold above)
Step 4: Get the needed measurements for the placement of links and content on to your pageUse a tool which allows you to determine the location of the elements on your page.
There are several tools available for this.
If you have FF, and have installed the extension which gives you a grid line, use that.
I have created a gif, which has grid lines on it, that you can place over the top of your picture to get measurements.
It is here:http://i11.tinypic.com/4pczehk.gif.
It has a hotpink line every 10 pixels, with a black line every 50 pixels.
To make it easier to get the needed measurements, you can put this grid on top of your image, and leave it there while you build your page, and then remove it when we are done.
To place the grid, so that it lays nicely over your image, place the below code block Just AFTER the link to your core image.
<img class="grid" src="http://i11.tinypic.com/4pczehk.gif" style="position:absolute; top:0px; left:0px;">
The Grid is Temporary, we will remove it, or hide it, when we are finished.
Now we are ready to start getting the needed measurements for our content.
For areas I want to make into links, I need to measure both the top left corner along with the height and width.
(We can no longer do image maps on the music page, as the pound sign is now removed even when not in safe mode.)
I must now resort to placing a clear gif over the top of each images, and making the clear gif the link.
For areas I want to import content into (from the default page) I need to know the coordinates of the top left corner and the height and width.
On my grid, there is a pink line every 10 pixels, with a black line every 50 pixels.
Here are the coordinates and measurements from my sample picture:
| X,Y of top Left | width, height |
| Add button | 290,100 | 100,40 |
| Block button | 290,180 | 100,40 |
| Message Button | 290,260 | 100,40 |
| View Friends | 410,590 | 130,90 |
| View Comments | 580,590 | 130,90 |
| Add Comment | 740,590 | 130,90 |
| Areas I want to Pull Content Into |
| Music Player | 420, 200 | |
| Shows | 420, 20 | |
| Comments | 20, 410 | |
Now I am ready to put in my clear Gifs, to Create my LinksI will use the same clear gif that myspace uses in their code.
Place a clear gif in the location of each link, using the image as the link.
For this we use the coordinates we measured, for the locations on our page which will become links.
For each place we want a link:
- Create a link (using the a tag), and make the clear gif image the link content. We do this in the content section.
- Use style to size and position the link. In this example I put these style clauses inside the <a> tag. I could have done the style work in a separate style block.
The absolute position will be relative to the top left corner of our core image NOT of the page. (This is far more accurate).
[note: Initially there will be a blue border (red when the mouse is over it) around each of these links. We will leave that there for now, so we can see exactly where the links are. We will remove them when we are finished.]I came up with the following:
<a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=211130975"
style="position:absolute; top:100px; left:290px;">
<img src="http://x.myspace.com/images/clear.gif" style="width:90px; height:40px;"></a>
<a href="http://collect.myspace.com/index.cfm?fuseaction=block.blockUser&userID=21130975"
style="position:absolute; top:180px; left:290px;">
<img src="http://x.myspace.com/images/clear.gif" style="width:90px; height:40px;"></a>
<a href="http://collect.myspace.com/index.cfm?fuseaction=mail.message&friendID=211130975"
style="position:absolute; top:262px; left:290px;">
<img src="http://x.myspace.com/images/clear.gif" style="width:90px; height:40px;"></a>
<a href="http://collect.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=211130975"
style="position:absolute; top:590px; left:414px;">
<img src="http://x.myspace.com/images/clear.gif" style="width:135px; height:90px;"></a>
<a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=211130975"
style="position:absolute; top:590px; left:580px;">
<img src="http://x.myspace.com/images/clear.gif" style="width:135px; height:90px;"></a>
<a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=211130975"
style="position:absolute; top:590px; left:740px;">
<img src="http://x.myspace.com/images/clear.gif" style="width:135px; height:90px; "></a>
The above lines go into the same section you put the code for your core image. You put this block just after the other code you have placed in the "YOUR CONTENT GOES HERE" space.
IMPORTING Content From The Default Page (the stuff we hid or moved out of the way)For this task I will put my style blocks at the end of my "Sounds Like" section, just below where I have my "Hide Everything" style block.
Each block I provide is a complete style block (including open and close tags, and often an outer span section which I use as a comment.)
The music player can be addressed like this:
table table td.text div objectOR
table div table td.text div object (where the first div is our custom div.)
in non IE you will need to UNDO any positioning done on the object, on the nested object just below it.
non IE has two objects.
table table td.text div object object Because the player is inside my div, I can place it relative to the top corner of my div.
Because this is the only object on my page, I can address it like this:
object {position:absolute; top:200px; left:420px;}IF you have (or plan to have) other objects, on your page, use the more explicit address. This should be explicit enough:
table table td.text div object {position:absolute; top:200px; left:420px;}
table table td.text div object object {position:static;}(Because I opened the exact same number of tables and cells that I closed, I can address elements, of the default myspace content, using the same depth as I would normally use.)
IF your overlay, has other objects, you may want to put each additional object into its own DIV with its own class name.If you do not, you will not be able to position each one in a different location.
We can NOT assign a class to the default music player. We do not have any place we can insert code, which will have that effect.
I ended up inserting the following block at the bottom of the "Sounds Like" section.
<style>
{!-music player-!}
table table td.text div object {position:absolute !important; top:196px !important; left:420px}
table table td.text div object object {position:static !important;}
</style>
If you want to resize your player see this:
Band Page Music Player, Sizing, Moving, Styling(The above gives some re-size values which have the correct aspect ratio)
Importing the Show SectionNext I will import the shows.
It is important that our shows not take up more space then what I have allowed on my overlay.
In the default layout the shows are at this level
table table td.text div table (They are inside a div in the default layout)
They are 3 tables deep so we have rendered them display none.
We can now address this like this:
table div.myCoreDiv table div table
I used the following code block:
<style>
{!- shows -!}
table table td.text div {position:absolute; width:440px; height:130px; overflow:scroll; overflow-x:hidden; top:30px; left:415px;}
{!- UnDo effect on Div in Friend and Comment spaces -!}
table table td.text table div {position:static; height:auto; overflow:hidden}
table table td.text div.commentlinks {display:none;}
table table td.text div table {display:block}
{!-fix column width of shows-!}
{!-set below px width to the width of your shows space-!}
table table td.text div table td, table table td.text div table {width:425px;}
table table td.text div table table {width:100% !important}
{!-adjust below value as needed-!}
table table td.text div table table table {width:40% !important}
</style>
IE sometimes has trouble with percent sizing. You may want to change the 40% to a px size (i.e. width:120px}
I put the shows into a box I had drawn on my core image.
If I wanted it to look good, even if my show list was shorter, I could choose to instead put a border around the div which contains the shows, and NOT use a box drawn on my div. For more on styling the shows:
Band Page Shows, Structure and Styling Importing and Displaying the CommentsThe Easiest way to import the comments, is to just unhide them and let them sit at the end. This block will display the comments in their default location (the bottom of the page).
Although the main table for the comments is only 2 tables deep, it has inner tables which are 3 table deep.
IF you have my old hide code you may need to remove the following line:
{!-Comments-!}
table table.friendsComments, table table.friendsComments td.text table {display:none} For the sake of organization, I put all the code related to my friends and Comments in the Bio Section. (If I want to put them in a scroll box I have to use the bio section for that, so I decided to put the style stuff there as well).
The below block of code had a bug, which has now been fixed. If you used this block prior to Oct, your comments will fall outside of the div (in FF only). Please replace with the new block below.Add this block to the Bio Section (which should be empty):
<span class="off">!-Display Comments-!</span><style>
table table.friendsComments td.text table,
table table.friendsComments {display:block}
</style>
<span class="off">!-END Display Comments-!</span>
All the above block does is display the comments in the location they fall naturally (the bottom center). They are logically within our outer div, so they will push the bottom links down.
IF you gave your outer div, a set height (instead of using height:auto) and it is not long enough to accomodate the comments, your comments will not display correctly. FF and IE will treat this situation differently.
So insure your div is either set to height:auto, or has enough height to accomodate the comments.(I will cover putting the Comments and/or Friends into a scroll box later)
Display Friends on Your Div OverlayPlace this code block, in your Bio Section, just under the last block we placed there:
<span class="off">!-Display Friends-!</span>
<style>
{! display friends !}
table table td.text table.friendSpace,
table table td.text table.friendSpace td.text table {display:block}
{! restore width in FireFox and Opera; assumes default friendSpace width !}
table table td.text table.friendSpace td.text table table td {width:107px !important}
{! view friend link; override positioning for shows !}
table table td.text table.friendSpace td.text table div {position:static !important; height:auto !important;}
</style>
<span class="off">!-END Display Friends-!</span>
The above code should cause your friends (class="friendSpace") to show up just above your comments.
If you want to position your friends and/or Comments, and NOT use a scroll box, insure you have enough space to accomodate them. There are our choices:
1) Keep Comments at the bottom, set our main div to height:auto, and allow the comments to grow as needed.
2) NOT display our friends, and put our comments in a scroll box, and place the box anywhere on our div
3) Put both our Friends AND Comments in a scroll box, and place it anywhere on our div.
There is NO reasonable way to put the comments in their own scroll box, and display the friends, outside that scroll box, without a custom friend Space.
There is a way to put only the friends in a scroll box, and leave the comments outside the scroll box. (ask if you are interested).
The below scroll box will include your friends (if you have rendered them displayed) AND your comments (if you have rendered them displayed). If your friends are still hidden, then only your comments will end up in this scroll box.
I will place this scroll box the empty box on the left bottom of my div.
To do this I place this code at the end of the bio section:
<span
class="off">START Block to Put Comments in Div</span>
<style>
{!- comment div style stuff -!}
div.myDclassFC {width:360px; height:260px; overflow:scroll; overflow-x:hidden;}
div.myDclassFC {position:absolute; top: 410px; left:20px;}
table.friendsComments, table.friendsComments td, table.friendsComments table, table.friendsComments table td {width:100% !important}
table.friendsComments table table td {width:auto !important; border:1px silver solid; border-collapse:collapse}
{!- OPTIONAL: size control to keep comment images small -!}
table.friendsComments img {width:230px !important;}
table.friendsComments a img {width:70px !important;}
table.friendsComments .ImgOnlineNow {width:40px !important;}
</style>
</td></tr></table></td></tr></table></td></tr></table>
<div class="myDclassFC" style="border:0px purple dashed">
<table class="myTclassFC"><tr><td class="text">
<table class="off"><tr><td>
<table class="off"><tr><td>
<span class="off">END Block to Put Comments in Div</span>
The result (which still has the grid on it for reference) can be found here:
Click Here to See PageImporting the Friend Space, into your DivClick Here: Styling and Sizing the mySpace friend SpaceBlogsI did not put a space on my template for the blogs.
However, I later decided to import them. I found some room.
(I am actually thinking, that from a design perspective, maybe I should put the blogs where I have the friends and Comments, and then put the friends and comments at the bottom, side by side.)
Blogs are not static in size. They do not size the same in IE and FF
you can improve this by hard-setting the line-heights and font size and carriage return (br) heights.
Use px values not pt values for the most consistency across platforms.
Leave room, at the bottom, for expected growth OR place at the bottom of your overlay and insure the height (of your main outer div) is set to auto.
The following code block will make the blogs visible, and position them on the page.
I also added in some styling for sizing consistency, coloring, and width.
<span class="off">!-START Import for Display; blogs into Div Overlay -!
</span>
<style>
{!-display and position blogs-!}
table table table.latestBlogEntry {display:block;}
table table table.latestBlogEntry {position:absolute; top:313px; left:15px;}
{! size to the width you have avaialble -!}
table table td.text table.latestBlogEntry, table table td.text table.latestBlogEntry td {width:370px !important}
{!-sizing for consistancy-!}
table.latestBlogEntry td {font-size:11px; line-height:13px; height:15px; padding:0px; margin:0px;}
table.latestBlogEntry br {line-height:11px;}
{!-coloring and borders for blogs-!}
table.latestBlogEntry {background-color:HotPink !important}
table.latestBlogEntry td {background-color:LavenderBlush !important; }
table.latestBlogEntry span.btext {color:purple;}
table.latestBlogEntry a {color:Chocolate; font-size:10px; }
</style>
<span class="off">!-END Import for Display; blogs into Div Overlay -!
</span>
Removing the border around the linksAdd the following block.
<style>
a img {border:none !important}
</style>
Adding a Custom Comment Input BoxPut the following code block inside your Content area. (This is the area between the "START CUSTOM CONTENT HERE" and "END CUSTOM CONTENT HERE") in the Band Members area. Change Tom's friend id (6221) to your friend id:
<span class="off">!-START COMMENT FORM-!</span>
<div class="myCommentFormD">
<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment">
<input name="friendID" value="6221" type="hidden"/>
<textarea name="f_comments" class="myFormBox"></textarea>
<center>
<input type="submit" value="Post Comment" class="myPostCommentButton"/>
<input type="reset" value="Clear" class="myClearButton"/>
</center>
</form>
</div>
<span class="off">!-END COMMENT FORM-!</span>
Next Style the Box to Meet your specific needs.
You will want to modify the below block to suit your page. Put this style block in the "Band Members" section, near the top, under where it says "START Custom Content Style Section"
<span class="off">!Start style block to style Comment Form!</span>
<style>
div.myCommentFormD form {display:block !important;}
{!-change px values to position form on your layout-!}
div.myCommentFormD {position:absolute; top:0px; left:0px;}
{!-change px values or font attributes to size and style your form-!}
textarea.myFormBox {width:384px; height:105px; color:000000; font-size:9px; font-family:comic sans ms;
background-color:transparent;
border:1px silver solid;}
{!-style buttons or remove below line for default button style-!}
div.myCommentFormD input {width:110px; height:22px; border:2px brown inset; background-color:transparent}
</style>
<span class="off">!END style block to style Comment Form!</span>
Creating a Custom Scroll Space(This is why I left the "sounds like" section empty.)
I am going to place this block in the "sounds like" or "influences" section.
If you left one of these sections empty, it will be less cluttered.
This will make it easy to find this block, to update it.
You can either allow this to fall naturally underneath your "core", or you can use absolute placement to position it anywhere on your div.
The below example uses absolute positioning.
(I do not have this block on my sample page).
<span class="off">!-Start Custom Code in Sounds Like-!</span>
</td></tr></table></td></tr></table></td></tr></table>
<span class="off">!-START code for custom text section-!</span>
<div class="myBio" style="width:380px; height:320px; position:absolute; top:650px; left:50px; overflow:scroll">
YOUR BIO DATA GOES HERE.
</div><span class="off">!CLOSE Text Div!</span>
<style>
table div.myBio {display:block; visibility:visible;}
</style>
<table><tr><td><table class="off"><tr><td><table><tr><td>
<span class="off">!-END Custom Code in Sounds Like-!</span>
Thank you for Visiting; Have a Nice Day :-)
Queries hitting other pages of mine, which should be hitting this page:
-How do I hide whole myspace page.
-I have div overlay codes?
-I have code to hide everything except player on myspace band page
-I show how to create a myspace band div overlay
-And I show how to hide what is behind a div overlay on band page
-How to hide entire myspace music page
-div over la y how to do one
-this section shows how to hide everything on myspace artist band page.
-div overly do not hide bottom links
Labels: myspace div band overlay
