Do not PM, Message or Mail me for help... Post your issue in the Help Thread

Div Overlays Tutorials for Standard & Music Profiles. A community for Developers & Users to help each other out with Div Overlays in Myspace.
HomeFAQSearchMemberlistUsergroupsRegisterLog in
MYSPACEDIVS.INFO - PASS IT ON!!

Share | 
 

 Music Profiles

View previous topic View next topic Go down 
AuthorMessage
myspacedivs
Admin
avatar

Posts : 178
Points : 230
Reputation : 16
Join date : 2009-03-12
Age : 33
Location : Guaynabo, PR *USA

PostSubject: Music Profiles   Fri Mar 13, 2009 4:38 am

WE DO HAVE PERMISSION TO USE EILEEN'S CODES OF THE MUSIC PROFILE BLOG (Difference Ours is Updated)
If it weren't for those codes WE would've never gotten involved in Myspace Developent, THANX EILEEN


MUSIC MYSPACE DIV TUTORIAL - Apply Top Banner
........................................................................................


1st Step:

DESIGN A DIV CORE IMAGE & A BACKGROUND IMAGE

-Think of a few things, what do you expect on planning on showing in the myspace.

Myspace Menu
Myspace Music Player
Shows
Blogs
Top Friends & Comments (*NOTE: They can't be separated, they can only be shown BOTH together or only 1 of them*), or they can be Growing below after the Background Art naturally.)
Comment Box
Biography
Flyers
Discography
Videos

*its all your decision.

The minimum Width of the DIV CORE IMAGE must be 800px & the MAX Width that you may use is 962px (so that it Fits the Most Common Users Monitor Screen Size 15in), the Height it doesn't really matter make it as big as you want.

BACKGROUND IMAGE make it as a minimum of: Width 1800px, Height 792px.

Make sure the Image Files size do not exceed 400kb, always keep in mind the lower KBs the faster Loading up, Make sure you design that the file size won't take too much time to Load for an *internet Dial-up connection users.

It does not really have to be 1 huge image, it can also be as many images you want (Ex: Slices in Photoshop or Illustrator), you are the designer make it fun & easy.

........................................................................................

2nd Step:

UPLOAD THE DIV CORE IMAGE & BACKGROUND ART

-Use which ever website image hosting, your own hosting Server or clients server hosting.

http://www.imageshack.us
http://www.photobucket.com
http://www.deviantart.com

or any others... etc

........................................................................................


3rd Step:

STARTING THE CODING PROCESS

-I really suggest to set all codings, as I always do it for my clients, so follow my Tutorial.

***ALWAYS USE SAFE MODE***

Place this set of codes in your "Sounds Like Section", these are the background settings hide & un hide, Font Links colors, Background Color, Background Image.
Code:

<i class=i>!START code in Sounds Like !</i>
<i class=i>!START Style Block For Hiding Elements on Band Page!
<a href="views-under-construction.blogspot.com/2007/04/myspace-band-page-div-layout.html">
MySpace Band Page Div Overlay/Layout Hide Everything</a>
<a href="xiii.us/eGen/mpSkin.php">
MySpace music Player Skins standard and Band</a>
Code Author: Eileen
PLEASE keep the above credits they will NOT show up on your visible page
</i>
<style>
{! fix a centering problem, and clear white space caused by clear gifs !}
div.clearfix i i, .i, table td img {display:none}
td {width:auto;}

{! 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!}
 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 custom div. !}
table div.myCoreDiv {display:block;}
{! restore any div inside core div !}
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;}

{! OPTIONAL remove default background coloring !}
table table, tr, td {background-color:transparent !important}

{! OPTIONAL remove the blue behind the ad banner  !}
div.profileWidth table, div.profileWidth td, .i {background-color:transparent !important}

{! OPTIONAL remove the maroon background and black underline from music nav bar  !}
div table {background-color:transparent !important}
div table {border-bottom:none !important;}

{! End Style to Hide band page Elements !}


{! ADDITIONAL STYLE BLOCKS CAN GO HERE !}






body {background-color: red !important;}



{ Background Properties }
table, tr, td { background-color:transparent;
    border:none;
  border-width:0;}
body { background-color:red;
   background-attachment:fixed;
   background-position:top center;
   background-repeat:no-repeat;
  background-image: url("BACKGROUND IMAGE URL MINIMAL WIDTH 1800px - HEIGHT 792px");
  border-top-width:0px;
  border-bottom-width:0px;
  border-left-width:0px;
  border-right-width:0px;
  border-color:none;
  border-style:solid;
  padding-left:0px;
  padding-right:0px;}







<style type="text/css">


body {  margin: 0px  0px; padding: 0px  0px}
a:link { color: brown; font-size:9px; text-decoration: none}
a:visited { color: brown; font-size:9px; text-decoration: none}
a:active { color: brown; font-size:9px; text-decoration: none}
a:hover { color: brown; font-size:9px; text-decoration: underline}

</style>



</style>
<i class=i>!End code in Sounds Like !</i>


Place this set of codes in your "Band Members Section", these are the Div Core Image, Invisible Links, Floating Images.
Code:

<i class=i>!--START CODE IN BAND MEMBERS --!</i>
<i class=i>
!-Start Div Overlay Content Block-!
<a href="spiff-myspace.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 (core image or core content) !!!</i>
<i class=i>!!! IF you know the exact height of your content you can change
height:auto to a specific px height.  If you are not Sure, then leave it set to
auto !!!</i>

<div class="myCoreDiv" style="position:relative; top:0px; width:800px; height:auto !important; border:2px magenta dashed;">

<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----! </i>







<img src="DIV CORE IMAGE URL">










<a href="INVISIBLE LINK URL"
style="position:absolute; top:710px; left:15px;" title="MOUSE OVER MESSAGE">
<img src="http://x.myspace.com/images/clear.gif"  style="width:100px; height:50px; border:0px magenta solid;"></a>








<img src="FLOATING IMAGE URL"  style="width:100px; height:50px; position:absolute; top:100px; left:100px; border:0px magenta solid;" title="MOUSE OVER MESSAGE">
















<i class=i> !----END CUSTOM CONTENT ----!</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.  However the music player is logically in this space-!</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>



IMPORTING CONTENT FROM MYSPACE

Blogs - "Bio Section"
Code:

<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:1570px; left:30px;}

{! 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:transparent  !important}
table.latestBlogEntry td {background-color:transparent !important; }

table.latestBlogEntry span.btext {color:orange; display: block !important;}
table.latestBlogEntry a {color:brown; font-size:10px; }
table.latestBlogEntry td {color:lime;}
span.text {color: white;}
</style>
<span class="off">!-END Import for Display; blogs into Div Overlay -!
</span>


Comments - "Bio Section" (Floating Growing Below Div)
Code:

<span class="off">!-Display Comments-!</span><style>
table table.friendsComments td.text table,
table table.friendsComments {display:block}
span.blacktext10 {display:block; width:auto; text-align:left; border-bottom:2px solid; border-bottom-color:gray;}
span.msOnlineNow img {display: none !important; height:0px !important; width:0px !important;}
</style>

<span class="off">!-END Display Comments-!</span>


Top Friends - "Bio Section" (Floating Growing Below Div)
Code:

<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;}
span.msOnlineNow img {display: none !important; height:0px !important; width:0px !important;}
</style>
<span class="off">!-END Display Friends-!</span>


*OPTIONAL*
Top Friends & Comments - "Bio Section" (Custom Div Box - You Need to Add "Comments & Top Friends" Codes Before for this to work)
Code:

<span
class="off">START Block to Put Top Friends & Comments in a Div Box</span>
<style>
{!- comment div style stuff -!}
div.myDclassFC {width:550; height:640; overflow:auto; overflow-x:hidden;}
div.myDclassFC {position:absolute; top: 2690px; left:180;}

table.friendsComments, table.friendsComments td,  table.friendsComments table,  table.friendsComments table td {width:100% !important}
table.friendsComments table table td {width:auto !important; border:0px 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 {height:0px !important; width:0px !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 Top Friends & Comments in a Div Box</span>


*OPTIONAL*
Change Style & Color Settings for *Top Friends* - "Bio Section"
Code:

<style>
{!-Size friendspace outer 2 tables !}
table.friendSpace table, 
table.friendSpace td,
table.friendSpace {width:auto !important;}

{!-Size inner levels  to exactly 1/4 of above!}
table.friendspace table table td,
table.friendSpace table table table,
table.friendSpace table table table td {width:75px !important; margin:0px; border:0px; padding:0px;}

{!- set so that img PLUS padding = 1/4 of full table width-!}
table.friendspace img {width:90px !important}

{!-names above friend pictures.  I keep these small.  FF has wrap issues-!}
table.friendspace table table td a {font-size:9; font-family:Arial}

{!-ditch picture border-!}
table.friendspace a img {border:0px !important;}

{!-deal with view friends div-!}
table.friendSpace table div {width:auto !important; font-size:9px !important}

{!-Gets rid of some excess space-!}
table.friendspace br {line-height:2px;}
table.friendSpace div {display:none;}
</style>














<style>
{!-ditch the orange behind the header, also effects another table-!}
table.friendspace table {background-color:transparent;}

{!-style header-!}
table.friendspace .orangetext15 {color:black; font-size:9px; font-family:arial}

{!-the sub-header-!}
table.friendspace .btext {color:black; background-color:transparent;}
{!-If I want the number styled different than the text-!}
table.friendspace span.redbtext {color:black; border:1px green solid; font-size:9; font-family:arial; background-color:transparent;}

{!-view all friend link-!}
{!-this moved into a div in Sep 2007-!}
table.friendspace table div {color:black !important; font-size:9px; font-family:arial; background-color:transparent;}
{!-override display;block often used after hiding stuff for an overlay-!}
table.friendSpace table div * {display:inline !important}

{!-color of space-!}
table.friendspace {border:0px DarkTurquoise solid !important}
table.friendspace table td {background-color:transparent !important; border:0px yellow solid !important;}
table.friendspace table {background-color:transparent !important;}
table.friendspace table table td {background-color:transparent !important; border:0px !important}
</style>


Last edited by myspacedivs on Wed May 13, 2009 9:23 pm; edited 17 times in total
Back to top Go down
View user profile http://myspacedivs.info
myspacedivs
Admin
avatar

Posts : 178
Points : 230
Reputation : 16
Join date : 2009-03-12
Age : 33
Location : Guaynabo, PR *USA

PostSubject: Music Profiles - PART 2   Sat Mar 14, 2009 7:45 pm

Comment Box - "Band Members Section"
Code:

<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="FRIEND ID GOES IN HERE" type="hidden"/>
<textarea name="f_comments" class="myFormBox"></textarea>
<center>
<input type="submit" value="Post Comment" class="myPostCommentButton"/>

</center>
</form>
</div>
<span class="off">!-END COMMENT FORM-!</span>





<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:400px; left:450px;}
{!-change px values or font attributes to size and style your form-!}
textarea.myFormBox {width:169px; height:100px; color:black; font-size:9px; font-family:comic sans ms;
background-color:red;
border:2px black solid;}
{!-style buttons or remove below line for default button style-!}
div.myCommentFormD input {width:169px; height:22px; border:0px black inset; background-color:black; color:white;}
</style>
<span class="off">!END style block to style Comment Form!</span>



Custom Div Box - "Influences Section"(Use for Biography, Videos, Flyers, Flash, etc...)
Code:

<span class="off">!-Start Custom Code in Influences-!</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:200px; height:100px; background-color:transparent; position:absolute; top:300px; left:200px; border:1px magenta solid; overflow:auto">


<div align="left">
<font color="black" face="arial" size="-3">


WRITE ANYTHING YOU WANT HERE, IMAGES, FLYERS, VIDEOS, FLASH etc...


</font>
</div>

</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 Influences-!</span>
It can be repeatedly copied used as many times as you want, all the custom div boxes you need.
Back to top Go down
View user profile http://myspacedivs.info
myspacedivs
Admin
avatar

Posts : 178
Points : 230
Reputation : 16
Join date : 2009-03-12
Age : 33
Location : Guaynabo, PR *USA

PostSubject: Music Profiles - PART 3   Sat Mar 14, 2009 7:49 pm

IF PLANNING TO HAVE SHOWN *MUSIC PLAYER & SHOWS*

Music Player & Shows - "Influences Section"
CLICK HERE FOR INSTRUCTIONS


........................................................................................


IF PLANNING TO HAVE SHOWN *ONLY MUSIC PLAYER & NO SHOWS*

Only *Music Player* & No Shows - "Influences Section"
CLICK HERE FOR INSTRUCTIONS



........................................................................................


Now if you want to alter more Colors, Borders or Other Myspace Section settings alterations,
I recommend to use KATAMARI's SECTION MANAGER: http://abrax.us/Katamari/SectionManager.php
Place the codes you are given inside of "Sounds like Section" ( Before: !End code in Sounds Like ! )

You are done, happy Coding =)
Back to top Go down
View user profile http://myspacedivs.info
Sponsored content




PostSubject: Re: Music Profiles   

Back to top Go down
 
Music Profiles
View previous topic View next topic Back to top 
Page 1 of 1

Permissions in this forum:You cannot reply to topics in this forum
MyspaceDivs :: Myspace Tutorials :: Div Overlay Tutorials-
Jump to: