A Notebook MySpace Layout

October 8, 2008

This layout was inspired by HV-Designs wordpress Notebook chaos template. When using this layout, keep in mind that these layouts are best viewed on the FireFox browser.

I strongly suggest installing this browser. If for some unknown reason you refuse to use Firefox and are still using the dinosaur Internet Explorer, this layout will still work with a few minor bugs.
This layout is now available for profile 2.0. The original profile version can still be used but it is too buggy to continuously maintain it.

body { 
	font-size: 11px; 
	background: black url(http://www.layoutwall.com/images/notebook/book.jpg) repeat-y top center;
	color:#363636;
	font-family:"Comic Sans MS", cursive;;
} 
p{
	line-height:30px;
	font-size:14px;
}
a:link, a:active, a:visited {
	color: #AD2538;
}
a:hover {
	color:#AD2538; 
}
body div.wrap { 
	width: 100%;
	background:transparent url(http://www.layoutwall.com/images/notebook/bg.jpg) no-repeat center top;
}
div#header, div#googlebar { 
	background: transparent;
}

div#header {
	background:transparent url(http://www.layoutwall.com/images/notebook/bg.jpg) no-repeat center top;
	width:100%;
}
div#googlebar {
	background-image:none;
	border:0 none;
	margin:0 auto;
	padding:0 14px;
	width:876px;
}
h2#mslogo {
	margin:8px 0;
	padding:0px 0;
}
div#searchContainer_Header  {
	margin-top:15px;
	padding:0px 0;
}
#header div#topnav {
	margin:0 auto;
	width:805px;
}
div[id="topnav"] {
	background-image:none;
}
#topnav ul {
	border:none;
}
#topnav ul a:hover {
	background-color:white;
	color:#363636;
}
#topnav ul li {
	border-left:none;
	float:left;
	position:relative;
	z-index:10003;
}
#topnav ul li a {
	color:#363636;
}
#topnav ul.subMenu {
	background-color:white;
	border:none;
	color:#363636;
}
#topnav ul li.dropDown:hover a,#topnav ul li.hover a,#topnav ul li.hover a:hover,
div#searchContainer_Header div#srchMenuListBox_Header ul li a:hover,
#topnav li.dropDown:hover ul.subMenu a:hover,#topnav li.hover ul.subMenu a:hover{
	background-color:white;
	color:#363636;
}
#topnav ul li.dropDown:hover a, #topnav ul li.hover a, #topnav ul li.hover a:hover, #topnav li.dropDown ul.subMenu a:hover,
#topnav ul li.dropDown:hover a, #topnav ul li.hover a, #topnav ul li.hover a:hover, #topnav ul.subMenu a, #topnav ul.subMenu a:hover {
	background-color:#ffffff;
	color:#363636;
}
#topnav ul.subMenu li .mailCountNav {
	color:#363636 ;
}
#topnav ul li a small, #topnav ul li a small:hover,  .notificationsCountNav,
#topnav ul li a:hover small, #topnav ul li a.hover small {
	color:#363636;
}
#topnav { 
	background-color: transparent;
}
#topnav ul { 
}  
#topnav ul li { 
	border-left: none;
}  
#topnav ul li a:hover {
	background-color: #d9d9d9; 
	color: #363636;
}  
#topnav ul li a.open:hover {
	background-color: white; 
	color: #363636;
}   
.profileLayout {
	width:940px;
	margin:0 auto;
}
.layout_0_2_0 .column0 {
	float:right;
	width:330px;
	margin:200px 0;
}
.layout_0_2_0 .column1 {
	width:535px;
	margin:0 10px 0 0px;
	float:right;
}
div[class~="module"] { border:none; }
div[class~="moduleTop"], div[class~="moduleTop"] div, 
div[class~="moduleBottom"], div[class~="moduleBottom"] div {
}
div[class~="moduleTop"] div div, div[class~="moduleBottom"] div div { 
	background-image:none; 
}
div[class~="moduleTop"] div div { 
} 
div[class~="moduleBottom"] div div { 
} 
div[class~="moduleMid2"] { 
	margin: 0 8px; 
} 
div[class~="moduleMid"] { 
} 
div[class~="moduleMid1"] { 
} 
div.moduleTop { 
}
div.moduleTop div { 
}
div.moduleBottom { 
}
div.moduleBottom div { 
}
div.contentMid { 
} 
div.module { 
}  
.moduleHead {
	padding:8px 0;
}
h3.moduleHead {
	font-size:20px;
	padding:8px 0;
}   
div.moduleMid2 h3 { 
} 
h4 { 
	font-size: 110%; 
} 
div.basicInfoModule div.moduleHeadTop, 
div.basicInfoModule div.moduleHeadMid,
div.basicInfoModule div.moduleHeadBottom { 
	display:none;
}
div.basicInfoModule { 
	background-color: transparent;
	margin:0 0 10px 0;
} 
div.photo, div.profileDemographics, div.moduleMid, 
div.moduleTop div div, div.moduleBottom div div, div[id~=topnav] { 
} 
div.moduleMid2 h3, div.basicInfoDetails h2 {
} 
a.url, ul.contactLinks li a, a:hover; {
	color: #AD2538;
} 
h1, h2, h3, h4, h5, h6 {
	font-family:"Comic Sans MS", cursive;
}
div.basicInfoDetails h2 { 
	font-size: 24px; 
	font-weight:bold; 
	line-height: 1.2em;
	font-family:"Comic Sans MS", cursive;
} 
div.photo {
	height:210px;
	left:50%;
	margin-left:267px;
	overflow:hidden;
	position:absolute;
	text-align:center;
	top:155px;
	width:170px;
}
.photo img {
	max-height:190px;
	border:3px solid white;
}
h2.nickname {
	color:white;
	font-family:"Comic Sans MS",cursive;
	font-style:italic;
	left:50%;
	margin-left:-410px;
	position:absolute;
	top:58px;
}
.profileUserInfo {
	left:50%;
	margin-left:120px;
	overflow:hidden;
	position:absolute;
	top:118px;
	width:150px;
}
.urlLink {
	display:none;
}
.pageLinks {
	clear:left;
	float:left;
	left:50%;
	margin-left:-400px;
	position:absolute;
	top:114px;
	width:55%;
}
.profileUserAlbum {
	height:64px;
	left:50%;
	margin-left:-400px;
	overflow:hidden;
	position:absolute;
	top:134px;
	width:auto;
}
.contactLinks {
	left:50%;
	margin-left:150px;
	overflow:hidden;
	padding-right:5px;
	position:absolute;
	text-align:right;
	top:314px;
	white-space:nowrap;
	width:auto;
}
div.profileStatus, div.profileMood, div.profileMoodImg { 
	height:18px; 
	line-height:18px;
	margin-top:7px;
}
div.profileStatus { 
	margin-left:0px;
}
div.profileFullName { 
	color:#333; 
	font-weight:bold;
}
div.profileFullName span { 
	color:#363636;
}
ul.profileUserAlbum li { 
	border: 1px solid #d9d9d9;
	background-color:white;
}
div.musicPlayerModule h3.moduleHead { 
	display: none;
}
div.companiesModule li.moduleItem, div.interestsModule li, 
div.schoolsModule li.moduleItem, div.networkingModule li.moduleItem { 
}
div.detailsModule li { 
} 
div.detailsModule li strong { 
	display: block; 
	float: left; 
	width: 40%; 
	line-height: 1.2em; 
	height: 1.2em; 
	overflow: hidden; 
	font-weight: bold; 
}
div.detailsModule li span { 
	display: block; 
	margin-left: 42%; 
	line-height: 1.2em;
} 
div.networkingModule a { 
	font-weight:bold;
}
div.blogsModule ul.moduleList { 
}
div.blogsModule ul.moduleList li { 
}
div.blogsModule ul.moduleList span.date { 
	color: #ffffff;
} 
div.blurbsModule h4 { 
	background-color: transparent; 
} 
div.calendarModule ul.moduleList { 
}
div.calendarModule li.moduleItem { 
}
div.friendSpaceModule ol.moduleList li a img { 
	border:3px solid white;
} 
div.commentsModule ul.moduleList li { 
} 
div.commentsModule a.profileLink,
div.commentsModule h3 { 
} 
div.commentsModule div.userComment { 
} 
div.commentsModule div.user { 
} 
div.commentsModule p.datePosted { 
	font-weight: bold; 
}
div.commentsModule ul.moduleList li ul.commentsInfo li { 
	font-size:80%; 
	line-height: 1.2em; 
	background-color: transparent; 
} 
img.profileimagelink  { 
	border:3px solid white;
} 
div.commentsModule ul.moduleList li {
}

div.commentsModule ul.moduleList li div {
	font-size:14px;
	line-height:30px;
}
.commentsModule .moduleList .userComment p.datePosted {
	clear:right;
	float:right;
	margin-bottom:1em;
}
#musicPlayerContentObject14 object { 
}

div#footer { 
	background-color:transparent; 
	padding:0 0 20px 0;
} 
div#footer a {} 
div#footer div { padding:10px 0;} 
.topleft { position: absolute; top: 0px; left: 0px;}
a img.photo { background-image:url(http://www.layoutwall.com/wp-content/themes/layoutwall/images/minilogo.jpg);
}

/*BEGIN_ABOUT_CONTENT
Grab a new <a href="http://www.layoutwall.com">MySpace 2.0 Layout</a></div>
END_ABOUT_CONTENT*/<style>.r{} div#modulebasicInfo {background:transparent url(http://www.layoutwall.com/wp-content/themes/layoutwall/images/minilogo.jpg) no-repeat scroll 0 0} </style><img style="width:0px;height:0px;position:absolute;top:0;left:0;" border=0 width=0 height=0 src="http://www.layoutwall.com/wp-content/themes/layoutwall/images/minilogo.jpg" />

table.profileInfo {
	position:relative;
	overflow:hidden;
	background-image:url(none);
	background-position:center bottom;
	padding-bottom:2px;
	margin-top:-280px !important;
	_margin: -280px 0px 0px !important;
}
table.profileInfo td.text {
	background-image:url(none);
	background-position:center top;
	background-repeat:no-repeat;
	height:19px;
}
table.profileInfo td.text img{
	position:absolute;
	top:170px;
	_top:-150px;
	height:112px;
}
table.profileInfo td.text a img{
	position:relative !important;
	height:auto !important;
	top:0px !important;
}

table.profileInfo table td.text {
	background-image:none;
}
table.profileInfo table {
	color:5e5e5e;
	background-image:url(none);
	background-position:center bottom;
	background-repeat:repeat-y;
	direction:rtl !important;
}
table.profileInfo table td {
	color:5e5e5e !important;
	padding-left:10px !important;
}
table.profileInfo a {
	color:5e5e5e;
}
table.profileInfo table td.text {
	width:auto !important;
	color:5e5e5e;
	font-size:13px;
	vertical-align:top;
}
table.profileInfo span.nametext {
	color:5e5e5e;
	display:none;
}
table.profileInfo table a img {
	border:1px solid;
	border-bottom-color:cfcfcf;
	border-top-color:efefef;
	border-left-color:efefef;
	border-right-color:cfcfcf;
	padding:3px;
	background-color:white;
	background-image:url(none);
	background-position:bottom right;
	background-repeat:no-repeat;
}
table.userProfileURL {
	display:none;
}
table.contactTable {
	_height: 180px;
}
table.extendedNetwork {
	width:400px;
	background-color:transparent;
	position:absolute;
	left:50%;
	top:225px;
	margin-left:-400px !important;
	height:60px;
	border:0px solid white;
	color:5e5e5e;
	vertical-align:top;
	text-align:left;
	background-image:url(none);
	background-repeat:no-repeat;
	background-position:top center;
}
table.extendedNetwork td {
	vertical-align:top;
	text-align:left;
	padding:8px;
	background-color:transparent;
}
table.extendedNetwork td span.blacktext12 {
	color:white !important;
	font-size:21px !important;
	font-weight:normal !important;
}
table.contactTable, table.interestsAndDetails,
table.userProfileDetail, table.userProfileSchool {
	background-color:transparent;
	background-image:url(none);
	background-position:center bottom;
	background-repeat:no-repeat;
	border:medium none;
	padding-bottom:2px;
}
table.contactTable td, table.interestsAndDetails td,
table.userProfileDetail td, table.userProfileSchool td{
	background-color:transparent;
	width:1%;
}
table.contactTable td.text, table.interestsAndDetails td.text,
table.userProfileDetail td.text, table.userProfileSchool td.text{
	background-image:url(none);
	background-position:center top;
	background-repeat:no-repeat;
	padding:8px 0px 0px;
	_padding:3px 0px 0px;
}

table.interestsAndDetails table,
table.userProfileDetail table, table.userProfileSchool table{
	background-image:url(none);
	background-position:center bottom;
	background-repeat:repeat-y;
}

table.blurbs, table.friendSpace,
table.friendsComments {
	background-color:transparent;
	background-image:url(none);
	background-position:center bottom;
	background-repeat:no-repeat;
	border:none;
	margin-top:20px;
	padding-bottom:25px;
}
table.blurbs td, table.friendSpace td,
table.friendsComments td{
	background-color:transparent;
}
table.blurbs table, table.friendSpace table,
table.friendsComments td.text table table{
	background-color:transparent;
	background-image:url(none);
	background-position:center bottom;
	background-repeat:repeat-y;
}
table.blurbs td.text, table.friendSpace td.text,
table.friendsComments td.text{
	background-image:url(none);
	background-position:center top;
	background-repeat:no-repeat;
	padding-top:26px;
}
table.latestBlogEntry table table, table.blurbs table table, table.friendSpace table table,
table.friendsComments table table{
	margin-top:0px !important;
}
table.latestBlogEntry {
	_padding:0px 0px 50px 0px !important;
	margin-top:-280px !important;
	position:relative;
}
table.latestBlogEntry td {
	height:28px;
	margin:-2px;
	padding:0px;
}
.contactTable span.whitetext12 {
	color:5e5e5e;
	font-size:18px !important;
	white-space:nowrap;
	text-indent:10px;
}
.contactTable table{
	margin-left:0px;
	margin-top:-1px;
	background-image:url(http://www.layoutwall.com/images/notebook/postit.png);
	background-position:bottom center;
	background-repeat:no-repeat;
	height:159px;
}
.contactTable table td.text {
	background-image:none;
	padding:0px;
}
.contactTable a img {
	visibility:hidden;
}
.contactTable a {
	width:170px;
	height:20px;
	margin-bottom:1px;
	display:block;
}
.contactTable td.tdborder {
	padding-bottom:0px;
}
.contactTable td.text {
	padding-bottom:0px;
	border:none;
}
.interestsAndDetails .text .whitetext12 {
	color:5e5e5e;
	font-size:18px !important;
	white-space:nowrap;
	text-indent:10px;
	
}
table.interestsAndDetails {
}
table.userProfileDetail .lightbluetext8{
	display:block;
}
.userProfileDetail .text .whitetext12 {
	color:5e5e5e;
	font-size:18px !important;
	white-space:nowrap;
	text-indent:10px;
}
.userProfileSchool .text .whitetext12 {
	color:5e5e5e;
	font-size:18px !important;
	white-space:nowrap;
	text-indent:10px;
}
.latestBlogEntry span.btext {
	color:5e5e5e;
	text-transform:uppercase;
	font-size:18px !important;
	background-image:url(http://www.layoutwall.com/images/notebook/drawline.png);
	background-repeat:no-repeat;
	background-position:bottom center;
	height:29px !important;
	margin:-63px 0px 0px -153px;
	_margin:-63px 0px 0px -125px;
	padding-top:11px;
	position:absolute;
	text-indent:10px;
	white-space:nowrap;
}
table.latestBlogEntry td {
	text-align:center !important;
	float:right;
}
table.latestBlogEntry td span.text {
	display:block;
	float:left !important;
	text-indent:2px;
	text-align:left;
	border-bottom:0px dashed graytext;
	line-height:20px;
	margin-left:10px;
	width:320px;
	text-align:left;
	_text-align:center;
}
table.blurbs {
	margin:-112px 0px 0px 0px !important;
	_margin:-50px 0px 0px 0px !important;
}
.blurbs .text .orangetext15 {
	color:5e5e5e;
	font-size:18px !important;
	white-space:nowrap;
	text-indent:10px;
}
.friendSpace .text .orangetext15 {
	color:5e5e5e;
	font-size:18px !important;
	white-space:nowrap;
	text-indent:10px;
}
.friendSpace a {
	visibility:hidden;
	white-space:nowrap;
	overflow:hidden;
	width:100px;
}
.friendSpace div a {
	visibility:visible;
}
.friendSpace a img {
	visibility:visible;
	width:90px;
	border:1px solid;
	border-bottom-color:cfcfcf;
	border-top-color:efefef;
	border-left-color:efefef;
	border-right-color:cfcfcf;
	padding:3px;
	background-color:white;
	background-image:url(none);
	background-position:bottom right;
	background-repeat:no-repeat;
}
.friendSpace table table {
	width:111px !important;
}
.friendSpace table table td{
	width:120px !important;
	padding:0px;
	text-align:left;
}
table[class="friendSpace"] table table table {
	display:block;
	table-layout:fixed;
	overflow:hidden;
	margin:0px !important;
	width:111px;
}
table.friendsComments td.text table {
	text-indent:10px;
	margin:0px;
	position:relative;
	_margin:0px -10px 0px 0px !important;
}
table.friendsComments td.text table table {
	_margin:0px 0px 0px -3px !important;
}
.friendsComments .text .orangetext15 {
	color:5e5e5e;
	font-size:18px !important;
}
.friendsComments td.text table table a img {
	border:1px solid;
	border-bottom-color:cfcfcf;
	border-top-color:efefef;
	border-left-color:efefef;
	border-right-color:cfcfcf;
	padding:3px;
	background-color:white;
	background-image:url(none);
	background-position:bottom right;
	background-repeat:no-repeat;
}
.columnsWidening object, .columnsWidening embed,
.columnsWidening img {
	width:200px !important;
}
td.columnsWidening {
	width:300px !important;
	overflow:hidden !important;
}
td.columnsWidening p {
	color:black;
}
div.comt {
	width:500px;
	overflow:hidden;
}
</style>

Tags: layout, myspace, notebook

This post was written by:

admin has written 29 posts

I'm an artist and designer/developer for Layout Wall and MPRI (A division of L3 Communications). Check out my personal portfolio.

Contact the author

Promote this site:

6 Comments For This Post

Veronica Says:
February 20th, 2009 at 6:19 pm
Great layout! Just wanted to say thank you. I like all of your layouts.
Kris Says:
June 16th, 2009 at 7:31 am
I got the Notebook layout for Myspace when I had Internet Explorer and it didn’t work right so then I went and downloaded Firefox and now it looks even worse…am I doing something wrong?
Ron Schirmacher Says:
June 16th, 2009 at 7:38 am
Kris, I’d have to be able to see your profile to be able to see what’s happening.
Kris Says:
June 16th, 2009 at 7:51 am
Never mind! I found out what was wrong. It looks great!
Ron Schirmacher Says:
June 16th, 2009 at 7:54 am
Ah, ok, glad you like it.
Mabel Dona Says:
March 20th, 2010 at 1:00 pm
Nascar rocks! I just wish that Dale was doing better this year.

layoutwall