DesignMyspace.org - Professional Myspace Layouts » Minimal

Big Picture F1

Alexander Agnarson — Tue, 18 Aug 2009 21:44:00 +0000

Red version of Big Picture

The big picture is 922×422px and the small one is 70×70px

<a class="comment" href="http://yourcommentlinkgoeshere.com" title="Post a comment!"><span>Post a comment!</span></a>  
<a class="friend" href="http://yourfriendlinkgoeshere.com" title="Add to friends"><span>Add to friends</span></a>

<div class="id1"><b>F1</b> Lewis Hamilton</div>
<a class="minipic" href="#"></a>
<div class="id2">Lewis Hamilton</div>
<div class="id3">Vodafone McLaren Mercedes<br />24 years old, England</div>
<div class="id4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comdo consequat. Duis aute irure dolor in reprehenderit in voluptate.</div>

<a rel="nofollow" href="#" class="imgpart"><span>Lewis drives to victory in Hungary!</span>

</a>

<div class="sidelinks">
	<ul>
		<li><a href="http://twitter.com/thefifthdriver" class="active">Official McLaren Twitter</a></li>
		<li><a href="http://mclaren.com/">Official McLaren Website</a></li>
        <li><a href="http://lewishamilton.com">LewisHamilton.com</a></li>																								
	</ul>	
</div>

<a class="credit" href="http://designmyspace.org" title="Design by DesignMyspace.org"><span>Please, do not remove this line.</span></a></div>
</div>

body {
	margin-top: 890px;
	font-size: 11px;
	line-height: auto;
	background-color:1c1c1c;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	background-repeat: repeat;
	background-position: top center;
	background-image: url(http://img.designmyspace.org/big_picture/bg_stretch_y.png);
}
body table {margin-top:30px;}

.topline {
	width: 9999px;
	height: 869px;
	position: absolute;
	top: 0;
	right: 0;
	background-color:transparent;
	background-image: url(http://img.designmyspace.org/big_picture/bg_stretch_x.png);
	background-positon: top center;
	background-repeat: repeat-x;
	overflow: hidden;
}
.topline-middle {
	width: 1000px;
	height: 175px;
	position: absolute;
	margin-left: -500px;
	left: 50%;
	top: 0;
	background-color:transparent;
}
.tophead .friend {
	position: absolute;
	left: 919px;
	top: 81px;
	display: block;
	width: 56px;
	height: 41px;
	background-image: url(http://img.designmyspace.org/big_picture_f1/btn_friend.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
.tophead .friend:hover {background-position: 0 -41px;}
.tophead .friend span {display: none;}

.tophead .comment {
	position: absolute;
	left: 863px;
	top: 81px;
	display: block;
	width: 56px;
	height: 41px;
	background-image: url(http://img.designmyspace.org/big_picture_f1/btn_comment.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
.tophead .comment:hover {background-position: 0 -41px;}
.tophead .comment span {display: none;}

.tophead {
	width: 1000px;
	height: 869px;
	position: absolute;
	margin-left: -500px;
	left: 50%;
	top: 0px;
	background-color:transparent;
	background-image: url(http://img.designmyspace.org/big_picture_f1/bg.jpg);
	background-repeat: no-repeat;
	background-position: top;
}
.bottomhead {width: 1000px; height: 26px; position: absolute; margin-left: -500px; left: 50%; top: 600px; background-color:transparent; background-image: url();}
.tophead .imgpart span { display:none; }
.tophead .imgpart:hover { text-decoration:none; }
.tophead .imgpart:hover span { opacity:0.60; filter:alpha(opacity=60); -moz-opacity:0.60; background-color:000; background-image: url(http://img.designmyspace.org/big_picture/line_overlay.jpg); background-position: bottom; background-repeat: repeat-x; display:block; position:absolute; top:0px; left:0px; width:922px; padding:10px 20px; color:fff; font-size:20px; font-family: Georgia, Arial, Verdana, Trebuchet MS, sans-serif; line-height: 30px; font-style: italic; font-weight: normal!important; }
.tophead .imgpart:hover span strong {color: ffffff; margin: 0; padding: 0; line-height: 44px;}
.tophead .imgpart:hover span br {line-height: 5px; margin: 0; padding: 0;}
.tophead .imgpart {
	width: 922px;
	height: 478px;
	position: absolute;
	left: 45px;
	top: 149px;
	padding: 0;
	overflow: hidden;
	display: block;
}
.tophead .id1 {
	width: 780px;
	position: absolute;
	left: 73px;
	top: 69px;
	height: 37px;
	color:ffffff;
	padding: 0px;
	font-size: 26px;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	font-weight: normal;
	letter-spacing: -1px;
	overflow: hidden;
	text-shadow: 1px 1px 1px black;
}
.tophead .id2 {
	width: 175px;
	position: absolute;
	left: 148px;
	top: 668px;
	height: 25px;
	color:ffffff;
	padding: 0px;
	font-size: 18px;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	font-weight: bold;
	letter-spacing: -1px;
	overflow: hidden;
	text-shadow: 1px 1px 0 rgb(120,18,0);
}
.tophead .id3 {
	width: 175px;
	position: absolute;
	left: 148px;
	top: 691px;
	height: 43px;
	color:ffbdb1;
	padding: 0px;
	font-size: 12px;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	font-weight: normal;
	overflow: hidden;
	text-align: left;
	line-height: 20px!important;
	text-shadow: 1px 1px 0 rgb(120,18,0);
}
.tophead .id3 span.white { color:fff;}
.tophead .id4 {
	width: 587px;
	position: absolute;
	left: 369px;
	top: 668px;
	height: 58px;
	color:aeb2ba;
	padding: 0px;
	font-size: 12px;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	font-weight: normal;
	overflow: hidden;
	line-height: 20px!important;
	text-shadow: 1px 1px 0 rgb(36,37,39)
}
.tophead .minipic {
	width: 80px;
	position: absolute;
	left: 47px;
	top: 659px;
	height: 80px;
	color:fff;
	padding: 0px;
	font-size: 30px;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	font-weight: bold;
	letter-spacing: -1px;
	overflow: hidden;
}
a img.border {border-style:solid; border-width:5px; border-color:8d1601; }
a:hover img.border, a img.border:hover {border-style:solid; border-width:5px; border-color:691000;}

.tophead .sidelinks {
	position:absolute;
	left:48px;
	top:602px;
	width: 915px;
	height: 30px;
}
.tophead .sidelinks ul { margin:0px; padding:0px;}
.tophead .sidelinks ul li {	margin:0px;	list-style:none; float:right; margin-left:4px; font-size:12px; }
.tophead .sidelinks ul li a { text-decoration:none; color:fff; padding: 6px 8px; position:relative; font-weight: bold; opacity:0.70; filter:alpha(opacity=70); -moz-opacity:0.70; background-color:000; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.tophead .sidelinks ul li a:hover, .topline-middle .topnav ul li a.active {color:ffffff; text-decoration:none; opacity:0.80; filter:alpha(opacity=80); -moz-opacity:0.80; background-color:000;}
.tophead .sidelinks ul li a span {display:none;}
.tophead .sidelinks ul li a:hover span, .topline-middle .topnav ul li a.active  span{ display:none;}

.tophead .credit { width: 106px; height: 14px; position: absolute; left: 877px; top: 6px; display: block; cursor: pointer; }
.tophead .credit span {display: none;}

p {margin: 0px 0px 1em 0px; font-family: font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-size: 12px;}
a, a:link, a:visited {color:ffffff; text-decoration: none; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
a:hover {color:c0c6ce; text-decoration: underline}
img {border: none;}
br {line-height: 20px;}
form {border-width:0px;background-color:none;}
body>div {margin-left: 14px;}
table, tr, td, table table, table table td {border-width:0px; background-color: transparent;}
table table table td {background-color:transparent;margin:0px;padding: 0 26px 15px 26px}
table table table table {border-width:0px;background-color:transparent;padding:0px;margin:0px; background-image: none;}
table table table table td {padding:0px;margin:0px;}
table table table {margin:0px; background-color:46494d; width: 100% !important; background-repeat: repeat-x; background-position: top center; background-image: url(http://img.designmyspace.org/big_picture/box_top.png); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: 27282a; border-top-width: 1px; border-top-style: solid; border-top-color: 27282a; -moz-border-radius: 7px; -webkit-border-radius: 7px;}
body td table, body div table {margin-top: 0;}
font {color:b5bcc6;font-size:10px; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
a font:hover {color:171818 text-shadow: 1px 1px 0 rgb(102,106,111) ;}
a.topline-middle .navbar:link, a.topline-middle .navbar:visited {color:ffffff text-decoration: none;}
a.topline-middle .navbar:hover {color:c0c6ce;}
table tr td table tr td font {display: inline;}
table tr td table a.topline-middle .navbar {font-size: 10px;}
.text {color:b5bcc6;font-size:12px; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
a.text:link, a.text:visited {color:ffffff}
a.text:hover {color:c0c6ce;}
.nametext {color:171818; text-shadow: 1px 1px 0 rgb(102,106,111) ; font-size: 13px; margin: 14px 0px 4px 0px; padding: 0px 0px 14px 0px; text-align: center; display: block; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; border-width: 0px 0px 1px 0px; border-style: solid; border-color: 595d61; width: 280px !important; vertical-align: bottom;}
.contactTable {width: 332px !important;}
.contactTable td {padding: 0px; margin: 0px; text-align: center;}
.contactTable span.whitetext12 {position: relative; left: 24px;}
.contactTable td table {background-color: transparent; background-image: url(http://img.designmyspace.org/big_picture_f1/msg_block.png); background-position: center; background-repeat: no-repeat;}
.contactTable a {padding: 0px; margin: 0px 0px 1px 5px; display: block; height: 38px; width: 156px; background-color: transparent;}
.contactTable a img, .contactTable img {border: 0px; display: none; visibility: hidden;}
table tr td table tr td table tr td div strong {display: block; width: 280px; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
.whitetext12 {color:171818; text-shadow: 1px 1px 0 rgb(102,106,111) ; font-size: 13px; margin: 8px 0px 4px 0px; padding: 0 0 14px 0; text-align: center; display: block; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; border-width: 0px 0px 1px 0px; border-style: solid; border-color: 595d61; width: 280px;}
.blacktext12 {color:171818; text-shadow: 1px 1px 0 rgb(102,106,111) ; font-size: 12px; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; display: block; margin-top: 14px; width: 100%;}
.contactTable span.whitetext12 {position: relative; left: 24px;}
.btext {color:171818; text-shadow: 1px 1px 0 rgb(102,106,111) ; font-size: 13px; margin: 14px 0px 4px 0px; padding: 0 14px 14px 14px; text-align: center; display: block; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; border-width: 0px 0px 1px 0px; border-style: solid; border-color: 595d61; width:370;}
.orangetext15 {color:171818; text-shadow: 1px 1px 0 rgb(102,106,111) ; font-size: 13px; margin: 14px 0px 4px 0px; padding: 0 14px 14px 14px; text-align: center; display: block; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; border-width: 0px 0px 1px 0px; border-style: solid; border-color: 595d61; width:370px;}
.lightbluetext8 {color:b5bcc6; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
.redtext,.redbtext {color:171818; text-shadow: 1px 1px 0 rgb(102,106,111) ; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-size: 12px; font-weight: bold;}
a.redlink:link {color:ffffff; padding-top: 3px; text-decoration: none;}

a.redlink:visited {color:ffffff}
a.redlink:hover {color:c0c6ce; text-decoration:underline;}
u {text-decoration: none; font-size: 10px;}
a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited { color:b5bcc6; text-decoration: none; }
a.searchlinkSmall:hover { color:ffffff; }
td, table, tr, span, li, p, div, textarea, DIV {
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	color: b5bcc6;
} 
h1, h2, h3, h4, h5, h6 {color:171818; text-shadow: 1px 1px 0 rgb(102,106,111) ;} 
.blacktext10 {color:171818 !important; font-size: 12px!important; font-family: Arial, Verdana, Trebuchet MS, sans-serif; text-shadow: 1px 1px 0 rgb(102,106,111) ;}
.searchlinksmall a{color:171818 !important; text-decoration: none!important; text-shadow: 1px 1px 0 rgb(102,106,111) ;}
.searchlinksmall a:hover{color:171818 !important; text-decoration: underline !important; text-shadow: 1px 1px 0 rgb(102,106,111) ;}
.userProfileURL {font-size: 9px!important; text-decoration: none!important; text-shadow: 1px 1px 0 rgb(102,106,111) ;}
</style>

Big Picture

Alexander Agnarson — Wed, 05 Aug 2009 23:44:13 +0000

What are you waiting for? Go outside, take a picture of yourself, add it and voila!

The big picture is 922×422px and the small one is 70×70px

<div class="id1"><b>my</b>PHOTOGRAPHY</div>
<a class="minipic" href="#"></a>
<div class="id2">Jessica Parker</div>
<div class="id3">23 years old photographer from<br />
  New York, US.</div>
<div class="id4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comdo consequat. Duis aute irure dolor in reprehenderit in voluptate.</div>

<a rel="nofollow" href="#" class="imgpart"><span>Photo taken on random location, back in 2008. </span>

</a>

<div class="sidelinks">
	<ul>
		<li><a href="#" class="active">Link One</a></li>
		<li><a href="#">Link Two</a></li>
		<li><a href="#">Link Three</a></li>																								
	</ul>	
</div>

<a class="credit" href="http://designmyspace.org" title="Design by DesignMyspace.org"><span>Please, do not remove this line.</span></a></div>
</div>

.topline {
	width: 9999px;
	height: 869px;
	position: absolute;
	top: 0;
	right: 0;
	background-color:transparent;
	background-image: url(http://img.designmyspace.org/big_picture/bg_stretch_x.png);
	background-positon: top center;
	background-repeat: repeat-x;
	overflow: hidden;
}
.topline-middle {
	width: 1000px;
	height: 175px;
	position: absolute;
	margin-left: -500px;
	left: 50%;
	top: 0;
	background-color:transparent;
}
.tophead .friend {
	position: absolute;
	left: 919px;
	top: 81px;
	display: block;
	width: 56px;
	height: 41px;
	background-image: url(http://img.designmyspace.org/big_picture/btn_friend.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
.tophead .friend:hover {background-position: 0 -41px;}
.tophead .friend span {display: none;}

.tophead .comment {
	position: absolute;
	left: 862px;
	top: 81px;
	display: block;
	width: 56px;
	height: 41px;
	background-image: url(http://img.designmyspace.org/big_picture/btn_comment.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
.tophead .comment:hover {background-position: 0 -41px;}
.tophead .comment span {display: none;}

.tophead {
	width: 1000px;
	height: 869px;
	position: absolute;
	margin-left: -500px;
	left: 50%;
	top: 0px;
	background-color:transparent;
	background-image: url(http://img.designmyspace.org/big_picture/bg.jpg);
	background-repeat: no-repeat;
	background-position: top;
}
.bottomhead {width: 1000px; height: 26px; position: absolute; margin-left: -500px; left: 50%; top: 600px; background-color:transparent; background-image: url();}
.tophead .imgpart span { display:none; }
.tophead .imgpart:hover { text-decoration:none; }
.tophead .imgpart:hover span { opacity:0.60; filter:alpha(opacity=60); -moz-opacity:0.60; background-color:000; background-image: url(http://img.designmyspace.org/big_picture/line_overlay.jpg); background-position: bottom; background-repeat: repeat-x; display:block; position:absolute; top:0px; left:0px; width:922px; padding:10px 20px; color:fff; font-size:20px; font-family: Georgia, Arial, Verdana, Trebuchet MS, sans-serif; line-height: 30px; font-style: italic; font-weight: normal!important; }
.tophead .imgpart:hover span strong {color: ffffff; margin: 0; padding: 0; line-height: 44px;}
.tophead .imgpart:hover span br {line-height: 5px; margin: 0; padding: 0;}
.tophead .imgpart {
	width: 922px;
	height: 478px;
	position: absolute;
	left: 45px;
	top: 149px;
	padding: 0;
	overflow: hidden;
	display: block;
}
.tophead .id1 {
	width: 780px;
	position: absolute;
	left: 73px;
	top: 69px;
	height: 37px;
	color:ffffff;
	padding: 0px;
	font-size: 26px;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	font-weight: normal;
	letter-spacing: -1px;
	overflow: hidden;
	text-shadow: 1px 1px 1px black;
}
.tophead .id2 {
	width: 175px;
	position: absolute;
	left: 148px;
	top: 668px;
	height: 25px;
	color:ffffff;
	padding: 0px;
	font-size: 18px;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	font-weight: bold;
	letter-spacing: -1px;
	overflow: hidden;
	text-shadow: 1px 1px 0 DarkSlateGray ;
}
.tophead .id3 {
	width: 175px;
	position: absolute;
	left: 148px;
	top: 691px;
	height: 43px;
	color:a2bdbd;
	padding: 0px;
	font-size: 12px;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	font-weight: normal;
	overflow: hidden;
	text-align: left;
	line-height: 20px!important;
	text-shadow: 1px 1px 0 rgb(55,79,80)
}
.tophead .id3 span.white { color:fff;}
.tophead .id4 {
	width: 587px;
	position: absolute;
	left: 369px;
	top: 668px;
	height: 58px;
	color:aeb2ba;
	padding: 0px;
	font-size: 12px;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	font-weight: normal;
	overflow: hidden;
	line-height: 20px!important;
	text-shadow: 1px 1px 0 rgb(36,37,39)
}
.tophead .minipic {
	width: 80px;
	position: absolute;
	left: 47px;
	top: 659px;
	height: 80px;
	color:fff;
	padding: 0px;
	font-size: 30px;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	font-weight: bold;
	letter-spacing: -1px;
	overflow: hidden;
}
a img.border {border-style:solid; border-width:5px; border-color:364d4e; }
a:hover img.border, a img.border:hover {border-style:solid; border-width:5px; border-color:293c3d;}

.tophead .credit { width: 106px; height: 14px; position: absolute; left: 877px; top: 6px; display: block; cursor: pointer; }
.tophead .credit span {display: none;}

p {margin: 0px 0px 1em 0px; font-family: font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-size: 12px;}
a, a:link, a:visited {color:ffffff; text-decoration: none; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
a:hover {color:c0c6ce; text-decoration: underline}
img {border: none;}
br {line-height: 20px;}
form {border-width:0px;background-color:none;}
body>div {margin-left: 14px;}
table, tr, td, table table, table table td {border-width:0px; background-color: transparent;}
table table table td {background-color:transparent;margin:0px;padding: 0 26px 15px 26px}
table table table table {border-width:0px;background-color:transparent;padding:0px;margin:0px; background-image: none;}
table table table table td {padding:0px;margin:0px;}
table table table {margin:0px; background-color:46494d; width: 100% !important; background-repeat: repeat-x; background-position: top center; background-image: url(http://img.designmyspace.org/big_picture/box_top.png); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: 27282a; border-top-width: 1px; border-top-style: solid; border-top-color: 27282a; -moz-border-radius: 7px; -webkit-border-radius: 7px;}
body td table, body div table {margin-top: 0;}
font {color:b5bcc6;font-size:10px; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
a font:hover {color:7cc4c2 text-shadow: 1px 1px 0 rgb(51,54,57) ;}
a.topline-middle .navbar:link, a.topline-middle .navbar:visited {color:ffffff text-decoration: none;}
a.topline-middle .navbar:hover {color:c0c6ce;}
table tr td table tr td font {display: inline;}
table tr td table a.topline-middle .navbar {font-size: 10px;}
.text {color:b5bcc6;font-size:12px; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
a.text:link, a.text:visited {color:ffffff}
a.text:hover {color:c0c6ce;}
.nametext {color:7cc4c2; text-shadow: 1px 1px 0 rgb(51,54,57) ; font-size: 13px; margin: 14px 0px 4px 0px; padding: 0px 0px 14px 0px; text-align: center; display: block; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; border-width: 0px 0px 1px 0px; border-style: solid; border-color: 595d61; width: 280px !important; vertical-align: bottom;}
.contactTable {width: 332px !important;}
.contactTable td {padding: 0px; margin: 0px; text-align: center;}
.contactTable span.whitetext12 {position: relative; left: 24px;}
.contactTable td table {background-color: transparent; background-image: url(http://img.designmyspace.org/big_picture/msg_block.png); background-position: center; background-repeat: no-repeat;}
.contactTable a {padding: 0px; margin: 0px 0px 1px 5px; display: block; height: 38px; width: 156px; background-color: transparent;}
.contactTable a img, .contactTable img {border: 0px; display: none; visibility: hidden;}
table tr td table tr td table tr td div strong {display: block; width: 280px; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
.whitetext12 {color:7cc4c2; text-shadow: 1px 1px 0 rgb(51,54,57) ; font-size: 13px; margin: 8px 0px 4px 0px; padding: 0 0 14px 0; text-align: center; display: block; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; border-width: 0px 0px 1px 0px; border-style: solid; border-color: 595d61; width: 280px;}
.blacktext12 {color:7cc4c2; text-shadow: 1px 1px 0 rgb(51,54,57) ; font-size: 12px; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; display: block; margin-top: 14px; width: 100%;}
.contactTable span.whitetext12 {position: relative; left: 24px;}
.btext {color:7cc4c2; text-shadow: 1px 1px 0 rgb(51,54,57) ; font-size: 13px; margin: 14px 0px 4px 0px; padding: 0 14px 14px 14px; text-align: center; display: block; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; border-width: 0px 0px 1px 0px; border-style: solid; border-color: 595d61; width:370;}
.orangetext15 {color:7cc4c2; text-shadow: 1px 1px 0 rgb(51,54,57) ; font-size: 13px; margin: 14px 0px 4px 0px; padding: 0 14px 14px 14px; text-align: center; display: block; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; border-width: 0px 0px 1px 0px; border-style: solid; border-color: 595d61; width:370px;}
.lightbluetext8 {color:b5bcc6; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
.redtext,.redbtext {color:7cc4c2; text-shadow: 1px 1px 0 rgb(51,54,57) ; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-size: 12px; font-weight: bold;}
a.redlink:link {color:ffffff; padding-top: 3px; text-decoration: none;}

a.redlink:visited {color:ffffff}
a.redlink:hover {color:c0c6ce; text-decoration:underline;}
u {text-decoration: none; font-size: 10px;}
a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited { color:b5bcc6; text-decoration: none; }
a.searchlinkSmall:hover { color:ffffff; }
td, table, tr, span, li, p, div, textarea, DIV {
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	color: b5bcc6;
} 
h1, h2, h3, h4, h5, h6 {color:7cc4c2; text-shadow: 1px 1px 0 rgb(51,54,57) ;} 
.blacktext10 {color:7cc4c2 !important; font-size: 12px!important; font-family: Arial, Verdana, Trebuchet MS, sans-serif; text-shadow: 1px 1px 0 rgb(51,54,57) ;}
.searchlinksmall a{color:7cc4c2 !important; text-decoration: none!important; text-shadow: 1px 1px 0 rgb(51,54,57) ;}
.searchlinksmall a:hover{color:7cc4c2 !important; text-decoration: underline !important; text-shadow: 1px 1px 0 rgb(51,54,57) ;}
.userProfileURL {font-size: 9px!important; text-decoration: none!important; text-shadow: 1px 1px 0 rgb(51,54,57) ;}
</style>

Series 3 – Clean

Alexander Agnarson — Sun, 01 Feb 2009 23:34:24 +0000

Instructions

For more information, how to change images and links, please go here. (same methods, not same code)

Measurements for the Picture or Video box is width:540px height:250px. You can put any video you want there, for example from youtube.com or vimeo.com. Will write more instructions soon. Got questions? Comment.

UPDATE: Video version now avaliable.

<a class="friend" href="http://yourfriendlinkgoeshere.com" title="Add to friends"><span>Add to friends</span></a>
<a class="msg" href="http://yourmessagelinkgoeshere.com" title="Send Message"><span>Send Message</span></a>

<div class="id3"><span class="white">Latest News:</span> Write something important here, or just remove it.</div>
<div class="id1">Lorem ipsum</div>
<div class="id2">About Me</div>
<div class="id4">
Lorem ipsum dolor sit amet, consectetur adipis elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim iam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br />
<br />
Duis aute irure dolor in reprehenderit in volupte velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non prodent, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="id5">Additional Text Field</div>
<div class="id6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<a rel="nofollow" href="#" class="imgpart"><span><strong>Video Title</strong><br />This video square is 540px x 330px. Replace the embed flash code.</span>

</object>

</a>

<div class="sidelinks">
	<ul>
		<li><a href="#" class="active">Link One</a></li>
		<li><a href="#">Link Two</a></li>
		<li><a href="#">Link Three</a></li>																									
	</ul>	
</div>
<a class="mshome" href="http://myspace.com" title="Myspace Home"><span>MySpace Home</span></a>
<a class="credit" href="http://designmyspace.org" title="Design by DesignMyspace.org"><span>Do not remove.</span></a></div>
</div>

body {
	margin-top: 712px;
	font-size: 11px;
	line-height: auto;
	background-color:311e16;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	background-repeat: repeat;
	background-position: top center;
	background-image: url(http://cbimg6.com/layouts/09/02/33629aa.jpg);
}
body table {margin-top:30px;}

.topline-middle {
	width: 1000px;
	height: 175px;
	position: absolute;
	margin-left: -500px;
	left: 50%;
	top: 0;
	background-color:transparent;
}
.tophead .friend {
  position: absolute;
  left: 767px;
  top: 591px;
  display: block;
  width: 39px;
  height: 49px;
  background-image: url(http://cbimg6.com/layouts/09/02/33629ab.jpg); background-repeat: no-repeat; background-position: 0 0;
}
.tophead .friend:hover {background-position: 0 -49px;}
.tophead .friend span {display: none;}

.tophead .msg {
  position: absolute;
  left: 806px;
  top: 591px;
  display: block;
  width: 161px;
  height: 49px;
  background-image: url(http://cbimg6.com/layouts/09/02/33629ac.jpg); background-repeat: no-repeat; background-position: 0 0;
}
.tophead .msg:hover {background-position: 0 -49px;}
.tophead .msg span {display: none;}

.tophead .mshome {
  position: absolute;
  left: 838px;
  top: 8px;
  display: block;
  width: 131px;
  height: 31px;
  background-image: url(http://cbimg6.com/layouts/09/02/33629ad.jpg); background-repeat: no-repeat; background-position: 0 0;
}
.tophead .mshome:hover {background-position: 0 -31px;}
.tophead .mshome span {display: none;}
.topline {
	width: 9999px;
	height: 712px;
	position: absolute;
	top: 0;
	right: 0;
	background-color:transparent;
	background-image: url(http://cbimg6.com/layouts/09/02/33629ae.jpg);
	background-positon: top center;
	background-repeat: repeat-x;
	overflow: hidden;
}
.tophead {
	width: 1000px;
	height: 712px;
	position: absolute;
	margin-left: -500px;
	left: 50%;
	top: 0px;
	background-color:transparent;
	background-image: url(http://cbimg6.com/layouts/09/02/33629af.jpg);
	background-repeat: no-repeat;
	background-position: top;
}
.bottomhead {width: 1000px; height: 26px; position: absolute; margin-left: -500px; left: 50%; top: 600px; background-color:transparent; background-image: url();}
.tophead .imgpart span { display:none; }
.tophead .imgpart:hover { text-decoration:none; }
.tophead .imgpart:hover span { opacity:0.80; filter:alpha(opacity=80); -moz-opacity:0.80; background-color:000000; display:block; position:absolute; top:0px; left:0px; width:540px; padding:10px 10px; color:fff; font-size:12px; font-family: Arial, Verdana, Trebuchet MS, sans-serif; line-height: 17px; }
.tophead .imgpart:hover span strong {color: bac608; margin: 0; padding: 0;}
.tophead .imgpart:hover span br {line-height: 5px; margin: 0; padding: 0;}
.tophead .imgpart {
	width: 540px;
	height: 330px;
	position: absolute;
	left: 74px;
	top: 196px;
	padding: 0;
	overflow: hidden;
	display: block;
}
.tophead .id1 {
	width: 780px;
	position: absolute;
	left: 67px;
	top: 79px;
	height: 70px;
	color:ffffff;
	padding: 0px;
	font-size: 48px;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	font-weight: normal;
	letter-spacing: -2px;
	overflow: hidden;
}
.tophead .id1 span.color {
	color: 959e05;
}
.tophead .id2 {
	width: 274px;
	position: absolute;
	left: 669px;
	top: 190px;
	height: 30px;
	color:494949;
	padding: 0px;
	font-size: 24px;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	font-weight: bold;
	letter-spacing: -1px;
	overflow: hidden;
}
.tophead .id3 {
	width: 750px;
	position: absolute;
	left: 44px;
	top: 15px;
	height: 18px;
	color:ccc;
	padding: 0px;
	font-size: 13px;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	font-weight: normal;
	overflow: hidden;
	text-align: left;
	font-style: italic;
}
.tophead .id3 span.white { color:fff;}
.tophead .id4 {
	width: 274px;
	position: absolute;
	left: 669px;
	top: 238px;
	height: 261px;
	color:777777;
	padding: 0px;
	font-size: 13px;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	font-weight: normal;
	overflow: hidden;
}
.tophead .id5 {
	width: 550px;
	position: absolute;
	left: 71px;
	top: 539px;
	height: 30px;
	color:959f03;
	padding: 0px;
	font-size: 24px;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	font-weight: bold;
	letter-spacing: -1px;
	overflow: hidden;
}
.tophead .id6 {
	width: 551px;
	position: absolute;
	left: 71px;
	top: 586px;
	height: 110px;
	color:999999;
	padding: 0px;
	font-size: 13px;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	font-weight: normal;
	overflow: hidden;
}
.tophead .sidelinks {
	position:absolute;
	left:657px;
	top:522px;
	width: 300px;
	height: 30px;
}
.tophead .sidelinks ul { margin:0px; padding:0px;}
.tophead .sidelinks ul li {	margin:0px;	list-style:none; float:right; margin-left:6px; font-size:12px;}
.tophead .sidelinks ul li a { text-decoration:none; color:fff; padding: 6px 8px; position:relative; font-weight: bold; background-color: 9ba508;}
.tophead .sidelinks ul li a:hover, .topline-middle .topnav ul li a.active {color:ffffff; background-color:494949; text-decoration:none;}
.tophead .sidelinks ul li a span {display:none;}
.tophead .sidelinks ul li a:hover span, .topline-middle .topnav ul li a.active  span{ display:none;}

.tophead .credit {
	width: 106px;
	height: 14px;
	position: absolute;
	left: 862px;
	top: 137px;
	display: block;
	cursor: pointer;
}
.tophead .credit span {display: none;}

a img.noborder {border: 0;}
img.border {border-style:solid; border-width:3px; border-color:92908b; }
a img.border {border-style:solid; border-width:3px; border-color:92908b; }
a:hover img.border, a img.border:hover {border-style:solid; border-width:3px; border-color:c7c4bc;}

p {margin: 0px 0px 1em 0px; font-family: font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-size: 12px;}
a, a:link, a:visited {color:333333; text-decoration: none; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
a:hover {color:969696; text-decoration: underline}
img {border: none;}
br {line-height: 20px;}
form {border-width:0px;background-color:none;}
body>div {margin-left: 14px;}
table, tr, td, table table, table table td {border-width:0px; background-color: transparent;}
table table table td {background-color:transparent;margin:0px;padding: 0 26px 15px 26px}
table table table table {border-width:0px;background-color:transparent;padding:0px;margin:0px; background-image: none;}
table table table table td {padding:0px;margin:0px;}
table table table {margin:0px; background-color:ebebeb; width: 100% !important; background-repeat: repeat-x; background-position: top center; background-image: url(http://cbimg6.com/layouts/09/02/33629ag.jpg); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: d8d8d8; }
body td table, body div table {margin-top: 0;}
font {color:777777;font-size:10px; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
a font:hover {color:959e05}
a.topline-middle .navbar:link, a.topline-middle .navbar:visited {color:333333 text-decoration: none;}
a.topline-middle .navbar:hover {color:969696;}
table tr td table tr td font {display: inline;}
table tr td table a.topline-middle .navbar {font-size: 10px;}
.text {color:777777;font-size:12px; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
a.text:link, a.text:visited {color:333333}
a.text:hover {color:969696}
.nametext {color:959e05; font-size: 13px; margin: 14px 0px 4px 0px; padding: 0px 0px 14px 0px; text-align: center; display: block; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; border-width: 0px 0px 1px 0px; border-style: solid; border-color: ffffff; width: 280px !important; vertical-align: bottom;}
.contactTable {width: 332px !important;}
.contactTable td {padding: 0px; margin: 0px; text-align: center;}
.contactTable span.whitetext12 {position: relative; left: 24px;}
.contactTable td table {background-color: transparent; background-image: url(http://cbimg6.com/layouts/09/02/33629ah.jpg); background-position: center; background-repeat: no-repeat;}
.contactTable a {padding: 0px; margin: 0px 0px 1px 5px; display: block; height: 38px; width: 156px; background-color: transparent;}
.contactTable a img, .contactTable img {border: 0px; display: none; visibility: hidden;}
table tr td table tr td table tr td div strong {display: block; width: 280px; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
.whitetext12 {color:959e05; font-size: 13px; margin: 8px 0px 4px 0px; padding: 0 0 14px 0; text-align: center; display: block; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; border-width: 0px 0px 1px 0px; border-style: solid; border-color: ffffff; width: 280px;}
.blacktext12 {color:959e05;font-size: 12px; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; display: block; margin-top: 14px; width: 100%;}
.contactTable span.whitetext12 {position: relative; left: 24px;}
.btext {color:959e05; font-size: 13px; margin: 14px 0px 4px 0px; padding: 0 14px 14px 14px; text-align: center; display: block; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; border-width: 0px 0px 1px 0px; border-style: solid; border-color: ffffff; width:370;}
.orangetext15 {color:959e05; font-size: 13px; margin: 14px 0px 4px 0px; padding: 0 14px 14px 14px; text-align: center; display: block; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; border-width: 0px 0px 1px 0px; border-style: solid; border-color: ffffff; width:370px;}
.lightbluetext8 {color:777777; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
.redtext,.redbtext {color:959e05; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-size: 12px; font-weight: bold;}
a.redlink:link {color:333333; padding-top: 3px; text-decoration: none;}
a.redlink:visited {color:333333}
a.redlink:hover {color:969696}
u {text-decoration: none; font-size: 10px;}
a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited { color:777777; text-decoration: none; }
a.searchlinkSmall:hover { color:333333; }
td, table, tr, span, li, p, div, textarea, DIV {
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	color: 777777;
} 
h1, h2, h3, h4, h5, h6 {color:959e05;} 
.blacktext10 {color:959e05 !important; font-size: 12px!important; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
.searchlinksmall a{color:959e05 !important; text-decoration: none!important;}
.searchlinksmall a:hover{color:959e05 !important; text-decoration: underline !important;}
.userProfileURL {font-size: 9px!important; text-decoration: none!important;}
</style>