Sometimes when we are in theming a drupal theme process may encounter unique situation that require us to handle condition for layout when the page is loaded with or without javascript enabled at the client side.

Such situation sample would be like when we use Beauty tips to hide the form description element and show it using jQuery in tooltips style. If we don't hide the description when the page is loaded while the client browser has javascript enabled then the description will be shown until client hover their mouse (or click) to the form element, which strange to have a description shown and hidden upon a mouse action.

So to have the proper user experience which is to hide the description upon page load if user have javascript enabled then show the description in the tool tips using jQuery, we need to utilize drupal "js" class in the body element on our CSS styling code. Something like this :

body.js .description {
display: none;
}

The "js" class will only available when the client browser supports javascript thus when the client browser doesn't support javascript the js class will not be rendered by drupal and hence the css code above will be ignored and then the description div element will be shown as normally would.

What about if you want more detailed page classification? you can actually add virtually anything to the body class from your drupal theme template.php.

Sample code to do this :

/**
   * Preprocess page function
   * Change phptemplate to your theme machine name
   **/

function phptemplate_preprocess_page(&$vars) { 
  // Build array of helpful body classes
  $body_classes[] = ($vars['logged_in']) ? 'logged-in' : 'not-logged-in';                                 // Page user is logged in
  $body_classes[] = ($vars['is_front']) ? 'front' : 'not-front';                                          // Page is front page
  if (isset($vars['node'])) {
    $body_classes[] = ($vars['node']) ? 'full-node' : '';                                                   // Page is one full node
    $body_classes[] = (($vars['node']->type == 'forum') || (arg(0) == 'forum')) ? 'forum' : '';             // Page is Forum page
    $body_classes[] = ($vars['node']->type) ? 'node-type-'. $vars['node']->type : '';                       // Page has node-type-x, e.g., node-type-page
  }
  else {
    $body_classes[] = (arg(0) == 'forum') ? 'forum' : '';                                                   // Page is Forum page
  }

   // sample for checking if the page has sidebar enabled or not
  // you need to change the sidebar_full , left and right to your theme actual
  // region name that occupied the sidebar
   if ($vars['sidebar_full']  ||  $vars['left'] || $vars['right'] || $vars['secondary_links_tree'] || $vars['search_box']) {
		$body_classes[] = 'left-sidebar';
	} else {
		$body_classes[] = 'no-sidebar';
	}

	if (arg(0) == 'comment' && arg(1) == 'reply') {
		$body_classes[] = 'comment-reply'; // comment reply
	}

	if (module_exists('beauty_tips')) {
		$body_classes[] = 'beauty-tips';
	}

	// put specific page url in as class for better css fine tuning
	$body_classes[] = 'page-' . arg(0);
	// implode all the classes together and put it back to body class variable
	$vars['body_classes'] = implode(' ', $body_classes);  
	
}

You will need to put the $body_classes in your page.tpl.php body tag

<body class="
<?php
 
print $body_classes;
?>
">

Is this helpful for you? if yes please drop some comment in......