Big Picture F1

Author: Alexander Agnarson

Submitted: 18th August 2009

Category: Clean, Dark, Minimal

Views: 20,936

Author Comments

For Formula 1 fans - well, you can turn this into whatever you want, if you like the red colors it's just as easy to add your content as with the original Big Picture F1 layout.

THE CODE

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="#"><img class="border" src="http://img.designmyspace.org/big_picture_f1/minipic.jpg" width="70px" height="70px" /></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>
<img src="http://img.designmyspace.org/big_picture_f1/default.jpg" width="922px" height="478px" />
</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>

COMMENTS

ajballetcoach said,

August 19, 2009
12:31 am

Hi Alex thanks! I used your template and made changes myspace.com/bmagique
If you have any suggestions let me know, again man you are totally the best !!!
ajballetcoach said,

August 19, 2009
12:35 am

I put designmyspace.org on the top of the page but donot know how to link to your site please let me know the code.
Russell said,

August 19, 2009
3:37 am

@aiballetcoach,

The code for the link to designmyspace.org is already in the original code. It was already put somewhere on the layout.
ajballetcoach said,

August 19, 2009
5:08 am

The code is on my layout but it is not working, I can try to move it in a different location and still keep the words “designmyspace.com up at the top, but for some reason the link is not working. All I did was change the background image. please see myspace.com/bmagique
Anthony W. Johnson said,

September 15, 2009
7:02 pm

Hi Alex trying to add video instead of picture, you have suggestions?
hans said,

September 19, 2009
8:13 pm

Hi Alex, Is there a possibilty to change the blog entry, friends and comments text instead of image?
AHMED REAZ said,

September 24, 2009
10:46 am

Hola!
Can you please help me to add the code?
i tried my best but i didnt get success. my profile is 2.0 and i tried to change it to 1.0 but i cant.
Can you please tell me how to do that?
Sarah said,

September 27, 2009
10:43 pm

I must say, I love your designs. I really love your darkstart(blue). However, for the poloroids pics, are you able to create something more animated to where it will switch between pics? Versus just having the one pic on top? I have a entertainment company that represents various artists and I would like to be able to show them in that format. Do you have any suggestions???? Also, how can I get the menu bar below like with the orignal dark star??

i look forward to hearing from you :)
Sarah said,

September 27, 2009
10:44 pm

Sorry…clearly I can’t type. To clarify, I was referrring to Dark Star (blue) and the original Darness (not Darkstar).

Thanks!
Lauren said,

September 29, 2009
7:28 pm

How so you change the picture at the very top of this layout to a video player?
Lauren said,

September 29, 2009
7:31 pm

I mean for the big picture layout not the one I’m using right now. If I can put a video at the top using the big picture layout I’ll switch to Myspace 1.0 and use the layout.
Cole said,

October 18, 2009
10:59 pm

I cannot get the main picture centered! Am I doing anything wrong?
Conrad Davis said,

October 23, 2009
8:37 am

Hello I just wanna say this is a great design. If any one can help, I simply want replace the big and small photo….., what would be the simplest way to do this? again thank you for your help!
Bryan Grajales said,

November 18, 2009
6:26 am

Why won’t you update your site anymore?

that’s sad… and you’re a Graphic/Web designer.
that doesn’t say anything good about you.

Just don’t foget that it’s your website “YOURS” and there’s people who still come to see it like me…
caprius said,

December 15, 2009
6:30 am

I love this, I’m using the blue one for my layout on myspace… http://www.myspace.com/mesterling... When are you uploading more layouts??? I really love yout layouts and I only use yours because of the professional look it has! Could you create one specially for a musician myspace page with a very unique look, and add other layouts as well?? I miss the many layouts you had before and I am really looking forward to this and more for 2010!

Thank you!!!

-SP
caprius said,

December 15, 2009
6:32 am

Again.. my myspace link is… http://www.myspace.com/mesterling its a music profile! Anybody else can check it out and probably add me if you’re feeling my music! But PLEASE PLEASE upload more layouts more often!? I really do appreciate your layouts and the fact that u take the time to make them and make them free! Keep doing it, dont stop!!!
Mary said,

December 21, 2009
10:00 pm

I really love your layouts, but can you do anything with 2.0? That’s what MySpace uses by default now (even though its just horrible). I would really appreciate it because I made the mistake of making a new account before I realized I couldn’t change it back to 1.0
Anthony W. Johnson said,

January 5, 2010
7:47 am

Hi I tried putting the video code in but my video is coming up in the left corner and not in the box. I have changed the sizes but it still comes up in the left corner of the screen
Aaron Guzman said,

January 20, 2010
9:06 pm

Is this theme for Myspace 2.0 profiles? I am having trouble with implementing this theme. http://www.myspace.com/aarongphoto
Jacob said,

January 27, 2010
5:37 pm

How do I remove the red and gray part. Second from the top of the page.
Matta said,

February 5, 2010
8:07 am

Hi Alex!
If I already have a myspace site and just wanna update it with your codes/style and want to have the player with the existing songs still on the site, can it be done?

Red version of Big Picture

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

<a rel="nofollow" href="#" class="imgpart"><span>Lewis drives to victory in Hungary!</span>
<img src="http://img.designmyspace.org/big_picture_f1/default.jpg" width="922px" height="478px" />
</a>

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

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

Myspace Layout Usage

Copy the code we provide you with and paste it below the text in the I'd Like to Meet or About Me box (in Edit Profile), and hit save.

Musicians must use the Safe Mode option. Remember to remove any old layout code.

TOS: If you want to use the codes as base for your own modified layouts, feel free to do so, as long as you give credit and link back to us.

Link Exchange

Do you want to exchange links as well?

Big Picture F1

Author Comments

THE CODE

Red version of Big Picture

COMMENTS