Myspace Div Layout Template for Profile 2.0
- Go to MSC Home
|
Go to MSC Profile 2.0 Codes -
This tutorial serves as a template to create a
completely
Custom Div Layout for Myspace Profile 2.0. Please follow the instructions laid out below. It might be best to copy & paste the codes first un-edited so you can see what it does to your page. Then Edit to your preferences.
For a Live Preview of this code in action click this link (yes this is a real 2.0 page!):
http://www.myspace.com/MSCDivLayoutTemplate2
Step 1: Creating the Custom Nav Bar
Add this code to your About Me Section (Edit Profile)
Replace all #'s with the URLs you will be linking to. Also replace "Link One" etc text with your own.
<div class="mscNav"> <a href="#">link one</a><a href="#">link two</a><a href="#">link three</a><a href="#">link four</a><a href="#">link five</a><a href="#">link six</a><a href="#">link seven</a><a href="#">link eight</a><a href="#">link nine</a><a href="#">link ten</a><a href="#">link eleven</a> </div>
Step 2: Setting up the Custom Div Structure & Content
Add this to your Like To Meet Section (Edit Profile)
Create your own image banner (928px wide) and replace mine with yours (or remove "mscDiv0"). Replace "Lorem Ipsum" filler content with your own. Add new div classes for more content boxes.
<div class="mscDiv0"> <a href="http://www.myspace-compilation.com/profile2.html"><img src="http://i25.tinypic.com/211mkqe.png" /></a> </div> <div class="mscDiv1"> <span style="font-family:'georgia'; color:black; font-size:18px;"><div style="text-align:center;">Div-1-Header</div></span> <br /> A full width div with some latin filler text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ligula diam, rhoncus sed consectetur sit amet, tristique ac ipsum. Vestibulum fringilla dolor ut elit auctor id pellentesque lacus pellentesque. Donec tempus velit eget nisi molestie mattis. Fusce rutrum suscipit malesuada. Phasellus sit amet justo quis magna accumsan vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tellus elit, vestibulum imperdiet porta ultricies, semper eu purus. Cras eget sodales dolor. Vivamus fermentum lorem mollis leo adipiscing tempor. Nunc auctor ipsum sed elit pretium laoreet. Phasellus turpis felis, faucibus at euismod sed, suscipit ut nisi. Phasellus fermentum, erat at tincidunt sollicitudin, lectus lectus congue lorem, eu facilisis lectus sem nec lorem. Nulla iaculis velit ac turpis tincidunt blandit. </div> <div class="mscDiv2"> <span style="font-family:'georgia'; color:black; font-size:18px;"><div style="text-align:center;">Div-2-Header</div></span> <br /> A half width div floated to the left with some latin filler text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ligula diam, rhoncus sed consectetur sit amet, tristique ac ipsum. Vestibulum fringilla dolor ut elit auctor id pellentesque lacus pellentesque. Donec tempus velit eget nisi molestie mattis. Fusce rutrum suscipit malesuada. Phasellus sit amet justo quis magna accumsan vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tellus elit, vestibulum imperdiet porta ultricies, semper eu purus. </div> <div class="mscDiv3"> <span style="font-family:'georgia'; color:black; font-size:18px;"><div style="text-align:center;">Div-3-Header</div></span> <br /> A half width div floated to the right with some latin filler text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ligula diam, rhoncus sed consectetur sit amet, tristique ac ipsum. Vestibulum fringilla dolor ut elit auctor id pellentesque lacus pellentesque. Donec tempus velit eget nisi molestie mattis. Fusce rutrum suscipit malesuada. Phasellus sit amet justo quis magna accumsan vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tellus elit, vestibulum imperdiet porta ultricies, semper eu purus. </div> <div class="mscDiv4"> <span style="font-family:'georgia'; color:black; font-size:18px;"><div style="text-align:center;">Div-4-Header</div></span> <br /> A half width div floated to the left with some latin filler text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ligula diam, rhoncus sed consectetur sit amet, tristique ac ipsum. Vestibulum fringilla dolor ut elit auctor id pellentesque lacus pellentesque. Donec tempus velit eget nisi molestie mattis. Fusce rutrum suscipit malesuada. Phasellus sit amet justo quis magna accumsan vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tellus elit, vestibulum imperdiet porta ultricies, semper eu purus. </div> <div class="mscDiv5"> <span style="font-family:'georgia'; color:black; font-size:18px;"><div style="text-align:center;">Div-5-Header</div></span> <br /> A half width div floated to the right with some latin filler text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ligula diam, rhoncus sed consectetur sit amet, tristique ac ipsum. Vestibulum fringilla dolor ut elit auctor id pellentesque lacus pellentesque. Donec tempus velit eget nisi molestie mattis. Fusce rutrum suscipit malesuada. Phasellus sit amet justo quis magna accumsan vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tellus elit, vestibulum imperdiet porta ultricies, semper eu purus. </div>
Step 3: Changing the Myspace Layout
Go to Customize Profile.Then click Change Layout. Leave at 960px width or change to it. Select the Layout Style that is one big blank box (
click here to see that style
). Click "Modules" on left side - click to disable ALL modules except: Blurbs, Comments & Friend Space. It's important to "drag & drop" the Blurbs Module to the top of the page, then under that you can have Friends/Comments Modules on top of each other in any order.
Step 4: Styling the Custom Div Layout with CSS
Add this code to your 2.0 CSS { } Box (Customize Profile)
Click No Theme before pasting. Leave all margins/padding alone unless you know what your doing. Adjust all the colors to your own style. Publish all changes.
.msc {MAKE SURE TO CLICK NO THEME BEFORE APPLYING CODE} .msc {Div Layout Template for Profile 2.0} .msc {http://www.myspace-compilation.com/DivLayoutTemplate2.php} .msc {Background Color} body {background-color:#DFD1D1;} .msc {Custom Top Nav Bar} div.mscNav {position:relative; margin-top:-6px; margin-left:1px; width:920px; text-align:center; line-height:20px;} div.mscNav {padding:5px; background-color:#8F8F8F;} div.mscNav a {padding-left:15px; padding-right:15px; color:#333333; font-size:12px;} div.mscNav a:hover {background-color:#333333; color:#ffffff; padding-top:7px; padding-bottom:7px; text-decoration:none;} .msc {Custom Divs} div.mscDiv0 {border:1px solid black; width:928px; padding:0px; margin-top:5px; margin-left:1px;} div.mscDiv1 {border:1px solid black; background-color:#DDDDDD; width:918px; padding:5px; margin-top:5px; margin-left:1px;} div.mscDiv2 {border:1px solid black; background-color:#DDDDDD; width:420px; padding:5px; margin-top:5px; margin-left:1px;} div.mscDiv3 {float:right; border:1px solid black; background-color:#DDDDDD; width:480px; padding:5px; margin-top:-194px; margin-left:1px;} div.mscDiv4 {border:1px solid black; background-color:#DDDDDD; width:420px; padding:5px; margin-top:5px; margin-left:1px;} div.mscDiv5 {float:right; border:1px solid black; background-color:#DDDDDD; width:480px; padding:5px; margin-top:-193px; margin-left:1px;} .msc {Top Header Area} div#header {width:930px; background-color:#4F4F4F;} div.clearfix {background-image:none;} div#topnav {display:none;} div.basicInfoModule {position:relative; margin-top:-200px; z-index:-1;} div.blurbsModule h3.moduleHead, h4 {display:none;} .msc {Comments & Friend Module} div.commentsModule, div.friendSpaceModule {background-color:#CCCCCC; border:1px solid black; width:920px; margin-left:5px; margin-top:-5px;}
If you have any questions/comments on this code please
ASK THEM HERE
.
