Customizing the full page layout and sections using CSS and unique BODY Class & IDs
Last modified: June 20, 2009 - 18:17
description
This explains how to control the entire page layout depending on the node type using CSS styles.
Thanks to Zach Harkey for submitting the original snippet.
This snippet works with Drupal 4.5, 4.6 and 4.7.
usage
This snippet will create a body class and id for every page on your site. An example application might be for adjusting a fixed width layout when you use the administrative options.
Using this snippet, when you go to to admin/themes, for example, you may use the following style hooks in your style sheet to control how the full page looks.
<body class="section-admin" id="page-admin-themes">
In your style sheet (the CSS file in your active theme folder), you simply add another line to change the layout when you click on the ADMINISTER menu:
.content { width="744px" }
.section-admin .content { width="100%" }Step 1 of 2
- make a backup copy of your page.tpl.php file.
- using a text editor like notepad.exe or equivalent, replace the
<body <?php print theme("onload_attribute"); ?>>line with the snippet below in your page.tpl.php file - upload your edited page.tpl.php layout file to your active theme folder
<?php
/**
* This snippet creates a <body> class and id for each page.
*
* - Class names are general, applying to a whole section of documents (e.g. admin or ).
* - Id names are unique, applying to a single page.
*/
// Remove any leading and trailing slashes.
$uri_path = trim($_SERVER['REQUEST_URI'], '/');
// Split up the remaining URI into an array, using '/' as delimiter.
$uri_parts = explode('/', $uri_path);
// If the first part is empty, label both id and class 'main'.
if ($uri_parts[0] == '') {
$body_id = 'main';
$body_class = 'main';
}
else {
// Construct the id name from the full URI, replacing slashes with dashes.
$body_id = str_replace('/','-', $uri_path);
// Construct the class name from the first part of the URI only.
$body_class = $uri_parts[0];
}
/**
* Add prefixes to create a kind of protective namepace to prevent possible
* conflict with other css selectors.
*
* - Prefix body ids with "page-"(since we use them to target a specific page).
* - Prefix body classes with "section-"(since we use them to target a whole sections).
*/
$body_id = 'page-'.$body_id;
$body_class = 'section-'.$body_class;
print "<body class=\"$body_class\" id=\"$body_id\"";
print theme('onload_attribute');
print ">";
?>Step 2 of 2
- Every page will now have a unique BODY class and BODY ID. e.g.
<body class="section-admin" id="page-admin"> - Edit your style.css file in your active theme folder to style each section.
notes
- The snippet uses the link to determine what the class and ID are called, so please note that if you have Drupal in a subdirectory, your BODY class and BODY ID titles will be something like this:
<body class="section-private" id="page-private-profile">. Where the Drupal site is in thewww.example.com/privatesubfolder and the user is viewing the PROFILE (User list) page. - Thanks to Zach Harkey for posting the original page. Click through for more details.
Need mod_rewrite
For this to work properly, you'll need mod_rewrite and have clean URLs enabled. Or else your IDs will contain ?q= in them. Other than that - thanks alot for the patch. Helped me out a great deal!
A solution that's a lot
A solution that's a lot easier than messing around with the REQUEST_URI is arg()
like this?
do you mean like this?
http://drupal.org/node/46027
Phil
Using the arg() function is
Using the arg() function is a good idea to avoid problems when mod_rewrite is turned off. A very simple solution for generating specific id attributes for the body tag is:
<?phpprint '<body id="'. arg(0) .'" ';
print theme('onload_attribute');
print ">";
?>
This code generates body ids such as, node, admin, user, taxonomy,...
--
Software Development and IT-Consulting Services: ramiro.org (German language)
Torlaune.de - Die Fußball-Community
HOW TO: using a pure PHP theme, like chameleon
Replace
$output .= "<body>\n";with$output .= "<body id=\"". $title ."\">\n";. Note that in the chameleon theme, the variable$titlehas been defined as$title = drupal_get_title();. This inserts the page title in the ID attribute of the body tag. Of course, this only works if each title has a unique name, and could be messy if you have long titles. However, it is a very simply solution, and it allowed me to have each page show a unique body ID so I could style individual pages differently using the same stylesheet.No need for clean URLs
You don't need that. Use this snippet to display the first part without the ?q=:
$uri_path = trim($_SERVER['REQUEST_URI'], '/');
$uri_parts = explode('/', $uri_path);
$uri_node = explode('?q=', $uri_parts[0]);
print "$uri_node[1]";
Yes, you have to change the array places if you're migrating a site, but beyond that, I don't see the trouble.