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 | 
 

 Standard 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: Standard Profiles   Fri Mar 13, 2009 4:37 am

STANDARD MYSPACE DIV TUTORIAL (PERSONAL) ***THESE ARE NOT FOR 2.0***
........................................................................................

1st Step:

DESIGN A DIV CORE IMAGE

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

Myspace Menu
Myspace Music Player
Blogs
Top Friends & Comments
Comment Box
About Me


*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:

DIV CORE IMAGE

-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.

***EDIT PROFILE***

Place this codes in your "About Me Section", these are the background settings hide & un hide Myspace Contents, Background Color, Background Image.
Code:

<style style="text/css">

.37182{hide all the tables}
.profileInfo, .extendedNetwork,
.interestsAndDetails,
.userProfileURL,
.latestBlogEntry, .friendSpace, .friendsComments,
.userProfileNetworking, .userProfileSchool,
.userProfileDetail,
.contactTable, .orangetext15{display: none}

.37182{make the tables transparent so you can see good}
table, tr, td{background-color: transparent}



.37182{make any other embeds stay where you put them}
table table table embed, table table table object {position:static; display:block;}


.37182{Background Settings}
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;}




.37182{Div Core - Div Layout}
.background{position: absolute; left: 50%;
overflow: auto;
top: 176px;
margin-left: -400px;
width: 800px;
height: 1084px;
background-color: black;
background-image: url('DIV CORE IMAGE URL');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center top;
z-index: 1;
padding: 0px;
border: 0px solid;
border-color: 00aaff;
}





.37182{bring back the bottom links - }
.moveLinks{height:980px;}
</style>


Place this codes in your "Who I'd Like To Meet Section", these are to make all Div Contents to Show Up in the Myspace.
Code:

<div class="background"></div>

<div class="moveLinks"></div>

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


PERSONAL NOTE (Placement of Contents)
Want to Fix the Left or Right Positioning of a DIV? *IMPORTANT!!! Never change the "left: 50%;" of any divs, only change the "margin-left:-375px;" to align a Div. (This px Value given here is just an Example)

Set the .background div *Width & *Height as the same as your "DIV CORE IMAGE" PX values, afterwards set the .moveLinks *Height for them to be shown correctly in the bottom of your Div.

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


IMPORTING CONTENT FROM MYSPACE

Blogs

Step 1 - "About Me Section"
Code:

Remove " .latestBlogEntry, " from the beginning of the About Me Section. To unhide the Blogs Section in the profile, in other words to IMPORT THE *BLOGS CONTENT.

Step 2 - "About Me Section"
Code:

.latestBlogEntry {display:block;
position: absolute; left: 50%;
top: 800px;
margin-left: -100px;
width: auto;
height: auto;
background-color: pink;
color:white;
z-index: 9;
padding: 0px;
border: 0px solid;
border-color: 00aaff;}


Top Friends & Comments

Step 1 - "About Me Section"
Code:

Remove " .friendSpace, .friendsComments, " from the beginning of the About Me Section. To unhide the Top Friends & Comments Section in the profile, in other words to IMPORT THE *TOP FRIENDS & COMMENTS* CONTENT.

If you wish to hide one of them, just REMOVE what you want to IMPORT only.

Step 2 - "About Me Section" (If you have the *Comments Hidden, you can still use this to Control the Top Friends Positioning)
Code:

.comt td, .comt table{width:0px!important; height:0px!important; background-color:transparent!important; border:0px!important; _padding:2px!important;} .comt .comt td, .comt table, .comt td a img, .comt td td td a, .comt td b a, .comt td .redlink{visibility:visible;} .comt td td td b{top:0px; display:inline;} .comt .redtext15{display:none;} .comt td b, .blacktext10 {display:block;} .comt table, .comt td b, .comt .btext, .redlink{position:relative; top:-9px;} .comt {z-index:7;}

.comt {width:455px; height:390px; overflow:auto;
background-color:white; border:1px solid; border-color:black; position:absolute; top:400px; left:50%; margin-left:-100px; }
JB {Timestamp: width;}
.blacktext10 {width: 320px;}

Step 3 - "Who I'd like To Meet Section" (Place this at the End)
Code:

<div class="comt"><table class="off">
<tr><td><table><tr><td>


Myspace Music Player (UPDATED MARCH 22nd 2009)
Use margin-right for position (left & right)

"About Me Section"
Code:

object {
position: absolute;
visibility: visible;
margin-right: 100px;
right:50%;
top: 200px;
z-index:9 !important;}


Custom Div Box (Used for About Me, Flash Files, Videos, Anything you want)

Step 1 - "About Me Section"
(Change " .divbox1 " name to anything you want, it can be used as many times as you need div custom boxes, just use a new name to each)
Code:

.divbox1{position: absolute; left: 50%;
overflow: auto;
top: 300px;
margin-left: -390px;
width: 250px;
height: 150px;
background-color: transparent;
color:white;
z-index: 3;
padding: 0px;
border: 0px solid;
border-color: 00aaff;
}

Step 2 - "Who I'd like To Meet Section" (Replace " divbox1 " with the same name you gave for it inside your About Me Section, Do the same to each Custom box you added)
Code:

<div class="divbox1"></div>


Comment Box

Step 1 - "About Me Section"
Code:

.commentbox{position: absolute; left: 50%;
overflow: auto;
top: 520px;
margin-left: -80px;
width: auto;
height: auto;
background-color: transparent !important;
color:white;
z-index: 3;
padding: 0px;
border: 0px solid;
border-color: 00aaff;
}

Step 2 - "Who I'd like To Meet Section"
Code:

<div class="commentbox">
<form method="post" action="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudHMubXlzcGFjZS5jb20vaW5kZXguY2ZtP2Z1c2VhY3Rpb249dXNlci5Db25maXJtQ29tbWVudA==">
<input type="hidden" name="friendID" value="FRIEND ID GOES IN HERE" />
<textarea name="f_comments" cols="20" rows="3"></textarea>
<center><input type="submit" value="Post Comment" /></form>
</div>


Floating Hyperlink Images or Invisible Blank Images
(They should be placed at "Who I'd like To meet Section" inside the *background div for them to work properly)
Code:

Floating Image(with hyperlink)
<a target="_blank" href="HYPERLINK URL" style="position:absolute; top:100px; left:100px;" title="MOUSE OVER MESSAGE">
<img src="FLOATING IMAGE URL" style="width:100px; height:50px;border:0px magenta solid;" /></a>


Invisible Clear Hyperlink Image:
<a target="_blank" href="HYPERLINK URL" style="position:absolute; top:100px; left:100px;" title="MOUSE OVER MESSAGE">
<img src="http://x.myspace.com/images/clear.gif" style="width:100px; height:50px; border:0px magenta solid;" /></a>


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


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

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 "About Me Section" ( Before: the < / style> tag )

You are done, happy Coding =)
Back to top Go down
View user profile http://myspacedivs.info
 
Standard Profiles
View previous topic View next topic Back to top 
Page 1 of 1
 Similar topics
-
» Temporary FireFox Profile using Selenium WebDriver
» Your Favourite Mario Kart 7 Character/Kart Combinations
» [Tự làm] Shop tự cập nhật vào profile
» Profiles
» Profile field for custom post profiles

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