Puppy Love

Designer's Comments

Look carefully for specific instructions

Decided to do something a bit new. I don't know what my deal is with pink lately.

Image used with permission from sxc.hu.
Photographer: http://www.sxc.hu/profile/omar_franc

Usage - I left this partially plain because I wanted to make it as customizable as possible. Feel free to make any changes you think might be necessary. :)

Note to anyone altering the layout -
This layout uses a conditional statement that has styles for Internet Explorer. If you change anything and find that it's very messed up in IE, you may try changing that portion as well.

edit; To those who asked for a myspace layout, thanks for your interest - you may find it here:
http://www.createblog.com/layouts/code.php?id=26061

Layout Code

Copy and paste to Template HTML

Help

<html>
<head>
<style type="text/css">
body {
background: #f9dee0 url(http://cbimg6.com/layouts/08/03/08/26027ab.png) fixed repeat-x;
}
#header {
background: url(http://cbimg6.com/layouts/08/03/08/26027ac.png) no-repeat;
position: absolute;
left: 50%;
margin-left: -375px;
top: 20px;
width: 750px;
height: 490px;
border-left: 1px solid #d7737a;
border-right: 1px solid #d7737a;
border-top: 1px solid #d7737a;
}
#content {
	background: #f9dadd;
	width: 750px;
	position: absolute;
	left: 50%;
	margin-left: -375px;
	top: 510px;
	min-height: 100%;
	height: auto;
	border-left: 1px solid #d7737a;
	border-right: 1px solid #d7737a;
	padding-bottom: 50px;
}

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

#content h3 {
	background: #e4b5b9;
	width: 500px;
	margin-top: 5px;
	margin-left: 5px;
	padding-top: 3px;
	padding-left: 5px;
	height: 23px;
	border-top: 1px solid #e06c76;
	border-bottom: 1px dashed #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: 505px;
	width: 225px;
	left: 50%;
	margin-left: 143px;
	height: auto;
}
	
#sidebar ul.nav {
	list-style-type: none;
	width: 225px;
	text-align: right;
	background: #ffc0cb;
	padding-left: 0px;
}

#sidebar .nav li a {
	color: #c44650;
	display: block;
	text-decoration: none;
	border-bottom: 1px solid #fff;
	padding: 3px 5px 0px 0px;
	width: 220px;
}

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

#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: #f76881;
	border-top: 1px solid #fff;
	border-bottom: 1px dashed #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: #ffc0cb;
	border-top: 1px solid #fff;
	border-bottom: 1px dashed #fff;
}

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

a:link, a:visited, a:active {
	color: #7f0f23;
}

a:hover {
	text-decoration: none;
}
</style>

<!--[if IE]>
<style type="text/css">
#sidebar {
	position: relative;
	top: 505px;
	width: 225px;
	margin-left: 130px;
	left: 50%;
	height: auto;
}

#sidebar ul.nav {
	width: 248px;
	margin-left: -20px;
	list-style-type: none;
	text-align: right;
	background: #ffc0cb;
	padding-left: 0px;
}

#sidebar .nav li a {
	width: 248px;
	color: #c44650;
	display: block;
	text-decoration: none;
	border-bottom: 1px solid #fff;
	padding: 3px 5px 0px 0px;
}	
	
#sidebar .nav li a:hover {
	width: 238px;
	color: #fff;
	background: #c44650;
	padding: 3px 5px 0px 0px;
	border-left: 10px solid #fff;
}

#sidebar h2 {
	width: 230px;
	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: #f76881;
	border-top: 1px solid #fff;
	border-bottom: 1px dashed #fff;
}

#sidebar h3 {
	width: 230px;
	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: #ffc0cb;
	border-top: 1px solid #fff;
	border-bottom: 1px dashed #fff;
}
</style>
<![endif]-->
</head>
<body>
<div id="header"> </div>
<div id="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. Everything 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>

<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 id="sidebar">
<ul class="nav">
	<li><a href="link">Home</a>
	<li><a href="link">About Me</a>
	<li><a href="link">Photo Gallery</a>
	<li><a href="link">Contact</a>
	<li><a href="link">Blog</a>
	<li><a href="link">Random Link</a>
</ul>

<h2>Random Sidebar Stuff</h2>
<p><img src="http://cbimg6.com/layouts/08/03/08/26027aa.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>.
</div>
</body>
</html>

Layout Comments

Showing latest 8 of 8 comments

i love this layout. everything about it.well done

By --broadwaydream on Mar 8, 2008 3:05 pm

awww, this is so sweet.
great job.

By aaayotiffany on Mar 8, 2008 2:08 pm

I really like this one. The banner is kind of plain, but that can easily be modified. Keep it up!

By livwho on Mar 8, 2008 1:32 pm

I love this! Can you make it for Myspace? Please!

By TerpBabe11 on Mar 8, 2008 11:18 am

The banner is slightly too big to be left blank like that, but it's a sweet layout. :3

By tokyo-rose on Mar 8, 2008 10:27 am

You did a very good job on all your layout. and thanks for letting us use them. I really want this layout. but I try to put it on my-myspace it don't show..help!

By PainOfLovinYou on Mar 8, 2008 8:55 am

Those kids are like uber ugly lol

By AlluivialL on Mar 8, 2008 6:24 am

Wow I really like this! It's really sweet, everything fits well together. You did a fantastic job!

By dreamgurl36 on Mar 8, 2008 4:15 am

Layout Details

Designer	libertie
Submitted on	Mar 8, 2008
Page views	7,424
Favorites	18
Comments	8
Reviewer	agiri
Approved on	Mar 8, 2008

Puppy Love

Designer's Comments

Layout Code

Layout Comments

Layout Details

Layout Tags

Layout Tools

Layout Affiliates