Wednesday, June 22, 2005

Basic Blogger Skin

I've been trying to strip down a blogger template to its essentials and arrange the internal style sheet so that it's as simple to edit as possible. Here's the latest incarnation of it:

<!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: TGA Simple
Designer: Tom Atwell
URL: http://perhapstga.blogspot.com/
Established: 17 April 2005
Last Update: June 2005

Blogger Structure:
Link : http://help.blogger.com/bin/answer.py?answer=751&topic=39

I. HEAD
A) Metadata
B) Style Sheet

II. BODY
A) BLOG
1. Title
a. description
2. Blog Item
a. date header
b. item title
c. post body
d. footer
3. Comment Code
B) SIDEBAR
1. Sidebars
a. Links
b. Archive List
c. Recent Post List
2. Profile

III. FOOTER


Style Template:
#name, .name {
positioning
dimension
border
font
}

font: style variant weight size/line-height family;
ex: font:italic small-caps bold small/1.5em arial,sans-serif;
border: width style color;
ex: border:thin 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}

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



/* Common Configurable Settings
******************************/

/* page width */
#page { width:740px; }

/* column widths */
#left_column { width:5px; }
#center_column { /* fill-in - no setting */ }
#right_column { width:230px; }

/* primary typeface */
body {
font-size:small;
font-family:Lucida Sans Unicode,Arial,sans-serif;
}

/* heading typefaces */
h1, h2, h3, h4, h5, h6 { font-family:Trebuchet MS,sans-serif; }

/* desktop background */
body { background:#f2f7f7;}
#masthead, #center_column, #footer, p.post-footer, #comments h4, td { border-color:#f2f7f7; }

/* page background */
#page { background:white;}

/* link styling */
a:link { color:#000; }
a:visited { color:black; }
a:hover { color:lime; text-decoration:none; }

#blog-title a { color:default; text-decoration:none; }
#profile-container a { color:#fff; }
a.title-link:hover { background-color:#f8f9fa; color:#000; }
.comment-timestamp a:link { color:#dbe3e8; }

/* end common settings */
/******************************/


/* Page Structure
Credit: http://www.redmelon.net/tstme/3cols2/noborder.htm
----------------------------------------------- */
body {
padding:10px 0;
}
#page {
margin:40px auto 0;
text-align:left;
}
#masthead {
margin:0;
padding:.4em 0 0;
border-style:solid; border-width:1px;
}
.blog_table {
margin:0;
background:transparent url(none) no-repeat left top;
}

#left_column {
margin-right:2px;
}
#center_column {
border-style:solid;
border-width:1px;
}
#right_column {
margin: 0 auto;
padding-left:10px;
}

#sidebar { }

#footer {
clear:both;
margin:0; padding:.3em 0;
text-align:center;
border-style:solid; border-width:1px;
}

td {
border-width:1px;
border-style:solid;
vertical-align:top;
}


/* Masthead
----------------------------------------------- */
#blog-title {
margin:0; padding:10px 30px 5px;
}
#description {
margin:0; padding:5px 30px 10px;
}


/* Posts
----------------------------------------------- */

.post {
margin:.3em 0 25px; padding:0 12px;
}
.post img {
margin:0 0 5px 0; padding:4px;
border-style:solid; border-width:1px;
}
.post blockquote p {
margin:.5em 0;
}

/* Post Title */
.date-header {
margin:0 10px 0 10px;
}
.post-title {
display:block;
margin:0; padding:2px 4px 2px 4px;
}


/* 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 {
margin:0; padding:2px 10px 2px 10px;
border-bottom-style:solid; border-bottom-width:2px;
}
p.post-footer em {
display:block; float:left;
}


/* Comments
----------------------------------------------- */
#comments {
margin:-25px 10px 0;
padding:10px 0 10px 0;
}
#comments h4 {
margin:0 0 10px; padding:0 10px 2px 5px;
border-style:solid;
border-width:0 0 2px;
}
#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;
}
.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; }


/* Profile
----------------------------------------------- */
#profile-container {
/* background:transparent url("http://www.blogblog.com/rounders2/corners_prof_bot.gif") no-repeat left bottom; */
margin:0 0 15px;
padding:0 0 10px;
}
#profile-container h2 {
/* background:url("http://www.blogblog.com/rounders2/corners_prof_top.gif") no-repeat left top; */
padding:10px 15px .2em;
margin:0;
border-width:0;
}
.profile-datablock {
margin:0 15px .5em;
border-style:dotted;
border-width:1px 0 0;
padding-top:8px;
}
.profile-img {display:inline;}
.profile-img img {
float:left;
margin:0 10px 5px 0;
border-style:solid;
border-width:4px;
}
.profile-data strong { display:block; }
#profile-container p { margin:0 15px .5em; }
#profile-container .profile-textblock { clear:left; }
.profile-link a {
/* background:url("http://www.blogblog.com/rounders2/icon_profile.gif") no-repeat 0 .1em; */
padding-left:15px;
}
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;
}
.sidebar_title {
margin:0; padding:0 0 .2em;
}
.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 0 3px; padding:0 0 3px 16px;
}
.sidebar_box p { margin:0 0 .6em; }


/* Footer
----------------------------------------------- */
#footer hr {display:none;}
#footer p {margin:0;}


/* Excerpts
----------------------------------------------- */
q, blockquote, .quote, .qblock {
margin:0; padding:5px;
font:x-small/1.5em "Trebuchet MS",Verdana,Arial,Sans-serif;
font-size/* */:/**/85%;
font-size: /**/85%;
font-weight: bold;
color:#710; font-weight:bold;
border:1px solid #ccc;
}
.highlight, .hilite {
background-color: #FFFFCC;
}


/* HACKS
----------------------------------------------- */
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;
}

/***********/


/* TYPEFACE SETTINGS
See Common Settings at top
----------------------------------------------- */

/* primary content */
.blog_table, #sidebar {
font-size:97%;
line-height:1.5em;
}

/* Masthead */
#blog-title {
font-size:150%;
line-height:1.2em;
}
#description {
font-size:94%;
line-height:1.5em;
}

/* Footer */
#footer {
font-size:11px;
line-height:1.8em;
font-variant:none; /* or small-caps */
}

/* Post */
.date-header {
font-size:85%;
text-transform:uppercase;
line-height:2em; letter-spacing:.2em;
}
.post-title {
font-size:135%;
line-height:1.5em;
}

/* Post Footer */
p.post-footer {
font-size:100%;
line-height:1.5em;
text-align:left;
border-bottom:thin solid transparent;
}
p.post-footer em {
text-align:left;
font-style:normal;
}

/* Comments */
#comments h4 {
font-size:120%;
line-height:1.4em;
}
.comment-poster { font-weight:bold; }
.deleted-comment { font-style:italic; }

/* Profile */
#profile-container h2 {
font-size:115%;
line-height:1.5em;
}
.profile-link a { font-weight:bold; }

/* Sidebar */
.sidebar_title {
font-size:115%;
line-height:1.5em;
}
.sidebar_box ul li { line-height:1.4em; }

/*** end TYPEFACE SETTINGS ***/


/* COLOR SETTINGS

#f9feff - whipped blue
#dbe3e8 - sweepers blue
#dfe9ec - blue dusk
#bcd1d8 - blue smoke
#0000ff - straight blue
#006699 - empire blue flat
#003366 - blue ink

#746058 - parchment ink
#2C271B - oxidized ink

----------------------------------------------- */
body, p.post-footer {
background:#f9fafb;
color:black;
}


#blog-title { color:#000; }
#description { color:#000; }

.post-title, .date-header, .sidebar_title, #comments h4, #profile-container h2 {
color:#000;
}
.post img {
border-color:#2C271B;
}
.comment-data, .comment-timestamp, .deleted-comment {
color:#666;
}
.profile-datablock, .profile-img img {
border-color:#fff;
}
#profile-container {
background-color:transparent;
}

/*** end COLOR SETTINGS ***/


/* Links
----------------------------------------------- */
a img { border-width:0; }
a.title-link, .post-title strong {
text-decoration:none;
display:block;
}



</style>
</head>



<body>

<!-- begin PAGE block - Centers all content and provides edges for floated columns -->
<div id="page"><div id="page_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" cellspacing="0" width="100%"><tr>

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



<!-- CENTER_COLUMN (Blogger Posts) -->
<td id="center_column" style="margin:0 2px;">
<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$>">&laquo; 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://www.alliedportalsandengines.com/" target="_blank">Allied Portals and Engines</a></li>
<li><a href="http://perhapstga.blogspot.com/" target="_blank">A Flimsy Pretext</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>

<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 -->

</body>
</html>


Pretty easy to adapt and most of it can be dropped in an external style sheet to reduce the code footprint.

posted by Tom at 12:49 AM

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home