Drupal 7 Block Class Module

By shane
Tue, 2013-03-05 23:53
Daily Dose of Drupal Episode #122

Share with Others

The Drupal 7 Block Class module provides an easy way to add a CSS class to a Drupal block.

In this episode you will learn:

  • How to use the Block Class module to add a CSS class to a Drupal 7 block
  • Cases that having a CSS class on your Drupal block might be useful

Thanks to Drupalize.me for sponsoring this episode of the Daily Dose of Drupal.

Hello there everyone and welcome to another Daily Dose of Drupal, today we’re on Episode Number 122 and we’re going to be covering the Block Class Module. Quite simply the Block Class Module is an easy way to add a specific CSS Class to a block and there’s many useful uses for this module and I’ll go over those in just a second but before we get started as always I’m Shane Thomas, you can follow me on Twitter at smthomas3, find me on Google + and go over to codekarate.com and sign up for the newsletter if you haven’t already.

Today’s episode is sponsored by drupalize.me. You can go to drupalize.me and learn all about the Drupal J Query and a whole bunch of other cool topics. They have free videos and they’re pretty awesome so go ahead and check them out and use the coupon code CK20FEB you get 20% off.

Let’s go ahead and get started; so I have the Block Class Module already downloaded and installed on this test Drupal site, you can see there’s no configuration options because it’s pretty simple module.

Let’s say for instance I want to add a specific class to this specific block; well I can go ahead and see there’s already some classes here, there is a unique idea as well that I could use but let’s go ahead and configure this block; we’re just going to give it a class called My Menu, and I’ll save this and now if I look here you can right in here that there’s a now a My Menu Class and you might be wondering why adding a Block or a specific class could be useful to a block but let’s assume that you want to style these menus the same way.

You could of course add a similar class to both and have some of your CSS Code applied to both of these different menus without having to create two different sections in your CSS code.

The other thing that you can do that’s very useful is I’m going to go ahead and create a new block so I’m just going to create a custom block and this would be useful for some of you who use a lot of the blocks administration pages and build a lot of your pages using blocks if you’re not using display suite or panels or something else for your site, I’ll call this … give it a class of My Block and I’m going to move the My Custom Block to the first side bar and save this. Now you can see that there’s a My Custom Block down here.

If I look at it it has My Class and My Block but you’ll notice that the idea on this is block-block-1. Well if you … depending on how you set it up, if you have two sites and you’re pushing content back and forth from a site and you want to set up the same block on both sites and have your CSS Code apply well it may end up with a different id depending on how the site has been set up or how your blocks have been configured. If for instance you added a block on one site and you added the same block on another site but in a different order it could have a different ID which means your CSS Code that’s based on this specific block may no longer work.

This is where it would be handy to have a unique Block Class or CSS Class you can add to your block so in this case I added my block … my –block, if I add that on both sites I know for a fact that it’s going to of course be able to use the same CSS Code without having to worry and that’s just one edu case.

There’s a lot of other cases where you can use Block Class or the Block Class Module. It really depends on how you or how your workflow as with Drupal if you’re … make heavy use of Blocks and you want to make sure that you can either reuse some of your styles throughout blocks on your site or you want to be able to make sure you can give some of them unique classes if you custom create some of your blocks just to make sure that style is going to apply if you have like a development staging site then give the Block Class Module a try and let me know how it goes.

If you have any questions you can always contact me on Twitter or on codekarate.com, thanks again to drupalize.me for making this possible and thank you for watching the Daily Dose of Drupal, see you next time.