I've been messing around with applying different CSS styles to blocks and found out quickly that you can't really style the titles of a block much because the titles don't hold much text. When designing a block, I have to split it into two parts, a poorly styled title, and a content area that can be very highly customized. I'm also stuck with a fixed gap between the two.

It seemed to me that if I could have the ability to optionally NOT display the title, then I could have more control over the look of my block using CSS. I tried not entering a title, but that was forbidden. I decided that I should create a code and place it at the front of my title. If the theme engine spotted the code, it would not emit the title. I decided that the code had to be reasonably unique, and settled on !!invisible!!

I managed to achieve my goal by replacing the line (in xtemplate.engine):
$xtemplate->template->assign($key == "subject" ? "title" : $key, $value); // TODO: standardize on 'title' (ie. rename all $block["subject"] to "title")

with:

$xtemplate->template->assign($key == "subject" ? "title" : $key, (substr($value, 0, 13) == "!!invisible!!" ? "" : $value)); // TODO: standardize on 'title' (ie. rename all $block["subject"] to "title")

Once that's done, any titles that start with !!invisible!! will not be displayed. That let me make blocks which were one text line in height, and others which had elaborately styled titling. Maybe someone else might be interested in this hack.

Comments

Steven’s picture

Sounds like you need to improve your CSS skills.

You can select any block in CSS using the id "block-module-number". The default templates have the title as a <h2> tag with a title class.

To remove the bottom spacing from the navigation menu's title, use:
#block-user-1 .title { padding-bottom: 0px; margin-bottom: 0px; }

To hide the title for a particular block, use display: none. Etc. Etc.

minsight’s picture

The big point of this was to allow a user to override the built-in default styles, while entering their block content, without having to go in and edit the built-in CSS.

Editing the stock CSS may be tolerable for an admin who is building a site, but it's a recipe for disaster when presented as a solution for unsophisticated users. If I tell a user that they can put a div style= in their custom block to allow the block to behave differently, then the amount of mayhem that they can create will be minimized.

Also, changing the CSS won't get rid of the Title text, and won't really help you get a block of text which is one line high. Some of my users wanted to get a block which consisted of a one-line link, styled in a manner that does not match the default, without editing site CSS.

joestewart’s picture

I wrote an article with a proof of concept method of allowing the block admin to choose the template for each block:

New Feature for the Next Drupal: Alternate Block Templates
http://www.cmsinfo.org/drupal/new-feature-alternate-block-templates.html

Joe

nedjo’s picture

Blocks are potentially very flexible--they can be used by any module to insert content. Yet at present they are very limited--they must consist of a title and a body and they can only be inserted into two pre-defined page zones (left and right columns). There are, however, several other defined zones on a Drupal page: banner, main page (containing title area, help area, page area), footer, etc. Some of those additional zones have custom means by which modules can insert content, while others do not. Should it be possible to add blocks to all these zones? Should we be able to define custom zones and add blocks to those? In either case, we'd likely wish to drop the mandatory title, which, as you say, hard-codes display.

minsight’s picture

One other motivation for coming up with this was my need to create a simple block containing links to content. Drupal required me to give it a title, and that title was displayed above the links. My users are smart enough to figure out what links are, and don't need a title above the links to tell them that they're links. But the theme forced me to put something there. Now I can just have a block of links with no text or additional space above or below, pointing to appropriate content.

korey’s picture

Thanks for your workaround. I am using phptemplate bluemarine and have adjusted my block.tpl.php to read:

  <div class="block block-<?php print $block->module; ?>" id="block-<?php print $block->module; ?>-<?php print $block->delta; ?>">
    <h2 class="title">
		<?php
            $mystring = $block->subject;
			$findme  = '!!hide!!';
			$pos = strpos($mystring, $findme);

			// Note our use of ===.  Simply == would not work as expected
			// because the position of 'a' was the 0th (first) character.
			if ($pos === false)
        		print $block->subject; ?></h2>
    <div class="content"><?php print $block->content; ?></div>
 </div>

This will hide any title for blocks that I include the string "!!hide!!".

***Note: Give the block a description or it won't show up in your blocks list***

raebee@drupal.org’s picture

Information. Thanks.

januario’s picture

This works great for sites that use phptemplate, but is there a fix for templates that use xtemplate?

Also, for those like me that tried this with the default bluemarine template...you have to replace it with the phptemplate version of bluemarine in order for this fix to work.

rayhand’s picture

First off, great solution. Elegant and effective. I tried it though and still had a empty box show up above my blocks. I modified it so the <h2> tags are also removed like so:

<div class="<?php print "block block-$block->module" ?>" id="<?php print "block-$block->module-$block->delta"; ?>">
<?php
            $mystring = $block->subject;
            $findme  = '~title';
            $pos = strpos($mystring, $findme);

            // Note our use of ===.  Simply == would not work as expected
            // because the position of 'a' was the 0th (first) character.
            if ($pos === false)
                print '<hr>'.$block->subject.'</h2>'; ?>
<div class="content"><?php print $block->content; ?></div>
</div>

Hope this is helpful to someone...

frankpeng’s picture

I am using acquia_prosper theme. I went into the theme/acquia_prosper directory and found
acquia-prosper-style.css file.
I went into it and add a line like this:
display: none.

Now all of the ugly big block title gone!

h2 {
font-size: 200%; /* 24px/12px */
display: none;////////////add this line to get rid of all block titles!
}