Drupal: How to override css of a certain block?

Question

Hi guys,

I need to remove the border of one block from the rest of the right sidebar blocks but I don't know how to do that. I already tried to do it like this:

#sidebar-right div#block-block-14 {
    border:1px dashed orange !important;
    text-align:center;
}

div#block-block-14 is the drupal generated id of the block:

<div id="block-block-14">

But I can't remove its border.

Thanks in advance :)

Answer 1

As it's an id that you are trying to target, you should have the # character before it:

#div#block-block-14 {
   border:1px dashed orange !important;
   text-align:center;
}

As the id is unique for the page, you only have to specify one id, you don't need to specify the #sidebar-right id also.

I'm not sure how it feels about the # character inside the id, though. It might be impossible to target an id that looks that way. In that case you have to change how the id is generated, or find another way of targetting the element, like adding a class name to the element.

Edit:
With the correction, the id looks fine, and you only have to use:

#block-block-14 {
   border:1px dashed orange !important;
   text-align:center;
}

Answer 2

The hash inside the id will ruin it for you. Drupal wont place a hash inside the div be default, so you probably need to look to your theme. block.tpl.php is probably the template that is creating this problem for you. Normally the div# would not be included in the id, the rest of it tells you which block it is, block-block-14 simply means the block from the block module with id 14. Different modules may have slightly different naming schemes but the idea is generally the same.

Once you get Drupal to stop printing the extra div# you should be able to do this in your css:

#block-block-14 {
    ....
}

Unless you use panels you usually don't need anything other than the id, since each block can only be located in one region. Depending on how the rule you want to overwrite was enforced, you might need to add some extra selectors to give it more importance.