prefixing Block Titles with an icon
Unfortunately there's not currently a simple <div class="block_x_title"> tag, but we can target the block title by interpreting contextual tags. Currently Drupal is quite strict about generating consistent tags for blocks so this method should be fairly reliable!
All blocks have a class attribute denoting the module that generated the block, so specifying the class will apply the same icon to all the blocks generated by that module. For example, both Login and Navigation blocks come from the (core) user.module :
/** iconify Navigation & Log-in block titles **/
.block-user h2 {
padding-left: 20px;
background:url(icons/user.png) no-repeat;
background-position: center left;
}NB: in order to work
background-position: ... ; must follow no-repeat;.
Some modules (eg Views!) create more than one block, so the Block id attribute includes a $delta (eg id="block-user-0") which will specify different icons for individual blocks :
/** iconify Log-in block title only **/
#block-user-0 h2 {
padding-left: 20px;
background:url(icons/login.png) no-repeat;
background-position: center left;
}
/** iconify Navigation block title only **/
#block-user-1 h2 {
padding-left: 20px;
background:url(icons/user.png) no-repeat;
background-position: center left;
} Note on using the <h2> tag: To identify the block title we target the <h2> tag which is set in the theme's block.tpl.php. If your theme changes this (eg to <h3>) it breaches coding standards for structural mark-up; <h2> defines a second-level heading. If you want to change the size of an <h2> element, you should do this with CSS: E.g.:
h2 {
font-size: 160%;
line-height: 130%;
}