Butterfly Kiss

Designer's Comments

Look carefully for specific instructions

Please do not change the images in any way. DO NOT REMOVE THE CREDIT. You can edit the navigation/content/etc as you want. :)

Tested in Firefox and Internet Explorer, and it should work in most screen resolutions. (made in 1200 x 800 Firefox)

Oh, pls check out my little website. :)

---------------------
Credits
Resources used from Damnicons, Deandesign, and Luciferous-glow. Image was found on Aethereality Gallery.

Layout Code

Copy and paste to Template HTML

Help

<title>Butterfly Kiss</title>

#content A, A:link, A:visited { text-decoration: none; color:#b8547e; cursor: crosshair; font-family: "trebuchet ms"; font-size: 9pt;}
#content A:hover { text-decoration:none; color:#d688a8; cursor: crosshair; font-family: "trebuchet ms"; font-size: 9pt;}

b {font-weight: bold; color: #6e95b8; font-family: arial;}
i {font-family: "georgia"; font-size: 13px; color: #4b2f6a;}
u {text-decoration: underline; color: #609b79; font-family: century gothic; font-size: 12px; letter-spacing: -1px;}

#update p {_line-height: 10px;}

#navigation A, #navigation A:link, #navigation A:visited {font-size:8pt; color:83a7b8; background-color:#201b28; text-transform: capitalize; line-height:15px; display: block; text-decoration: none; padding: 0px 0px 4px 12px; border-bottom: 1px #354950 solid;}
#navigation A:hover {text-transform: uppercase; color:#83a7b8; background-color:#37465a; line-height:15px; letter-spacing:0px; display: block; text-decoration: none; padding: 0px 0px 4px 12px; border-bottom: 1px #201b28 solid;}

body {
	background: #676767;
	text-align: center;
   	min-width: 780px;
}

div.wrapper {
  	 text-align: left;
  	 margin-left: auto;
  	 margin-right: auto;
}
#container {
	background: url(http://cbimg6.com/layouts/08/09/31164aa.jpg) repeat-y; 
	width: 780px; 
	margin: 0 auto;}

#header1 {width: 780px; height: 100px; background: url(http://cbimg6.com/layouts/08/09/31164ab.jpg) no-repeat;}
#header2 {width: 780px; height: 100px; background: url(http://cbimg6.com/layouts/08/09/31164ac.jpg) no-repeat;}
#header3 {width: 780px; height: 200px; background: url(http://cbimg6.com/layouts/08/09/31164ad.jpg) no-repeat;}
#header4 {width: 780px; height: 111px; background: url(http://cbimg6.com/layouts/08/09/31164ae.jpg) no-repeat;}

#footer {
	clear: both;
	background: url(http://cbimg6.com/layouts/08/09/31164af.jpg) no-repeat; 
	height: 25px;
	margin: 0;
}

#update {
	width: 308px; 
	height: 135px;
	float: left;
	margin-top: -435px;
	_margin-top: -437px;
	margin-left: 415px;
	color: #6b5476;
	font-family: "verdana";
	word-spacing: -1px;
	font-size: 10px;
	line-height: inherit;
	_line-height: inherit;
	vertical-align: middle;
}

#content {
	width: 370px;
	float: left;
	margin-top: -280px;
	_margin-top: -270px;
	margin-left: 111px;
	text-align: center;
}
#navigation {
	width: 180px;
	float: left;
	text-align: center;
	margin-top: -100px;
	margin-left: 85px;
}

#zone1 {    /* imagemap */
float: left;
width : 20px;
height: 136px;
margin-left: 341px;
margin-top: 23px;
text-decoration: none;
border: none;
cursor: crosshair;
}
body {color:#777777;font-family: tahoma; font-size: 11px; line-height: 17px;}

h1 { display: block; margin-left: auto; margin-right: auto; font-weight: bold; font-family: "georgia"; font-size: 11pt; text-align: center; word-spacing: 2px; letter-spacing: 1px; color: #9db2dd; background-color: #474148; height: 18px; margin-bottom: -5px; _margin-bottom: -6px; margin-top: 10px;}
.head0 {COLOR:#bac070;background-color:#180606;line-height:15px;text-transform: uppercase;font-family:georgia;FONT-SIZE:8pt;letter-spacing:1; text-align:right; text-decoration:none; display: block; padding-bottom: 5px;}

</style></head>
<body>
<div id="container">
<div id="header1"></div><div id="header2"></div><div id="header3"><a id="zone1" href="http://dreamgurl36.createblog.com" title="Designed & Coded By: dreamgurl36"></a></div><div id="header4"></div>
<div class="wrapper">

<div id="update">
<i>September 04:</i> My website has a fabulous layout!<p>
<i>September 03:</i> The BLAH section was updated!<p>
<i>September 02:</i> I added new stuff in the blah blah!<p>
<i>September 01:</i> Go check out the new blah blah!<p>
</div>

<div class="head0">Navigation</div>
<a href="#">Home</a>
<a href="#">Visitor Content</a>
<a href="#">Downloads</a>
<a href="#">Webmistress</a>
<a href="#">About The Site</a>
<a href="#">FAQ</a>
<a href="#">Contact Me</a>

<br>
<div class="head0">Affiliates</div>
<a href="#">Link Here</a>
<a href="#">Link Here</a>
<a href="#">Link Here</a>
<a href="#">Link Here</a>
<a href="#">Link Here</a>
<a href="#">Link Here</a>
<br>
<div class="head0">Credits</div>
<a href="http://dreamgurl36.createblog.com">dreamgurl36</a>

</div>

<h1>About This Layout</h1>

<p>Hmmm, I quite like how this one turned out. I really liked the image when I first saw it, so naturally I had to make a layout out of it. I didn't make a dark-ish layout for quite a while now... so that was a nice change. :D And the good part? It's centered! ^o^ A lot of time was spent on <u>coding</u> this layout, getting headaches with CSS while trying to style everything. -_-</p>

<p>Anyway... this is where your main content will go~! Fill up as much or as little as you want! XD It's all up to you! Please do NOT change the images/layout in any way. And it goes without saying.... <b>do not remove the credit</b>. I mean... I've taken the ultra long time to code this, so the least you can do is leave the credit there. But of course.... you may edit the navigation, contents, and such to suit your website needs. Oh, and for the update box up there, there is a limit of only 4 updates at a time if you want everything to look pretty as it is without anything messing up. Use the <i> </i> tags for the dates.

<p>I think you'd need some basic knowledge of html and css to be able to fully make use of this layout. But it's nothing too complicated. There are plenty of tutorials on the web, and even some on <a href="http://www.createblog.com" target="_blank">CreateBlog</a> too. This layout was tested in both <b>Internet Explorer</b> and <b>Firefox</b>. In Firefox, the font of the text will be slightly different. Other than that, it works perfectly fine, compatible in both browsers. ^^ Oh, and it works in <u>all resolutions</u> too. :)</p>

<p>CSS Styling: <b>bold text</b>, <u>underlined text</u>, <a href="#">a link</a></p>

<h1>Header Title Goes Here</h1>
<p>content content content content content content content content content content content content content content content content content content content content content content content content  content content content content content content content content content content content content</p>
<p>content content content content content content content content content content content content content content content content content content content content content content content content  content content content content content content content content content content content content</p>

</div>

Layout Comments

Showing latest 10 of 15 comments

So beautiful! Where ever did you find such a gorgeous image? I have a weakness for butterflies, blue ones especially.

By julesrules84 on Jun 30, 2011 2:21 am

great job here! looks beautiful!

By calilani on Mar 18, 2009 2:13 am

mf??

Sorry, dunno why it's not working for you. =/

By dreamgurl36 on Feb 17, 2009 10:21 am

another problem XD
watch http://the-starry-sky.myblog.d e/
is it for mf too?

By azmaria-san on Feb 12, 2009 3:22 pm

O__o omg xDD
embarrassing
Then i take this for my website :D Thank You!

By azmaria-san on Feb 12, 2009 3:19 pm

Sorry, this layout is not for myspace. It's for a website. :O

By dreamgurl36 on Feb 12, 2009 2:22 pm

Can you explain the problem? What are you having trouble with? :o

By dreamgurl36 on Feb 8, 2009 4:00 pm

It didnt work. can me help somebody? Please? ;__; it is so cute.

By azmaria-san on Feb 8, 2009 3:53 pm

Cuuuuuuuuuuuute

By azmaria-san on Feb 8, 2009 3:53 pm

soooo cutteeee

By SXCii on Sep 23, 2008 3:51 pm

View all »

Layout Details

Designer	dreamgurl36
Submitted on	Sep 5, 2008
Page views	8,251
Favorites	74
Comments	15
Reviewer	schizo
Approved on	Sep 5, 2008

Butterfly Kiss

Designer's Comments

Layout Code

Layout Comments

Layout Details

Layout Colors

Layout Tags

Layout Tools

Layout Affiliates