Use a class on a DIV on specific content with Omega

Question

I'm using Drupal 7 and my theme is Omega. I have got a class "mask" and its CSS code is like so:

.mask {
    background:url("../img/header_mask.png") repeat-x scroll 0 0 transparent;
    height:200px;
    position:absolute;
    top:0;
    width:100%!important;
    z-index:101
}

I'm creating a class on Omega theme options to show content top, but my div shows on every page. So, I want show this class only on node pages.

This is my node.tpl.php:
<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>

  <?php print $user_picture; ?>

  <?php print render($title_prefix); ?>
  <?php if (!$page): ?>
    <h2<?php print $title_attributes; ?>><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h2>
  <?php endif; ?>
  <?php print render($title_suffix); ?>

  <?php if ($display_submitted): ?>
    <div class="submitted">
      <?php print $submitted; ?>
    </div>
  <?php endif; ?>

  <div class="content"<?php print $content_attributes; ?>>
    <?php
      // We hide the comments and links now so that we can render them later.
      hide($content['comments']);
      hide($content['links']);
      print render($content);
    ?>
  </div>

  <?php print render($content['links']); ?>

  <?php print render($content['comments']); ?>

</div>

Where should I add my "mask" class in this code?

Answer 1

You don't mention if it's a particular node TYPE that you're after. If it is, then please clarify that. You also don't say what the .mask div actually contains, so I'm going to assume it contains nothing and the content is the background image. If this is the case then you can just put <div class="mask"></div> anywhere. The position: absolute should mean that it won't dislodge any other content anyway.

I'm also not sure why you need !important after width. If this class is something you're declaring then it shouldn't get overriden unless YOU want it to. If you're worried about it then I'd namespace the class instead (ie .mytheme-mask).

EDIT

Put it anywhere, but write it like this:

<?php if (!drupal_is_front_page() && !$teaser) { ?>
  <div class="mask"></div>
<?php };?>

This means that if the page is a content page (not the front page) and not a teaser then place your div in the node.