Theme Development Checklist
This will be a checklist for any of my new themes, or when I do upgrade to the existing themes. They are features that should exist regardless the design. I said ‘will’ because it is not complete yet.
misc
- only show taxonomy (‘posted in’..) if taxonomy is not empty.
For ported themes
- include original readme file as appendix in theme readme
- preserve CSS ids and class names as much as possible, so customised version will be easily ported to drupal by copying the CSS file over.
Use URIs that work on every sites
- print url() for site root
- print $directory path for theme’s directory
HTML elements
Styling should be provided for these: h1, h2, h3, a, code, pre, acronym, abbr, blockquote, cite, hr
Forms and admin interface
textareas and tables in admin pages are very often too wide for any fixed-width design. Use these CSS as starting point for keeping forms and tables in check.
.form-item input.form-text,
.form-item textarea.textarea,
.description {
width: 100%;
padding: 0;
}
.form-item select {
width: auto;
}
.box .form-item select {
font-size: 0.8em;
}
.user-login-block .form-item input {
width: auto;
}
table {
font-size: 0.8em;
letter-spacing: -0.1em;
}
th { letter-spacing: normal}
table strong { letter-spacing: normal}
.node table {
font-size: 1em;
letter-spacing: normal;
}
#searchform {
margin: 10px auto;
padding: 5px 3px;
text-align: center;
}
#searchform #s {
width: 100px;
padding: 2px;
margin: 0;
}
#searchform #searchsubmit {
padding: 1px;
margin: 0;
}
Make full use of theme variables
These are global variables defined in phptemplate.engine:
$variables = array(
‘base_path’ => base_path(),
‘breadcrumb’ => theme(‘breadcrumb’, drupal_get_breadcrumb()),
‘closure’ => theme(‘closure’),
‘content’ => ‘‘ . $content . ‘‘,
‘footer_message’ => variable_get(‘site_footer’, FALSE) . “\n” . theme(‘blocks’, ‘footer’),
‘head’ => drupal_get_html_head(),
‘head_title’ => implode(’ | ‘, $head_title),
‘help’ => theme(‘help’),
‘language’ => $GLOBALS[‘locale’],
‘layout’ => $layout,
‘logo’ => theme_get_setting(‘logo’),
‘messages’ => theme(‘status_messages’),
‘mission’ => isset($mission) ? $mission : ‘’,
‘primary_links’ => menu_primary_links(),
‘search_box’ => (theme_get_setting(‘toggle_search’) ? search_box() : ‘’),
‘secondary_links’ => menu_secondary_links(),
‘sidebar_left’ => $sidebar_left,
‘sidebar_right’ => $sidebar_right,
‘site_name’ => (theme_get_setting(‘toggle_name’) ? variable_get(‘site_name’, ‘Drupal’) : ‘’),
‘site_slogan’ => (theme_get_setting(‘toggle_slogan’) ? variable_get(‘site_slogan’, ‘’) : ‘’),
‘styles’ => theme_get_styles(),
‘tabs’ => theme(‘menu_local_tasks’),
‘title’ => drupal_get_title()
);
These are for nodes:
$variables = array(
‘content’ => ($teaser && $node->teaser) ? $node->teaser : $node->body,
‘date’ => format_date($node->created),
‘links’ => $node->links ? theme(‘links’, $node->links) : ‘’,
‘name’ => theme(‘username’, $node),
‘node’ => $node, // we pass the actual node to allow more customization
‘node_url’ => url(‘node/’. $node->nid),
‘page’ => $page,
‘taxonomy’ => $taxonomy,
‘teaser’ => $teaser,
‘terms’ => theme(‘links’, $taxonomy),
‘title’ => check_plain($node->title)
);
And these are for comments:
function phptemplate_comment($comment, $links = 0) {
return _phptemplate_callback(‘comment’, array(
‘author’ => theme(‘username’, $comment),
‘comment’ => $comment,
‘content’ => $comment->comment,
‘date’ => format_date($comment->timestamp),
‘links’ => isset($links) ? theme(‘links’, $links) : ‘’,
‘new’ => $comment->new ? t(‘new’) : ‘’,
‘picture’ => theme_get_setting(‘toggle_comment_user_picture’) ? theme(‘user_picture’, $comment) : ‘’,
‘submitted’ => t(‘Submitted by %a on %b.’,
array(’%a’ => theme(‘username’, $comment),
‘%b’ => format_date($comment->timestamp))),
‘title’ => l($comment->subject, $_GET[‘q’], NULL, NULL, “comment-$comment->cid”)
For boxes:
function phptemplate_box($title, $content, $region = ‘main’) {
return _phptemplate_callback(‘box’, array(
‘content’ => $content,
‘region’ => $region,
‘title’ => $title
));
}