By m_i_c_h_a_e_l on

I am using a zen sub-theme (my own creation).

I'm using a metallic background for the content-area, and I want to put an image of a rivet in each corner.

I think the best way to do that is to create a div at the top and bottom of the content-area in my page.tpl.php file, and put the images in the divs.

That's as far as I can figure. I'm not sure how or where exactly to add the divs, and the specific syntax for them.

Then I'm not sure where in my css to format the divs with a background image.

I know this is not a drupal question per se, but I am confused. I would appreciate any advice on how to achieve this.

If divs is not the way, I would dearly appreciate any other suggestions.

⋅ Categories: Drupal 6.x

Comments

nevets’s picture

nevets commented

The content area is in page.tpl.php so that is where you want to add the divs. Note you really only need on div as you could attach one of the images to the content div. Give the div(s) unique css ids and you can add css to style.css

m_i_c_h_a_e_l’s picture

m_i_c_h_a_e_l commented

My apologies. I'm getting pretty good at working with drupal, but the templates and divs still throw me. I'm an old HTML guy.

Here is the existing code in my page.tpl.php:

        <?php print $content_top; ?>

        <div id="content-area">
          <?php print $content; ?>
        </div>

        <?php print $content_bottom; ?>

And here is what I think I need to add:

        <?php print $content_top; ?>

        <div id="content-area">
               <DIV ID="RIVET"></DIV>
          <?php print $content; ?>
        </div>

        <?php print $content_bottom; ?>

Something doesn't look right about that though. Is that the right way to close the DIV tag? And is it in the right place?

And then, how exactly do I style the div in my style.css? I believe it would be something like:

#rivet
  width: etc;
  background: etc;

Imagine a plaque you might receive as an award. Basically a piece of wood with a metal sheet attached to the front. Sometimes with 4 pins or rivets. That's the look I'm trying to achieve.

Finally, the Zen theme uses both "content" and "content_bottom" regions. I want the 4 rivets to always appear, regardless of whether I have content in 1 or both regions. That's why I believe the "content-area" section is the right place for the rivet div.

I really appreciate your help, and I hope you will be patient! Thanks.

nevets’s picture

nevets commented

Actually it has content_top, content and content_bottom, so you would want you divs above content_top and below content_bottom.

Css would be something like

#rivet {
  width: 600opx;
  height: 16px;
  background-image: url(path-to-image-relative-to-directory-with-css-file);
}

where width and height reflect the width and height of the image.