I created my own theme using Zen Themer's Starter Kit. I have created a block in my right sidebar and am using Views to pull one event at a time into the block to be displayed on only one page of my site. How can I change the background color of just this block? I want it to be the same color as my "sticky" nodes but don't want to change the color of all blocks in the right sidebar on every page.

Comments

Deepika.chavan’s picture

Hi,
Try using 'Block Class' module - http://drupal.org/project/block_class .
1. Enable the module.
2. Add following snippet to your theme's 'block.tpl.php' file, (Copy the file from zen core theme and paste it in your custom theme's /templates folder.)

<?php print block_class($block); ?>

Here's what the code should look like after adding the snippet in 'block.tpl.php':

<div id="<?php print $block_html_id; ?>" class="<?php print $classes; ?> <?php print block_class($block); ?>">

3. To add a class to a block, simply visit that block's configuration page at Admin > Site Building > Blocks.
4.Now by using this class attribute you can style an individual block in the sidebar.
e.g in my case, I have given 'primary-links-block' class to primary link block and added following css code in custom css file :

.primary-links-block{
  background: #CC0000;
}

Please change the color value accordingly and Clear cached data.

Rgrds,

Deepika Chavan.

KrisBulman’s picture

I fail to see the usefulness of this, it seems like overkill for the request, you could just use the css id of the block.

For instance, if your block had the css id of block-block-9, in css you would write:

#block-block-9 {
background-color: #cccccc;
}
prajaktam’s picture

Hello,

I personally think, the solution provided by Deepika.chavan is wise thing to do because if someone uses two sites, ie, one local environment and a production environment and uses svn commit (Version control with Subversion) to commit the code to the production site and does the database changes manually on the individual sites then its always better to have a custom id to the block since the system generated block id may differ on both the sites. And It will mess the styling then. Also there is possibility if someone deletes the block and creates a new block again for some reason then the block id will again change and style will break down. So technically using block class is more reliable solution and kinda full proof.

using
#block-block-9 {
background-color: #cccccc;
}
definitely saves time but here we are assuming that block will never be changed which is not always true.

Thanks,
Prajakta

juliejohnson26’s picture

I followed Deepika.chavan's advice and installed the Block Class module. It works great and was exactly what I wanted. Thanks so much!

KrisBulman’s picture

after reading prajaktam's post, I too agree it's a robust solution that will live through migration

barraponto’s picture

Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.