By AngelicLight on

Hi, there,

I'm looking to style block titles in unique ways to each block. Do blocks allow HTML for titles?

Thanks a lot,

- Paul

⋅ Categories: Drupal 6.x

Comments

mshepherd’s picture

mshepherd commented

No, but you could do additional stying in the block.tpl.php file, and in the CSS for the theme.

This is a snippet from a block.tpl.php file (taken from Fusion Core theme)

    <?php if ($block->subject): ?>
    <h2 class="title block-title"><?php print $block->subject ?></h2>
    <?php endif;?>

That's where you add additional html to the block's title. If you added other classes/ids, these could then be styled with CSS

AngelicLight’s picture

AngelicLight commented

Thanks so much!

I wanted the block titles to be an image, or at least allow for unique styling per block title, within the title verbiage itself.

I guess this isn't possible, then?

mshepherd’s picture

mshepherd commented

You have options still.

Take in a look in your html source and, depending on the theme you're using, you'll have <div>s enclosing each block that probably have unique ids. So you style these with css like so (for example):

div#block-views-homepage-block_2 h2.title {
  font-color:red;
}

Or you could hide the text and place an image into your block (onmly really appropriate for custom blocks, not those generated by other modules):

div#block-views-homepage-block_2 h2.title {
  display:none;
}

Or you could hide the text and display a background image instead:

div#block-views-homepage-block_2 h2.title {
  display:none;
}
div#block-views-homepage-block_2 {
  background-image:url('myimages/image.jpg');
  height:100px;
}

Or you build some logic into the block.tpl.php file, or even build a module to associate block titles with images.

mcfilms’s picture

mcfilms commented

OR you could upload the images you want to use as a title via Imagefield. Then in Views you could display them at the top of the node and choose NOT to display the tile. You could even write a bit of PHP that only prints the text version of the title if there is no image.

EDIT: I see you are talking about BLOCK headers, not node titles. My mistake. Carry on.

A list of some of the Drupal sites I have designed and/or developed can be viewed at motioncity.com

vegantriathlete’s picture

vegantriathlete
he/him/his
Primary language English
Location Lakewood, CO
commented

I have created a workaround that I documented here.

http://blog.marceisaacson.com

AngelicLight’s picture

AngelicLight commented

Thank you!

featherbelly’s picture

featherbelly
Location London, UK
commented

You can add an if or switch statement at the top of block.tpl.php to match the unique block delta and then you can change the value of the $block->subject:

if($block->delta == 'BLOCK_DELTA'){
	$block->subject = t('A title with some <span>HTML</span>');
}

Install devel and the use kpr($block->delta); to find out what the delta is.

Don't forget to pass the title through the t function.

sdmaxey’s picture

sdmaxey commented

I'm having a similar issue--though it's not images--I know how to use CSS to pull that off. In this case, part of the text in the block needs to be styled different from the rest of the text in the block. In this case, they want one particular word to be a different color--and alas it's not the first word, so the :first pseudo-selector won't help. But another client wanted to italicize a foreign word, and I had to just say they couldn't. Is there any module or theme fix that will allow even the Filtered HTML subset of tags into the Block Title?

Sk8erPeter’s picture

Sk8erPeter commented

You can modify your block's title with a little bit of ugly "hack" in your theme's template.php file (which is located in 'http://<yoursite>/sites/all/themes/<YOURTHEMEPATH>/template.php').

The following will just be an example of my case, but you can "convert" it to your own needs...

For example, I wanted to change the title of my Ubercart AJAX Cart block for an HTML image with a shopping cart icon, because it looks nicer than a "Shopping Cart" (or similar) text.

In my case, I set the following block title in the block's configuration page (e.g. http://<yoursite>/admin/build/block/configure/uc_ajax_cart/0): "AJAX Shopping Cart" (without the quotes).
I wanted to keep some of the original block title's elements, because the module and Drupal put a wrapper (with a link [<a>] to let the cart toggled) around it, so I had to search for my title ("AJAX Shopping Cart") with a regular expression, and modify that to a new one.
Not too nice, but solves the problem.
I opened my theme's template.php with an editor, and put the following in it (using theme_preprocess_block()):

// ...
// ... Your theme's template.php file ...
// Take care of changing YOURTHEMENAME to your theme's "machine" readable name.

/**
 * Override or insert variables into the block templates.
 *
 * @param $vars
 *   An array of variables to pass to the theme template.
 * @param $hook
 *   The name of the template being rendered ("block" in this case.)
 */
function YOURTHEMENAME_preprocess_block(&$vars, $hook) {
  // ......

  // here's how I modified the title of the Ubercart Ajax Cart module's title for an HTML image (a shopping cart)
  // in my case, I gave the block the "AJAX Shopping Cart" title in BLOCK CONFIG:
  // ( admin/build/block/configure/uc_ajax_cart/0 )

  if($hook === 'block' and $vars['block']->module === 'uc_ajax_cart'){
      // you can change the following path to the icon, that's just an example
      $shopping_cart_icon_path = 'http://cdn1.iconfinder.com/data/icons/finance_icons/PNG/png48/shopping%20cart.png';

      // and this is the NEW TITLE!!!
      $new_cart_title = '<img src="'.$shopping_cart_icon_path.'" title="'. t('Shopping cart') .'" alt="'. t('Shopping cart') .'" />';
    
      // The original $vars['title'] (which has to be changed) looks like this:
      // <span class="title block-title" id="ajax-cart-headline"><a href="#" id="ajaxCartToggleView">AJAX Shopping Cart</a></span>
      // here I would like to change the string "AJAX Shopping Cart" for the icon (I just want to display the icon, no texts)

      // this is the original title (as a pattern) I set in the block config
      // if using preg_replace, the string has to be between two '/' characters!
      $string_pattern_to_search_for = '/AJAX Shopping Cart/';
    
      // so we modify our title and that's the end of our suffers... :)
      $vars['title'] = preg_replace( $string_pattern_to_search_for, $new_cart_title, $original_title_to_change, 1);
  }

  // ......

}

And it works.
Ask if you didn't succeed in changing your own title based on this example.

AngelicLight’s picture

AngelicLight commented

This is awesome.

Thank you. :)

brockfanning’s picture

brockfanning commented

When you're ready to set the block title, $vars['title'] doesn't work for me in Drupal 7 - instead I use $vars['block']->subject

$vars['block']->subject = 'My <em>New</em> Block Title';
bburg’s picture

bburg
he/him
Location Washington, DC
commented

Why not just set the block title as blank and style an element in the block's body content (in full or partial html mode) to look like a title?

zura_lanch’s picture

zura_lanch commented

I think that's the best idea.

I need to have anchor ID in each block so that user could scroll to the exact block after clicking on the menu link which is at the beginning of the page.

If I hack the block tpl file, than every block would have the same anchor and it would become static.

I don't need that, blocks must have individual anchors, it must be dynamic.

featherbelly’s picture

featherbelly
Location London, UK
commented

You can add an if or switch statement at the top of block.tpl.php to match the unique block delta and then you can change the value of the $block->subject:

if($block->delta == 'BLOCK_DELTA'){
	$block->subject = t('A title with some <span>HTML</span>');
}

Install devel and the use kpr($block->delta); to find out what the delta is.

Don't forget to pass the title through the t function.

denix’s picture

denix commented

One of the features of Block Class Styles is to allow to have HTML in block titles. I know this is an old thread, but I think it is important to add a solved for future references.