My first Drupal site used a subtheme of Zen, which included content-type body classes, so I could, for example, have different CSS styles for Blog entries than for Stories.

I'd like to do the same in a new site I'm working on, using my own custom subtheme of Danland.

I found this: http://drupal.org/node/162485

But I'm not a programmer, so I don't know how to incorporate that code in a way that also maintains the "sidebars-1" and "sidebars-2" body styles that already exist in Danland.

Any help would be greatly appreciated.

Comments

danpros’s picture

Hi,

To add that classes without disturbing existing ids and body classes you can try the following steps:

  1. Change this line in page-front.tpl.php and page.tpl.php:
    <body<?php print phptemplate_body_class($left, $right); ?>>
    

    with this:

    <body<?php print phptemplate_body_class($left, $right); ?> class="<?php print $body_classes; ?>">
    
  2. Change this in template.php
    function phptemplate_body_class($left, $right) {
    	if ($left && $right) {
    		$class = 'sidebars-2';
    		$id = 'sidebar-side-2';	
    	}
    	else if ($left || $right) {
    		$class = 'sidebars-1';
    		$id = 'sidebar-side-1';
    	}
    	
    	if(isset($class)) {
    		print ' class="'. $class .'"';
    	}
    		if(isset($id)) {
    		print ' id="'. $id .'"';
    	}
    }
    

    To this:

    function phptemplate_body_class($left, $right) {
    	
    	if ($left && $right) {
    		$id = 'sidebar-side-2';
    	}
    	else if ($left || $right) {
    		$id = 'sidebar-side-1';
    	}
    
    	if(isset($id)) {
    		print ' id="'. $id .'"';
    	}
    }
    
  3. Add this in template.php:
    function danland_preprocess_page(&$vars, $hook) {
      $body_classes = array($vars['body_classes']);
    
      if ($vars['left'] && $vars['right']) {
        $body_classes[] = 'sidebars-2';
      }
      
      else if ($vars['left'] || $vars['right']) {
        $body_classes[] = 'sidebars-1';
      }
    
      $vars['body_classes'] = implode(' ', $body_classes);
    }
    

Let me know if not working. Do not forget to clear the cache. I will updating the handbook for other users.

Dan

danpros’s picture

Status: Active » Closed (fixed)

Scroll to the bottom for more advanced body classes.

Katrina B’s picture

Title: Would like to add content-type and taxonomy body classes » Add additional body classes to Danland theme
Version: 6.x-2.0 » 6.x-2.1

Thanks. It's a good start. I recently located a more extensive set of code that covers pretty much everything I'd like to do with body classes:

function themename_id_safe($string) {
  // Replace with dashes anything that isn't A-Z, numbers, dashes, or underscores.
  $string = strtolower(preg_replace('/[^a-zA-Z0-9-]+/', '-', $string));
  // If the first character is not a-z, add 'id' in front.
  if (!ctype_lower($string{0})) { // Don't use ctype_alpha since it is locale aware.
    $string = 'id' . $string;
  }
  return $string;
}

function themename_preprocess_page(&$vars, $hook) {

  // Add conditional stylesheets.
  if (!module_exists('conditional_styles')) {
    $vars['styles'] .= $vars['conditional_styles'] = variable_get('conditional_styles_' . $GLOBALS['theme'], '');
  }

  // Classes for body element. Allows advanced theming based on context
  // (home page, node of certain type, etc.)
  $body_classes = array($vars['body_classes']);
  if (!$vars['is_front']) {
    // Add unique classes for each page and website section
    $path = drupal_get_path_alias($_GET['q']);
    list($section, ) = explode('/', $path, 2);

    $body_classes[] = themename_id_safe('page-' . $path);
    $body_classes[] = themename_id_safe('section-' . $section);
    if (arg(0) == 'node') {
      if (arg(1) == 'add') {
        if ($section == 'node') {
          array_pop($body_classes); // Remove 'section-node'
        }
        $body_classes[] = 'section-node-add'; // Add 'section-node-add'
      }
      elseif (is_numeric(arg(1)) && (arg(2) == 'edit' || arg(2) == 'delete')) {
        if ($section == 'node') {
          array_pop($body_classes); // Remove 'section-node'
        }
        $body_classes[] = 'section-node-' . arg(2); // Add 'section-node-edit' or 'section-node-delete'
      }
    }
  }

  if (module_exists('taxonomy') && $vars['node']->nid) {
    foreach (taxonomy_node_get_terms($vars['node']) as $term) {
    $body_classes[] = 'tax-' . eregi_replace('[^a-z0-9]', '-', $term->name);
    }
  }

  $vars['body_classes'] = implode(' ', $body_classes); // Concatenate with spaces
}

I'd appreciate some help with how to incorporate it into the Danland theme. Thanks.

danpros’s picture

Hi,

Follow the first step of my comment above then replace the whole template.php with this:

function phptemplate_body_class($left, $right) {

	if ($left && $right) {
		$id = 'sidebar-side-2';
	}
	else if ($left || $right) {
		$id = 'sidebar-side-1';
	}

	if(isset($id)) {
		print ' id="'. $id .'"';
	}
}

function danland_id_safe($string) {
  // Replace with dashes anything that isn't A-Z, numbers, dashes, or underscores.
	$string = strtolower(preg_replace('/[^a-zA-Z0-9-]+/', '-', $string));
  // If the first character is not a-z, add 'id' in front.
	if (!ctype_lower($string{0})) { // Don't use ctype_alpha since it is locale aware.
		$string = 'id' . $string;
	}
	return $string;
}

function danland_preprocess_page(&$vars, $hook) {

  // Add conditional stylesheets.
	if (!module_exists('conditional_styles')) {
		$vars['styles'] .= $vars['conditional_styles'] = variable_get('conditional_styles_' . $GLOBALS['theme'], '');
	}

	$body_classes = array($vars['body_classes']);

	if ($vars['left'] && $vars['right']) {
		$body_classes[] = 'sidebars-2';
	}
 
	else if ($vars['left'] || $vars['right']) {
		$body_classes[] = 'sidebars-1';
	}
	
	if (!$vars['is_front']) {
    // Add unique classes for each page and website section
    $path = drupal_get_path_alias($_GET['q']);
    list($section, ) = explode('/', $path, 2);

    $body_classes[] = danland_id_safe('page-' . $path);
    $body_classes[] = danland_id_safe('section-' . $section);
		if (arg(0) == 'node') {
			if (arg(1) == 'add') {
				if ($section == 'node') {
					array_pop($body_classes); // Remove 'section-node'
				}
				$body_classes[] = 'section-node-add'; // Add 'section-node-add'
			}
			elseif (is_numeric(arg(1)) && (arg(2) == 'edit' || arg(2) == 'delete')) {
				if ($section == 'node') {
					array_pop($body_classes); // Remove 'section-node'
				}
				$body_classes[] = 'section-node-' . arg(2); // Add 'section-node-edit' or 'section-node-delete'
			}
		}
	}

	if (module_exists('taxonomy') && $vars['node']->nid) {
		foreach (taxonomy_node_get_terms($vars['node']) as $term) {
			$body_classes[] = 'tax-' . eregi_replace('[^a-z0-9]', '-', $term->name);
		}
	}

	$vars['body_classes'] = implode(' ', $body_classes);
}

if (drupal_is_front_page()) {
	drupal_add_js(drupal_get_path('theme', 'danland') . '/scripts/jquery.cycle.all.js');
}

Dan

Katrina B’s picture

Status: Closed (fixed) » Active

Great. Thanks! My only worry is that my taxonomy terms are showing up in the body classes with the capital letters still in place. I should be seeing "tax-audition" as a class, but I'm seeing "tax-Audition" instead. Any suggestions?

ishmael-sanchez’s picture

Status: Active » Fixed

wrap the term name in the PHP function string to lower function ex. $body_classes[] = 'tax-' . strtolower(eregi_replace('[^a-z0-9]', '-', $term->name));

danpros’s picture

Status: Fixed » Closed (fixed)

Thanks ishmael-sanchez,

Yes but since we already creating the function for that so just call it:

	if (module_exists('taxonomy') && $vars['node']->nid) {
		foreach (taxonomy_node_get_terms($vars['node']) as $term) {
			$body_classes[] = danland_id_safe ('tax-' . eregi_replace('[^a-z0-9]', '-', $term->name));
		}
	}
Caesar’s picture

hi, i want to give a different colour to danland sheet so that the background colour is not the same as the sheet colour

grkm2002’s picture

Version: 6.x-2.1 » 7.x-1.0-rc2

How do you achieve the results on this page for drupal 7 or is it already incorporated into the page-tpl.php file.