The process of theming a block?

Posted by Eyerev on April 7, 2009 at 10:08am

Hello there,

I'm finally coming to grips with Drupal, even with little time I have. There is just one thing I'm struggling to grasp, the theming of blocks. As far as I'm aware I have to find the ID for a specific block and edit the CSS, but I don't know where? I'm working on a custom theme I've created and "Drupalized", will the ID's be something I've already named?

Finally, how do I go about changing the "look" of the block? For example I've created a mockup in Photoshop of how I'd like the block to look, is it a simple task of linking the background image via CSS?

Thankyou for your time.

Comments

If I'm correct, a block's ID

Posted by inocram on April 7, 2009 at 10:44am

If I'm correct, a block's ID usually is block--, like the login block its block-user-0.tpl.php.
and to have a greater control over the block, copy the block.tpl.php and rename it to block-user-0.tpl.php from there, you can add custom tags on that template file and it will only take effect on the login block.. if you want a more general look for your block.. then edit the block.tpl.php file instead.

Thankyou for your reply,

Posted by Eyerev on April 7, 2009 at 11:06am

Thankyou for your reply, inocram.

Just a quick question, what do you mean when you say "you can add custom tags"?

I mean tags as in HTML tags.

Posted by inocram on April 8, 2009 at 6:12am

I mean tags as in HTML tags.

UPDATE: Just notice that my post above was stripped-out, it should be:

block--<module>-<delta>.tpl.php

Drupal already prints block

Posted by Jeff Burnz on April 8, 2009 at 12:06am

Drupal already prints block ID's by default, theres no need to have a template for each block just to style it. You can but only if making fairly major modifications to the HTML or variables etc

Get Firebug.

Responsive Drupal Themes | Drupal 8 Design Initiative | Certified to Rock

You can find the ID of every

Posted by infowonders on April 7, 2009 at 1:03pm

You can find the ID of every Drupal block using firebug. The core blocks have names like "block-user-1" , and the custom blocks have names like "block-block-8".
There is a .block class that controls all the blocks, but you can theme every block separately, using it's ID as basis, and descendant selectors for specific tasks.
If it's not enough and you need to have different HTML, you can proceed and change the block.tpl.php file