I am a designer, not a developer. That being said…

After hours of trial and error, I’ve made some minimal progress with CSS and customizing themes. I’ve managed to assign custom styles to block titles (styles.css), and I’ve managed to assign custom styles to images (image_assist.css), These custom styles, however, are global and leave little room for flexibility.

My question is: How would you assign a specific style to a specific block or to a specific image within a specific block?

Lets say I have a block titled “Custom Block” that contains an image, “Custom Image”
How can I make the title of Custom Block red without changing the title colors to all other blocks? To that end, how can I give the Custom Image – inside of Custom Block – a red border without changing the borders to all other images?

All suggestions are welcome. Thank you.

Comments

nevets’s picture

Each block has a unique id of the form block-type-delta. If you visit administer -> blocks and hoover over (or click on) the configure link for the block in question the path will end in admin/block/configure/type/delta. An custom block for example will have a type of 'block' and a number for the delta (the first custom block will have delta 0). So using type = 'block' and delta = 0, the css to change the background color of the block title would be

#block-block-0 .title {
background-color: yellow;
}

In general terms you can change the styling of any block element of a single block by prefixing it with the block id.

Note that blocks also have a class of the form block-type and if you want to change the background color of the title for all custom blocks you could use

.block-block .title {
background-color: yellow;
}
syquest’s picture

... does this code go? In the theme CSS, Styles CSS, Drupal CSS, etc.? Unfortunately, I am unable to get this to work.

Thank you for your help.

nevets’s picture

Should go in style.css and after in general rules related to blocks (at the end of style.css should work fine)

If still doesn't work, do you have a link you can provide?

syquest’s picture

...with a minor revision. The style ".title" wouldn't work with my customized theme. When I replaced that, however, with the style "h2", everything functioned exactly as you said. Thank you for your help.

Just to recap... to achieve what I described above, I determined my block ID (4 in this example) and inserted the following code at the very bottom of style.css:

#block-block-4 h2 {
color: #FF0000;
}

#block-block-4 .image {
border: thin solid #FF0000;
}

Now only that specific block has a red title and only the image within this specific block has a red border.

lsabug’s picture

it worked. thanks!

solipsist’s picture

This is not a good idea because the id depends on the block's delta. If you move the block around its id will change.

The best solution would be to allow admins to assign ids to blocks, ids that are independent of the blocks position or module. I've been thinking about it and considering writing a module for it but I haven't had time to look into it seriously.

Until there's a better solution, for content blocks you can use the block's title wisely by encoding an id in it ("Block Title ") and then strip it with a regular expression in block.tpl.php and print it out as the block's id. Other blocks, user, views, forum etc you will need to be crafty and use the block's title, devise a short function to turn it into a string. Here's one that I've used to place images in blocks. The image in this case is displayed as background image of a div tag with an id defined by this function:

<?php
function blockImage( $module, $title ) {
   
   
$key = $module . $title;
   
   
//strip chars that are not allowed to be used in CSS stylesheets
   
$badchars = array(
                   
"'",
                   
""",
                    "",
                    " ",
                    "
-",
                    "
_",
                    "
,",
                    "
.",
                    "
/",
                    "
?",
                    "
!",
                    "
&",
                    "
(",
                    "
)",
                    "
[",
                    "
]",
                    "
{",
                    "
}",
                    "
+",
                    "
´",
                    "
`",
                    "#",
                    "*",
                    "~",
                    "^",
                    "¨"
                   );
                  
   
$key = str_replace( $badchars, "", $key );
   
    //replacing Swedish chars, you can use this to replace any special chars in your language
   
$key = str_replace( array("Å", "å", "Ä", "ä", "Ö", "ö"), array("A", "a", "A", "a", "O", "o"), $key);

    return

$key;

}
?>

Then I just print it like this:

<div class="blockimage pngalpha" id="<?php print blockImage( $block->module, $block->subject ); ?>"></div>

CSS:

.blockimage#userWhosonline,
.blockimage#userVemaronline {
background-image: url(images/kolbild_anv.png);
width: 35px;
height: 35px;
top: -2px;
}

Hope you find it useful.

--
Jakob Persson
web design and usability consulting
http://www.jakob-persson.com

--
Jakob Persson - blog
Leancept – Digital effect and innovation agency

nevets’s picture

I agree that is would be nice if the block interface allowed assigned a css id and/or class. And while a block deleta may change so can the title.

solipsist’s picture

I've put in a feature request for this, I hope it can be included in the next release since it should be relatively easy to implement.

--
Jakob Persson
web design and usability consulting
http://www.jakob-persson.com

--
Jakob Persson - blog
Leancept – Digital effect and innovation agency

solipsist’s picture

The request is here:
http://drupal.org/node/80227

It seems however that it isn't clear to everyone that this is needed. If you can go there, and reply and support my suggestion I'd be happy.

--
Jakob Persson
web design and usability consulting
http://www.jakob-persson.com

--
Jakob Persson - blog
Leancept – Digital effect and innovation agency

joachim’s picture

FYI, the block's delta doesn't indicate its position on the page -- I assumed it was this too, but it's not.
The delta is the number that identifies the block within the module that provides it.

So the login block is 'block-user-0' because of how it's coded in the user module:

  if ($op == 'list') {
     $blocks[0]['info'] = t('User login');
     $blocks[1]['info'] = t('Navigation');
     $blocks[2]['info'] = t('Who\'s new');
     $blocks[3]['info'] = t('Who\'s online');

That tells you that the Navigation menu block will be block-user-1, Who's new is block-user-2, etc.

In other words, it's perfectly safe to use '#block-user-0' as a CSS selector.

hg2008’s picture

thanks for this tip. It sure saved me a lot of headache :-) I was able to style both my custom blocks as well as those contributed by add-on modules.

sourcesoft’s picture

finally a cool answer. thx
That's the way I'm gonna do this

Pooya Sanooei

yngens’s picture

subscribe

Drupion.com — Drupal-centric, Drupal-specific, Drupal-optimized hosting company.

mrgoltra’s picture

subscribing

kweisblatt’s picture

I was looking for something like this and it workd with only some blocks that I have added manually.
These blocks have a number to refer to but the others don't, like my custom node block. The second code to custom all blocks dosen't seem to work either :(

Any thoughts?

btw- I am using b7 theme and reated a block.tpl.php file and when changing the style.css, I can get some of them to work.

Solution: I went to the page where my blocks were visible and viewed the source and found the exact ID name for the blocks. It dosen't have to be a number, it can look like this: block-views-mylist
~~~~~~~~~~~~~~~~
Kris
Current project: www.cribfax.com

~~~~~~~~~~~~~~~~
Kris
Current projects: www.cribfax.com
www.myabatherapist.com

solipsist’s picture

Regardless of how unique the ID is, it can be quite ambiguous and I think IDs should be assignable, should the site owner choose. It makes for nice readable CSS too.

--
Jakob Persson
web design and usability consulting
http://www.jakob-persson.com

--
Jakob Persson - blog
Leancept – Digital effect and innovation agency

dietman’s picture

#block-block-2 {
background: #ccc;
}

this does not work for me

my block configure id is this

The ID for excluding or including this element is admin/build/block/configure/block/2.edit-pages.

but the number 2 is not showing anywhere in the source code so it is not calling it.

doniking’s picture

nbluto’s picture

If your block is the user log in block, the CSS will look like this:

#block-user-0 {
border-bottom:none;
margin:0px;
}

Nicole Bluto
I Drupal L.A.