By Bigpappaj on

I would like to be able to change the the banner... minimum... and the color scheme of my Drupal theme in different areas of my website. I have looked at Themekey but it only allows a complete theme replacement... and not separate settings if using the same theme. If there is a way to do this... or a module I am missing... please let me know. Thanks for the help :)

⋅ Categories: Drupal 6.x

Comments

grobemo’s picture

grobemo commented

Depending on what you want to do (both how you want to change the banner and which pages you want to change), you might be able to do this with pure CSS. For instance, the following code will change the background color of a div with class banner on the front page, leaving other pages untouched:

body.front div.banner {
  background-color: #abcdef;
}
Bigpappaj’s picture

Bigpappaj commented

Its a school district website... the school pages are just nodes instead of being sub-domains. So I would like to change the banner/color on any node with a path alias of /"School"/* for example. So any page created under that school... would have the applied banner/color. Hope that makes sense. And thanks for the quick reply :)

grobemo’s picture

grobemo commented

Whether you can do it with CSS depends on exactly how you're implementing this.

I assume you want each school to have a different banner/color, right?

How are you organizing the pages for the different schools? Are you using a special type of content for them? Are you using Organic Groups, by any chance?

If pure CSS doesn't work, we can do some fairly simple preprocessing in template.php.

Bigpappaj’s picture

Bigpappaj commented

I'm fairly new to all of this... picked it up 2 months ago. I do want the different school nodes to have a different banner/color. I am using the pathauto module and creating aliases for the 5 different main school nodes. Each school main "page" is just a page type node with an alias "SchoolName". So each school is found at http://www.drupalsite.org/Schoolname and I would like to be able to change the banner/color based on thats schoolname. I am not using OG at the moment. I looked at it, but in my stage of drupal learning... it was a little complex for me. Thanks!

You would have to tell me what CSS to put where... Once this is a usable site... which it mostly is, I'm going to be getting some books... and filling in all the gaps... which are rather large right now. But I was kind of on a time limit for this site :)

grobemo’s picture

grobemo commented

It sounds, then, like you'll need to do a little preprocessing first. (Don't worry. We'll walk you through it.) There will be three main steps to getting this to work.

  1. Tell your site to mark the body element of each school node.

    Go into your theme's template.php file and look for a function called YOURTHEME_preprocess_page. (YOURTHEME, of course, would be replaced by the actual name of your theme.) If you can't find it, then add this code to the very end of your template.php file (without the <?php ?> tags). If you can find it, copy and paste this code into the end of it:

    <?php

// Add the alias for the current path to your <body> element's classes.
function YOURTHEME_preprocess_page(&$vars) {

  // Initialize the body_classes variable, if it's not already there.
  $vars['body_classes'] = empty($vars['body_classes']) ? '' : $vars['body_classes'];

  // Get the current alias.
  $current_alias = drupal_lookup_path('alias',$_GET['q']);
  // Do something different for different aliases.
  switch ($current_alias) {

    // If there is no alias for the current node, $current_alias will be false.
    // If that's the case, we'll just "break out" of the switch and do nothing.
    case false:
      break;

    // If $current_alias matches any of the following values, add a class
    // to $vars['body_classes']. You'll want to replace PS1, etc., with the
    // aliases for your five main school nodes.
    case 'PS1':
    case 'PS2':
    case 'PS3':
    case 'IS1':
      $vars['body_classes'] .= ' '. $current_alias;
      break;
  }
}
?>
  2. Ensure that your theme is printing $body_classes in page.tpl.php.

    Open your theme's page.tpl.php file. Find the <body> tag in the file. If it doesn't already look like the code below, copy and paste this code in place of the <body> tag:

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

    This tells your theme to include the $body_classes variable that we created/updated in step 1.

  3. Theme each page as you wish.

    Open your theme's style.css file. Inside the file (in shouldn't really matter where), add the following code:

    body.PS1 ELEMENT {
  /* Add your styles here */
}

body.PS2 ELEMENT {
  /* Add your styles here */
}

    Etc. You should replace ELEMENT with the element whose styles you want to change on the relevant page. (To figure out what they're called, you should get the Firebug add-on for Firefox. It will become your best friend.)

This will give you page-level control over the elements on each school node.

grobemo’s picture

grobemo commented

Especially if you're going to let individual school administrators keep their own content up to date, I'd recommend using Organic Groups. It's a little tricky at first, but once you understand it, it's really helpful. I learned how to use it by reading Bill Fitzgerald's Drupal for Education and E-Learning. It's a good book for beginners, too.

Bigpappaj’s picture

Bigpappaj commented

Thanks for all the great info :) I found that using sub-themes (renaming the folder of the main theme and certain files within) worked out best for my uses. I could use this method in conjunction with the Themekey module to get my desired effect. Appreciate your time :) And thanks for the book recommendation.

doomed’s picture

doomed commented

Can you explain in further detail what you did?

I'm looking for a similar solution.

Thanks!

Bigpappaj’s picture

Bigpappaj commented

Sure :)

Even though this was a long time ago, and I might go about it a different way now... I haven't worried much about it.

Themekey is used to switch between different themes based on triggers... like, "Change to this theme when I'm at url http://www.drupal.com/X, but change to THIS theme when I'm at http://www.drupal.com/Y".

Because you can only have one instance of a theme on your site at a time... at least contained within the same site directory, I renamed the theme folder we were using to represent what I was going to use that alteration of the theme for. So say I was using Garland.... I would have theme folder names like Garland_Sales and Garland_Default to represent different areas of the site where I wanted a variation on the Garland theme.

I would set up themekey to change to the appropriate theme when i navigated to certain places on my site... and then all pages under that key site. So http://www.druapl.com/X would have a theme... and everything under it (X/something, X/somethingelse).

I had to change:
1) The name of the folder
2) The name of the .info file for the theme
3) The name peramater inside of the .info file (name = "whatever you changed the folder name to")

I believe that's all I did to clone the same theme any number of times you need. I hope this was enough information, let me know if you need some more help. Thanks

-BigpappaJ

doomed’s picture

doomed commented

I'll investigate about the module and tell you something later.

ThemeKey http://drupal.org/project/themekey