By Bluesky48 on

Hi there,

I'm trying to add an image to a custom block located in my footer. The following code is located in my style.css file (at the very bottom). The blocks ID according to my browser when hovering of 'configure' is block/1.

 #block-block-1 {
      background: url('images/videoimage.jpg')
      }

And the HTML...

<!--FOOTER AREA-->
     <div id="footer-pseudo" class="clearfix">
         <div id="footer" class="clearfix">
          <div id="footer-wrapper">
 
                  <div id="footer-left">
                       <?php print $footer_left; ?>
                  </div>

                  <div id="footer-middle-one">
                       <?php print $footer_middle_one; ?>
                  </div>
                  <div id="footer-middle-two">
                       <?php print $footer_middle_two; ?>
                  </div>
                  <div id="footer-right">
                  <?php print $footer_right; ?>
                  </div>
          <?php if ($full_footer): ?>
          <div id="full-footer">
                <?php print $full_footer; ?>
          </div>
          <?php endif; ?>    
          </div><!-- /footer-wrapper -->

The block I'm trying to add the image to is located in the footer_right region. I've cleared all cached data from my website, what are the most common reasons for CSS not showing? Apart from user error of course!

Many thanks

Comments

tdimg’s picture

tdimg commented

it would help if you provided the actual html output of the block rather than Drupal code here. Also instead of hovering over configure, use Firebug to identify the correct id.

Bluesky48’s picture

Bluesky48 commented

The generated source.

 <div id="footer-right">
 <div class="block-region">footer right</div>

Would this suggest the CSS should be #block-block-footer-right instead of #block-block.1? The tutorials I've read advised me to use the hover over 'configure' trick.

tdimg’s picture

tdimg commented

The tutorials I've read advised me to use the hover over 'configure' trick.

whether this trick works depends on the theme you're using.

Would this suggest the CSS should be #block-block-footer-right

nope, block is Drupal language, but we're dealing here with html/css. Drupal (which works on your server) is just used to populate elements, i.e. the output. The output is then dealt with in your browser. Your browser doesn't know that Drupal is used to generate the output, so you need to ignore Drupal language for once and need to focus on html/css.

In short, it's just #footer-right, it'd be #block-block-footer-right if you'd actually see that written there. with that you're addressing the outer div, the first one there. but that one has another child div that is only identified with a class (.block-region). The difference between identifying elements with ids and classes, other than addressing them differently (# for ids and . for classes) are that any html element can only have one id while it can have multiple classes and an id can only appear once on the whole page while a class can be used more than once

<div id="footer-right" class="one two three four blue yellow red help warning security">
<p class="blue yellow">some text</p>
</div>

So if you want to address the child div of #footer-right instead of #footer-right you'd have to use this css selector:

#footer-right .block-region {
}

check out htmldogs.com for more help with CSS.

Bluesky48’s picture

Bluesky48 commented

Thank you very much for the detailed explanation, I'm now actually able to theme a damn block.