Closed (fixed)
Project:
Zen
Version:
6.x-1.0
Component:
CSS/HTML markup
Priority:
Normal
Category:
Support request
Assigned:
Reporter:
Created:
19 Apr 2011 at 20:48 UTC
Updated:
30 May 2011 at 15:01 UTC
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
Comment #1
Deepika.chavan commentedHi,
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.)
Here's what the code should look like after adding the snippet in 'block.tpl.php':
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 :
Please change the color value accordingly and Clear cached data.
Rgrds,
Deepika Chavan.
Comment #2
KrisBulman commentedI 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:
Comment #3
prajaktam commentedHello,
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
Comment #4
juliejohnson26 commentedI followed Deepika.chavan's advice and installed the Block Class module. It works great and was exactly what I wanted. Thanks so much!
Comment #5
KrisBulman commentedafter reading prajaktam's post, I too agree it's a robust solution that will live through migration
Comment #6
barraponto