Customizing themes for node types, terms, sections, paths, and front page (4.x)
Note: for Drupal 5, you probably want to see http://drupal.org/node/104316 instead
You can customize your theme for individual posts, URL paths, taxonomy terms, sections, and your front page.
A more comprehensive collection of examples for theming nodes, pages and other can be found in the PHP Template Snippets >> Customising full page layouts and sections section of the handbook.
One way to customize your site is to use the sections module to apply different themes to different parts of your site. However, if you use a custom theme or modules that have their own theme template like the event module this requires a lot of duplicate CSS and image resources.
The key to having multiple themes on one site is determining from the theme engine what part of the site you are in. Here is a list of the conditions we can check for from the template engine.
$ls_front phptemplate variable can be used to check if this is the front page.
<?php
if ($is_front) {
include('front.tpl.php');
return;
}
?>The drupal arg() function is used to get the arguments in a path.
arg(0)=="admin"// is /admin
arg(0) =="node"// is /node
arg(0)=="user" // is /user
arg(0)=="node"&&arg(1)=="add" // is /node/add
arg(0)=="node"&& arg(2)=="edit" // is /node/###/edit
arg(0)=="user"&&arg(1)=="add" // is /user/add
arg(0)=="admin"&&arg(1)="user"&&arg(2)=="create" // is /admin/user/create
arg(0)=="alias"&&arg(1)=="alias1" is /alias/alias1
arg(0)=="taxonomy"&&arg(1)=="term"&&arg(2)=="term#" // is /taxonomy/term/term#
//arg(1)=="comment"
//arg(2)=="reply"
You might be interested in Customizing your node template by node type
Once we know the front_page value or path we can use different theme templates or apply CSS files or modify the CSS classes of the xHTML tags. This section will be broken into three subpages shortly.
- Apply a specific template such as front.tpl.php, admin.tpl.php, term#.tpl.php.
<?php
if ($is_front) {
include 'front.tpl.php';
return;
}
elseif (arg(0)=="taxonomy"&&arg(1)=="term"&&arg(2)=="term#") { // add argument of choice
include 'term#.tpl.php';// add template of choice
return;
} - Alternately we can use different CSS for each section of our site. In the example below we determine the section based on path and then apply a different CSS. In the example below we determine which CSS to add. Further explanation pending.
- We can also apply CSS classes directly to the xHTML that is to be themed
<?php
if ($is_front) {
include 'page_front.tpl.php';
return;
}
if ($node->type == 'nodetype') { // all pages on my site are 'nodetype'
$my_path = explode("/", drupal_get_path_alias('node/'.$node->nid)); // all pages have path like 'section/page'
$my_path = $my_path[0];
} else {
$my_path = arg(0);
}
switch ($my_path) {
case 'using':
$section = 1;
break;
case 'education':
$section = 2;
break;
case 'company':
$section = 3;
break;
case 'image':
$section = 4;
break;
case 'forum':
$section = 5;
break;
default:
$section = 0;
}
$css_section = 'section'.$section;
?> PHPTemplate theme:
on your body tag (from bluemarine) in page.tpl.php :
<body <?php print $onload_attributes ?> >
Would become:
<body class=" <?php print arg(0); ?> " <?php print $onload_attributes ?> >
You can then use .admin as a parent css selector for admin sections.
For Smarty
on your body tag (from bluemarine_smarty) in page.tpl :
<body{$onload_attributes}>
Would become:
<body class="{php} echo arg(0); {/php}"{$onload_attributes}>
When viewing the root node this may produce empty class attribute values -- including a constant prefix to the class would prevent this.