Deschutes | Technical reference

Deschutes
technical reference

General layout
Code structure
Stylesheet

General layout

Deschutes is, basically, a table with two columns with the following layout:

Header
search bar
main page	sidebar
footer

Code structure

There is, in detail, the structure of the table.

top section

page title

<table class="main">

header <tr> <td id="header" colspan="2"> Blog Title, Blog description, Category name </td> </tr>
search bar <tr> <td id="search" colspan="2"> Search bar </td> </tr>
main section <tr> <td id="page"> Post navigation links </td>	sidebar <td id="sidebar"> categories list archives list links list </td> </tr>
footer <tr> <td id="footer" colspan="2"> WordPress version </td> </tr>

</table>

top section

The top section provides the following informations:

document type declaration (XHTML 1.0 Strict)
charset type
title, as blog title / category name / month name
WordPress version used
stylesheet URL

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?><?php single_cat_title(' | '); ?><?php single_month_title(' '); ?>
</title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

<style type="text/css">@import url(<?php bloginfo('stylesheet_url'); ?>);</style>
</head>

header

The header cell displays in column : blog title, blog description, category name or month name.

<tr>
<td id="header" colspan="2">
<a class="maintitle" href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a>
<p><?php bloginfo('description'); ?></p>
<span class="maintitle"><?php single_cat_title(); ?><?php single_month_title(' '); ?></span>
</td>
</tr>

search bar

The search bar cell includes the simplest implementation of the site search engine.

<tr>
<td id="search" colspan="2">
<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div><input type="text" value="" name="s" id="s" /></div>
</form>
</td>
</tr>

main section

The main section includes the post structure inside a WordPress Loop (below, the code in purple).

Each post is structured as:

title, working also as permalink; to the right, the date shown as Year - month number - day number
post content
a field showing the post category (tag list)
a field showing the number of comments and a link to the comment page.
At the left lower corner of the page there are the navigation links "next" and/or "previous".

<tr>
<td id="page">

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class="post">

<div class="head">
<a class="title" href="<?php the_permalink() ?>"><?php the_title(); ?></a>
&nbsp;&nbsp;&nbsp;&nbsp;<?php the_time('Y-m-d') ?>
</div>

<?php the_content(); ?>

<p class="labels">Labels: <?php the_category(', ') ?></p>

<div class="comments">
[ <?php comments_number('0','1','%'); ?> <a href="<?php comments_link(); ?>">comments</a> ]
<?php comments_template(); ?>

</div>

</div>

<?php endwhile; else: ?><p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

<div id="navigation"><?php posts_nav_link('      ', '« previous', 'next »'); ?></div>
</td>

sidebar

The sidebar displays four lists: pages, categories, archives, links.

The categories are ordered by name; the number of post in each category may be shown (show_count=1) or not (show_count=0).
The archives are ordered by month (type=monthly); the list is limited to 12 months (limit=12).

<td id="sidebar">

<ul><?php wp_list_pages('title_li='); ?></ul>
<br />
<br />
<div class="category">categories</div>
<ul><?php wp_list_categories('sortby=name&show_count=0&title_li='); ?></ul>
<br />
<br />
<div class="category">archives</div>
<ul><?php wp_get_archives('type=monthly&limit=12'); ?></ul>
<br />
<br />
<div class="category">links</div>
<?php get_links(); ?>

</td>

footer

The footer shows a simple line of text, returning what version of WordPress is used.

<tr><td id="footer" colspan="2">powered by wordpress <?php bloginfo('version'); ?></td></tr>

Stylesheet

The body has the following margins:
left: 8%
right: 8%
top: 6%
bottom: 2%

Deschutes uses the Georgia font or the Times New Roman, or a generic serif font as alternative.
The font size is medium: 14 pixels.

The header has an height of 150 pixel. The title is centered, aligned to the middle.
The content frame, to the left of the sidebar, has a width of 80%. The text is justified.
The line-height is large (150%). Posts are separated by a large blank space (90 pixels).
The sidebar is narrow, and has a thin border.

Images can have two styles:

normal: This is the default.
The image has a thin border with a 4 pixels padding.
The image float to the right of the text, and has a margin of 10 pixels.
simple: The image is displayed as it is (no border, no padding, no floating) and has a reduced margin (5 pixels).
To use this style, specify <img class="simple" src="your_image_pathname" />

The stylesheet has also the general purpose classes .left, .right, .center, to align text and other elements.

The colours are declared separately.
There is a colour definition for body, sidebar, titles, links, and borders.

This is the stylesheet:

/*
Theme Name: Deschutes
Theme URI: http://www.pacquola.org/deschutes/
Description: WordPress theme made simple.
Author: Andrea Pacquola
Author URI: http://www.pacquola.org/
Version: 1.0
License: Creative Commons Attribution-NonCommercial 2.5
License URI: http://creativecommons.org/licenses/by-nc/2.5/deed.en_GB
*/

/* page margin, main font */
body {
margin : 6% 8% 2% 8%;
font-family : Georgia, 'Times New Roman', serif;
font-size : 14px;
}

/* table width; cells have separate borders */
table#main {
width : 100%;
border-collapse : separate;
}

/* header height and title position */
td#header {
height : 150px;
text-align : center;
vertical-align : top;
}

/* title font, weight and size */
.maintitle {
font-family : Georgia, 'Times New Roman', serif;
font-size : 48px;
font-weight : normal;
letter-spacing : -1px;
}

/* search bar dimensional settings */
td#search {
height : 150px;
padding : 40px;
vertical-align : top;
text-align : center;
}

td#search input {
width : 40%;
border : 1px solid;
padding : 3px;
font-family : Georgia, 'Times New Roman', serif;
}

/* main section settings, width, distance of content from the sidebar */
td#page {
width : 80%;
padding-right : 20px;
vertical-align : top;
font-size : 14px;
text-align : justify;
}

/* line height of text and distance between posts */
div.post {
line-height : 150%;
margin-bottom : 90px;
}

/* post title size */
.title {
font-family : Georgia, serif;
font-size : 21px;
}

/* distance between post title and post */
.head {
margin-bottom : 15px;
}

/* distance between post and comments */
div.comments {
margin-top: 100px;
}
/* distance between post and categories list */
p.labels {
margin-top : 20px;
}

/* width of the comment section */
#comment {
width : 80%;
}

/* border style of input fields */
#author, #email, #url, #comment {
border : 1px solid;
}

/* style of 'Leave a reply' title */
#respond {
padding-top : 30px;
font-size : 21px;
font-weight : normal;
}

/* style of 'Submit a comment' button */
#submit {
padding : 2px;
font-family : 'Trebuchet MS', Arial, sans-serif;
font-size : 12px;
border : 1px solid;
}

/* positioning of the navigation bar ('previous-next' links ) */
#navigation {
margin: 10px 0px;
}

/* sidebar settings: padding, border style, vertical alignment and font */
td#sidebar {
padding : 40px 12px;
vertical-align : top;
font-family : 'Trebuchet MS', Arial, sans-serif;
font-size : 14px;
border : 1px solid;
}

/* sidebar link settings */
#sidebar a:link, #sidebar a:visited {
font-family : 'Trebuchet MS', Arial, sans-serif;
font-size : 12px;
text-decoration : none;
}

#sidebar a:hover {
text-decoration : underline;
}

/* sidebar list style */
#sidebar ul {
margin : 0;
padding : 0;
list-style : none;
}

/* distance between list title and list in the sidebar */
.category {
margin-bottom : 4px;
}

/* footer settings;  padding and alignment */
td#footer {
padding : 20px;
text-align : center;
}

/* links text is not justified */
#page a:link {
text-align : left;
}

/* image links have no border */
a img, a img.simple {
border : none;
}

/* blog title, category title, month title, navigation links are not undersigned */
a.title, a.maintitle, #navigation a:link, #navigation a:visited {
text-decoration : none;
}

/* normal image settings */
div.post img {
margin : 10px;
padding : 4px;
vertical-align : middle;
float : right;
border : 1px solid;
}

/* img class="simple" for alternative */
div.post img.simple {
margin : 5px;
padding : 0;
vertical-align : middle;
float : none;
border : none;
}

/* H1, H2, H3 and HR size and weight */
h1 {
font-size : 40px;
font-weight : normal;
}

h2 {
font-size : 36px;
font-weight : normal;
}

h3 {
font-size : 21px;
font-weight : normal;
}

hr {
border : 1px solid;
}

/* general purpose alignment classes */
.left {
text-align : left;
}

.center {
text-align : center;
}

.right {
text-align : right;
}

/* Colours palette */
body {
background : rgb(255, 255, 255);
color : rgb(40, 40, 40);
}

.maintitle {
background : transparent;
color : rgb(40, 40, 40);
}

div.post img {
border-color : rgb(200, 200, 200);
}

#sidebar, #submit {
background : rgb(255, 255, 255);
color : rgb(40, 25, 85);
}

a:link {
background : transparent;
color : rgb(95, 40, 170);
}

a:visited {
background : transparent;
color : rgb(40, 25, 85);
}

a.title:link, a.title:visited {
background : transparent;
color : rgb(90, 45, 175);
}

a.maintitle {
background : transparent;
color : rgb(40, 25, 85);
}

hr {
border-color : rgb(200, 200, 200);
}

td#sidebar, td#search input, #submit, #author, #email, #url, #comment {
border-color : silver;
}