4

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.

8

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.

  • But which CSS files correspond to which theme regions? When I looked at the .info file, I saw the theme regions defined with a visible name and a machine name, e.g. for Header there was a header (lower case). I searched the theme files to see if header was defined in the CSS files but no result. I was expecting to see something like a CSS class defined called header with the height attribute set. But I didn't see this. – therobyouknow Dec 22 '11 at 10:28
  • 1
    The region names in the info file correspond to php variable names in the theme's page.tpl.php file(s). Look there and see what else is going on. – Jimajamma Dec 22 '11 at 14:41
  • Wow excellent @Jimajamma +1 for your comment above and +1 and accepted for your answer. Thanks so much! This was the missing link in my mind as to what was going on! – therobyouknow Dec 22 '11 at 15:45
  • Follow up summary (as stated in my comments on @Malks answer below): To summarise, three parts of the CSS code in style.css to consider for acq_minimal for vertical positioning: (1) vertical margin at very top of page, before title:.wrapper-header { padding-top: (2) vertical margin before main menu: .stack-navigation { margin-top: (3) vertical margin after main menu: .wrapper-content { margin-top: – therobyouknow Jan 14 '12 at 13:08
  • Also worth looking at: drupal.org/project/sweaver - edit the appearance of the site within Drupal admin ( "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." ) – therobyouknow Feb 6 '12 at 21:58
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.

  • Tried this but it is not clear how the header region of the theme has its height defined in the CSS. Perhaps this is implied by other regions but given that the header is a fixed height I would expect to see some kind of explicit definition. – therobyouknow Dec 22 '11 at 10:29
  • +1 For firebug. Chrome has view element which appears to be similar too. Thanks for your contribution - this can be used in conjunction with @Jimajamma's accepted answer. – therobyouknow Dec 22 '11 at 15:46
  • 1
    @therobyouknow, do you have a link to your site that can be accessed? There will be a CSS rule for the div if it is a fixed height, it's just a matter of finding it :) It may be one of the sub divs that are setting the height for example. – Malks Dec 22 '11 at 21:58
  • 1
    I don't think there is anything on the header that is setting the height, but rather the margin-top of the navigation is making some space for the header. – Malks Dec 22 '11 at 23:29
  • 1
    I still think it's the top margin on the container below the header that is setting your height. Because all the content as it stands is inline there is nothing to give the header any of its own height. I'd say that margin top on the nav container is set specifically for the font size of the site name. Look at line 159 in your style.css. – Malks Dec 23 '11 at 0:39
0

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!

  • How would the OP use it to solve their particular problem? – mpdonadio Jan 4 '13 at 3:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.