A Flimsy Pretext: June 2005

Zen Garden

Cool concept. A breath of fresh air and inspiration.

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>


<div id="page"><div id="page_pos">


<div id="masthead">

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

</div>




<table class="blog_table" cellspacing="0" width="100%"><tr>


<td id="left_column"> </td>



<td id="center_column" style="margin:0 2px;">
<Blogger>


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


<div class="post">
<a name="<$BlogItemNumber$>"></a>


<BlogItemTitle>
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link" class="title-link"></BlogItemUrl>

<h3 class="post-title">
<$BlogItemTitle$>
</h3>
<BlogItemUrl></a></BlogItemUrl>
</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>  
<BlogItemCommentsEnabled>
<a class="comment-link" href="<$BlogItemPermalinkURL$>#comments"><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled> <$BlogItemControl$>
</p>

</div>



<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$>">« Home</a>
</p>

</div>


</ItemPage>


</Blogger>
</td>



<td id="right_column">



<div id="sidebar">



<$BlogMemberProfile$>




<div class="sidebar_box">


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


<p id="powered-by"><a href="http://www.blogger.com"><img src="http://buttons.blogger.com/bloggerbutton1.gif" alt="Powered by Blogger" /></a></p>



</div>


</div>


</td>


</tr></table>



<div id="footer">

some rights reserved<br>

<a href="http://www.spreadfirefox.com/?q=affiliates&id=0&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>


</div></div>


</body>
</html>

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

MYSQL: select duplicate fields from table

SELECT `$col`, count(`$col`) as `num`
FROM `$table`
GROUP BY `$col`
ORDER BY `num` desc

PHP: How do you submit an array in a form?

My checkbox approach is not working for reasons not readily apparent. May need to create new constructor:

add_checkbox_array();

MIT Survey

Randomly (I think) selected to complete an MIT survey on my blog -- the Complete Works blog (wonder where they found it.) Inspired by the form design -- superb, simple styling.

It's a Fish-Eat-Fish World

Working on my big idea. (Yeah, I have a dream.) Just got this response from someone who, truth be told, was going out of his way even acknowledging me:

tom,

just to manage expectations, and not waste your time, i should jump in
here briefly to mention that an NDA is absolutely out of the question -
but that we might require you to sign something saying we're free to use
any and all ideas discussed without recompense or consideration.

additionally, we don't enter commercial partnerships.

best regards

My New Mantra

Maybe even my new religion.

IngNi (I'm Not Gonna Need It)

Inspired by the sacred rites of YagNi.

MySQL: Negative Comparison

To wit: finding all the records for a column in one table (the smaller) that are not in another table (the larger). See this page from MySQL site:

Posted by Count Henry De Havilland-Fortesque-Smedley on January 13 2004 6:59am [Delete] [Edit]

Sometimes you want to retrieve the records that DONT match a select statement.

Consider this select:
SELECT CarIndex FROM DealerCatalog, BigCatalog WHERE
DealerCatalog.CarIndex=BigCatalog.CarIndex

This finds all the CarIndex values in the Dealer's catalog that are in the bigger distributor catalog.

How do I then find the dealer CarIndex values that ARE NOT in the bigger catalog?

The answer is to use LEFT JOIN - anything that doesn't join is given a NULL value , so we look for that:

SELECT CarIndex FROM DealerCatalog LEFT JOIN BigCatalog ON DealerCatalog.CarIndex=BigCatalog.CarIndex WHERE BigCatalog.CarIndex IS NULL

New Desktop

In honor of the installation of WAMP on my home machine:

Handy.

PHP: ob_flush_out()

Simple function to make buffer handling in PHP a little more user-friendly (just a little):

/* Fx ob_flush_out()
******************************/
function ob_flush_out($catch_buffer=FALSE, $reopen_buffer=FALSE) {

// buffer check
$ob_active = ob_get_length() !== FALSE;

if ( !$ob_active ) {
return FALSE;
}

// catch buffer
if ( $catch_buffer ) {

$buffer = '';
while ( $buffer .= @ob_get_flush() );

// flush buffer
} else {

while ( @ob_end_flush() );
$buffer = TRUE;

}

// reopen buffer?
if ( $reopen_buffer ) {

ob_start();

}

return $buffer;

} # end Fx
/*****************************/

Javascript: Display Toggle

Had to really think this through to get it to work like I wanted. Fairly elegant in the end, thanks to the fact that variables within a JS function effectively act as static when the page is not reloaded. The code:

<script type="text/javascript">

</script>

Then call like so using the id you've given to the doc element:

<a onclick="toggle_button('element name')" href="#">show/hide element</a>

An example can be seen here by hitting "show creative process" link on results page. (Only tested in Firefox.)

A Flimsy Pretext

Thursday, June 30, 2005

Zen Garden

Wednesday, June 22, 2005

Basic Blogger Skin

Tuesday, June 14, 2005

MYSQL: select duplicate fields from table

PHP: How do you submit an array in a form?

Monday, June 13, 2005

MIT Survey

Thursday, June 09, 2005

It's a Fish-Eat-Fish World

Wednesday, June 08, 2005

My New Mantra

Sunday, June 05, 2005

MySQL: Negative Comparison

Saturday, June 04, 2005

New Desktop

Friday, June 03, 2005

PHP: ob_flush_out()

Wednesday, June 01, 2005

Javascript: Display Toggle

Previous Posts

Links

Archives