Dark Chocolate

Designer's Comments

Look carefully for specific instructions

A very simple layout, you can say it's like tumblr I guess. This one will also have that bar for the picture, details, and navigation. There are icon headers to make it more like tumblr. :P Stock photo is from sxc.hu.

The picture dimensions are 100x75. Add as many things as you want.

Using CSS3 techniques again so update your browser to the lastest version.
Not compatible with IE6+
Firefox3.5+ - No issues.
Chrome & Safari - minor 1px misalignment.
Opera10 - background misalignment.

Icon Headers

Using This Layout

For specific instructions read designer's comments

This is a div overlay layout, html knowledge required!
1. Log into myspace.com
2. Click on Edit Profile (Profile 1.0)
3. Copy (ctrl c) and paste (ctrl v) code to the specified fields

Update Friend ID

Input Friend ID to automagically update code

Layout Code

Copy and paste to About Me

Help

<p><a href="http://www.createblog.com/myspace-layouts/" title="Grab Myspace Layouts and Myspace Codes"><img src="http://www.createblog.com/images/link1.gif" border="0" alt="Myspace Layouts" style="position:absolute;top:0px;left:0px;width:10px;height:27px;" /></a></p><style>
body {
background-image:url(http://cbimg6.com/layouts/09/08/35488ac.png);
background-position:top center;
background-repeat:repeat-y;
background-color:222222;
font-family: Segoe UI;
}

@font-face {
font-family: Segoe UI;
src: url(http://crafty-designs.bloghead.com/segoeui.ttf);
}

b, .btext {color:14264f; font-weight:bold;}
i, em, .itext { color:49b9a6;}
u, .utext {color:667a1d; font-style:italic; border-bottom: dashed 1px;}
s {color:ec5700;}

.dark
{display:block; height:730px; width:800px; position:absolute; top:0px; left:50%; margin-left:-400px; overflow:hidden; z-index:-1;
}

.about img, .about a img {
margin-top:3px;
margin-bottom:3px;
display:block;
border-style:solid;
border-width:4px;
border-color:222222;
margin-left: auto;
margin-right: auto;
max-width:370px;
}

.about img:hover, .about a img:hover {
margin-top:3px;
margin-bottom:3px;
display:block;
border-style:solid;
border-width:4px;
border-color:gray;
margin-left: auto;
margin-right: auto;
max-width:370px;
}

.photo { 
position:fixed;
_position:absolute;
width:100px;
height:75px;
border-color:white;
border-style:solid;
border-width:2px;
left:50%;
display:block;
bottom:10px;
z-index:3;
margin-left:-250px;
-moz-box-shadow: 0 5px 5px -2px black;
-webkit-box-shadow: 0 5px 5px -2px black;
}

.photo img {
max-width:100px;
max-height:75px;
}

.info {
position:fixed;
width:130px;
height:85px;
bottom:3px;
font-family: Segoe UI, Arial;
color:white;
left:50%;
z-index:3;
font-size:9px;
margin-left:-140px;
text-shadow: 1px 1px 0 black;
}

a.nav {
font-family: Segoe UI, Arial !important;
font-weight: bold !important;
padding-left:9px !important;
font-size: 15px !important;
line-height:10px !important;
font-style:normal !important;
color: white !important;
background-color:transparent !important;
float:left;
}

a.nav:hover {
background-color:transparent;
color:EDE0CC !important;
font-style:normal;
font-weight: bold;
padding-left:9px !important
font-size: 15px;
background-image:url(http://cbimg6.com/layouts/09/08/35488ad.png);
background-repeat:no-repeat;
background-position:center left;
font-family: Segoe UI, Arial;
float:left;
}

.links {
position:fixed;
height:85px;
bottom:7px;
color:white;
left:50%;
background-color:transparent;
z-index:3;
font-size:13px;
margin-left:12px;
text-shadow: 1px 1px 0 black;
}

.links2 {
position:fixed;
height:85px;
bottom:7px;
color:white;
left:50%;
text-align:right;
z-index:3;
font-size:13px;
margin-left:120px;
text-shadow: 1px 1px 0 black;
}

.chocolate {
position:fixed;
_position:absolute;
bottom:0px;
left:50%;
margin-left:-960px;
height:100px;
display:block;
overflow:none;
z-index:2;
-moz-box-shadow: 0 0 1em black;
-webkit-box-shadow: 0 0 1em black;
}

.about { 
display:block;
position:absolute;
width:380px;
top:350px;
left:50%;
margin-left:-240px;
font-weight:normal;
font-family: Segoe UI, Arial;
font-size: 12px;
color: black;
padding-bottom:100px;
}

.r{Text icon}
h1 {
background-image:url(http://i25.tinypic.com/357k5xe.png);
background-repeat:no-repeat;
background-position:center left;
text-align:left;
padding-top:4px;
padding-left:35px;
color: white;
width:390px;
height:30px;
margin-left:-35px;
font-size:17px;
font-weight:bold;
background-color:222222;
font-family: Segoe UI, Arial;
display: block;
margin-top: .5em;
margin-bottom: .5em;
text-shadow: 1px 1px 0 black;
text-transform: none;
}

.r{Chat icon}
h2 {
background-image:url(http://i27.tinypic.com/15f6ti.png);
background-repeat:no-repeat;
background-position:center left;
text-align:left;
padding-top:4px;
padding-left:35px;
color: white;
width:390px;
height:30px;
margin-left:-35px;
font-size:17px;
font-weight:bold;
background-color:222222;
font-family: Segoe UI, Arial;
display: block;
margin-top: .5em;
margin-bottom: .5em;
text-shadow: 1px 1px 0 black;
text-transform: none;
}

.r{Video icon}
h3 {
background-image:url(http://i26.tinypic.com/2rnwxzn.png);
background-repeat:no-repeat;
background-position:center left;
text-align:left;
padding-top:4px;
padding-left:35px;
color: white;
width:390px;
height:30px;
margin-left:-35px;
font-size:17px;
font-weight:bold;
background-color:222222;
font-family: Segoe UI, Arial;
display: block;
margin-top: .5em;
margin-bottom: .5em;
text-shadow: 1px 1px 0 black;
text-transform: none;
}

.r{Image icon}
h4 {
background-image:url(http://i31.tinypic.com/2hxxd2c.png);
background-repeat:no-repeat;
background-position:center left;
text-align:left;
padding-top:4px;
padding-left:35px;
color: white;
width:390px;
height:30px;
margin-left:-35px;
font-size:17px;
font-weight:bold;
background-color:222222;
font-family: Segoe UI, Arial;
display: block;
margin-top: .5em;
margin-bottom: .5em;
text-shadow: 1px 1px 0 black;
text-transform: none;
}

.r{Music icon}
h5 {
background-image:url(http://i30.tinypic.com/faoe8n.png);
background-repeat:no-repeat;
background-position:center left;
text-align:left;
padding-top:4px;
padding-left:35px;
color: white;
width:390px;
height:30px;
margin-left:-35px;
font-size:17px;
font-weight:bold;
background-color:222222;
font-family: Segoe UI, Arial;
display: block;
margin-top: .5em;
margin-bottom: .5em;
text-shadow: 1px 1px 0 black;
text-transform: none;
}

.r{Quote icon}
h6 {
background-image:url(http://i31.tinypic.com/vs16vt.png);
background-repeat:no-repeat;
background-position:center left;
text-align:left;
padding-top:4px;
padding-left:35px;
color: white;
width:390px;
height:30px;
margin-left:-35px;
font-size:17px;
font-weight:bold;
background-color:222222;
font-family: Segoe UI, Arial;
display: block;
margin-top: .5em;
margin-bottom: .5em;
text-shadow: 1px 1px 0 black;
text-transform: none;
}

table, tr, td 
{border: none; background-color: transparent; padding: 0;}
table 
{border: none; background-color: transparent;}
table table 
{border: none; border-color: none; background-color: transparent;}
table table table 
{border:none; background-color: transparent; padding:0;}
table table table table 
{border: none; border-color: none;}
a, a:link, a:active, a:visited 
{color:white; font-size:13px; font-family: times new roman; text-decoration: none; font-weight:bold; font-style:italic; background-color:222222; padding:2px; line-height:10px;}
a:hover 
{color:black; font-size:13px; font-family: times new roman; text-decoration: none; font-weight:bold; font-style:italic; background-color:white; padding:2px; line-height:10px;} 
a:link img, a:visited img {filter: none; border:0px;}

.contacttable, .whitetext12,
.nametext, .lightbluetext8,
.orangetext15,.blacktext12,
.btext,.redtext,
.redbtext, .userprofileurl, 
.interestsanddetails, .userprofiledetail,
.latestblogentry, .blurbs td.text, 
.blurbs .orangetext15, .friendspace,
.friendscomments, .userprofileapp, 
.profileinfo
{display:none !important;}
div.clearfix table div div {display:block;}
table div div, table div font,
div.topnav{ display:none; }
.header_gae {visibility:visible}

.clearfix {margin-top: -45px;  height: -0px; width:63.5%;}
div div, div td {background-color:; background-image:none!important;}
div.profileWidth {margin-top: -57px !important;}
div.profileWidth div.clearfix {position:relative; top:100px !important; margin-left:40px !important;}
.mslogo{display:none!important;}
div div select, div div form {display:none !important;}
div div div select {position:absolute !important;  margin-left:0px !important; left:40px !important; display:none !important;}

a img {border: 0px;}
</style>

Layout Code

Copy and paste to I'd Like to Meet

Help

<div class="info">
<strong>Name:</strong> createblog<br />
<strong>Age:</strong> 18<br />
<strong>City:</strong> Seattle<br />
<strong>Country:</strong> United States<br />
<strong>Status:</strong> Single<br />
<strong>Occupation:</strong> Student<br />
</div>

<div class="about">
<h1>Dark Chocolate</h1>
Dark chocolate is chocolate without milk solids added. Dark chocolate has a more pronounced <a href="#">chocolate</a> taste than milk chocolate, because it does not contain milk solids to compete with the chocolate taste. However, the lack of milk additives also means that dark chocolate is more prone to a dry, chalky texture and a bitter aftertaste.

The basic ingredients in dark chocolate bars are cacao beans, sugar, an emulsifier such as soy lecithin to preserve texture, and <b>flavorings</b> such as vanilla. Dark chocolate is often distinguished by the percentage of cocoa solids in the bar. The cocoa content of commercial dark chocolate bars can range from 30% (sweet dark) to 70%, 75%, or even above 80% for extremely dark bars. Common terms used to distinguish the cocoa content of dark chocolate bars include bittersweet, semi-sweet, and sweet dark chocolate.

<h6>Sunday August 9th, 2009</h6>
Maecenas bibendum lacinia metus, tincidunt dictum turpis <u>fermentum</u> at. Morbi placerat bibendum cursus. Fusce bibendum, ligula et vehicula cursus, ligula est tempus purus, sed tristique sem mauris sit amet turpis. Cras scelerisque tincidunt ante, vel feugiat augue consectetur quis.
<br /> <br />Quisque sed est at quam ornare consectetur eu sit amet nisl. Aenean semper feugiat nibh, et cursus tellus ultrices commodo. Lorem <s>ipsum</s> dolor sit amet, consectetur adipiscing elit. Praesent ut sapien ipsum, at dignissim neque. Cras nec erat vel lacus ultrices tincidunt. Sed a metus sit amet mi semper gravida at sit amet dolor. Duis lorem quam, rhoncus in tincidunt porta, malesuada eget odio. Donec vulputate ligula sed dui euismod adipiscing tincidunt neque hendrerit. Aenean ac leo enim, id lacinia purus. Quisque ac justo a sapien gravida commodo a id leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <i>Nulla</i> facilisi.

<h2>Chat icon using h2</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida leo sodales tortor posuere in sollicitudin metus hendrerit. Morbi molestie congue fermentum. Nulla suscipit tempor laoreet.

<h3>Video icon using h3</h3>
Sed vehicula sapien vel nulla fermentum malesuada. Cras commodo aliquam quam. Etiam quam est, suscipit nec interdum et, fermentum id odio. Aliquam erat volutpat. Pellentesque sollicitudin, nisl in sodales aliquet, erat risus dapibus eros, rutrum convallis felis sem quis nunc. Etiam viverra viverra purus, porttitor vulputate ipsum tempus eu. Ut cursus porta eros at pellentesque. Nunc quis justo est, ac venenatis ipsum. Phasellus nibh lorem, ultrices in mattis vel, suscipit in quam. Suspendisse at quam enim.

<h4>Image icon using h4</h4>
<img src="http://fc02.deviantart.com/fs30/i/2008/047/b/3/my_sweet_valentine_by_Unwrittenx.jpg">

<h5>Music icon using h5</h5>
Aliquam feugiat auctor malesuada. Sed ullamcorper faucibus iaculis. Praesent id leo quis quam accumsan dapibus mollis faucibus neque. Nunc vehicula tristique metus sed tristique. Donec pretium porttitor pulvinar. Sed in erat eu urna porta fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<h6>Quote icon using h6</h6>
Praesent sit amet augue vitae ligula consequat dignissim in vitae leo. Fusce at dui id mauris rhoncus congue vitae vel felis. Suspendisse congue rhoncus nunc, sed bibendum metus volutpat non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu diam nec velit lacinia mollis. Integer a nulla vitae elit mollis convallis.

</div>

<div class="links">
<p><a href="http://home.myspace.com/index.cfm?fuseaction=user" class="nav">home</a></p>
<p><a href="http://friends.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendId=XXXXXXXX" class="nav">add</a></p>
<p><a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXXXX" class="nav">message</a></p>
<p><a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=XXXXXXXX" class="nav">comment</a></p>
</div>

<div class="links2">
<p><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=XXXXXXXX" class="nav">pictures</a></p>
<p><a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=XXXXXXXX" class="nav">friends</a></p>
<p><a href="http://friends.myspace.com/index.cfm?fuseaction=block.blockUser&userID=XXXXXXXX" class="nav">block</a></p>
<p><a href="http://blog.myspace.com/XXXXXXXX" class="nav">blog</a></p>
</div>

Layout Comments

Showing latest 10 of 17 comments

Btw the design is excellent!

By iPwn on Sep 18, 2009 9:35 am

hey im new at myspace can anyone say me why this theme show me inside the about me: box?

By iPwn on Sep 18, 2009 9:35 am

Wow, this is awesome. It doesn't even look like a MySpace layout till you see the navigation.

By tokyo-rose on Aug 25, 2009 6:28 pm

I don't like Dark Chocolate.. but I love all the detail into the coding.!

By dilligrout on Aug 12, 2009 8:18 pm

HOLY SHIT, this looks great!! I love the coding too! :DDD FAVED.

By Mikeplyts on Aug 12, 2009 5:40 pm

I personally dont like dark chocolate, but I love the layout :D

By SaturdayRiot on Aug 12, 2009 8:34 am

LOL. When I saw this, the first thing I thought of was tumblr. xD

By MemoriesWithin on Aug 11, 2009 5:04 pm

UGH. I want to use this so freaking bad but the ad doesn't show.

By WizardMadds on Aug 11, 2009 2:52 pm

Oh, wait.
Nevermind, I reread what you wrote.

By Amaranthus on Aug 11, 2009 10:30 am

The preview appears to be greatly misaligned. Even with IE7.

By Amaranthus on Aug 11, 2009 10:29 am

View all »

Layout Details

Designer	crafty-designs
Submitted on	Aug 10, 2009
Page views	15,841
Favorites	52
Comments	17
Reviewer	Mike
Approved on	Aug 10, 2009

Dark Chocolate

Designer's Comments

Using This Layout

Update Friend ID

Layout Code

Layout Code

Layout Comments

Layout Details

Layout Colors

Layout Tags

Layout Tools

Layout Affiliates