Puppy Love (Myspace Version)

Designer's Comments

Look carefully for specific instructions

From the original layout I made as a website template -
I had a few requests to make this into a Myspace layout, so I decided to give it a shot. This is actually my first ever attempt at a myspace layout. xD

As far as I know, I've worked out the issues in Internet Explorer, but for the time being I have no way to test it. If you come across any issues, feel free to let me know.

See the layout preview for any specific instructions.

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-color: f9dee0;
	background-image: url(http://cbimg6.com/layouts/08/03/08/26061aa.png);
	background-repeat: repeat-x;
	background-attachment: fixed;
}

table {
	visibility: hidden;
}

div table {
	background-color: transparent;
}

.main {
position: relative;
left: 30px;
top: -265px;
width: 752px;
z-index: 5;
margin-left: -375px;
}

.header {
background: url(http://cbimg6.com/layouts/08/03/08/26061ab.png) no-repeat;
position: absolute;
left: 50%;
margin-left: -375px;
top: 1px;
z-index: 10;
width: 750px;
height: 490px;
}

.content {
	background-color: f9dadd;
	width: 750px;
	_width: 752px;
	position: absolute;
	left: 50%;
	margin-left: -376px;
	top: 490px;
	min-height: 100%;
	height: auto;
	border-left-style: solid;
	border-left-width: 1px; 
	border-left-color: d7737a;
	border-right-style: solid;
	border-right-width: 1px; 
	border-right-color: d7737a;
	padding-bottom: 10px;
	_border-bottom-style: solid;
	_border-bottom-width: 1px; 
	_border-bottom-color: d7737a;
}

.content h2 {
	background-color: e06c76;
	width: 500px;
	margin-top: 10px;
	margin-left: 5px;
	padding-top: 3px;
	padding-right: 5px;
	height: 23px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: ffffff;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: fff;	
	color: fff;
	font-family: Georgia;
	font-size: 16pt;
	font-weight: normal;
	text-align: right;
}

.content h3 {
	background-color: e4b5b9;
	width: 500px;
	margin-top: 5px;
	margin-left: 5px;
	padding-top: 3px;
	padding-left: 5px;
	height: 23px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: e06c76;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: e06c76;	
	color: d85661;
	font-family: Georgia;
	font-size: 16pt;
	font-weight: normal;
}

.content p {
	width: 500px;
	padding-left: 5px;
	margin-top: -7px;
	margin-left: 5px;
	color: c44650;
	font-family: Tahoma;
	font-size: 10pt;
	text-align: justify;
}

.sidebar {
	position: relative;
	top: 485px;
	_top: 495px;
	width: 225px;
	left: 50%;
	margin-left: 143px;
	height: auto;
}
	
.sidebar ul.nav {
	list-style-type: none;
	width: 225px;
	_width: 265px;
	_margin-left: -40px;
	text-align: right;
	background-color: ffc0cb;
	padding-left: 0px;
}

.sidebar .nav li a {
	color: c44650;
	display: block;
	text-decoration: none;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: fff;
	padding: 3px 5px 0px 0px;
	width: 220px;
	font-family: Georgia;
	font-size: 10pt;
}

.sidebar .nav li a:hover {
	color: fff;
	background-color: c44650;
	width: 210px;
	padding: 3px 5px 0px 0px;
	border-left-style: solid;
	border-left-color: fff;
	border-left-width: 10px;
}

.sidebar h2 {
	width: 223px;
	height: 24px;
	padding-top: 3px;
	padding-left: 2px;
	margin-bottom: -5px;
	font-family: Georgia;
	font-size: 14pt;
	font-weight: normal;
	text-align: left;
	color: fff;
	background-color: f76881;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: fff;
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	border-bottom-color: fff;
}

.sidebar h3 {
	width: 223px;
	height: 24px;
	padding-top: 3px;
	padding-right: 2px;
	margin-bottom: -5px;
	font-family: Georgia;
	font-size: 14pt;
	font-weight: normal;
	text-align: right;
	color: c44650;
	background-color: ffc0cb;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: fff;
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	border-bottom-color: fff;
}

.sidebar p {
	color: da7788;
	font-family: Tahoma;
	font-size: 10pt;
	text-align: justify;
}

a:link, a:visited, a:active {
	color: 7f0f23;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

.commentbox input {
	color: ffffff;
	background-color: d7737a;
	border-width: 1px;
	border-style: solid;
	border-color: ffffff;
	margin-left: 6px;
	margin-top:4px;
}

.commentbox input:hover {
	color: d7737a;
	background-color: f9dadd;
	border: 1px solid;
	border-color: d7737a;
}

.commentbox input:focus {
	color: 555555;
	border: 1px solid;
	border-color: 555555;
}

.commentbox textarea {
	margin-top: 5px;
	background-color: ffffff;
	border: 1px solid;
	border-color: d7737a;
	font-family: Tahoma;
	font-size: 10px;
	color: d7737a;
}

</style>

Layout Code

Copy and paste to I'd Like to Meet

Help

<div class="main">
<table style="width: 752px;
height: auto;
cellpadding: 0px;
cellspacing: 0px;
border-left-style: solid;
border-left-width: 1px; 
border-left-color: d7737a;
border-right-style: solid;
border-right-width: 1px; 
border-right-color: d7737a;
border-top-style: solid;
border-top-width: 1px; 
border-top-color: d7737a;
background-color: f9dadd;
visibility: visible;">
<tr><td valign="top">
<div class="header"> </div>
<div class="content">
<h2>About this Layout</h2>
<p>Usage of this layout is fairly simple, but you will need, obviously, to edit parts of the code to suit your needs. If you'll notice, I alternated content headers - h2 for odd rows, h3 for even rows. I've done the same thing in the sidebar to make it easy. The link section in the sidebar can be modified to whatever you want, but be sure to replace the xxxxxx's with your friend ID. You can add as many links as you want, and the sidebar will stretch. Everything else is fairly self-explanatory, but if you have problems figuring anything out, feel free to send me a PM or post a question on the forums.</p>

<p>One issue I noticed is that in Internet Explorer, if the sidebar is longer than the content, the background gets cut off. One way to solve this problem is by adding a few line breaks, but maybe you'll have enough content to fill the page anyway. :) To my knowledge, this issue does not exist in Firefox or Safari.</p>

<h3>Disclaimer</h3>
<p>I'm not at all a possessive person, so I have very loose requirements as far as the use of this layout. You are free to alter any part of this layout for your personal use to suit your needs, including changing the images if that is what you wish to do. If you are using this on your personal site, I have no problems if you decide you wish to remove the credit. However, as is often the case, if you decide to modify this layout and distribute it elsewhere, it would be awesome if you could message me first to let me know. I asked for permission from a lovely photographer at <a href="http://sxc.hu">sxc.hu</a> to use the image for a layout, and he kindly said yes; so it would be fantastic if you could leave his credit intact as thanks for providing this great picture.</p>

<h2>Content Title</h2>
<p>Nullam velit. Nullam at dui a odio porta ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla auctor erat eu dolor. Praesent venenatis. Nunc vitae ante eget erat placerat varius. Vivamus odio. Aenean quis est. Nullam libero quam, vehicula et, adipiscing vel, bibendum vitae, magna. Nullam ullamcorper. Maecenas tincidunt laoreet sapien. Nulla semper pellentesque massa. Phasellus vitae pede eget leo consequat tristique.</p>

<h3>Content Title</h3>
<p>Donec feugiat adipiscing risus. Fusce tempus ipsum non urna. Nam consectetuer, lorem et volutpat tristique, augue ligula varius dolor, ut ultrices nibh purus vitae sem. Praesent arcu est, tempus id, faucibus eu, gravida id, purus. Donec tempus ante eu purus. Vestibulum adipiscing ullamcorper pede. Quisque risus dolor, malesuada ut, placerat sit amet, ullamcorper sed, diam. Morbi tortor diam, condimentum sed, eleifend a, accumsan in, pede. In aliquet sapien nec nisi. Sed aliquam. Aenean lacus mauris, nonummy vitae, viverra ac, ullamcorper vel, ligula. Curabitur sed quam a quam imperdiet cursus. Praesent suscipit, nunc gravida ornare hendrerit, risus odio sodales dolor, vitae posuere magna turpis sed mauris. Vestibulum convallis nisl eget sapien. Ut vestibulum, libero id auctor lacinia, sapien velit congue mauris, sit amet aliquam lorem nibh vel tellus. Maecenas gravida pede non tortor. Sed tempus, eros blandit cursus ultricies, urna augue dignissim metus, et pretium lorem lectus rutrum dolor. In cursus, dolor nec molestie suscipit, urna mauris lacinia dui, in consectetuer orci turpis nec urna. Donec semper eleifend ipsum.</p>

</div>
<div class="sidebar">
<ul class="nav">
	<li><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=185506631">Home</a>
	<li><a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=185506631">Add to Friends</a>
	<li><a href="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=185506631">Send a Message</a>
	<li><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=185506631">Pictures</a>
	<li><a href="http://home.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=185506631">View Friends</a>
	<li><a href="link">Random Link</a>
</ul>

<h2>Random Sidebar Stuff</h2>
<p><img src="http://cbimg6.com/layouts/08/03/08/26061ac.png" align="right" style="padding-left: 5px" />
About me. People like this sort of thing, so here you go, for uh, some reason. Random stuff such as your birthday and eye color and.. what? You don't like to talk about yourself? Doesn't everyone?</p>

<h3>Another Section</h3>
<p>If, for some reason, there was anything else you wanted to put in your sidebar, by all means feel free. Some people do affiliate links and patches and other things that I don't understand. The main thing is, customize it! That's what it's here for!</p>

<h2>Credit</h2>
<p>Layout created and provided by
	<a href="http://libertie.createblog.com/">libertie</a> of
	<a href="http://createblog.com">CreateBlog</a>.
Image used with permission from
<a href="http://www.sxc.hu/profile/omar_franc">Omar Franco</a>.</p>

<h3>Comments</h3><br /><br />
<div class="commentbox">
<center>Add Comment / <a href="http://www.myspace.com/index.cfm?fuseaction=user.homeComments&friendID=185506631">View All</a><br />
<form method="post"
action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment">
<input type="hidden" name="friendID" value="InsertFRIENDID">
<textarea name="f_comments" cols="25" rows="5"></textarea><br />
<input type="submit" value="Post">
</form>
</center>
</div>
</div>
</td></tr></table></div>

Layout Comments

Showing latest 10 of 14 comments

awww..

By iheartkwonjiyong on Dec 29, 2008 2:25 am

how can i center the layout? in Firefox, it is left-justified

By emallee on Jun 26, 2008 3:10 pm

cute layout, im a fan of the pink!

By sweetphatty on May 29, 2008 9:54 am

Can I please request a favor of this layout with one of my own pictures? Will you be able to do it?

By xxnanaboo on May 16, 2008 11:47 pm

When friends send comments in the box, after clicking the POST button, it says invalid friend ID, but I already replaced it with my #. Can you please fix the code for me? Thanks! I still love the layout! :)

By xpiqqiex on Mar 24, 2008 10:42 pm