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 + Display Image & Info

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 + Display Image & Info   Fri Mar 13, 2009 4:39 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 + Profile Display Image & Info
Apply Top Banner - Manual Tweaking

*Includes:
Profile Display Image
From Where
Page Views
Online Now
Last Login
View My: Pics | Vids

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


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 code in "Headline Section"
Code:

</font><p><table class=H><td><table><td><p><font>

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 Hide Style Block for Div Overlay-!
!-shameful self promotion-!
!-<a href="http://www.msplinks.com/MDFodHRwOi8vc3BpZmYtbXlzcGFjZS5ibG9nc3BvdC5jb20=">
mySpace code tutorials Author:Eileen</a>
</i>

<style>
.i {display:none;}
{! turn off all background color !}
table, td, tr {background-color:transparent}

{! eliminate blank form; no longer effects google search without important !}
form {display:block}

{! eliminate margin on top of search div !}
body div table td div {
margin-top:0px !important; margin-bottom:0px !important}

{!-hide some junk space-!}
table table,
table table td {border:0px; padding:0px !important; margin:0px !important}
br {display:none}
div br {display:block}
table,  td {height:auto;}
table table table {margin:0px !important; padding:0px !important;}

{! fix a centering problem, and clear white space caused by clear gifs !}
td {width:auto;}
table td img {display:none;}
{!-RECOVERY there is a lot to recover-!}
{!-recover music navbar image-!}
a.navbar img {display:inline;}
{!-recover top left profile image-}
table table table table td.text img {display:block;}
{!-recover images in our div overlay-}
table td div.myCoreDiv img, div.myCoreDiv table img {display:block;}
{!-google image; safari needs this due to precedence rules-!}
table td div form img {display:inline !important;}
 
{!-hide everything on left except profile image, name, genre-!}
p table {display:none}

{!-recover top left text area-!}
p table.H, p table.H table {display:block; position:absolute; z-index:9 !important;}

{!-space and format top left text area-!}
p table.H table td {white-space:nowrap !important}
p {width:200px;}
p table, p table td {width:auto}
p table.H table td p br {display:inline;}
{! insure online now image does not throw things i !}
table.H p img {position:absolute; display:none !important;}

{!-remove hanging quote from headline-!}
table.H font {display:none;}



{!-hide name -!}
span.nameText {display:none;}
{!-hide genre and left headline quote, may effect shows-!}
table table table td.text font {display:none;}

{!-Hide Right Side-!}
table div.myCoreDiv table td.text table {display:block;}
table div.myCoreDiv table td.text br {display:none;}
table div.myCoreDiv table td.text table br {display:block;}

{!-Hide comment table-!}
table table.friendsComments {display:none;}


{!-eliminates all not needed headers reflects-!}
.orangetext15 { display:none;}


table.H table td p {visibility:visible; position:relative; top:-10px;}


table table table table td.text img.ImgOnlineNow{margin-left:0px; margin-top:0px;}

table table table table td.text img {position:absolute; z-index:9}
p {position:absolute; z-index:9}




{!!ADDITIONAL STYLE COMMANDS CAN GO HERE!!}





{!-position profile display image-!}
table table table table td.text img {margin-left:-250px; margin-top:20px; width:100px;}

{!-position info text-!}
table.H {position:absolute; top:0px; left:-340px; width:220px; z-index:9 !important }

{!-color info text-!}
p, td {color:yellow;}



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>
*NOTE* Find These lines Inside these last placed codes
To Position:
Profile Display Image {!-position profile display image-!}
Info Text {!-position info text-!}
Color Info Text {!-color info text-!}



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="http://www.msplinks.com/MDFodHRwOi8vdmlld3MtdW5kZXItY29uc3RydWN0aW9uLmJsb2dzcG90LmNvbS8=">
myspace code tutorials by Eileen</a>
!-Close 5 layers of cell/row/table. This puts our Div ONE table deep.
Assumes we opened 2 extra table layers in headline
</i>
</td></tr></table>
</td></tr></table>
</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:800px; height:auto; border:0px magenta solid;">

<i class=i> !----START CUSTOM CONTENT BLOCK 1----!</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 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>



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 Tue Apr 21, 2009 10:12 am; edited 10 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: Re: Music Profiles + Display Image & Info   Sat Mar 14, 2009 8:52 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: Re: Music Profiles + Display Image & Info   Sat Mar 14, 2009 8:52 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 + Display Image & Info   

Back to top Go down
 
Music Profiles + Display Image & Info
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: