Diagonalis

Designer's Comments

Look carefully for specific instructions

Read this before asking any questions!

You can see a variation of this layout by clicking here.

1. Go to "Select Theme" and choose "No Theme". Make sure your page width is set to 960 pixels. You must do this or the layout will not work.

2. ~~The video slider, video player and music player must go into the left column.~~ They'll work in both columns.

3. The live preview is using the Default MySpace theme, and doesn't use the same classes that MySpace does, so it won't show up correctly. Go here to see a larger screen shot.

4. Tested in Firefox, Internet Explorer, Safari, Opera, Flock, Chrome, and submitted to BrowserShots.

5. Go here for the Profile 2.0 classes.

Using This Layout

For specific instructions read designer's comments

1. Log into myspace.com
2. Click on Edit Profile (Profile 2.0)
3. Copy (ctrl c) and paste (ctrl v) code to the specified fields

Layout Code

Copy and paste to CSS (Profile 2.0)

Help

{!-Created by: www.myspace.com/itsmattadams -!}
body {background-color: #C8C2AD; background-image: url(http://cbimg9.com/layouts/08/11/32614aa.png); background-repeat: repeat-y; background-position: top center; background-attachment: fixed;}
div.module, div.photo {padding: 5px;}

a:link, a:active, a:visited {color: #5D5B52; font:11px 'arial', arial, sans-serif; text-decoration: underline;}
a:hover {color: #444444; font:11px 'arial', arial, sans-serif; text-decoration: underline;}

ul.profileUserAlbum a {margin-top: 30px;}
ul.profileUserAlbum {margin: 10px 0px -45px 0px; background-image: url(http://cbimg9.com/layouts/08/11/32614ab.gif); background-position: top right; background-repeat: no-repeat; padding: 5px; height: 155px;}
div#modulebasicInfo .moduleMid {width: 919px; padding-top: 65px; background-repeat:no-repeat; background-image:url(http://cbimg9.com/layouts/08/11/32614ac.gif);}
div#modulebasicInfo .moduleBody {background-color: #B4AE9B; padding: 5px;}
div#modulebasicInfo {width: 919px; padding-bottom: 30px; background-position:bottom center; background-repeat:no-repeat; background-image:url(http://cbimg9.com/layouts/08/11/32614ad.gif);}
div.videoSliderModule .moduleMid {background-color: #B4AE9B;}
div.column0 .videoSliderModule {width: 320px; padding-top: 46px; background-position:top; background-repeat:no-repeat; background-image:url(http://cbimg9.com/layouts/08/11/32614ae.gif);}
div.column0 .videoSliderModule .moduleMid {padding-bottom: 30px; background-position:bottom left; background-repeat:no-repeat; background-image:url(http://cbimg9.com/layouts/08/11/32614af.gif);}
div.column1 .videoSliderModule {width: 581px; padding-top: 46px; background-position:top; background-repeat:no-repeat; background-image:url(http://cbimg9.com/layouts/08/11/32614ag.gif);}
div.column1 .videoSliderModule embed {margin-left: 60px; margin-top: 4px;}

div.column0 .videoPlayerModule {width: 320px; padding-top: 46px; background-position:top; background-repeat:no-repeat; background-image:url(http://cbimg9.com/layouts/08/11/32614ah.gif);}
div.column0 .videoPlayerModule .moduleMid {padding-bottom: 30px; background-position:bottom left; background-repeat:no-repeat; background-image:url(http://cbimg9.com/layouts/08/11/32614af.gif);}
div.column1 .videoPlayerModule {width: 581px; padding-top: 46px; background-position:top; background-repeat:no-repeat; background-image:url(http://cbimg9.com/layouts/08/11/32614ai.gif);}
div.videoPlayerModule .moduleMid {background-color: #B4AE9B;}
div.videoPlayerModule .moduleBody {padding: 0px 7px 10px 7px;}

div#musicPlayer {margin: 0px 0px 0px 7px;}
div.musicPlayerModule .moduleMid {background-color: #B4AE9B;}
div.column0 .musicPlayerModule .moduleBody {width: 320px; padding-bottom: 15px; padding-top: 55px; background-image:url(http://cbimg9.com/layouts/08/11/32614aj.gif); background-position: top left; background-repeat: no-repeat;}
div.column1 .musicPlayerModule .moduleBody {width: 581px; padding-bottom: 15px; padding-top: 55px; background-image:url(http://cbimg9.com/layouts/08/11/32614ak.gif); background-position: top left; background-repeat: no-repeat;}

div.column0 .moduleHead {height: 46px; margin-bottom: -30px; background-position:top left; background-repeat:no-repeat; background-image:url(http://cbimg9.com/layouts/08/11/32614al.gif);}
div.column0 .moduleMid {width: 320px; padding-bottom: 30px; background-position:bottom left; background-repeat:no-repeat; background-image:url(http://cbimg9.com/layouts/08/11/32614af.gif);}

div.column h3 span span {border-bottom: 2px solid; display: block; padding-bottom: 5px;}
div.column1 h3 {font-family: Arial; color: #000000; font-size: 1.4em; font-weight: bold; display: block; text-align: right; padding: 20px 5px 0px 5px;}
div.column0 h3 {font-family: Arial; color: #000000; font-size: 1.4em; font-weight: bold; display: block; text-align: right; padding: 20px 5px 0px 5px;;}

div.column1 .moduleHead {height: 46px;  margin-bottom: -30px; background-position:top left; background-repeat:no-repeat; background-image:url(http://cbimg9.com/layouts/08/11/32614am.gif);}
div.column1 .moduleMid {width: 581px; padding-bottom: 35px; background-position:bottom left; background-repeat:no-repeat; background-image:url(http://cbimg9.com/layouts/08/11/32614an.gif);}

div.moduleBody {padding: 5px;}
div.blogsModule span.title a {text-align: right; display: block;}
div.blogsModule .moduleMid, div.blurbsModule .moduleMid, div.friendSpaceModule .moduleMid, div.commentsModule .moduleMid, div.calendarModule .moduleMid {background-color: #B4AE9B;}
div.interestsModule .moduleMid, div.detailsModule .moduleMid, div.schoolsModule .moduleMid, div.networkingModule .moduleMid, div.companiesModule .moduleMid {background-color: #B4AE9B;}

#footer {color: #000000;}
#topnav ul {border:0px solid;}
#topnav ul li {border-left: 0px;}
div#header, div#googlebar {background:none;}
#topnav {background-color:#A39984; border: 0px;}
.mdpapplicationModule .moduleBody {padding: 5px;}
div#footer {padding-bottom:10px; margin-bottom: 20px;} 
.mdpapplicationModule .moduleMid {background-color: #B4AE9B;}
div.modulebasicInfo em {color: #342840; font-style: normal; margin-left: 3px;}

div.blurbAboutMe, div.blurbLikeToMeet {color: #000000;}
div.blurbAboutMe h4 {margin: 0px; font-family: Arial; color: #342840; font-size: 1.2em; font-weight: bold; background-color: #A39984; padding: 2px 2px 4px 2px; text-transform: capitalize;}
div.blurbLikeToMeet h4 {margin: 10px 0px 0px 0px; font-family: Arial; color: #342840; font-size: 1.2em; font-weight: bold; background-color: #A39984; padding: 2px 2px 4px 2px; text-transform: capitalize;}

div.blurbAboutMe h4 {margin-top: 8px;}
.interestGeneral h4 {font-family: Arial; color: #342840; font-size: 1.2em; font-weight: bold; background-color: #A39984; padding: 2px 2px 4px 2px;}
.interestMusic h4 {font-family: Arial; color: #342840; font-size: 1.2em; font-weight: bold; background-color: #A39984; padding: 2px 2px 4px 2px;}
.interestMovies h4 {font-family: Arial; color: #342840; font-size: 1.2em; font-weight: bold; background-color: #A39984; padding: 2px 2px 4px 2px;}
.interestTelevision h4 {font-family: Arial; color: #342840; font-size: 1.2em; font-weight: bold; background-color: #A39984; padding: 2px 2px 4px 2px;}
.interestBooks h4 {font-family: Trebuchet MS; color: #342840; font-size: 1.2em; font-weight: bold; background-color: #A39984; padding: 2px 2px 2px 2px; text-transform: capitalize;}
.interestHeroes h4 {font-family: Trebuchet MS; color: #342840; font-size: 1.2em; font-weight: bold; background-color: #A39984; padding: 2px 2px 2px 2px; text-transform: capitalize;}

div.detailsModule .odd {font-family: Arial; color: #342840; font-size: 1em; font-weight: bold; padding: 3px 3px 3px 3px; text-transform: capitalize;}
div.detailsModule .odd span {font-family: Arial; color: #000000; font-size: .9em;}
div.detailsModule .even {background-color: #A39984; font-family: Arial; color: #342840; font-size: 1em; font-weight: bold; padding: 3px 3px 3px 3px; text-transform: capitalize;}
div.detailsModule .even span {font-family: Arial; color: #000000; font-size: .9em;}

{!-apply background image; replace with url of your image -!}
.profileUserInfo img.ImgOnlineNow {margin-top: 5px; background-image:url(http://cbimg9.com/layouts/08/11/32614ao.gif); background-repeat: no-repeat;}
.profileUserInfo img.ImgOnlineNow {height:0px; width:0px; padding-top:20px; padding-right:80px; background-position: center center;}

Layout Comments

Showing latest 10 of 12 comments

CAN U PLZ FIX THIS

By WESTSIDEBWSLAYZ on Jun 23, 2009 4:19 pm

this is nice. ^.^.

By Parasite on Jun 13, 2009 1:45 am

great job on this one! love header BG. awesome!

By calilani on Apr 6, 2009 1:57 pm

This is really awesome. I love the wavey top and bottom to each of the tables. Very creative and it gives a professional look. :)

By CrimsonSkyGraphics on Feb 2, 2009 4:35 pm

i need help. i added the 2.0 v.
but i dont see any select theme or no theme anywhere
plus any box that notes "css" where i can enter the code
and it wont let me go back to the 1.0 v
am i doing something wrong?
help

By meabxwb on Nov 24, 2008 3:10 am