D7 Theming

Basics

• Building a new theme for Drupal 7 - IBM developerWorks

• Structure of the .info file
• Default .info values
• Assigning content to regions
• Creating a sub-theme
• JavaScript and jQuery

• Semantics, structure and presentation
• Grok Drupal (7) Theming--Notes

• http://drupal.org/node/1089656

Modules

• Code per Node makes it possible to add custom CSS and Javascript per node, per block, and per content type. The code is stored in the database, but served from the file system. It also supports syntax highlighting with CodeMirror.

• CSS Injector allows administrators to inject CSS into the page output based on configurable rules. The CSS is added using Drupal's standard drupal_add_css() function and respects page caching, etc.

• JS injector - drupal_add_js() function and respects page caching, etc.

Development

• http://drupal.org/project/styleguide - gives Drupal elements to test css on

• http://drupal.org/project/devel_themer
  • Using the Drupal Theme Developer Tool: YouTube: Theming Basics for Drupal
  • Candidate page tpl name for particular custom content type entry - how to add devel themer override template suggestions in a custom content type.

Backwards compatibility

• http://drupal.org/project/modernizr

• http://drupal.org/project/css3pie

Layout

Various different methods

Views
Nodequeue

Blocks
Panels

Context
Spaces

Templates

• Overriding themable output - broad overview
  • About overriding themable output

• PHPTemplate theme engine

• Core templates - the default template (.tpl.php) files provided by core in Drupal 7. variable and purpose docs are in the templates.
  • Drupal 7 Template Suggestions - override templates in a more targeted way
• Default baseline variables

• Theme Preprocess Functions: an Introduction

• modules--system--theme.api.php - Default theme implementations

• modules--system--html.tpl.php
• modules--system--page.tpl.php
• modules--node--node.tpl.php
  • template_preprocess_node

• etc.

block

• modules--block--block.tpl.php;

<div id="block-<?php print $block->module . '-' . $block->delta; ?>" class="<?php print $classes; ?> "<?php print $attributes; ?>>
  <?php print render($title_prefix); ?>
  <?php if ($block->subject): ?>
    <h2><?php print $block->subject ?></h2>
  <?php endif;?>
  <?php print render($title_suffix); ?>
 
  <div class="content"<?php print $content_attributes; ?>>
    <?php print $content ?>
  </div>
</div>

Forms

For beyond basic content types field layouts;

• Theming forms in your theme

• http://drupal.org/node/751826

• http://api.drupal.org/api/drupal/developer--topics--forms_api_reference.html/7
  • http://api.drupal.org/api/drupal/includes--form.inc/7
  • http://api.drupal.org/api/drupal/includes--form.inc/group/forms/7
  • http://api.drupal.org/api/drupal/includes--form.inc/group/form_api/7

• http://api.drupal.org/api/drupal/developer--topics--forms_api_reference.html/7 - programmer's reference to the Drupal Form API

function milk_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'contact_node_form') {
    $form['actions']['submit'] = array(
        '#type' => 'submit',
        '#value' => t('Send'),
    );
  }
}

• hook_form_alter
  • A Very Introduction to Drupal's hook_form_alter()
  • Hook snippets: hook_form_alter

• Basic Form with submit button

• http://www.advomatic.com/blogs/jack-haas/notable-changes-to-theming-drupal-7 Notable changes to theming in Drupal 7] - Form Overrides section has another perspective on the basics

Responsive

• http://drupal.org/project/adaptive_image