testing templates: November 2005

Wednesday, November 02, 2005

This is the first template I designed, have a look.
To design this I took Douglas Bowman's Dots template and then modified it.
The photos are from yahoo sitebuilder and are royalty free. You may use the
template without changing the links. The images are at photobucket and hotlinking
is allowed, but be aware that if my bandwidth exceeds the limits the images
might not be visible.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title><$BlogPageTitle$></title> <$BlogMetaData$> <style type="text/css"> /* ----------------------------------------------- Blogger Template Style Name: fresh veg modified from dots by Douglas Bowman. Designer: Shabda Raaj URL: http://shabda123.blogspot.com ----------------------------------------------- */ body { background:#fff url("http://i25.photobucket.com/albums/c62/shabda8/greenStripePattern.gif"); margin:0; padding:0 10px; text-align:center; font:x-small Verdana,Arial,Sans-serif; color:#333; font-size/* */:/**/small; font-size: /**/small; } #div1{ background:#fffAAA url("http://i25.photobucket.com/albums/c62/shabda8/green_leafHeader.gif"); position: absolute; top: 0px; right: 0px; width: 100%; height: 85px; } #div2{ background:#deadba; position: absolute; top: 110px; right: 700px; width: 30%; height: 100%; } /* Page Structure ----------------------------------------------- */ #content { background:#33cc33 url("http://i25.photobucket.com/albums/c62/shabda8/vegetables_transparent.gif"); width:750px; margin:100 auto; padding:50px 0; text-align:left; } #main { background:#a3cc33; width:450px; float:right; padding:50px 0 20px; font-size:85%; } #main2 { padding:20px 10px 15px; } #sidebar { background:#43cc33; width:200px; float:right; padding:50px 0 20px; font-size:85%; } #sidebar2 { padding:5px 10px 15px; width:200px; width/* */:/**/180px; width: /**/180px; } html>body #main, html>body #sidebar { /* We only give this fade from white to nothing to browsers that can handle 24-bit transparent PNGs */ background/* */:/**/url("http://www.blogblog.com/dots/bg_white_fade.png") repeat-x left bottom; } /* Title & Description ----------------------------------------------- */ #blog-title { margin:0 0 .5em; font:250%/1.4em Georgia,Serif; color:#353; } #blog-title a { color:#353; text-decoration:none; } #description { margin:0 0 1.75em; color:#996; } /* Links ----------------------------------------------- */ a:link { color:#488; } a:visited { color:#885; } a:hover { color:#000; } a img { border-width:0; } /* Posts ----------------------------------------------- */ .date-header { margin:0 0 .75em; padding-bottom:.35em; border-bottom:1px dotted #9b9; font:95%/1.4em Georgia,Serif; text-transform:uppercase; letter-spacing:.3em; color:#663; } .post { font-weight:bold; margin:0 0 2.5em; line-height:1.6em; } .post-title { margin:.25em 0; font:bold 130%/1.4em Georgia,Serif; color:#333; } .post-title a, .post-title strong { background:url("http://www.blogblog.com/dots/bg_post_title.gif") no-repeat 0 .25em; display:block; color:#333; text-decoration:none; padding:0 0 1px 45px; } .post-title a:hover { color:#000; } .post p { margin:0 0 .75em; } p.post-footer { margin:0; text-align:right; } p.post-footer em { display:block; float:left; text-align:left; font-style:normal; color:#996; } a.comment-link { /* IE5.0/Win doesn't apply padding to inline elements, so we hide these two declarations from it */ background/* */:/**/url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 0 .25em; padding-left:15px; } html>body a.comment-link { /* Respecified, for IE5/Mac's benefit */ background:url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 0 .25em; padding-left:15px; } .post img { margin:0 0 5px 0; padding:4px; border:1px solid #cca; } /* Comments ----------------------------------------------- */ #comments { margin:0; } #comments h4 { margin:0 0 10px; border-top:1px dotted #9b9; padding-top:.5em; font:bold 110%/1.4em Georgia,Serif; color:#333; } #comments-block { line-height:1.6em; } .comment-poster { background:url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 2px .35em; margin:.5em 0 0; padding:0 0 0 20px; font-weight:bold; } .comment-body { margin:0; padding:0 0 0 20px; } .comment-body p { margin:0 0 .5em; } .comment-timestamp { margin:0 0 .5em; padding:0 0 .75em 20px; color:#996; } .comment-timestamp a:link { color:#996; } .deleted-comment { font-style:italic; color:gray; } /* More Sidebar Content ----------------------------------------------- */ .sidebar-title { margin:2em 0 .75em; padding-bottom:.35em; border-bottom:1px dotted #9b9; font:95%/1.4em Georgia,Serif; text-transform:uppercase; letter-spacing:.3em; color:#663; } #sidebar p { margin:0 0 .75em; line-height:1.6em; } #sidebar ul { margin:.5em 0 1em; padding:0 0px; list-style:none; line-height:1.5em; } #sidebar ul li { background:url("http://www.blogblog.com/dots/bullet.gif") no-repeat 3px .45em; margin:0; padding:0 0 5px 15px; } #sidebar p { margin:0 0 .6em; } /* Profile ----------------------------------------------- */ .profile-datablock { margin:0 0 1em; } .profile-img { display:inline; } .profile-img img { float:left; margin:0 8px 5px 0; border:4px solid #cc9; } .profile-data { margin:0; line-height:1.5em; } .profile-data strong { display:block; } .profile-textblock { clear:left; } /* Footer ----------------------------------------------- */ #footer { clear:both; padding:15px 0 0; } #footer hr { display:none; } #footer p { margin:0; } </style> </head>  <div id="content">  <div id="sidebar"><div id="sidebar2"> <img src="http://i25.photobucket.com/albums/c62/shabda8/produceSign.gif" /> <h1 id="blog-title"> <itempage><a href="">"></itempage> <$BlogTitle$> <itempage></a></itempage> </h1> <$BlogDescription$>  <$BlogMemberProfile$>  <h2 class="sidebar-title">Previous Posts</h2> <ul id="recently"> <bloggerpreviousitems> <li><a href="">"><$BlogPreviousItemTitle$></a></li> </bloggerpreviousitems> </ul> <mainorarchivepage> <h2 class="sidebar-title">Archives</h2> <ul class="archive-list"> <bloggerarchives> <li><a href="">"><$BlogArchiveName$></a></li> </bloggerarchives> </ul> </mainorarchivepage> <a href="http://www.blogger.com"><img src="http://buttons.blogger.com/bloggerbutton1.gif" alt="Powered by Blogger" /></a>  </div></div>   <div id="main"><div id="main2"> <blogger> <blogdateheader> <h2 class="date-header"><$BlogDateHeaderDate$></h2> </blogdateheader>  <div class="post"><a name="">"></a> <blogitemtitle> <h3 class="post-title"> <blogitemurl><a href="">" title="external link"></blogitemurl> <$BlogItemTitle$> <blogitemurl></a></blogitemurl> </h3> </blogitemtitle> <div class="post-body"> <$BlogItemBody$> </div> posted by <$BlogItemAuthorNickname$> @ <a href="">" title="permanent link"><$BlogItemDateTime$></a> <mainorarchivepage><blogitemcommentsenabled> <a class="comment-link" href="">"><$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a> </blogitemcommentsenabled><blogitembacklinksenabled> <a class="comment-link" href="">#links">links to this post</a> </blogitembacklinksenabled> </mainorarchivepage> <$BlogItemControl$> </div>   <itempage> <div id="comments"> <blogitemcommentsenabled><a name="comments"></a> <h4><$BlogItemCommentCount$> Comments:</h4> <dl id="comments-block"> <blogitemcomments> <dt class="comment-poster" id="">"><a name="">"></a> <$BlogCommentAuthor$> said... </dt> <dd class="comment-body"> <$BlogCommentBody$> </dd> <dd class="comment-timestamp"><a href="">" title="comment permalink"><$BlogCommentDateTime$></a> <$BlogCommentDeleteIcon$> </dd> </blogitemcomments> </dl> <$BlogItemCreate$> </blogitemcommentsenabled> <blogitembacklinksenabled> <a name="links"></a><h4>Links to this post:</h4> <dl id="comments-block"> <blogitembacklinks> <dt class="comment-title"> <$BlogBacklinkControl$> <a href="">" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$> </dt> <dd class="comment-body"><$BlogBacklinkSnippet$> posted by <$BlogBacklinkAuthor$> @ <$BlogBacklinkDateTime$> </dd> </blogitembacklinks> </dl> <$BlogItemBacklinkCreate$> </blogitembacklinksenabled> <a href="">"><< Home</a> </div> </itempage>  </blogger> </div></div>   <div id="footer"><hr />  </div>  </div>  <div id="div1"> <img src="http://i25.photobucket.com/albums/c62/shabda8/fresh_produce.gif" /></div>

11:54 PM | Permalink |


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><br /><br /><br /><br /><br /><head><br /><br /> <title><$BlogPageTitle$></title><br /><br /> <$BlogMetaData$><br /><br /> <style type="text/css"><br />/*<br />-----------------------------------------------<br />Blogger Template Style<br />Name: fresh veg modified from dots by Douglas Bowman.<br />Designer: Shabda Raaj<br />URL: http://shabda123.blogspot.com<br />----------------------------------------------- */<br /><br /><br />body {<br /> background:#fff url("http://i25.photobucket.com/albums/c62/shabda8/greenStripePattern.gif");<br /> margin:0;<br /> padding:0 10px;<br /> text-align:center;<br /> font:x-small Verdana,Arial,Sans-serif;<br /> color:#333;<br /> font-size/* */:/**/small;<br /> font-size: /**/small;<br /> }<br />#div1{<br /> background:#fffAAA url("http://i25.photobucket.com/albums/c62/shabda8/green_leafHeader.gif");<br /> position: absolute; <br /> top: 0px; <br /> right: 0px; <br /> width: 100%; <br /> height: 85px;<br /> }<br />#div2{<br /> background:#deadba;<br /> position: absolute; <br /> top: 110px; <br /> right: 700px; <br /> width: 30%; <br /> height: 100%;<br /> }<br /><br /><br /><br />/* Page Structure<br />----------------------------------------------- */<br />#content {<br /> background:#33cc33 url("http://i25.photobucket.com/albums/c62/shabda8/vegetables_transparent.gif");<br /> width:750px;<br /> margin:100 auto;<br /> padding:50px 0;<br /> text-align:left;<br /> }<br />#main {<br /> background:#a3cc33;<br /> width:450px;<br /> float:right;<br /> padding:50px 0 20px;<br /> font-size:85%;<br /> }<br />#main2 {<br /> padding:20px 10px 15px;<br /> }<br />#sidebar {<br /> background:#43cc33;<br /> width:200px;<br /> float:right;<br /> padding:50px 0 20px;<br /> font-size:85%;<br /> }<br /> <br />#sidebar2 {<br /> padding:5px 10px 15px;<br /> width:200px;<br /> width/* */:/**/180px;<br /> width: /**/180px;<br /> }<br /> <br />html>body #main, html>body #sidebar {<br /> /* We only give this fade from white to nothing to<br /> browsers that can handle 24-bit transparent PNGs */<br /> background/* */:/**/url("http://www.blogblog.com/dots/bg_white_fade.png") repeat-x left bottom;<br /> }<br /><br /><br />/* Title & Description<br />----------------------------------------------- */<br />#blog-title {<br /> margin:0 0 .5em;<br /> font:250%/1.4em Georgia,Serif;<br /> color:#353;<br /> }<br />#blog-title a {<br /> color:#353;<br /> text-decoration:none;<br /> }<br />#description {<br /> margin:0 0 1.75em;<br /> color:#996;<br /> }<br /><br /><br />/* Links<br />----------------------------------------------- */<br />a:link {<br /> color:#488;<br /> }<br />a:visited {<br /> color:#885;<br /> }<br />a:hover {<br /> color:#000;<br /> }<br />a img {<br /> border-width:0;<br /> }<br /><br /><br />/* Posts<br />----------------------------------------------- */<br />.date-header {<br /> margin:0 0 .75em;<br /> padding-bottom:.35em;<br /> border-bottom:1px dotted #9b9;<br /> font:95%/1.4em Georgia,Serif;<br /> text-transform:uppercase;<br /> letter-spacing:.3em;<br /> color:#663;<br /> }<br />.post {<br /> font-weight:bold;<br /> margin:0 0 2.5em;<br /> line-height:1.6em;<br /> }<br />.post-title {<br /> margin:.25em 0;<br /> font:bold 130%/1.4em Georgia,Serif;<br /> color:#333;<br /> }<br />.post-title a, .post-title strong {<br /> background:url("http://www.blogblog.com/dots/bg_post_title.gif") no-repeat 0 .25em;<br /> display:block;<br /> color:#333;<br /> text-decoration:none;<br /> padding:0 0 1px 45px;<br /> }<br />.post-title a:hover {<br /> color:#000;<br /> }<br />.post p {<br /> margin:0 0 .75em;<br /> }<br />p.post-footer {<br /> margin:0;<br /> text-align:right;<br /> }<br />p.post-footer em {<br /> display:block;<br /> float:left;<br /> text-align:left;<br /> font-style:normal;<br /> color:#996;<br /> }<br />a.comment-link {<br /> /* IE5.0/Win doesn't apply padding to inline elements,<br /> so we hide these two declarations from it */<br /> background/* */:/**/url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 0 .25em;<br /> padding-left:15px;<br /> }<br />html>body a.comment-link {<br /> /* Respecified, for IE5/Mac's benefit */<br /> background:url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 0 .25em;<br /> padding-left:15px;<br /> }<br />.post img {<br /> margin:0 0 5px 0;<br /> padding:4px;<br /> border:1px solid #cca;<br /> }<br /><br /><br />/* Comments<br />----------------------------------------------- */<br />#comments {<br /> margin:0;<br /> }<br />#comments h4 {<br /> margin:0 0 10px;<br /> border-top:1px dotted #9b9;<br /> padding-top:.5em;<br /> font:bold 110%/1.4em Georgia,Serif;<br /> color:#333;<br /> }<br />#comments-block {<br /> line-height:1.6em;<br /> }<br />.comment-poster {<br /> background:url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 2px .35em;<br /> margin:.5em 0 0;<br /> padding:0 0 0 20px;<br /> font-weight:bold;<br /> }<br />.comment-body {<br /> margin:0;<br /> padding:0 0 0 20px;<br /> }<br />.comment-body p {<br /> margin:0 0 .5em;<br /> }<br />.comment-timestamp {<br /> margin:0 0 .5em;<br /> padding:0 0 .75em 20px;<br /> color:#996;<br /> }<br />.comment-timestamp a:link {<br /> color:#996;<br /> }<br />.deleted-comment {<br /> font-style:italic;<br /> color:gray;<br /> }<br /><br /><br />/* More Sidebar Content<br />----------------------------------------------- */<br />.sidebar-title {<br /> margin:2em 0 .75em;<br /> padding-bottom:.35em;<br /> border-bottom:1px dotted #9b9;<br /> font:95%/1.4em Georgia,Serif;<br /> text-transform:uppercase;<br /> letter-spacing:.3em;<br /> color:#663;<br /> }<br />#sidebar p {<br /> margin:0 0 .75em;<br /> line-height:1.6em;<br /> }<br />#sidebar ul {<br /> margin:.5em 0 1em;<br /> padding:0 0px;<br /> list-style:none;<br /> line-height:1.5em;<br /> }<br />#sidebar ul li {<br /> background:url("http://www.blogblog.com/dots/bullet.gif") no-repeat 3px .45em;<br /> margin:0;<br /> padding:0 0 5px 15px;<br /> }<br />#sidebar p {<br /> margin:0 0 .6em;<br /> }<br /><br /><br />/* Profile<br />----------------------------------------------- */<br />.profile-datablock {<br /> margin:0 0 1em;<br /> }<br />.profile-img {<br /> display:inline;<br /> }<br />.profile-img img {<br /> float:left;<br /> margin:0 8px 5px 0;<br /> border:4px solid #cc9;<br /> }<br />.profile-data {<br /> margin:0;<br /> line-height:1.5em;<br /> }<br />.profile-data strong {<br /> display:block;<br /> }<br />.profile-textblock {<br /> clear:left;<br /> }<br /><br /><br />/* Footer<br />----------------------------------------------- */<br />#footer {<br /> clear:both;<br /> padding:15px 0 0;<br /> }<br />#footer hr {<br /> display:none;<br /> }<br />#footer p {<br /> margin:0;<br /> }<br /> </style><br /><br /></head><br /><br /><br /><br /><br /><br /><br /><br /><!-- Begin #content --><br /><br /><div id="content"><br /><br /><br /><br /><br /><br /><br /><!-- Begin #sidebar --><br /><br /><div id="sidebar"><div id="sidebar2"><br /> <span id="left"><br /><img src="http://i25.photobucket.com/albums/c62/shabda8/produceSign.gif" /><br /></span><br /><br /> <h1 id="blog-title"><br /> <itempage><a href="">"></itempage><br /> <$BlogTitle$><br /> <itempage></a></itempage><br /> </h1><br /><br /> <p id="description"><$BlogDescription$><p></p><br /><br /><br /><br /><br /><br /><br /><br /> <!-- Begin #profile-container --><br /><br /> <$BlogMemberProfile$><br /><br /> <!-- End #profile --><br /><br /><br /><br /> <h2 class="sidebar-title">Previous Posts</h2><br /> <ul id="recently"><br /> <bloggerpreviousitems><br /> <li><a href="">"><$BlogPreviousItemTitle$></a></li><br /><br /> </bloggerpreviousitems><br /> </ul><br /> <mainorarchivepage><br /> <h2 class="sidebar-title">Archives</h2><br /> <ul class="archive-list"><br /> <bloggerarchives><br /> <li><a href="">"><$BlogArchiveName$></a></li><br /> </bloggerarchives><br /><br /> </ul><br /> </mainorarchivepage><br /><br /> <p id="powered-by"><a href="http://www.blogger.com"><img src="http://buttons.blogger.com/bloggerbutton1.gif" alt="Powered by Blogger" /></a><p></p><br /><br /> <!-- <p>This is a paragraph of text that could go in the sidebar.</p><br /><br /> --><br /><br /> </div></div><br /><br /><!-- End #sidebar --><br /><br /><br /><br /><br /><br /><br /><!-- Begin #main - Contains main-column blog content --><br /><br /><div id="main"><div id="main2"><br /><br /><blogger><br /><br /> <blogdateheader><br /> <h2 class="date-header"><$BlogDateHeaderDate$></h2><br /> </blogdateheader><br /><br /> <!-- Begin .post --><br /><br /> <div class="post"><a name="">"></a><br /><br /> <blogitemtitle><br /><br /> <h3 class="post-title"><br /> <blogitemurl><a href="">" title="external link"></blogitemurl><br /> <$BlogItemTitle$><br /> <blogitemurl></a></blogitemurl><br /> </h3><br /> </blogitemtitle><br /><br /> <div class="post-body"><br /> <p><br /> <$BlogItemBody$><br /> <p></p><br /><br /> </div><br /><br /> <p class="post-footer"><br /><br /> <em>posted by <$BlogItemAuthorNickname$> @ <a href="">" title="permanent link"><$BlogItemDateTime$></a></em> <br /><br /> <mainorarchivepage><blogitemcommentsenabled><br /> <a class="comment-link" href="">"><$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a><br /><br /> </blogitemcommentsenabled><blogitembacklinksenabled><br /><a class="comment-link" href="">#links">links to this post</a><br /></blogitembacklinksenabled><br /></mainorarchivepage> <$BlogItemControl$><br /><br /> <p></p><br /><br /> </div><br /><br /> <!-- End .post --><br /><br /> <!-- Begin #comments --><br /> <itempage><br /> <div id="comments"><br /><br /> <blogitemcommentsenabled><a name="comments"></a><br /><br /><br /><br /> <h4><$BlogItemCommentCount$> Comments:</h4><br /><br /> <dl id="comments-block"><br /> <blogitemcomments><br /><br /> <dt class="comment-poster" id="">"><a name="">"></a><br /><br /> <$BlogCommentAuthor$> said...<br /><br /> </dt><br /><br /> <dd class="comment-body"><br /><br /> <p><$BlogCommentBody$><p></p><br /><br /> </dd><br /><br /> <dd class="comment-timestamp"><a href="">" title="comment permalink"><$BlogCommentDateTime$></a><br /><br /> <$BlogCommentDeleteIcon$><br /> </dd><br /> </blogitemcomments><br /><br /> </dl><br /> <p class="comment-timestamp"><br /> <$BlogItemCreate$><br /> <p></p><br /> </blogitemcommentsenabled> <br /> <blogitembacklinksenabled><br /> <a name="links"></a><h4>Links to this post:</h4><br /> <dl id="comments-block"><br /> <blogitembacklinks><br /> <dt class="comment-title"><br /> <$BlogBacklinkControl$><br /> <a href="">" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$><br /> </dt><br /> <dd class="comment-body"><$BlogBacklinkSnippet$><br /> <br /><br /> <span class="comment-poster"><br /> <em>posted by <$BlogBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em><br /> </span><br /> </dd><br /> </blogitembacklinks><br /> </dl><br /> <p class="comment-timestamp"><$BlogItemBacklinkCreate$><p></p><br /> </blogitembacklinksenabled><br /><br /><br /> <p class="comment-timestamp"><br /><br /> <a href="">"><< Home</a><br /> <p></p><br /> </div><br /><br /></itempage><br /><br /> <!-- End #comments --><br /><br /><br /></blogger><br /></div></div><br /><br /><!-- End #main --><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><!-- Begin #footer --><br /><br /><div id="footer"><hr /><br /><br /><br /> <p><!-- This is an optional footer. If you want text here, place it inside these tags, and remove this comment. --> <p></p><br /><br /><br /><br /></div><br /><br /><!-- End #footer --><br /><br /><br /><br /><br /><br /><br /><br /><br /></div><br /><br /><!-- End #content --><br /><div id="div1"><br /><img src="http://i25.photobucket.com/albums/c62/shabda8/fresh_produce.gif" /></div><br /><br /><br /><br /><br /><br /><br />

testing templates

Wednesday, November 02, 2005

About me

Last posts

Archives

Links