Drupal: How to override css of a specific block?
I need to remove the border of one block from the rest of the right sidebar blocks, but I don't know how. I've 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 id generated by the drupal block:
<div id="block-block-14">
But I cannot remove its border.
Thank you in advance:)
source to share
The hash inside the ID will destroy it for you. Drupal doesn't put the hash inside the div by default, so you will probably need to look at your theme. block.tpl.php
is probably the pattern that poses this problem for you. Usually div # is not included in the ID and the rest indicates what block it is, block-14 simply means a block from a block module with an id 14. Different modules can have slightly different naming schemes, but the idea is usually the same and same.
Once you start Drupal, to stop printing the additional div #, you must do this in your css:
#block-block-14 {
....
}
If you're not using panels, you usually don't need anything other than an ID, since each block can only be in one region. Depending on how the rule you want to rewrite was applied, you may need to add some extra selector to give it more meaning.
source to share
Like the identifier you are trying to set up, there must be a # symbol in front of it:
#div#block-block-14 {
border:1px dashed orange !important;
text-align:center;
}
Since the id is unique to the page, you only need to specify one id, you also don't need to # the sidebar to the right.
I'm not sure if this is about the # character inside the identifier. It might not be possible to target an ID that looks like this. In this case, you need to change the way the ID is generated, or find another way to target the element, such as adding the class name to the element.
Edit:
With the fix, the ID looks ok and you only need to use:
#block-block-14 {
border:1px dashed orange !important;
text-align:center;
}
source to share