Add CSS style for a block into the same block

This simple code can be pasted into a PHP filtered block (or into a block declared by a module) to set some style from a block into the block container itself.

<?php
echo 'My block content';
/** Put styles inline on html head**/
drupal_set_html_head('<style type="text/css">
#my-block-id {
  /* my style*/
}
</style>
');
?>

This code is placed on html head, applied only to the pages where block appears, without touching css optimization. If you want to include an external CSS file instead, use drupal_add_css instead: in any case you can exclude this file for aggregation, setting $preprocess attribute to FALSE.

If block appears in very few pages, and it can change quickly (e.g. a banner with custom styles on home page), using drupal_set_html_head could be the best way, even according to Yahoo Performance Best Practices. In other cases, use drupal_add_css.

See also:

Add CSS class to drupal form fieldset

Tested on:

  • Drupal 5.x
  • Zen custom subtheme

Customizing Drupal form appearance may sound difficult. But to add a CSS class is (surprisingly!) simple using theme_fieldset themeable function.

  • Copy theme_fieldset code from Drupal manual page
  • Paste to your template.php:
    • If you’re using a Zen theme, change theme_fieldset to zen_fieldset. You can try to use this method with your theme prefix.
    • If you’re using a theme based on phptemplate engine, you can change theme_fieldset to zen_fieldset to have the same effect of above (try one of this, not both).
  • Change the resultant code as you wish.

I’ve attached an example to generate CSS class from fieldset title: Add CSS class to drupal form fieldset.

# custom fieldset CSS class from element #title
$css_class = “my-custom-class-“;
$css_class .= str_replace(” “,”-“,strtolower($element[‘#title’]));
# using transliteration module to transliterate/strip non-ASCII character where available
if(module_exists(‘transliteration’)){
# including Transliteration functions
require_once(drupal_get_path(‘module’, ‘transliteration’) .’/transliteration.inc’);
$css_class = transliteration_clean_filename($css_class);
}

Adding this code to your template:

  • Take all Drupal generated fieldset title
    • e.g. “Impostazioni del menù”
  • Transform it in a CSS class using Transliteration module
    • e.g. “my-custom-class-impostazioni-del-menu”
  • Queue it with other CSS classes (where available)
    • e.g “collapsible my-custom-class-impostazioni-del-menu”

I apply a previous substitution of whitespace using “-” (transliteration module use underscore “_”) and you can do the same, but later remember to use transliteration_clean_filename to safely sanitize class name for any other case you’ve not contemplated (accents, special characters).