Adding Classes to Omega Based on IA

The design for pace.princeton.edu called for a banner image that could be on a third level page and every page below it. For example, in the Community House section of the site, the banner remains consistent. When the Pace Center adds a new page under the Community House page, it automatically gets the Community House banner.

We decided that since the banners would almost never change, we could control their display with CSS. However, Omega did not include any classes about which section of the site the user is viewing.

We know that each menu item gets a unique ID. For example, the Pace Center's menu structure looks like this, where "mlid" is the menu ID of each menu item:

  1. Community Service (mlid: 608)
    1. Community House (mlid: 2069)
      1. Projects (mlid: 2369)
      2. About CH (mlid: 2079)
    2. Student Volunteers Council (mlid: 2068)
  2. Break Trips (mlid: 560)
  3. etc, etc...

Our thinking was that if we could add the menu IDs for each page and its parents, we could have predictable CSS classes to target for a banner background image. For example, the "Projects" page could get 2369 and 2069, while the "About CH" page could get 2079 and 2069. "Community House" would get 2069. All three would get 608.

Therefore, I wrote the following template_preprocess_page() function to add the each of the classes that we needed. menu_get_active_trail() returns an array of the information we need. I then iterate over that array to add the classes to a high level div that wraps all of the content for the page.

function pace_preprocess_page(&$vars) {
$active_trail = menu_get_active_trail();
if (sizeof($active_trail)>1) {
  for($i=1; $i<sizeof($active_trail); $i++) {
    $vars['attributes_array']['class'][] = 'banner-section-id-' . $active_trail[$i]['mlid'];
    }
  }
}

Then, in the CSS, we can add something like this:

.banner-section-id-2069 #zone-content {
background: white url(/sites/pace/themes/pace/images/banners/communityhouse.png) no-repeat 210px 10px;
}

Since we know that the Community House page and all of its children will get the ".banner-section-id-2069" class, we are able to add the banner consistently with CSS. The only thing that the client needs to do is put all pages related to Community House under the Community House page in the menu.

If you are going to copy this tutorial, be sure to replace "pace" in the function name with the name of your theme.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.