By feeper on

I am trying to modify the Zen theme so that there is a background image on the blocks. One for the header, one for the content and one for footer. The effect is to have a shadowed block. I have looked through the CSS, while confident this can be done, I could not find a place to throw in the background images. Any ideas would be appreciated!

Kevin

⋅ Categories: Drupal 5.x

Comments

feeper’s picture

feeper commented

I am able to put in a background for the block for left and right sidebar. I am trying to find out what coding I need to put in to specify the header of the block and the footer. This way I can use a different background image (top and bottom of the shadow box). Any ideas how I could code this and would I do this in layout.css?

Thanks,

Kevin

erikhanson’s picture

erikhanson commented

In header, do you mean the h2 elements the titles for the block sit in?

If you're not already, I would recommend using Firebug in Firefox to hone down on the particular styles you need to monkey with.

feeper’s picture

feeper commented

Hi Erik,

Ya, I am using firebug for this. I found that h2 controlled the title of the block and the title of content in the main content area, so that is not going to work.

At least I tracked down the content area of the block - .block .content - so I can implement a background there.

Now I don't see anything for the bottom of the block section. Everything I found controls basically the whole area.

Is there a way to make these areas?

=================
header for the block
=================

content of the block - .block .content

=================
footer for the block
=================

My end goal is to have a 50px graphic as the background for the header of block, a 1px for the background of the content that will repeat and a 50px graphic for the footer of the block.

feeper’s picture

feeper commented

Discovered H2 will change the background of the menu block on the left sidebar, but it also changes any backgrounds assigned to H2 which is the main content block too.

So to avoid changing any other areas referencing h2, I renamed the class for the header of the sidebar to .contenttitle. That fixed the header issue. So I am now able to place a background image in for the top and the middle(content). I am now stuck with trying to create a footer for the sidebar.

I have found this in layout.css:

body.sidebar-left  #footer {
  margin-left: -210px;
}

body.sidebar-right #footer {
  margin-right: -210px;
}

body.both-sidebars #footer {
  margin: 0 -210px;
}

It was /* out so it was doing anything. I am assuming I would use these to make the footer, but I am not quite sure how yet.

In order to get a div reference to use for the footer, I have modified the block.tpl.php file as follows:

<div id="block-<?php print $block->module .'-'. $block->delta; ?>" class="block block-<?php print $block->module ?>">  
  <div class="blockinner">
    <h2 class="contenttitle"> <center><?php print $block->subject; ?></center> </h2>
    <div class="content">
      <?php print $block->content; ?>
    </div>    
    <div class="contentfooter">  /* Added to create a section for the footer.
    </div>
  </div>
</div>

I have added .contentfooter to the style.css file to reflect the background image, but when I check to see if .contentfooter is present with Firebug, I see it in the firebug window, but it does not appear to be referenced when I just use the mouse to scan over the area.

erikhanson’s picture

erikhanson commented

You should be able to target the blocks h2 with more specific and targeted css like:

#sidebar-right h2 {
your_style_here
}

Anyway instead of excluding the other H2's by adding classes to them, more specifically target your required H2's with descendant selectors, Google descendant selectors or look at http://www.websiteoptimization.com/speed/tweak/descendant/

feeper’s picture

feeper commented

That's what I have figured out so far. Using the Zen theme there really isn't anything to select the bottom (footer) of the menu block on the side bar. I have been able to create a reference point and it shows yellow in firebug, but as for putting anything it, that is what is confusing me.

erikhanson’s picture

erikhanson commented

I think you're going to have to have some kind of content in that footer div before anything background style will be rendered by the browser. Try adding something in between your div tags like a non-breaking space and see if that give you something to work with in the footer.

feeper’s picture

feeper commented

You were right there!

That's great Erik, thank you!

In the Zen theme there is gap between the "header" of the menu block and the "content". The same is true for the "content" and the "footer". What should I be looking for to cut that gap out?

Thanks again :)

CtrlAltDelete’s picture

CtrlAltDelete commented

You might try adding a div id="block-footer" or something similar to the block.tpl.php template and then add a selector for it to the zen.css stylesheet along w/ a background-image attribute to load your footer image.

thornz’s picture

thornz commented

Hi,

Sorry to resurrect this thread but I am having the a somewhat similar problem.

I'm also using the zen template. What I'm trying to do is give the sidebars some colors, one color for the header and the body.

I am successful with Firefox, Opera & Konqueror on Windows, BSD & Linux machines. But no luck with IE6.

Using descendant selectors:
style.css

#sidebar-right .block h2, #sidebar-left .block h2 {
background: #990000;
}

Even tried removing the ".block" part [#sidebar-right h2 { background: #990000; }] but still no luck.

The issue here seems to be just with IE6 but you guys might have a better idea.

Any help would be much appreciated.

Thanks

Sree’s picture

Sree commented

any tags getting activated nywhere?
whats the pblm u r facing in IE?

-- Sree --
IRC Nick: sreeveturi

thornz’s picture

thornz commented

Thank you for your reply Sree.

I'm sorry, I wasn't very clear. This is my first to post.

My h2 color for the sidebar blocks as described appears ok with Firefox, Opera, Konqueror but not with IE6 and it kinna messes up my design intentions.

As of now, the background colors for the sidebars are bare white both for the header(h2) and the contents (item lists).

Further, I'd like my header colors for the sidabars to be white while the h2 background colors set to pale red. Blue on light gray for the item lists.

This is ok with most browsers except with IE6. The text color would indeed turn white but the background color for th h2 will not set to pale red hence, if the site is viewed in IE6, the headers seem to disappear (since the text color and background are the same.)

Thank you again

thornz’s picture

thornz commented

Hello folks,

Thanks for the help.

I found the answer to my issues at http://drupal.org/node/128729.

It seems to be an issue with the adoption of certain css parameters as well as the perennial differences in implementation among different browsers particularly the island of IE6.

Anyway, the h2 should contain a height attribute : #sidebar-left .block h2 {.... height: 1.3em;....} ... and on.

*cheers*