By ShutterFreak on

I want to create various page headers, each of which consists of artwork and CSS positioning information. Imagine these page headers each consists of 3 layers:

  1. The page header background layer provides the default background that applies to the entire page header. For example, it can fill with a repeatable background image.
  2. The page header foreground contains an image that is either adjusted left, right or centered, depending on image features. Example: a mountain view with skies to the left can be right adjusted, and the sky can then be repeated to the left in X direction in the page header background layer.
  3. The page header watermark layer contains a watermark image (a PNG image with alpha channel and transparency) that appears on top of the previous layers, and whose position depends on the image used in the page header foreground.

To illustrate one of these headers:

<!-- header -->
<div id="header" class="clear-block">
  <div id="header-banner-background" style="height: 200px; width: 100%; position: absolute; top: 0px; left: 0px; background: url(http://shutterfreak.net/sites/all/themes/colourise/images/bg-left.jpg) repeat-x top left">
    <div id="header-banner-image" style="height: 200px; width: 100%; background:url(http://shutterfreak.net/sites/all/themes/colourise/images/bg.jpg) no-repeat top right"><!-- right-align the image -->
      <div id="header-banner-watermark" style="height: 200px; width: 100%; margin: 75px 170px 0px 0px; background:url(http://shutterfreak.net/sites/all/themes/colourise/images/watermark.png) no-repeat top right">
      </div>
    </div>
  </div>
</div>

One use case is to create a set of headers that are displayed based on the season or the month in the year. Another is to select a header based on a taxonomy term that applies to the node.

Which is according to you the best way to create this in a Drupal theme?

⋅ Categories: Drupal 6.x

Comments

mndonx’s picture

mndonx commented

Hi Shutterfreak - I think the way I would approach it is by using body classes to give the body of a page a class depending on your criteria (either season/month or taxonomy term.) Then, you can use those unique body classes to theme the various headers differently.

You will need to do some PHP work in the template.php file to add that custom body class. You could add it as a preprocess function, or you could override phptemplate's body attributes:

http://www.edwardford.com/2009/02/03/add-classes-and-id-to-body-tag-drupal/

That should get you started.

Hope that is helpful -
Amanda

ShutterFreak’s picture

ShutterFreak commented

Hi Amanda,

Many thanks for your input!

As a matter of fact, I came across yet another Drupal module that may provide parts of the functionality I am planning to implement: Taxonomy Theme.

Best regards,

Olivier

mndonx’s picture

mndonx commented

Cool. That should work too then!

Amanda