How is the height defined for a region in a Drupal theme?

Question

I can see that regions are defined in the .info file for a theme but I can't see how these regions relate to CSS that would be used to style them.

For example, in the acq_minimal / Minimal theme, the Header region has a fixed height but I have examined defaults.css and other css files and the .php template files but I can't see how its height is defined.

The Header region height is fixed rather than flexible to the content within it, because if I put text in it with a really large font, this spills over other regions - i.e. the Header region does not stretch to fit.

But preferably I simply want to know how to change the height of the Header region (and other headers). Knowing how to change the width and set the position would also be useful.

Please advise.

Answer 1

Nothing magical is going on here; just look in the .info file for the stylesheets and then look at them. The CSS in there combined with the html in page.tpl.php and other template files build the pages drupal creates. Well, sometimes some javascript comes into play, but that covers the majority of page markup.

ADDITION:

I don't have the theme you are referencing in specific on my machine, and if you are using Drupal 7 it will be slightly different, but to use garland under Drupal 6 as an example, and to expound upon the above and comments below, if we open up its .info file, we will find a:

regions[header] = Header

This tells the theme engine that it has a region called header. So, if we look in its page.tpl.php file, we will find:

<div id="header-region" class="clear-block"><?php print $header; ?></div>

So, when the user puts blocks in the Header region via the Block Administration page, drupal puts all of the html etc into the $header variable for those blocks, which is then output here when it paints the page.

As you can see, $header is wrapped in a CSS id and class, so you can then look back at the .info file to find your CSS files:

stylesheets[all][] = style.css

Opening up style.css reveals:

#header-region {
  min-height: 1em;
  background: #d2e6f3 url(images/bg-navigation.png) repeat-x 50% 100%;
}

which gives the first of many cascading styles to apply to the theme's Header Region. Don't fret over the clear-block class, it's just a wizardly way of making sure nothing floats next to the header (and vice versa), and you aren't ready for that yet lol.

So if you do this with your theme, you should be able to discover how its header is styled.

Answer 2

Firebug is your friend. Load the page and inspect styles. If the css referred to doesn't look like a real file name then make sure css aggregation is turned off.

Answer 3

Try Sweaver it is awesome!

Sweaver offers a visual interface for completely changing your Drupal theme without knowing any CSS. Through a bar that sits at the bottom of your screen, you can change the fonts, colours, dimensions etc. of all your design elements and see the changes real-time. If you are happy with the changes, you can easily save it as a revision to activate immediately or save for later. Advanced users will find a highly pluggable and configurable system that allows full manipulation off the interface and extendibility of the functionality.

I was sceptical when I read about what it can do But it turned out great, works like a charm! Awesome editor, Cuts hours of coding down to minutes!