john pfeiffer
  • Home
  • Categories
  • Tags
  • Archives

drupal 6 custom theme zen add a region

drupal-6-custom-theme-zen-add-a-region

If you've followed previous instructions you copied StarterKit into it's own folder and made your own sub theme (e.g. horizontal_menu)

Now you can add to themename.info , look for the regions section (ie around line 60)

regions[left_background_column] = left background column

Next copy Zen's page.tpl.php to your sub-theme's directory and add the new region "variable"

You have to look through page.tpl.php for the exact place you want it to appear... OF COURSE, THIS MEANS CREATING SOME CSS TO PLACE IT IN THE PAGE!

LAYOUT.CSS #page, #closure-blocks { min-width: 960px; /* Don't allow the browser to make the site unreadable. */ } /** left-background-column 2010-05-14**/ #left-background-column { float: left; width: 10%; } The effect of these changes was to create a tiny block to the left of the logo... So, don't be afraid, it's just css & php ... really it's just css. SUMMARY The .info part just "registers" your new region so Drupal is aware of it. The php part is where you want it in the layout of the page, above header, below footer, etc. AND it gives you an opportunity to name the "css definitions". Finally, the layout.css actually gives you the ability to change the visual display of your new region (floating, width, special font, etc.) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - But to create a whole new column (e.g. turn a 3 column layout into 5 columns)... So, back to column layout school... You need a wrapper (or container) and then you need each column. We'll pretend that
is the center column (which contains 3 columns, confused yet?) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - php.tpl.php
...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - layout.css /** left-background-column 2010-05-14 johnpfeiffer **/ #left-background-column { float: left; width: 10%; height: 100%; } /** center-background-column 2010-05-14 johnpfeiffer **/ #center-background-column { width: 90%; float: right; } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - NOTE: we didn't need to add a region to create these columns, but by having the new left-background-region and right-background-region it makes it MUCH easier for an administrator to modify the background image/color or content without having to dive into the php/css.

  • « drupal 6 custom theme block background color
  • drupal 10 views module create a view block of recent stories »

Published

May 14, 2010

Category

drupal

~308 words

Tags

  • 6 13
  • a 23
  • add 9
  • custom 14
  • drupal 43
  • region 1
  • theme 7
  • zen 4