Alternate CSS style for a specific Block
syquest - July 19, 2006 - 17:00
I am a designer, not a developer. That being said…
After hours of trial and error, I’ve made some minimal progress with CSS and customizing themes. I’ve managed to assign custom styles to block titles (styles.css), and I’ve managed to assign custom styles to images (image_assist.css), These custom styles, however, are global and leave little room for flexibility.
My question is: How would you assign a specific style to a specific block or to a specific image within a specific block?
Lets say I have a block titled “Custom Block” that contains an image, “Custom Image”
How can I make the title of Custom Block red without changing the title colors to all other blocks? To that end, how can I give the Custom Image – inside of Custom Block – a red border without changing the borders to all other images?
All suggestions are welcome. Thank you.
Each block has a unique id
Each block has a unique id of the form block-type-delta. If you visit administer -> blocks and hoover over (or click on) the configure link for the block in question the path will end in admin/block/configure/type/delta. An custom block for example will have a type of 'block' and a number for the delta (the first custom block will have delta 0). So using type = 'block' and delta = 0, the css to change the background color of the block title would be
#block-block-0 .title {background-color: yellow;
}
In general terms you can change the styling of any block element of a single block by prefixing it with the block id.
Note that blocks also have a class of the form block-type and if you want to change the background color of the title for all custom blocks you could use
.block-block .title {background-color: yellow;
}
In which CSS file...
... does this code go? In the theme CSS, Styles CSS, Drupal CSS, etc.? Unfortunately, I am unable to get this to work.
Thank you for your help.
Should go in style.css
Should go in style.css and after in general rules related to blocks (at the end of style.css should work fine)
If still doesn't work, do you have a link you can provide?
That worked...
...with a minor revision. The style ".title" wouldn't work with my customized theme. When I replaced that, however, with the style "h2", everything functioned exactly as you said. Thank you for your help.
Just to recap... to achieve what I described above, I determined my block ID (4 in this example) and inserted the following code at the very bottom of style.css:
#block-block-4 h2 {
color: #FF0000;
}
#block-block-4 .image {
border: thin solid #FF0000;
}
Now only that specific block has a red title and only the image within this specific block has a red border.
while not perfect solution..
it worked. thanks!
This is not a good idea
This is not a good idea because the id depends on the block's delta. If you move the block around its id will change.
The best solution would be to allow admins to assign ids to blocks, ids that are independent of the blocks position or module. I've been thinking about it and considering writing a module for it but I haven't had time to look into it seriously.
Until there's a better solution, for content blocks you can use the block's title wisely by encoding an id in it ("Block Title ") and then strip it with a regular expression in block.tpl.php and print it out as the block's id. Other blocks, user, views, forum etc you will need to be crafty and use the block's title, devise a short function to turn it into a string. Here's one that I've used to place images in blocks. The image in this case is displayed as background image of a div tag with an id defined by this function:
<?php
function blockImage( $module, $title ) {
$key = $module . $title;
//strip chars that are not allowed to be used in CSS stylesheets
$badchars = array(
"'",
"\"",
"\\",
" ",
"-",
"_",
",",
".",
"/",
"?",
"!",
"&",
"(",
")",
"[",
"]",
"{",
"}",
"+",
"´",
"`",
"#",
"*",
"~",
"^",
"¨"
);
$key = str_replace( $badchars, "", $key );
//replacing Swedish chars, you can use this to replace any special chars in your language
$key = str_replace( array("Å", "å", "Ä", "ä", "Ö", "ö"), array("A", "a", "A", "a", "O", "o"), $key);
return $key;
}
?>
Then I just print it like this:
<div class="blockimage pngalpha" id="<?php print blockImage( $block->module, $block->subject ); ?>"></div>CSS:
.blockimage#userWhosonline,.blockimage#userVemaronline {
background-image: url(images/kolbild_anv.png);
width: 35px;
height: 35px;
top: -2px;
}
Hope you find it useful.
--
Jakob Persson
web design and usability consulting
http://www.jakob-persson.com
Title can also change
I agree that is would be nice if the block interface allowed assigned a css id and/or class. And while a block deleta may change so can the title.
I've put in a feature
I've put in a feature request for this, I hope it can be included in the next release since it should be relatively easy to implement.
--
Jakob Persson
web design and usability consulting
http://www.jakob-persson.com
The request is
The request is here:
http://drupal.org/node/80227
It seems however that it isn't clear to everyone that this is needed. If you can go there, and reply and support my suggestion I'd be happy.
--
Jakob Persson
web design and usability consulting
http://www.jakob-persson.com
FYI, the block's delta
FYI, the block's delta doesn't indicate its position on the page -- I assumed it was this too, but it's not.
The delta is the number that identifies the block within the module that provides it.
So the login block is 'block-user-0' because of how it's coded in the user module:
if ($op == 'list') {$blocks[0]['info'] = t('User login');
$blocks[1]['info'] = t('Navigation');
$blocks[2]['info'] = t('Who\'s new');
$blocks[3]['info'] = t('Who\'s online');
That tells you that the Navigation menu block will be block-user-1, Who's new is block-user-2, etc.
In other words, it's perfectly safe to use '#block-user-0' as a CSS selector.
thanks for this tip. It sure
thanks for this tip. It sure saved me a lot of headache :-) I was able to style both my custom blocks as well as those contributed by add-on modules.
subscribe
subscribe
subscribing
subscribing
I was looking for something
I was looking for something like this and it workd with only some blocks that I have added manually.
These blocks have a number to refer to but the others don't, like my custom node block. The second code to custom all blocks dosen't seem to work either :(
Any thoughts?
btw- I am using b7 theme and reated a block.tpl.php file and when changing the style.css, I can get some of them to work.
Solution: I went to the page where my blocks were visible and viewed the source and found the exact ID name for the blocks. It dosen't have to be a number, it can look like this: block-views-mylist
~~~~~~~~~~~~~~~~
Kris
Current project: www.cribfax.com
Regardless of how unique the
Regardless of how unique the ID is, it can be quite ambiguous and I think IDs should be assignable, should the site owner choose. It makes for nice readable CSS too.
--
Jakob Persson
web design and usability consulting
http://www.jakob-persson.com