Monday, August 28, 2006

the old template

To go with the screenshot of this blog pre-transformation, the template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title><$BlogPageTitle$></title>

<$BlogMetaData$>

<style type="text/css">
/*
-----------------------------------------------

Blank Blogger Template Style
Name: Blanks
Designer: Tom at klenwell.com
URL: http://perhapstga.blogspot.com/
Date: 1 Nov 2004

Colors:
accent_1: #f3f1eb (beige)

Blogger Structure:
Link : http://help.blogger.com/bin/answer.py?answer=751&topic=39
I. HEAD
A) Metadata
B) Style Sheet
II. BODY
A) Title
1. description
B) Blog Item
1. date header
2. item title
3. post body
4. footer
C) Comment Code
D)
III. EXTRAS
A) Sidebars
1. Links
2. Archive List
3. Recent Post List
B) Profile


Style Template:
title { positioning
dimension
border
font }

font: style variant weight size/line-height family;
ex: font:italic small-caps bold small/1.5em arial;
border: width style color;
ex: border:1px solid #f3f1eb;

Notes:
html > body : way to force IE to use a line that is disabled in other browsers
eg:
.post-body { parameters for all browser (including IE) }
html>body .post-body { parameters override ones above in all browsers except IE}

----------------------------------------------- */


body { background:#fff;
margin:0 padding:20px 10px;
font:small/1.5em "Trebuchet MS",Verdana,Arial,Sans-serif;
color:#666; }


/* Page Structure
----------------------------------------------- */
#canvas { background:#fff; margin:80px 0 10px;
width:740px; margin:0 auto;
text-align:left; }

#masthead
{
background:none; width:100%;
margin:0 0 0; padding:8px 0 0;
border-bottom:1px solid #f3f1eb;
}

.blog_table { background:none url(none) no-repeat left top; width:100%;
color:#000; font-size:97%; line-height:1.5em; }
td
{
vertical-align:top;
border:0px solid #f3f1eb;
}

#left_column { width:10px; }
#center_column
{
background:none;
margin-right:10px; width:470px;
border-right:1px solid #f3f1eb;
}
#right_column { width:250px;
margin: 0 auto; padding-left:10px;
background:none;
}
#footer
{
background:none; clear:both;
margin:0; padding:.4em 0;
border-top:1px solid #f3f1eb;
text-align:center;
}
#sidebar { font-size:97%; line-height:1.5em; }


/* Links
----------------------------------------------- */
a:link { color:#cbc1a3; text-decoration:none;}
a:visited { color:#cbc1a3; text-decoration:none }
a:hover { color:#7a625f; ;}

a img { border-width:0; }


/* Masthead
----------------------------------------------- */
#blog-title { margin:0; padding:10px 30px 5px;
font-size:150%; line-height:1.2em; }
#blog-title a { color:default;
text-decoration:none; }
#description { margin:0; padding:5px 30px 10px;
font-size:94%; line-height:1.5em; }


/* Posts
----------------------------------------------- */
.date-header { margin:0 10px 0 10px;
font-size:85%; color:#810; text-transform:uppercase;
line-height:2em; letter-spacing:.2em; }
.post {
margin:.3em 0 25px; padding:0 12px;
border:0px solid #bbb; }
.post-title { display:block;
margin:0; padding:2px 4px 2px 4px;
font-size:135%; color:#7a625f; line-height:1.5em;
border:0px solid #fff; border-width:0 1px;}

a.title-link, .post-title strong { text-decoration:none; display:block; }
a.title-link:hover { background-color:#f3f1eb; color:#000; }


/* Post Body */
.post-body { padding:10px 10px 1px 10px; }
html>body .post-body { border-bottom-width:0; /* removes bottom border in IE */ }
.post p { margin:0 0 .75em; }

/* Post Footer */
p.post-footer { background:#f3f1eb;
margin:0; padding:2px 10px 2px 10px;
border:0px solid #f3f1eb;
font-size:100%; line-height:1.5em; text-align:left; }
html>body p.post-footer { border-bottom-color:transparent; }
p.post-footer em {display:block; float:left;
text-align:left; font-style:normal; }

a.comment-link {
/* IE5.0/Win doesn't apply padding to inline elements,
so we hide this declaration from it */
background/* */:/**/url("http://www.blogblog.com/rounders2/icon_comment.gif") no-repeat 0 45%;
padding-left:14px;
}
html>body a.comment-link {
/* Respecified, for IE5/Mac's benefit */
background:url("http://www.blogblog.com/rounders2/icon_comment.gif") no-repeat 0 45%;
padding-left:14px;
}

.post img { margin:0 0 5px 0; padding:4px;
border:1px solid #ccc; }
.post blockquote p { margin:.5em 0; }


/* Comments
----------------------------------------------- */
#comments { margin:-25px 10px 0; padding:10px 0 10px 0;
border:0px solid #f3f1eb; border-width:0 0px 1px; }
#comments h4 { margin:0 0 10px; padding:0 10px 2px 5px;
border-bottom:1px solid #f3f1eb;
font-size:120%; line-height:1.4em; color:#333; }
#comments-block { margin:0 15px 0 0px; }
.comment-data {
background:url("http://www.blogblog.com/rounders2/icon_comment.gif") no-repeat 2px .3em;
margin:.5em 0; padding:0 0 0 20px;
color:#666; }
.comment-poster { font-weight:bold; }
.comment-body { margin:0 0 1.25em; padding:0 0 0 20px; }
.comment-body p { margin:0 0 .5em; }
.comment-timestamp { margin:0 0 .5em; padding:0 0 .75em 20px;
color:#666; }
.comment-timestamp a:link { color:#666; }

.deleted-comment { font-style:italic;
color:gray; }


/* Profile
----------------------------------------------- */
#profile-container {
background:none url(none) no-repeat left bottom;
margin:0 0 15px;
padding:0 0 10px; }
#profile-container h2 {
padding:10px 15px .2em;
margin:0;
border-width:0;
font-size:115%;
line-height:1.5em;
}
.profile-datablock {
margin:0 15px .5em;
border-top:1px solid #f3f1eb;
padding-top:8px;
}
.profile-img {display:inline;}
.profile-img img {
float:left;
margin:0 10px 5px 0;
border:2px solid #f3f1eb;
}
.profile-data strong {
display:block;
}
#profile-container p {

margin:0 15px .5em;
}
#profile-container .profile-textblock {
clear:left;
}
#profile-container a { }
.profile-link a {
padding-left:5px;
font-weight:bold;
}
ul.profile-datablock {
list-style-type:none;
}


/* Sidebar Boxes
----------------------------------------------- */
.sidebar_box {
background:default url(none) no-repeat left top;
margin:0 0 15px; padding:10px 0 0;
color:#666; }
.sidebar_title {
margin:0; padding:0 0 .2em;
border-bottom:0px dotted #fa0;
font-size:115%; color:#333; line-height:1.5em; }
.sidebar_box ul { margin:.5em 0 1.25em; padding:0 0px;
list-style:none; }
.sidebar_box ul li {
background:url("http://www.blogblog.com/rounders2/icon_arrow_sm.gif") no-repeat 2px .25em;
margin:0; padding:0 0 3px 16px; margin-bottom:3px;
border-bottom:0px dotted #eee;
line-height:1.4em; }
.sidebar_box p { margin:0 0 .6em; }


/* TGA Additions
----------------------------------------------- */
q, #qblock, .qblock, .quote, .letter
{
border: 1px solid orange;
padding:1em;
font:.9em "Trebuchet MS",Verdana,Arial,Sans-serif;
color:#333; font-size/* */:/**/85%; font-size: /**/85%;
font-weight: bold;
}
.letter
{
border:1px outset #333;
background:#fdfcfb;
padding:1em;
font-family:Garamond,Georgia,sans-serif;
color:#333; font-size:1.2em;
font-weight: normal;
font-style:normal;
}
#code, .code {
margin:0 0 10px;
width:440px;
border: 1px solid lime;
background:#666;
padding:1em;
font:.85em monospace;
color:lime;
font-weight: bold;
white-space: pre-wrap; /* CSS2.1 compliant */
white-space: -moz-pre-wrap; /* Mozilla-based browsers */
white-space: -o-pre-wrap; /* Opera 7+ */
}
.graveyard {
margin:0 0 10px;
width:440px;
border: 1px solid #999;
background:#666;
padding:1em;
font:.85em monospace;
color:#999;
font-weight: bold;
white-space: pre;
}
#hilite { background-color: #FFFFCC; }
blockquote { color:#710; font-weight:bold; font:x-small;
margin:0; padding:5px;
border:0px dotted #ccc; border-width:0px 0; }

/* PRESERVE */
.microquote
{
padding:2px;
font-family:"Lucida Console",Monaco,monospace;
font-size:3px; line-height:5px;
font-weight:normal;
background:#999;
border:1px solid #000; color:#000;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
_white-space: pre; word-wrap: break-word; /* Internet Explorer 5.5+ */
}
</style>
</head>



<body>

<!-- begin CANVAS - Centers all content and provides edges for floated columns -->
<div id="canvas" style="margin-top:40px;"><div id="canvas_pos">


<!-- Masthead -->
<div id="masthead">

<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>
<div id="description"><$BlogDescription$></div>

</div>
<!-- end Masthead -->




<!-- BLOG_TABLE - Contains main blog content -->
<table class="blog_table"><tr>

<!-- LEFT_COLUMN -->
<td id="left_column">&nbsp;</td>
<!-- end LEFT COLUMN -->



<!-- CENTER_COLUMN (Blogger Posts) -->
<td id="center_column">
<Blogger>

<!-- Date Header -->
<BlogDateHeader>
<h2 class="date-header"><$BlogDateHeaderDate$></h2>
</BlogDateHeader>



<!-- ********* POST ********** -->
<div class="post">
<a name="<$BlogItemNumber$>"></a>

<!-- Post Title -->
<BlogItemTitle>
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link" class="title-link"></BlogItemUrl>
<h3 class="post-title">
<$BlogItemTitle$>
</h3>
<BlogItemUrl></a></BlogItemUrl>
</BlogItemTitle>

<!-- Post Body -->
<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> &nbsp;
<BlogItemCommentsEnabled>
<a class="comment-link" href="<$BlogItemPermalinkURL$>#comments"><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled> <$BlogItemControl$>
</p>

</div>
<!-- *** end POST *** -->


<!-- COMMENTS (Item Page only)-->
<ItemPage>
<div id="comments">

<BlogItemCommentsEnabled>
<a name="comments"></a>
<h4><$BlogItemCommentCount$> Comments:</h4>

<dl id="comments-block">
<BlogItemComments>

<dt class="comment-data" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
At <a href="#c<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>,
<$BlogCommentAuthor$> said...
</dt>

<dd class="comment-body">
<p><$BlogCommentBody$></p>
<$BlogCommentDeleteIcon$>
</dd>

</BlogItemComments>
</dl>

<p class="comment-data">
<$BlogItemCreate$>
</p>

</BlogItemCommentsEnabled>

<p style="padding-left:12px;">
<a href="<$BlogURL$>">&lt;&lt; Home</a>
</p>

</div>
<!-- end COMMENT div -->

</ItemPage>
<!-- End #comments -->

</Blogger>
</td>
<!-- end CENTER_COLUMN -->



<!-- begin RIGHT_COLUMN -->
<td id="right_column">

<!-- begin SIDEBAR -->
<div id="sidebar">

<!-- Begin #profile-container -->

<$BlogMemberProfile$>

<!-- End #profile -->



<!-- begin SIDEBAR_BOX -->
<div class="sidebar_box">


<!-- ***** LINKS ***** -->
<h2 class="sidebar_title">Links</h2>
<ul id="">

<li><a href="http://phosphorusandlime.blogspot.com/">Phosphorus and Lime (My Design Blog)</a></li>
<li><a href="http://chinatga.blogspot.com/" target="_new">Tom's Little Red Book</a></li>
<li style="display:none;"><a href="http://tgacomplete.blogspot.com/">The Complete Works of T.G. Atwell</a></li>
<li><a href="http://www.friendster.com/user.php?uid=1112896" target="_new">Friendster Profile</a></li>
<li><a href="http://feeds.feedburner.com/AFlimsyPretext" target="_new">Feedster RSS Feed</a></li>
<li><a href="http://www.amazon.com/exec/obidos/tg/listmania/list-browse/-/11QCUAMYEKPPD/ref=cm_aya_av.lm_more/103-5311138-4503829" target="_new">2004 Reading List</a></li>
<li><a href="http://www.amazon.com/exec/obidos/tg/listmania/list-browse/-/DVD2VJZ9AS3Y/ref=cm_aya_av.lm_more/103-5311138-4503829" target="_new">2003 Reading List</a></li>
<li><a href="http://perhapstga.blogspot.com/2001/01/101-paradigm-shifts.html">101 Paradigm Shifts</a></li>
<li><a href="http://perhapstga.blogspot.com/2001/01/favourite-colours.html">Favourite Colours</a></li>
<li><a href="http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html">Windows/Mac Fonts</a></li>

</ul>


<h2 class="sidebar_title">Previous Posts</h2>
<ul id="recently">
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>

<MainOrArchivePage>
<h2 class="sidebar_title">Archives</h2>
<ul class="archive-list">
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
<ArchivePage>
<li><a href="<$BlogURL$>">Current Posts</a></li>
</ArchivePage>
</ul>
</MainOrArchivePage>


<!-- GOOGLE WEB ANALYTICS -->
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-75217-2";
urchinTracker();
</script>
<!-- end GOOGLE WEB ANALYTICS -->

<br>

<!-- LABELS -->
<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>This is a paragraph of text that could go in the sidebar.</p>
-->

</div>
<!-- end SIDEBAR_BOX -->

</div>
<!-- end SIDEBAR -->

</td>
<!-- end RIGHT_COLUMN -->


</tr></table>
<!-- end BLOG_TABLE -->



<!-- begin FOOTER -->
<div id="footer">

some rights reserved<br>
<a href="http://www.spreadfirefox.com/?q=affiliates&amp;id=0&amp;t=85"><img border="0" alt="Get Firefox!" title="Get Firefox!" src="http://sfx-images.mozilla.org/affiliates/Buttons/80x15/firefox_80x15.png"/></a><br>

</div>
<!-- End #footer -->



</div></div>
<!-- end CANVAS -->

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-601417-1";
urchinTracker();
</script>

</body>
</html>

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home