Creative Remix

Designer's Comments

Look carefully for specific instructions

This is a remix of itismattadams' latest layout for Profile 2.0.

It will not work on 1.0 at all.

I decided to add some more style to it, since I liked the base of how he did the layout, but it needed some flavor, so I did that.

I asked for permission to submit this, he's fine with it, as long as I mention that the original, coding, and concept belong to him. I just edited it to make it more appealing to me, and figured I should share it with everyone.

Respect is given. Enjoy.

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

.a {top area background color}
div#header, div#googlebar {background:none;}
div#topnav ul#leftNav li,
div#topnav ul#leftNav,
div#topnav ul#rightNav,
div#topnav ul#rightNav li {border-color:#000000;}

.a {subnav hover code}
div#topnav ul li a:hover,
div#topnav ul#leftNav li a#nav2.open:hover,
div#topnav ul#leftNav li a.open:hover,
div#topnav ul#leftNav li a.open:hover,
div#subnav ul#subNav3 li a:hover,
div#subnav ul#subNav4 li a:hover,
div#subnav ul#subNav10 li a:hover,
div#subnav ul#subNav2 li a:hover {background-color:#222222; color:#ffffff;}

div.content div.contentMid2 {background-image:url(http://cbimg9.com/layouts/08/12/32845aa.png); background-repeat:no-repeat; background-position:center top;}

div.basicInfoModule span.urlLink { position: relative; width: auto; margin: 26px 8px 0 -40px; }
div.basicInfoModule span.urlLink a
 {display: block; text-indent: -10000em; background: url(http://cbimg9.com/layouts/08/12/32845ab.png) no-repeat -135px -1px; width: 30px; height: 31px; padding: 0; line-height: 1; text-align: left; }
div.basicInfoModule span.urlLink a:hover { background-position: -135px -31px; }
ul.contactLinks { background: url(http://cbimg9.com/layouts/08/12/32845ac.png) no-repeat; width: 174px; height: 43px; margin: -15px 0 17px; padding: 41px 0 0; }
ul.contactLinks li { float: left; }
ul.contactLinks li a { display: block; width: 40px; height: 30px; text-indent: -10000em; padding: 0; text-align: left; background: url(http://cbimg9.com/layouts/08/12/32845ab.png) no-repeat; }
ul.contactLinks li.message { margin-left: 10px; }
ul.contactLinks li.addToFriends { margin-left: 0px; }
ul.contactLinks li.comment { margin-left: 0px; }
ul.contactLinks li.message a { background-position: 1px 0; }
ul.contactLinks li.addToFriends a { background-position: -37px -1px; }
ul.contactLinks li.comment a { background-position: -82px -1px; }
ul.contactLinks li.message a:hover { background-position: 1px -30px; }
ul.contactLinks li.addToFriends a:hover { background-position: -38px -31px; }
ul.contactLinks li.comment a:hover { background-position: -82px -31px; }

body {background-color: #C8C2AD; background-image: url(http://cbimg9.com/layouts/08/12/32845ad.png); background-repeat: repeat-y; background-position: top center; background-attachment: fixed;}
div.moduleBody {padding: 5px 10px 5px 7px;}
div.blurbAboutMe, div.blurbLikeToMeet {padding: 2px;}

div.pageLinks a:link {color: #660000; font-family: Arial; font-size: 1em; border-bottom:1px dotted #7F7967; text-decoration: none;}
div.pageLinks a:visited {color: #cccccc; font-family: Arial; font-size: 1em; border-bottom:1px dotted #7F7967; text-decoration: none;}
div.pageLinks a:hover {color: #bb0000; font-family: Arial; font-size: 1em; border-bottom:1px solid #6F6A5A; background-color: #AAA28A; text-decoration: none;}

div.interestsModule a:link {color: #660000; font-family: Arial; font-size: 1em; border-bottom:1px dotted #7F7967; text-decoration: none;}
div.interestsModule a:visited {color: #cccccc; font-family: Arial; font-size: 1em; border-bottom:1px dotted #7F7967; text-decoration: none;}
div.interestsModule a:hover {color: #bb0000; font-family: Arial; font-size: 1em; border-bottom:1px solid #6F6A5A; background-color: #AAA28A; text-decoration: none;}

div.blurbsModule a:link {color: #660000; font-family: Arial; font-size: 1em; border-bottom:1px dotted #7F7967; text-decoration: none;}
div.blurbsModule a:visited {color: #cccccc; font-family: Arial; font-size: 1em; border-bottom:1px dotted #7F7967; text-decoration: none;}
div.blurbsModule a:hover {color: #bb0000; font-family: Arial; font-size: 1em; border-bottom:1px solid #6F6A5A; background-color: #AAA28A; text-decoration: none;}

div.blogsModule a:link {color: #660000; font-family: Arial; font-size: 1em; border-bottom:1px dotted #7F7967; text-decoration: none;}
div.blogsModule a:visited {color: #cccccc; font-family: Arial; font-size: 1em; border-bottom:1px dotted #7F7967; text-decoration: none;}
div.blogsModule a:hover {color: #bb0000; font-family: Arial; font-size: 1em; border-bottom:1px solid #6F6A5A; background-color: #AAA28A; text-decoration: none;}

div.detailsModule a:link {color: #660000; font-family: Arial; font-size: 1em; border-bottom:1px dotted #7F7967; text-decoration: none;}
div.detailsModule a:visited {color: #cccccc; font-family: Arial; font-size: 1em; border-bottom:1px dotted #7F7967; text-decoration: none;}
div.detailsModule a:hover {color: #bb0000; font-family: Arial; font-size: 1em; border-bottom:1px solid #6F6A5A; background-color: #AAA28A; text-decoration: none;}

ul.commentsInfo a:link, div.userComment a:link, ul.links a:link {color: #660000; font-family: Arial; font-size: 1em; border-bottom:1px dotted #7F7967; text-decoration: none;}
ul.commentsInfo a:visited, div.userComment a:visited, ul.links a:visted {color: #cccccc; font-family: Arial; font-size: 1em; border-bottom:1px dotted #7F7967; text-decoration: none;}
ul.commentsInfo a:hover, div.userComment a:hover, ul.links a:hover {color: #bb0000; font-family: Arial; font-size: 1em; border-bottom:1px solid #6F6A5A; background-color: #AAA28A; text-decoration: none;}

div.user a:link {color: #660000; font-family: Arial; font-size: 1em; border-bottom:1px dotted #7F7967; text-decoration: none;}
div.user a:visited {color: #cccccc; font-family: Arial; font-size: 1em; border-bottom:1px dotted #7F7967; text-decoration: none;}
div.user a:hover {color: #bb0000; font-family: Arial; font-size: 1em; border-bottom:1px solid #6F6A5A; background-color: #AAA28A; text-decoration: none;}

div#footer a:link {color: #660000; font-family: Arial; font-size: 1em; text-decoration: none;}
div#footer a:visited {color: #cccccc; font-family: Arial; font-size: 1em; text-decoration: none;}
div#footer a:hover {color: #bb0000; font-family: Arial; font-size: 1em; background-color: #BFB79B; text-decoration: none;}

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: 7px 12px 16px 8px;}
div.column0 h3 {font-family: Arial; color: #000000; font-size: 1.4em; font-weight: bold; display: block; text-align: right; padding: 7px 12px 16px 8px;}

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

.interestGeneral h4 {font-family: Arial; color: #342840; font-size: 1.2em; font-weight: bold; background-color: #948c70; padding: 2px 2px 4px 2px;}
.interestMusic h4 {font-family: Arial; color: #342840; font-size: 1.2em; font-weight: bold; background-color: #948c70; padding: 2px 2px 4px 2px;}
.interestMovies h4 {font-family: Arial; color: #342840; font-size: 1.2em; font-weight: bold; background-color: #948c70; padding: 2px 2px 4px 2px;}
.interestTelevision h4 {font-family: Arial; color: #342840; font-size: 1.2em; font-weight: bold; background-color: #948c70; padding: 2px 2px 4px 2px;}
.interestBooks h4 {font-family: Trebuchet MS; color: #342840; font-size: 1.2em; font-weight: bold; background-color: #948c70; 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: #948c70; 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: 1em;}
div.detailsModule .even {background-color: #948c70; 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: 1em;}

#footer {color: #000000;}
h4.SocialVibe {margin-top: 8px;}
div.blurbAboutMe h4 {margin-top: 10px;}
div#header, div#googlebar {background:none; border:none}
#topnav {background-color:#222222; border: 0px;}
.mdpapplicationModule .moduleBody {padding: 5px;}
div#footer {padding-bottom:10px; margin-bottom: 20px;} 
div.commentsModule ul.moduleList li.odd div.user {float:right;}
div.modulebasicInfo em {color: #342840; font-style: normal; margin-left: 3px;}
div.friendSpaceModule .toolbarCount, div.friendSpaceModule ul.links {display: none;}

div.commentsModule div.moduleBody div.user img.ImgOnlineNow {display:none;}
div.commentsModule ul.moduleList li.odd {background-color: #948c70; margin-left: 1px;}
div.commentsModule ul.moduleList li.odd div.userComment {margin-left:0px; margin-right: 25%;}

div.photo a img {border: 3px solid #AFA78E;}
div.photo a:hover img {border: 3px solid #AAA28A;}
div.photo {width: 176px;}

div.basicInfoModule ul.profileUserAlbum a {border: 3px solid #9F9881;}
div.basicInfoModule ul.profileUserAlbum a:hover {border: 3px solid #AAA28A;}
div.basicInfoModule ul.profileUserAlbum {height: 66px;}

div.friendSpaceModule .moduleList li a img.ImgOnlineNow {display: none;}
div.column1 .friendSpaceModule ol.squarePhotos li, div.friendSpaceModule ol.moduleList li {width: 40px; height: 40px; margin-right: 11px; overflow: visible;}
div.column1 .friendSpaceModule .moduleList li a span {position: absolute; top: -45px; left: -35px; visibility: hidden;}
div.column1 .friendSpaceModule .moduleList li a img  {height: 40px; width: 40px; border: solid 2px #AAA28A;}
div.column1 .friendSpaceModule .moduleList li a:hover img  {height: 40px; width: 40px; border: solid 2px #AF9D78;}

div.column0 .friendSpaceModule ol.squarePhotos li, div.friendSpaceModule ol.moduleList li {width: 40px; height: 40px; margin-right: 10px; overflow: visible;}
div.column0 .friendSpaceModule .moduleList li a span {position: absolute; top: -45px; left: -35px; visibility: hidden;}
div.column0 .friendSpaceModule .moduleList li a img  {height: 40px; width: 40px; border: solid 2px #AAA28A;}
div.column0 .friendSpaceModule .moduleList li a:hover img  {height: 40px; width: 40px; border: solid 2px #AF9D78;}

div.commentsModule span.toolbarCount {display: none;}
div.commentsModule .moduleList li.even a img  {padding: 3px; background-color: #AAA28A;}
div.commentsModule .moduleList li.even a:hover img  {padding: 3px; background-color: #AF9D78;}
div.commentsModule .moduleList li.odd a img {padding: 3px; background-color: #AAA28A;}
div.commentsModule .moduleList li.odd a:hover img  {padding: 3px; background-color: #AFA183;}

{!-apply background image; replace with url of your image -!}
.profileUserInfo img.ImgOnlineNow {margin-top: 5px; background-image:url(http://cbimg9.com/layouts/08/12/32845ae.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 18 comments

interesting:]

By Butterface89 on Sep 17, 2010 8:44 am

this is a nice page, but the top navigation bar won't appear.

By mythinkingbox on Jun 22, 2010 4:18 pm

If you don't have Profile 2.0 it won't work, that's obvious. If you read you'll know that. It works on a billion other profiles.

Thanks for telling me about the cut off issue, that will happen when a layout isn't made for a certain size. I don't plan on updating it. I'm working on Div Overlay for Profile 2.0 now. Soon I'll submit my first.

By Weathered on Feb 9, 2009 3:32 pm

I have my About Me and Who I'd Like to Meet modules on the left with the width set to 960px (largest option available other than 100%), and this profile actually cuts the words off a bit on the right. Just an FYI if you weren't already aware. Great work, though. :)

By SageSoul on Jan 25, 2009 6:43 am