Is there a way to give blocks diffrent colors

Hi jwells,

Okay, let me explain what this line does and how you can address it from your CSS file:

<div class="block block-menu" id="block-menu-62">

So, what do we have here: that is a DIV, a certain, rectangular area on your web page. It has been assigned various classes and one ID. Now, in CSS there are three ways to address things (I am simplifying just to keep things easy):

• generic HTML elements - these are things like p or div but also the entire body-tag. You address these in your CSS file by simply stating p {declarations here;}, or div {define a background color, eg;}, or body {the entire site's font color eg;}
• classes - these can be assigned to several objects at the same time. lets say your class defines text to be red; anything that carries the name of the red font color defining class will be red. And this can happen at various instances inside your HTML page. You call a class in the CSS file by .classname {declarations here;}
• IDs - these can only be assigned once to a page. An ID is one fixed occurance of something. It cannot be used on several items at the same time, this would be the task of a class. You call an ID in your CSS file by #idname {declarations here;}

Okay, so far for the basics, but propably you know all of this already. Let's analyse the above DIV:

So we open a DIV that has classes and one ID assigned. You see, not only can classes be used on several items on the same time in your document, elementes can also inherit several classes at the same time. So this div got the class "block" AND the class "block-menu" assigned. Additionally it carries the ID "block-menu-62". This is the DIV's very unique ID.

Now it depends what you would like to do with the DIV. The entire reason for having classes and IDs is that you won't need to repeat things over and over again. Let's see; here's the DIV again:

<div class="block block-menu" id="block-menu-62">

Now in your CSS file you can reference to that DIV in three ways: you can call it by using
.block {CSS deffinitions come here;} (now, .block can occure again later on the site, handy if all your blocks have a blue background like you see on Drupal.org), or by .block-menu {CSS deffinitions come here;} - this is a bit more specific then just .block, as it says that the styling should only be applied to any menu in blocks. OR, you can call JUST THIS ONE DIV and none else by its ID #block-menu-62 {CSS deffinitions come here;}.

Okay, so far for how to call your block from your CSS file and style it to your likes.

now for the

 <div class="block block-menu<?php print $block->module; ?>" id="block-menu-62<?php print $block->module; ?>-<?php print $block->delta; ?>">
    <h2 class="title"><?php print $block->subject; ?></h2>
    <div class="content"><?php print $block->content; ?></div>
</div>

Placint this in your page.tpl.php will result in errors. You might want to have a look at the PHPtemplate section of the Handbook on Drupal.org, but this is it in short:

A PHPtemplate theme works like this:

You have the page.tpl.php that will define the HTML markup for the entire page. (If you need additional functions in your templates, you need to add a template.php file to the directory of your theme, this will first be processed and its functions will be made available to the template then in a second step. But for now let's just keep this info for you to remember once it occurs, you won't need it in everyday page theming).

So the first thing that is going to be analyzed is the page.tpl.php file. Its content will render your web site's markup. The PHP tags in it add things like header-stuff sloagans and: sidebars!!! This is done by e.g. for a left sidebar (and you might already know this):

<?php if ($sidebar_left) { ?>	
	<?php print $sidebar_left ?>
<?php } ?>

What does this do: first it checks if there really is a left sidebar if($sidebar_left) { ... - if it finds a sidebar, it will continue to call it print $sidebar_left (finally you'll find a <?php } ?> which just closes the initial if-query - you remember?

Okay. What happens WHEN the sidebar gets called?! Additionally to what goes on inside Drupal at this stage is that the Template Engine will look if it finds a block.tpl.php file! And inside this block.tpl.php file you'll find

 <div class="block block-menu<?php print $block->module; ?>" id="block-menu-62<?php print $block->module; ?>-<?php print $block->delta; ?>">
    <h2 class="title"><?php print $block->subject; ?></h2>
    <div class="content"><?php print $block->content; ?></div>
</div>

As there come more blocks on the site, this block.tpl.php file gets called again and again until all boxes with side content have been drawn. This is why it goes in the extra file block.tpl.php!

You remember calling <?php print $content; ?> in your page.tpl.php?! What happens here is that anything in the node.tpl.php will be included here!

I guess you now get the overall idea of how PHPtemplate works and where things belong to and why - and how you can call them again in your CSS file!

Let's recab:

 <div class="block block-menu<?php print $block->module; ?>" id="block-menu-62<?php print $block->module; ?>-<?php print $block->delta; ?>">
    <h2 class="title"><?php print $block->subject; ?></h2>
    <div class="content"><?php print $block->content; ?></div>
</div>

Okay: the initial DIV cann be addressed in your CSS like this (you don't necessarily need ALL of the definitions, this is just to show you all the possiblities:

.block {
   definition: value;
   }
.block-menu {
   definition: value;
   }
#block-module-xx {
   definition: value;
   }
.title {
   definition: value;
   }
.content {
   definition: value;
   }

Now, you can get more specific in your CSS file if you want a different title just in a block by .block .title {definition: value;}. However, you have a competitor ;-) This competitor I am talking about is a SECOND CSS file that might need to be overwritten by your style.css! This is drupal.css, Drupal's internal style sheet.

CSS means "Cascading Style Sheets". What does that mean: it means, there are things that "cascade" downwards. Basically it means that lower hirachy elements will inherit higher hirachy element's definitions - even if they are in other CSS files...

You might want to find out more on the Cascade and which element has a higher value and can overwrite other elements by Googleing on the subject. For now, I just want to give you this on your way: you can override the hirachy system! If by any matter your definitions do not show up, try adding a "!important" behind the rule. E.G.:

.redtext {
     font-color: red;
     }

So you got that and you are sure the element has a class="red" assigned, but still, the element is not red? Okay, just try altering it to

.redtext {
     font-color: red !important;
     }

and check the result. You might find your element bright red by now!

If not, just let me know! ;-)

Steve

Sorry guys, I have tried following this but keep either missing something or doing something wrong.

I want to change the background color on just one of my blocks for now.
My theme does not have a block.tpl.php file (is that normal?)
I have tried adding in a default (& customised) block.tpl.php but get errors at the top of each page.

The element I want to change the background for is:

>body >table #content > tbody > tr > td #sidebar-left.Sidebar > DIV #block-og-0 .block block-og

My css file has everthing up to the DIV, and when I have tried adding an entry for DIV #block-og-0 but with no luck.

I would really really really appreciate it if someone could tell me what I need to put in my 'new' block.tpl.php and also what to add to my CSS file.

Thanks in advance. Scott

i too want to comment on what a great post that was pana. you've taught me so much. thank you.

mark

i'm really interested in making blocks configurable, too. so the content managers/authors of the site can make a block and then specify it as 'attention-block', for example. it would then get a different class that could be styled with css. should this be done somehow with taxonomy?