Jane & John

If you don't want to host the pictures yourself you only have to copy and paste the code from below into your blog. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type" /> <style type="text/css"> /* *** Generated by www.csscreator.com *** */ html, body{ margin:0; padding:0; background-color: #bdd99a; font-family: 'trebuchet ms', verdana, helvetica, sans-serif; font-size: 95%; } #pagewidth{ width:840px; min-width: 500px; } #leftcol{ width:330px; float:left; position:relative; margin-left:-330px; margin-right:1px; } #outer{ border:solid #bdd99a 0px; /*/*/ border-left-width: 330px ; /* left column width. NN4 hack to hide borders */ border-left-color: #bdd99a; /* left column colour */ border-left-style: solid; background-color: #bdd99a; /* center column colour */ width: auto; } #inner{margin:0; width:100%;} #maincol{ float: left; width: 100%; position: relative; margin: 0 -8px 0 -2px; } #outer>#inner { border-bottom: 1px solid #bdd99a; } .clr{clear:both;} .content{ padding:10px; margin:0 40px 0 40px } /*padding for content */ .content-sidebar{ padding:10px; margin:0 40px 0 20px } #header .content{padding-bottom:0;} /*padding bottom 0 to remove space in IE5 Mac*/ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} #outer{border-left:0;} } #rose { background: #bdd99a url('http://www.geocities.com/susieswe/springwedding/rose.jpg') no-repeat; width:330px; height:203px; margin:25px 0 0 0; } #text{ background: #bdd99a url('http://www.geocities.com/susieswe/springwedding/text.jpg') no-repeat; width:509px; height:119px; margin:25px 0 0 0; } #main{ background: #bdd99a url('http://www.geocities.com/susieswe/springwedding/mainback.jpg') repeat-y; width:509px; margin:0; } #topmain{ background: #bdd99a url('http://www.geocities.com/susieswe/springwedding/topmain.jpg') no-repeat; width:509px; height:43px; margin:0; } #bottommain{ background: #bdd99a url('http://www.geocities.com/susieswe/springwedding/bottommain.jpg') no-repeat; width:509px; height:49px; margin:0; } .container{ background: #bdd99a url('http://www.geocities.com/susieswe/springwedding/sidebar.jpg') repeat-y; width:331px; margin:0; } .topcontainer{ background: #bdd99a url('http://www.geocities.com/susieswe/springwedding/topsidebar.jpg') no-repeat; width:331px; height:38px; margin:0; } .bottomcontainer{ background: #bdd99a url('http://www.geocities.com/susieswe/springwedding/bottomsidebar.jpg') no-repeat; width:331px; height:41px; margin:0; } #aboutus{ background: #bdd99a url('http://www.geocities.com/susieswe/springwedding/aboutus.jpg') no-repeat; width:331px; height:65px; margin:0; } #previousposts{ background: #bdd99a url('http://www.geocities.com/susieswe/springwedding/previousposts.jpg') no-repeat; width:331px; height:65px; margin:0; } #archives{ background: #bdd99a url('http://www.geocities.com/susieswe/springwedding/archives.jpg') no-repeat; width:331px; height:65px; margin:0; } #links{ background: #bdd99a url('http://www.geocities.com/susieswe/springwedding/links.jpg') no-repeat; width:331px; height:65px; margin:0; } #credits{ background: #bdd99a url('http://www.geocities.com/susieswe/springwedding/credits.jpg') no-repeat; width:331px; height:65px; margin:0; } /* Blog title and description ----------------------------------------------- */ #blog-title { color:#f35e48; font-weight:bold; font-size:2em; margin: 0; } #description { margin: 0; } /* Profile ----------------------------------------------- */ .profile-datablock { margin:0px 5px 0px 0px; line-height:1.1em; } .profile-img { display:inline; } .profile-img img { float: left; margin: 0px 5px 10px 3px; border: 3px double #83b545; } .profile-img a:hover img { border-width:0; background-color:#eedfd3; padding:0; margin: 0px 5px 10px 3px; border: 3px double #83b545; } .profile-img a:hover { background-color:#eedfd3; padding:0; } .profile-data { margin:0px 5px 0px 0px; line-height:1.1em; } .profile-data a { margin:0px 5px 0px 0px; line-height:1.1em; } .profile-data strong { display:block; } .profile-textblock { clear:left; margin: 5px 4px 0px 0px; line-height:1.1em; } /* Links ----------------------------------------------- */ a:link { color:#e65927; text-decoration:none } a:visited { color:#6bb50e; text-decoration:none } a:hover { color:#ff7746; text-decoration:none; } a img { border-width:0; background-color:#eedfd3; padding:0; } a:hover img { border-width:0; background-color:#eedfd3; padding:0; } /* Posts ----------------------------------------------- */ .date-header { color:#f35e48; font-weight:bold; font-size:1.3em; letter-spacing:.3em; margin:20px 0px 10px 5px; } .post-title { font-size: 1.4em; letter-spacing:.2em; color:#83b545; margin:15px 0px 8px 0px; } .post-title a, .post-title strong { color:#83b545; text-decoration:none; margin:15px 0px 8px 0px; } .post-title a:hover { color:#83b545; text-decoration:none; margin:15px 0px 8px 0px; } .post-body { line-height:1.3em; } p.post-footer { padding:3px; text-align:right } p.post-footer em { display:block; float:left; text-align:left; font-style:normal; color:#020704; } a.comment-link { /* IE5.0/Win doesn't apply padding to inline elements, so we hide these two declarations from it */ padding-left:5px; } html>body a.comment-link { /* Respecified, for IE5/Mac's benefit */ padding-left:5px; } .post img { margin:0px 0px 5px 0px; padding:4px; } /* Comments ----------------------------------------------- */ #comments h4 { font-size: 1.1em; color:#f35e48; letter-spacing:.1em; } #comments-block { line-height:1.1em; } .comment-poster { margin:.5em 0 0; padding:0 0 0 5px; font-weight:bold; line-height:1.1em; } .comment-body { margin:5px; padding:5px; line-height:1.1em; } .comment-timestamp { margin:0 0 .5em; padding:0 0 .75em 20px; color:#e65927; line-height:1.1em; } .comment-timestamp a:link { color:#e65927; } .deleted-comment { font-style:italic; color:gray; } .ornament{ text-align: center; } </style> <title><$BlogPageTitle$></title> </head> <body>  <div id="pagewidth" > <div id="outer" > <div id="inner"> <div id="leftcol" > <div id="rose"> </div> <div class="topcontainer"> </div> <div class="container"> <div class="content-sidebar"> <h1 id="blog-title"><$BlogTitle$></h1> <p id="description"><$BlogDescription$></p> </div></div> <div class="bottomcontainer"> </div> <div id="aboutus"> </div> <div class="container"> <div class="content-sidebar">  <div id="profile-container"><dl class="profile-datablock"> <dt class="profile-img"> <a href="<$BlogOwnerProfileUrl$>"><img src="<$BlogOwnerPhotoUrl$>" alt="Our photo"></a></dt><br /> <dd class="profile-data"> <strong>Name:</strong> <$BlogOwnerNickname$> <strong>Location:</strong> <$BlogOwnerLocation$> </dd> </dl> <p class="profile-textblock"> <strong>About us:</strong> <$BlogOwnerAboutMe$><br /> <a href="<$BlogOwnerProfileUrl$>">See our complete profile</a></p> <p> <strong>Email:</strong> <a href="mailto:<$BlogOwnerEmail$>"><$BlogOwnerEmail$></a> </p> </div>  </div></div> <div class="bottomcontainer"> </div> <div id="previousposts"> </div> <div class="container"> <div class="content-sidebar">  <BloggerPreviousItems> <a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a><br /> </BloggerPreviousItems>  </div></div> <div class="bottomcontainer"> </div> <div id="archives"> </div> <div class="container"> <div class="content-sidebar">  <BloggerArchives> <a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a><br /> </BloggerArchives>  </div></div> <div class="bottomcontainer"> </div> <div id="links"> </div> <div class="container"> <div class="content-sidebar">  Insert your links here  </div></div> <div class="bottomcontainer"> </div> <div id="credits"> </div> <div class="container"> <div class="content-sidebar">  <a href="http://blogger.com/" title="BLOGGER"><img src="http://buttons.blogger.com/bloggerbutton1.gif" /></a><br /> <p>Design by <a href="http://susiesdesign.blogspot.com">Susie</a></p> <p>Font <a href="http://www.creativespirits.net/typeface/details.php?image_id=103" target="_blank">Harrington</a></p> <p>Photo of rose by <a href="http://www.sxc.hu/browse.phtml?f=profile&l=csuki" target="_blank">csuki</a> at <a href="http://www.sxc.hu/browse.phtml?f=view&id=144653" taget="_blak">stock.xhng</a><br />The author of the photo must be contacted and credited when using the photo for any commercial work.</p> <p> <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.0/"><img alt="Creative Commons License" border="0" src="http://creativecommons.org/images/public/somerights20.gif" /></a><br /> This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.0/">Creative Commons License</a>. </p>  </div></div> <div class="bottomcontainer"> </div>  </div> <div id="maincol" > <div id="text"> </div> <div id="topmain"> </div> <div id="main"> <div class="content">  <Blogger>  <BlogDateHeader> <h2 class="date-header"><$BlogDateHeaderDate$></h2> </BlogDateHeader>   <div class="post"><a name="<$BlogItemNumber$>"></a> <BlogItemTitle> <h3 class="post-title"><BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl> <$BlogItemTitle$> <BlogItemUrl></a></BlogItemUrl></h3> </BlogItemTitle>   <div class="post-body"> <p><$BlogItemBody$></p> </div>   <p class="post-footer"> <em>posted by <$BlogItemAuthorNickname$> @ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em> <MainOrArchivePage><BlogItemCommentsEnabled> <a class="comment-link" href="<$BlogItemPermalinkURL$>#comments"><$BlogItemCommentCount$> comments</a> </BlogItemCommentsEnabled></MainOrArchivePage> <$BlogItemControl$> </p> <div class="ornament"><img src="http://www.geocities.com/susieswe/springwedding/ornament.jpg" alt="Ornament" /></div> </div>   <ItemPage> <div id="comments"> <BlogItemCommentsEnabled><a name="comments"></a> <h4><$BlogItemCommentCount$> Comments:</h4> <dl id="comments-block"> <BlogItemComments> <dt class="comment-poster" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a> <$BlogCommentAuthor$> said... </dt> <dd class="comment-body"> <p><$BlogCommentBody$></p> </dd> <dd class="comment-timestamp"><a href="#c<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a> <$BlogCommentDeleteIcon$> </dd> </BlogItemComments> </dl> <p class="comment-timestamp"> <$BlogItemCreate$> </p> </BlogItemCommentsEnabled> <p class="comment-timestamp"> <a href="<$BlogURL$>"><< Home</a> </p> </div> </ItemPage>  </Blogger></div> </div><div id="bottommain"> </div> </div> <div class="clr"></div>  </div> </div> </div> </body> </html>

Jane & John

Sunday, May 29, 2005

All the images in a zip file

Tuesday, May 17, 2005

The template code

Sunday, May 15, 2005

Spring Wedding Template