Mike Black
mikekrupel@gmail.com
http://www.mindspill.org
Kiwi Pattern
Kiwi
1.0
Pattern to create a complete CSS/XHTML compliant Conversant Weblog.
Kiwi pattern with a green base color
http://www.mindspill.org/kiwi_pattern
Weblog Calendar Day READONLY
Weblog Calendar EmptySpace READONLY
Weblog Calendar EmptySpace READONLY
Weblog Calendar Week READONLY
noCalendar
Advanced
10
8
1
10
15
<img src="http://media.macrobyte.net/images/dayLinkIcon.gif" width="12" height="15" border="0" align="left" valign="middle" alt="Day Link Icon" title="Permanent link to this day in the archives." />
KiwiWeblogDay
weblogItemLink
weblogSummary
true
true
#
KiwiWeblogItem
Weblog NewItem Form READONLY
KiwiWeblogWrapper
item
Archive Date
Weblog Item RSS READONLY
Weblog Wrapper RSS READONLY
60
<div id="loginform">
<table>
<tr>
<td colspan="2" align="center"><font color="red"><!--#logonMessage--></font></td>
</tr>
<tr>
<td>Username (email address):</td><td><!--#logonUsername--></td>
</tr>
<tr>
<td>Password:</td><td><!--#logonPassword--></td>
</tr>
<tr>
<td colspan="2"><!--#logonResetPassword--> I forgot my password; please send me a new one.</td>
</tr>
<tr>
<td> </td><td><!--#logonSubmitButton--></td>
</tr>
</table>
</div>
<div id="msg">
<div id="logonbox">
<h3>Logon</h3>
<p>Fill out the form below to logon to this site, or sign up below.</p>
<!--#logonForm template="KiwiLogonForm"-->
</div>
<div id="signupbox">
<h3>Signup</h3>
<p>Fill out the form below to join as a member of this site. </p>
<!--#signupForm template="KiwiSignupForm"-->
</div>
</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title><!--#pagetitle--></title>
<!--#weblogRSDLinkTag-->
<!--#stylesheetTag name="kiwistyle"-->
<!--#javascript embed="false"-->
</head>
<!--#bodytag-->
<div id="mainbox" class="clearfix">
<div id="logo">
<!--#msgBody msgNum="9"-->
</div>
<div id="mainmenu">
<!--#msgBody msgNum="10"-->
</div>
<div id="navigation">
<!--#insertTemplate name="KiwiNavigation"-->
</div> <!--navigation-->
<div id="content">
<!--#pageContent-->
<!--#adminBox-->
</div> <!-- content -->
</div> <!-- mainbox -->
<div id="footer">
<!--#msgBody msgNum="7"-->
</div>
</body>
</html>
<!--BEGIN MESSAGE TABLE-->
<div id="msg">
<table width="90%" border="0" cellspacing="0">
<tr>
<td class="msgBackdropCell" align="center">
<table width="100%" border="0" cellspacing="5" cellpadding="3">
<tr>
<td class="msgLabelCell" align="right" nowrap>
<span class="msgLabelText">Subject</span>
</td>
<td class="msgValueCell" align="left" nowrap>
<span class="msgValueText"><b><!--#msgsubject--></b></span>
</td>
</tr>
<tr>
<td class="msgLabelCell" align="right" nowrap>
<span class="msgLabelText">Posted</span>
</td>
<td class="msgValueCell" align="left" nowrap>
<span class="msgValueText"><!--#msgcreationdate--> by <!--#msgcreatorname link="true"--></span>
</td>
</tr>
<tr>
<td class="msgLabelCell" align="right" nowrap>
<span class="msgLabelText">Last Modified</span>
</td>
<td class="msgValueCell" align="left" nowrap>
<span class="msgValueText"><!--#msgmodificationdate--> by <!--#msgmodifiername link="true"--></span>
</td>
</tr>
<tr>
<td class="msgLabelCell" align="right" nowrap>
<span class="msgLabelText">In Response To</span>
</td>
<td class="msgValueCell" align="left" nowrap>
<span class="msgValueText"><!--#msgInResponseTo link="true"--> <!--#msgSubject msgNum="inResponseTo"--></span>
</td>
</tr>
<tr>
<td class="msgLabelCell" align="right" nowrap>
<span class="msgLabelText">Reads</span>
</td>
<td class="msgValueCell" align="left" nowrap>
<span class="msgValueText"><!--#msgctReads--></span>
</td>
</tr>
<tr>
<td class="msgLabelCell" align="right" nowrap>
<span class="msgLabelText">Label</span>
</td>
<td <!--#msgLabelCellStyle--> align="left" nowrap>
<span class="msgValueText"><!--#msgLabelPopup--> <!--#msgLabelTextStyle-->><!--#msgLabelName--></span>
</td>
</tr>
<!--Start edit for topic field-->
<tr valign="top">
<td class="msgLabelCell" align="right">
<span class="msgLabelText">Topic</span>
</td>
<td class="msgValueCell" align="left" colspan="3">
<span class="msgValueText"><!--#msgCustomField fieldName="weblogCategories" size="5"--></span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="msgToolbarCell" align="left" nowrap>
<table border="0" cellspacing="5" cellpadding="2">
<tr>
<td class="msgToolbarButtonCell" align="center" valign="middle"><span class="msgToolbarText"><!--#msgSaveButton label="Submit Changes"--></span>
</td>
<td class="msgToolbarButtonCell" align="center" valign="middle"><span class="msgToolbarText"><!--#msgPreviewButton label="Preview Msg"--></span>
</td>
<td class="msgToolbarButtonCell" align="center" valign="middle"><span class="msgToolbarText"><!--#msgDeleteButton label="Delete Msg"--></span>
</td>
<td class="msgToolbarButtonCell" align="center" valign="middle"><span class="msgToolbarText"><!--#msgCancelButton label="Cancel Changes"--></span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align="left">
<div class="msgBodyText"><!--#msgbody rows="20" cols="65"--></div>
<!--#if condition="userIsConvAdmin"--><p><span class="msgToolbarCell msgToolbarText"><!--#msgPostToEmail--></span></p><!--#endIf-->
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<tr><td align="left"><p><!--#weblog.addToWeblogForm--></p><br/></td></tr>
<td class="msgToolbarCell" align="left" nowrap>
<table border="0" cellspacing="5" cellpadding="2">
<tr>
<td class="msgToolbarButtonCell" align="center" valign="middle"><span class="msgToolbarText"><!--#msgsaveButton--></span>
</td>
<td class="msgToolbarButtonCell" align="center" valign="middle"><span class="msgToolbarText"><!--#msgpreviewButton--></span>
</td>
<td class="msgToolbarButtonCell" align="center" valign="middle"><span class="msgToolbarText"><!--#msgdeleteButton--></span>
</td>
<td class="msgToolbarButtonCell" align="center" valign="middle"><span class="msgToolbarText"><!--#msgcancelButton--></span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="msgBackdropCell" align="center">
<table width="100%" border="0" cellspacing="10" cellpadding="2">
<tr>
<tr>
<td colspan="2" class="msgValueCell" align="left" valign="top">
<table border="0" cellspacing="0" cellpadding="2" width="100%"><tr><td class="msgLabelCell" align="left"><span class="msgLabelText">ENCLOSURES</span></td></tr></table><br>
<span class="msgValueText"><!--#msgenclosures--></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--END MESSAGE TABLE-->
<div class="blogpost">
<!--#if condition="! userAgentIsRobot"-->
<div class="clearfix" id="singlenavigation">
<div class="prev">
<!--#prevMsglink cssclass="navlink" text="<< Previous"-->
</div>
<div class="next">
<!--#nextMsglink cssclass="navlink" text="Next >>"-->
</div>
</div>
<!--#endIf-->
<h2><!--#msgsubject--></h2>
<div class="blogpostdate"><!--#msgcreationdate time="true"--></div>
<div class="blogposttext">
<!--#msgbody-->
<div class="line">
<div class="prev">
<!--#msgreplylink cssclass="commentlink" text="Post a comment"-->
<!--#if condition="userIsConvAdmin"-->
| <!--#msgeditlink cssclass="commentlink" text="Edit"-->
<!--#endif-->
</div>
<div class="next">
Filed Under: <!--#weblog.item.channels links="true"-->
</div>
</div>
</div> <!--blogposttext-->
<div class=blogpostendborder></div>
</div> <!--blogpost-->
<!--#if condition="! msg.replies.length"-->
<!--#else-->
<!--#msgreplies template="KiwiRepliesTemplate"-->
<div class=blogpostendborder></div>
<!--#endIf-->
<!--Categories-->
<div class="navmenu">
<div class="bl"><div class="br"><div class="tl"><div class="tr">
<h3><!--#msgSubject msgNum="178"--></h3>
<!--#msgBody msgNum="178"-->
</div></div></div></div>
<div class="clear"> </div>
</div>
<!--Better Posts-->
<div class="navmenu">
<div class="bl"><div class="br"><div class="tl"><div class="tr">
<h3><!--#msgSubject msgNum="180"--></h3>
<!--#msgBody msgNum="180"-->
</div></div></div></div>
<div class="clear"> </div>
</div>
<!--Archive-->
<div class="navmenu">
<div class="bl"><div class="br"><div class="tl"><div class="tr">
<h3><!--#msgSubject msgNum="179"--></h3>
<!--#msgBody msgNum="179"-->
</div></div></div></div>
<div class="clear"> </div>
</div>
<!--RSS Links-->
<div class="navmenu">
<div class="bl"><div class="br"><div class="tl"><div class="tr">
<h3><!--#msgSubject msgNum="7"--></h3>
<!--#msgBody msgNum="7"-->
</div></div></div></div>
<div class="clear"> </div>
</div>
<!--Currently-->
<div class="navmenu">
<div class="bl"><div class="br"><div class="tl"><div class="tr">
<h3><!--#msgSubject msgNum="193"--></h3>
<!--#msgBody msgNum="193"-->
</div></div></div></div>
<div class="clear"> </div>
</div>
<!--#if condition="requestPageType=='Weblog II'"-->
<!--Blogroll-->
<div class="navmenu">
<div class="bl"><div class="br"><div class="tl"><div class="tr">
<h3><!--#msgSubject msgNum="6"--></h3>
<!--#msgBody msgNum="6"-->
</div></div></div></div>
<div class="clear"> </div>
</div>
<!--Badges-->
<div class="navmenu">
<div class="bl"><div class="br"><div class="tl"><div class="tr">
<h3><!--#msgSubject msgNum="181"--></h3>
<!--#msgBody msgNum="181"-->
</div></div></div></div>
<div class="clear"> </div>
</div>
<!--#endIf-->
<div class=replypost>
<h3 class="replyheader"><b><!--#msgNum-->.</b> <!--#msgCreatorName link="false"--></a> on <!--#msgCreationDate--></h3>
<div class=replytext>
<p><!--#msgBody--></p>
</div>
</div>
<div id="signupform">
<table>
<tr>
<td colspan="2"><font color="red"><b><!--#signupMessage--></b></font></td>
</tr>
<tr>
<td>Full name:</td><td><!--#signupMemberName--></td>
</tr>
<tr>
<td>Email address:</td><td><!--#signupUsername--></td>
</tr>
<tr>
<td>Password:</td><td><!--#signupPassword size="10"--></td>
</tr>
<tr>
<td>Repeat password:</td><td><!--#signupPasswordRepeat size="10"--></td>
</tr>
<tr>
<td> </td>
<td><!--#signupSubmitButton--></td>
</tr>
</table>
</div>
<!--#weblog.day.items-->
<div class="blogpost">
<h2><a href="<!--#msgUrl-->" class="h2link"><!--#weblog.item.subject--></a></h2>
<div class="blogpostdate"><!--#weblog.item.postedTime format="long"--></div>
<div class="blogposttext">
<!--#weblog.item.body-->
</div>
<p><a class="commentlink" href="<!--#msgUrl-->">Comments (<!--#msgNoOfReplies allReplies="true"-->)</a></p>
<div class="blogpostendborder"><!-- To display a small line between posts--></div>
</div>
<!--#weblog.days-->
/*KiwiStyle.css
Mike Black 2006
Notes: For an explanation of the layout read chapter 5 - Three-Column Layouts with Float and Clear of
Stylin' with CSS a designer's guide. Very important because it explains why IE and firefox behave
differently with how floats are handled.
For explanation of font sizes defined in ems not px see same book Ch. 3 and http://www.clagnut.com/blog/348/
*/
/*General layout definitions*/
* { padding: 0; margin: 0; } /*To clear any browser specific stuff (see Eric Meyer)*/
body {
font-size: 76%; /*set to 76% because it produces the most consistent sizes between IE and Firefox*/
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
line-height: 16px;
background-color: #393925;
}
a:link {
font-weight: bold;
color: #666699;
text-decoration: none;
}
a:visited {
font-weight: bold;
color: #666699;
text-decoration: none;
}
a:hover {
font-weight: bold;
color: #666699;
text-decoration: none;
}
/* Layout defintion */
#mainbox {
border: 1px #000 solid;
width: 774px;
margin-right: auto;
background-color: #A2AB67;
margin-left: 20px;
}
#content {
width: 594px;
float: left;
}
#navigation {
width: 180px;
float: left;
}
#footer {
width: 776px;
background-color: #A2AB67;
margin-left: 20px;
}
#footer p {
text-align: center;
border-left: #000 1px solid;
border-right: #000 1px solid;
padding: 5px;
font-size: .8em;
}
/* Logo is important for pattern purposes when there is no image defined */
#logo {
background-color: #B0B02F;
height: 181px;
}
#logo h1 {
text-align: center;
font-weight: bold;
font-size: 2.5em;
font-family:Georgia, "Times New Roman", Times, serif;
border-bottom: 1px #000 solid;
padding-top: 60px;
padding-bottom: 20px;
}
#logo h2 {
text-align: center;
font-weight: bold;
font-size: 1.3em;
font-family:Georgia, "Times New Roman", Times, serif;
padding-top: 5px;
}
/* For displaying a single post */
.line {
padding-bottom: 10px;
}
.prev {
float: left;
}
.next {
float: right;
font-size: 0.8em;
}
#singlenavigation {
border: #333 2px dotted;
background-color: #F4F4F4;
padding:10px;
margin:10px;
}
#singlenavigation .prev {
padding-left: 10px;
float: left;
font-size: 1em;
}
#singlenavigation .next {
padding-right: 10px;
float: right;
font-size: 1em;
}
/*The Alsett Clearing Method (see book) */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* Main menu navigation. Taken from Book.*/
#mainmenu {
background: url("2/enclosure/menubackground.jpg") no-repeat;
margin-top:-2px;
background-color: #A2AB67;
}
div#mainmenu {
width:100%;
float:left;
font-weight: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .9em;
}
div#mainmenu ul {
margin:0 0 0 10px;
line-height:28px;
}
div#mainmenu li {
float:left;
list-style-type:none;
background-color: #CCCC84;
border-right:1px solid #000;
}
div#mainmenu li:first-child {
border-left:1px solid #000;
}
div#mainmenu li:hover {
background-color:#E3E7C5;
}
div#mainmenu a {
padding: 6px;
text-decoration:none;
color: #484848;
}
div#mainmenu a:hover {
color: #A74040;
background-color:#E3E7C5;
}
/*IE specific tag*/
* html div#mainmenu ul {
float:left;
border-left:1px solid #000;
margin-left:10px;
}
/* Left hand navigation */
.navmenu ul li {
text-decoration: none;
list-style: none;
margin-left: 30px;
font-weight: normal;
font-size: .9em;
font-family: Arial, Helvetica, sans-serif;
list-style-image: url("2/enclosure/bullet.gif");
}
.navmenu li.nobullet {
list-style-image: none;
}
.navmenu {
width: 170px;
padding-top: 20px;
font-size: 1em;
}
.navmenu a {
font-weight: normal;
color: #7B2E2E;
text-decoration: none;
}
.navmenu a:hover {
font-weight: normal;
color: #7B2E2E;
border-bottom: #7B2E2E 1px solid;
text-decoration: none;
}
.navmenu a:visited {
font-weight: normal;
color: #7B2E2E;
text-decoration: none;
}
.navmenu p {
padding-left: 10px;
font-weight: 0.9em;
}
.navmenu h3 {
font-variant:small-caps;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight: bold;
text-transform: uppercase;
text-align: center;
color:#484848;
line-height:28px;
margin-bottom: 10px;
border-bottom: #000 1px solid;
border-top: #000 1px solid;
font-size: 115%; /*had to define in % cause of browsers*/
}
/* Defintion of the semi-rounded right hand navigation shape*/
.bl {margin-left: 10px; background-color: #C2C1B0; width: 170px}
.br {background: url("2/enclosure/br.gif") 100% 100% no-repeat}
.tl {background: url("2/enclosure/tl.gif") 0 0 no-repeat}
.tr {padding:15px}
.clear {font-size: 1px; height: 1px}
/* Blog post content*/
.blogpost {
padding: 10px;
margin: 20px;
background-color: #E3E7C5;
border: #333 1px solid;
}
.blogpostdate {
font-size: .8em;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: right;
margin-bottom: 10px;
}
.blogposttext {
font-size: 1em;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
margin: 0 0 10px 20px;
}
/* Reply post formatting */
.replypost {
padding: 10px;
margin: 20px;
background-color: #E3E7C5;
border: #333 1px solid;
}
.replyheader {
font-size: 1.1em;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: right;
margin-bottom: 10px;
}
.replytext {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
margin: 0 0 10px 20px;
}
/*blogpost text formatting defintions*/
.blogpost p {
margin: 1em 0;
}
.blogpost ul {
margin: 1em 0;
}
.blogpost li {
margin-left: 20px;
}
.blogpost h2 {
padding: 10px 18px 0 18px;
border-bottom-color:#999999;
border-bottom-width: 1px;
border-bottom-style: dashed;
font-size: 1.2em;
/* Required for single navigation when only 1 post is displayed*/
color:#A74040;
font-variant:small-caps;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:bold;
font-size: 14px;
font-style: normal;
line-height: 16px;
text-decoration: none;
}
.h2link:link, .h2link:visited, .h2link:hover {
font-variant:small-caps;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:bold;
color:#A74040;
font-style: normal;
line-height: 16px;
text-decoration: none;
}
.bodyLink:link {
font-weight: bold;
color: #666699;
border-bottom: #666699 1px dotted;
text-decoration: none;
}
.bodyLink:visited {
font-weight: bold;
color: #666699;
border-bottom: #666699 1px solid;
text-decoration: none;
}
.bodyLink:hover {
font-weight: bold;
color: #666699;
border-bottom: #666699 1px solid;
text-decoration: none;
}
.commentlink:link, .commentlink:visited, .commentlink:hover {
font-weight: bold;
color: #666699;
border-bottom: #666699 1px solid;
text-decoration: none;
font-size: 0.8em;
}
.leftinline {
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.leftinlineborder {
border-color:#000000;
border-style:solid;
border-width:1px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.rightinline {
float: right;
margin-left: 10px;
margin-bottom: 10px;
}
.rightinlineborder {
border-color:#000000;
border-style:solid;
border-width:1px;
float: right;
margin-left: 10px;
margin-bottom: 10px;
}
.bodylink:link {
font-weight: bold;
color: #666699;
border-bottom: #666699 1px dotted;
text-decoration: none;
}
.bodylink:visited {
font-weight: bold;
color: #666699;
border-bottom: #666699 1px solid;
text-decoration: none;
}
.bodylink:hover {
font-weight: bold;
color: #666699;
border-bottom: #666699 1px solid;
text-decoration: none;
}
.h3class {
padding: 0px;
margin: 0px;
font-size: 1.2px;
font-variant:small-caps;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:bold;
font-style: normal;
line-height: 16px;
}
.boxedtext {
font-size: 0.9em;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
}
.listheader {
font-weight: bold;
font-style: italic;
color: #666666;
}
.nobullets {
list-style: none;
margin-left: 0;
padding-left: 1em;
text-indent: -1em;
}
.indent {
margin-left: 20px;
}
/* Styles for conversant forms */
#msg {
padding-left: 10px;
padding-top: 20px;
}
#msg h3 {
font-variant:small-caps;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:bold;
font-size: 1.2em;
color:#A74040;
font-style: normal;
line-height: 16px;
text-decoration: none;
}
#logonbox {
padding: 10px;
margin: 20px;
border: 1px #000 solid;
line-height: 16px;
}
#signupbox {
padding: 10px;
margin: 20px;
border: 1px #000 solid;
}
#signupform {
padding-left: 50px;
line-height: 20px;
}
#loginform {
padding-left: 50px;
line-height: 20px;
}
.msgLabelText {
font-weight: bold;
}
.search {
padding-left: 20px;
}
.searchform {
margin: 20px;
border: 1px #000 solid;
}
KiwiMsgEditTemplate
KiwiMsgViewTemplate