How to make a graphic as the block title?
Venkat-Rk - January 14, 2006 - 13:01
I am using the phptemplate version of bluemarine and am trying to have a graphic as the block title for a custom block. I don't understand how to specify the custom block properties in style.css to do this stuff. I would be thankful for any suggestions.
This could probably be done
This could probably be done by css. However, if I was doing this, I would probably do the following:
1. In the block title field I would enter the filename / path of the image I wanted to use as the header.
2. I would then modify the file block.tpl.php for my theme so that, when it was rendering blocks for the block module ($block->module == "block"), it would use $block->subject as a path for an image header instead of just printing the subject.
More information on block.tpl.php here: http://drupal.org/node/11813.
A bit hacky. A better idea might be to detect whether the subject is a file path for an image that exists rather than just do it this way for all block blocks.
Hi
You could look at the css for pushbutton, they have styled the title in the blocks with a backgorund image, I made several custom blocks and styled them something like this
#block-gallery-0 .title h3 {background: transparent url(menu4.png) right center no-repeat;
}
(pushbutton uses h3 for block titles and bluemarine h2 - I think)
You could hide your block title in the blocks configurations page with
<!--block title-->, in the css, or by giving it no title at all..Use CSS!
#block-module-delta h2 {
margin: 0;
padding: 0;
width: 210px;
height: 45px;
background: url(images/block_head.png) no-repeat;
text-indent: -9000px;
}
Bascially what you need to do is find out the block id by looking in the source and replace module and delta as appropriate. Then you set the margin and padding to zero. Set width and height to the image dimensions. Replace the background path with the path to the image and make the text go away.
Questions?
Thanks, simon, gabriella and
Thanks, simon, gabriella and rorris. Wow, that's three different methods, so my knowledge goes from zero to plenty in the matter of an hour- that's the beauty of drupal forums. Thanks!
rorris, a few questions:
1.) I have seen this before, but delta is a value (number), right? Where do I get this?
2.) Does the graphic need to be 210x45 or can it have less width?
3.) Is there a particular reason the text-indent declaration is set to -9000 px?
4.) Do I need to upload the graphic to files/images (effectively creating an image node) or upload it to the theme folder? I guess it must be the latter, but bluemarine doesn't have a separate folder for images and stores its default logo at its folder root. So, I guess the graphic must be uploaded there?
Thanks once again.
You can find the delta
You can find the delta (number) for your block by looking at the html-code för your page. It looks something like
<div class="block block-user" id="block-user-1">The with and height of your block title (in your case the image) can be set to whatever appropriate for your theme.
You might want to keep the block the same with as other blocks in your theme so look for the block specifics in your themes style.css. If your image width is lesser than the blocks width, set the background to no-repeat in your css file, and align it horizontal and vertical, as appropriate
background: transparent url(image.png) left center no-repeat;You can upload the image to your themes directory, or create a image directory benetah it, (but dont forget to give the correkt url if you do)
The -9000px indention I don't know about, some customizing for rorris theme perhaps..
The indentation looks like a
The indentation looks like a hack to make the title text "disappear" - or appear at 9000px left of where it should be. As long as it is greater than the maximum width that anyone views your site, then that should be ok.
Hm..
that is one way to make it disapear ;-.)
I think the text-indent: -9000 removes the text display
I think the text-indent: -9000 effectively prevents the text from being displayed. I'm not positive, but I think that's what it's for in rorris' post. It will push the text 9000 pixels to the left.
Thanks once again, everyone.
Thanks once again, everyone. I thought the delta stuff had something to do with the module, but it is clear now. In fact, I just changed a custom block with such an id a short while ago.
You don't have to customize CSS everytime :-)
Hey !
This is simply an implementation of what Simon Rawson suggested in the first reply.
The idea is to detect if the title is a normal title or an image. If it's an image, then instead of displaying it as normal text, we want Drupal to display...well, obviously, an image! :-)
As we are limited in the title length I had to put in place a strange syntax ... but it works, at least !
Instead of a normal title, my "image" title looks like :
img=title_contactUsForm.png h=30 w=149 m=switchcalcwhat does that mean ?
Well your title HAS to start with img, followed by the image filname.
h is the height
w is the width
then, to specify the path of the image, you can have either "m", "t" or "e" . They respectively mean "module", "theme" or "theme_engine" , followed by the name of the module, theme or ...theme engine. To understand how it works, please have a look at drupal_get_path function of the drupal api.
Basicaly, what the example above means is that I want to insert an image called "title_contactUsForm.png", located in the directory of the module switchcalc, whose height is 30px and width is 149px.
Now, to support this syntax, you have to customize the code of your theme's block.tpl.php.
At the begining you'll find something like :
<?php if ($block->subject): ?>
<h2><?php print $block->subject ?></h2>
<?php endif;?>
Just replace it by :
<?php if ($block->subject): ?>
<?php if (substr($block->subject,0,3)=="img") {
$tok = strtok($block->subject," ");
while ($tok !== false)
{
switch (substr($tok,0,1))
{
case "m":
$type="module";
$name=substr($tok,2);
break;
case "t":
$type="theme";
$name=substr($tok,2);
break;
case "e":
$type="theme_engine";
$name=substr($tok,2);
break;
case "w":
$imgwidth=substr($tok,2);
break;
case "h":
$imgheight=substr($tok,2);
break;
case "i":
$imgfilename=substr($tok,4);
break;
}
$tok = strtok(" ");
}
echo "<div class='title'><img src='".drupal_get_path($type,$name).$imgfilename."' height='".$imgheight."' width='".$imgwidth."' /></div>"";
} else { ?>
<h2 class="title"><?php print $block->subject; ?></h2>
<?php } ?>
<?php endif; ?>
Then this will work for every block whose name starts with "img".
Please note this code is probably not very robust if you don't enforce the syntax, so feel free to change it and make it better.
Hope it helps .
Denis