Drupal 6 theming

Drupal 6 theming notes.

Index

Themes intro

Set admin theme as Garland (or whatever) in Administer -> Site configuration -> Administration theme.

The user can choose their own theme when they edit their account.

Administer -> Site building -> Themes can be used to choose site theme (which will also be used as admin theme if not set as described above).

Drupal 6 theme guide: Theming Drupal 6

Variables for page.tpl.php

page.tpl.php

Zen based theme

Download and install Zen.

Make sure PHP is installed with ctype support.

Follow subthemeing instructions. Note that mention of STARTERKIT in theme-settings.php must also be replaced with the new theme name in order to have theme options like disabling the theme registry in Administer -> Site building -> theme configure option (I didn’t do this initially so suspect it was missing from instructions).

Gotchas

  • A Zen sub theme can not have a hyphen in it as they’re not allowed in PHP function names.
  • If the right sidebar is missing, ???.

New theme

mkdir sites/all/themes/mytheme
touch sites/all/themes/mytheme/mytheme.info

Add the following to mytheme.info, changing version number accordingly. Commented out fields are not required (version is not required, but recommended so that someone installing it on a different version of Drupal will not expect perfection):

name = My Theme
;description = My Theme
;screenshot = screenshot.png
version = 6.11
core = 6.x
engine = phptemplate
;base theme = garland
;regions[left] = Left sidebar
;regions[right] = Right sidebar
;regions[content] = Content
;regions[header] = Header
;regions[footer] = Footer
;features[] = logo
;features[] = name
;features[] = slogan
;features[] = mission
;features[] = node_user_picture
;features[] = comment_user_picture
;features[] = search
;features[] = favicon
;features[] = primary_links
;features[] = secondary_links
stylesheets[all][] = all.css
stylesheets[screen][] = screen.css
stylesheets[print][] = print.css
stylesheets[projector][] = projector.css
stylesheets[handheld][] = handheld.css
;scripts[] = myscript.js
;php = 5.2.9

Styling

Adding style sheets

Must disable CSS optimisation until site live, since this caches CSS:

Administration -> Site configuration -> Performance.
Optimize CSS file: disabled.

If caching is enabled, must clear cache to reload the theme’s .info file:

Administration -> Site configuration -> Performance.
Clear cached data.

Default file, when none defined in .info, is style.css. Defining custom styles will prevent this default being used.

To override a module’s CSS, redefine in the .info file. You could alternatively just use CSS selectors to override from your theme’s other CSS.

You can use the API to dynamically load stylesheets, perhaps based on conditionals, by doing so from a preprocessor function.

Sub theme oddities

Stylesheets

If you create a sub-theme, the parent’s style.css will not be picked up unless the sub-theme references its own css from its .info file. The css file doesn’t even have to exist.

Templates

If you want to override a template, the more general template must also reside in the sub-theme otherwise it won’t be inherited. e.g. To have node-ad.tpl.php picked up you also need node.tpl.php in the sub-theme - it won’t be picked up from the parent theme.

Per “section” styling

If you have a menu set up to emulate site sections, with pages and sub pages within a section, then the URLs generated by pathauto must be changed and the (zen) page template must be modified to add a class to the body that indicates the current section as well as the current page.

  1. Administer -> Site building -> URL alisaes, ‘Automated alias settings’ tab.
  2. Change the default path pattern, in ‘Node alias settings’ section, to content/[menupath-raw] (from default content/[title-raw]) so that that menu hierarchy is reflected in the URL.
  3. Regenerate the aliases. See the ‘Regenerate pathauto URL aliases’ section of this doc.
  4. Add the following function to template.php, which looks at the path to generate a body class for the section:
function [theme]_preprocess_page(&$vars, $hook) {
  if (!$vars['is_front']) {

    // Get unique class for top-level page (aka page section).
    $path = drupal_get_path_alias($_GET['q']).'/'; // Path must have a trailing slash (doesn't matter if there's two of them).
    $path = substr($path, 0, strpos($path, '/', strpos($path, '/')+1)); // Everything before second slash.
    $class = zen_id_safe('page-' . $path);

    // Add to template variables that store classes for the body.
    if (!in_array($class, $vars['body_classes_array'])) {
      $vars['body_classes_array'][] = $class;
    }
    if (!strpos($vars['body_classes'].' ', $class.' ')) { // Add trailing space to prevent match with substring of a specific class.
      $vars['body_classes'] .= ' '.$class;
    }

  }
}

Specify a theme’s module dependencies

In the theme’s .info file:

dependencies[] = content
dependencies[] = views
etc

Note: Use ‘content’ instead of ‘cck’.

Last modified: 16/11/2011 Tags: ,

This website is a personal resource. Nothing here is guaranteed correct or complete, so use at your own risk and try not to delete the Internet. -Stephan

Site Info

Privacy policy

Go to top