By enli on

Hello,

I'm writing to know if anybody ever faced this issue:

I created two blocks:
"Block 1" uses a Custom Menu created within the "Menu" section, in the administration panel. This Menu must use a different css style from all other block's contents. In this block the menu items must be linked to pages and must have their own background images and styles (ex: background-image: url(sfondo_menu_extra.jpg) also used for "a" and "a-hover" data, in order to create a sort of animation during navigation.
The menu will display MENU ITEM1, MENU ITEM2, etc.... with a specific (identical for all menu items) style.

"Block 2" is a simple block (it could be one of the other default Drupal blocks) that has the theme default style; it looks just like all other blocks' style.
The differentiation applies only two the first, main, navigation menu as displayed in "Block 1". All other blocks and menus must look like all other and default theme style.

Hope to get some help... Unfortunately I never found forum support about this specific problem.

⋅ Categories: Drupal 5.x

Comments

Anonymous’s picture

Anonymous (not verified) commented

Hello enli,

I may get this wrong but, why don't you use the element ID of Block 1 to style it differently from all the other blocks (block 2 etc.)?

If you check the source of your page you will recognize that (almost) every block has it's on ID like this:

#block-menu-id or #block-user-1 where id is a simple integer value.

So what you will see wrapping your blocks (depending on your theme (here garlend/minelli)) is something like that:

#block-menu-68 .clear-block block block-menu .content new_block

<div id="block-menu-68" class="clear-block block block-menu">
  <div class="content new_block">
    <ul class="menu">
       <li class="leaf"><!-- your menu items go here --></li>
    </ul>
  </div>
</div>

This should give you a hook to overrule the standard theme styles for block 1.

With best regards

Mike

enli’s picture

enli commented

I think that all depends on .leaf class... but I can't figure out how to make it depend on the #block-menu-xx attribute... because if I change the .leaf class style all block will change. The html source of the menu is:

<div class="block block-menu" id="block-menu-49"> <h2 class="title"></h2>
    <div class="content">
      <ul class="menu">
        <li class="leaf"><a href="/?q=node/xxx" title="MENU ITEM1">MENU ITEM1</a></li>
        <li class="leaf"><a href="/?q=node/xxx" title="MENU ITEM2">MENU ITEM2</a></li>
      </ul>
     </div>
</div>

Thanks for your help

Anonymous’s picture

Anonymous (not verified) commented

Hello enli,

you change the .leaf class in your theme CSS file and all block styles reflect that change? Well, that's exactly what CSS is expected to do.
You need to overrule this "global" .leaf style with a more specific rule. In your case, using the source from above, a selector like this on should be more specific:

div#block-menu-49 div#content ul.menu li.leaf {
  <!-- your styles go here -->
}

This selector is very verbose. You could delete all the element names in front of "#" and ".". The reason behind this selector is to be as specific as possible. So we concatenate all the classes and ID's until we reach the .leaf class. Now you can style your menu items.

I hope this will help and work. :)

Mike

rcharlieis’s picture

rcharlieis commented

Would this still be possible if each menu item has a different background image?