Content

Creating a region

  • Barebone base theme for high demand custom theming
  • It provides a streamlined page.tpl.php
  • Creating region is as easy as this:

<!-- For Version D6: -->
<?php print om_region('content', $content, 1); ?>

<!-- For Version D7 -->
<?php print om_region_wrapper('content', render($page['content']), 1); ?>

"<?php if($content): ... endif; ?>" is automatically added, with auto commented ending "</div> <!-- /end... -->"

back to top ^

General Features

  • Lightweight and offers only the most useful functionalities
  • IE 30-limit stylesheet override (for D7, now a core functionality)
  • Block edit buttons (for D7, just enable the contextual links module under core options)
  • Dropdown Menus (for D7, just put the main menu block in the main menu region, accessible in the /admin/structure/block/list)
  • IE6-IE9 specific conditional stylesheet
  • LESS CSS, so less CSS rules to override
  • You can turn on/off inner DIVs using a param
<?php
/**
 * params:
 * 'content' - ID tag
 * $content - region variable
 * 1 or 0 - 1 for inner div enabled, 0 for inner div disabled
 */
?>
<!-- For Version D6: -->
<?php print om_region('content', $content, 1); ?>

<!-- For Version D7 -->
<?php print om_region_wrapper('content', render($page['content']), 1); ?>

Output when inner div is turned on:

<div id="content" class="region">
  <div id="content-inner" class="region-inner">
  ...
  </div><!-- /#content-inner -->
</div><!-- /#content -->

Output when inner div is turned off:

<div id="content" class="region">
  ...
</div><!-- /#content -->

back to top ^

Simplified page.tpl.php

The core feature of this theme is it's simplicity. I tried to convert all the multiple lines of codes to one line of code to easily place them anywhere in the page.tpl.php without worrying about breaking the layout because of some missing ending divs on creating regions, etc.

I created some functions to address these issues for themers, please see below:

A small example:

Normally, you'll have these lines of codes for Logo, Site Name and Site Slogan output:
(17 lines)

<?php if ($logo) { ?>
  <a href="<?php print $front_page ?>" title="<?php print t('Home') ?>">
    <img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" />
  </a>
<?php } ?>
<?php if ($site_name) { ?>
  <h1 class='site-name'>
    <a href="<?php print $front_page ?>" title="<?php print t('Home') ?>">
      <?php print $site_name ?>
    </a>
  </h1>
<?php } ?>
<?php if ($site_slogan) { ?>
  <div class='site-slogan'>
    <?php print $site_slogan ?>
  </div>
<?php } ?>

What I did was this:
(1 line)

<?php print om_identity($logo, $site_name, $site_slogan, $front_page); ?>

So, what happened to the rest of the codes?

  • It simply went to template.php

back to top ^

Why is this great?

  • In custom theming, it's normal to move or add some elements inside the page.tpl.php, whether it's a region variable, some extra tags, or some extra scripts.
    You will see how messy and long it will become if your layout becomes more and more complicated. It will become somewhat close to a jungle, I think. So, making it shorter and simple looking is a big ease in understanding it esp. for your fellow developers who will also add or do something to it.
  • Properly indenting your codes may not be a big help if you will constantly revise the page.tpl.php to achieve the target layout, because it means you'll have to contantly be indenting your codes on every revision. Buying an expensive software just to indent properly is your last option.
  • In my opinion, while doing a number of custom web layouts, most of the elements inside the page.tpl.php should be grouped together, just like what I did and while still making the individual variables available for special use. And the themer must be given choices to turn off/on the tags on modules that are not useful to his layout, this is in the case of so many nested div tags, which is not also good for page loads and SEOs
  • Great news, Drupal 7 has render(), somewhat functions like om_region(), I am still figuring out the option to put ID or add inner divs using it but added my om_region_wrapper() function for the meantime.

back to top ^

List of key functions in page.tpl.php

Drupal 6

Identity:

<?php print om_identity($logo, $site_name, $site_slogan, $front_page); ?>

Default Menus:

<?php print om_menu('primary', $primary_links, $primary_links_tree); ?>
<?php print om_menu('secondary', $secondary_links, $secondary_links_tree); ?>

Content Elements:

<?php print om_content_elements($mission, $tabs, $title, $messages, $help); ?>

Adding Regions (samples):

/**
 * params:
 * 'header-block' - ID
 * $header - region variable name
 * 1 or 0  - switch for inner divs
 */
<?php print om_region('header-block', $header, 1); ?>
<?php print om_region('sidebar-left', $left, 1); ?>
<?php print om_region('sidebar-right', $right, 1); ?>
<?php print om_region('content', $content, 1); ?>
<?php print om_region('footer', $footer, 1); ?>

Output when inner div is turned on:

<div id="content" class="region">
  <div id="content-inner" class="region-inner">
  ...
  </div><!-- /#content-inner -->
</div><!-- /#content -->

Output when inner div is turned off:

<div id="content" class="region">
  ...
</div><!-- /#content -->

back to top ^

Drupal 7

Identity:

<?php print om_identity($logo, $site_name, $site_slogan, $front_page); ?>

Default Menus:

<?php 
/**
 * Enable the Main Menu block in the block list by putting it in the Main Menu region, 
 */
<?php print om_region_wrapper('main-menu', render($page['main_menu']), 0); ?>
 ?>

Search Box:

<?php 
/**
 * Enable the Search Box in the block list by putting it in the Header region
 * or in any region 
 */
<?php print om_region_wrapper('header', render($page['header']), 0); ?>
 ?>

Content Elements:

<?php print om_content_elements(render($tabs), render($title_prefix), $title, render($title_suffix), $messages, render($page['help']), render($action_links)); ?>

Adding Regions (samples):

/**
 * params:
 * 'header-block' - ID
 * render($page['header']) - region variable
 * 1 or 0  - switch for inner divs
 */
<?php print om_region_wrapper('header-block', render($page['header']), 1); ?>
<?php print om_region_wrapper('sidebar-first', render($page['sidebar_first']), 1); ?>
<?php print om_region_wrapper('sidebar-second', render($page['sidebar_second']); ?>
<?php print om_region_wrapper('content', render($page['content']), 1); ?>
<?php print om_region_wrapper('footer', render($page['footer']), 1); ?>

Output when inner div is turned on:

<div id="content" class="region">
  <div id="content-inner" class="region-inner">
  ...
  </div><!-- /#content-inner -->
</div><!-- /#content -->

Output when inner div is turned off:

<div id="content" class="region">
  ...
</div><!-- /#content -->

back to top ^

Drupal 6 Key Features

  • Shorter page.tpl.php coding
  • Access block edit on block hover
  • Custom page template recognition
  • Block class module ready (you don't have to edit your block.tpl.php to add block_class() function)
  • Block additional classes - block-first and block-last
  • Additional body classes
  • IE6 to IE9 Conditional styling files ready
  • IE's 30 limit stylesheet override

back to top ^

Drupal 7 Key Features

  • Shorter page.tpl.php coding
  • Access block edit on block hover (in core - contextual links)
  • Custom page template recognition (in core)
  • Block additional classes - block-first
  • Additional body classes (in core)
  • IE6 to IE9 Conditional styling files ready
  • IE's 30 limit stylesheet override (in core)

back to top ^

Drupal 7 Key Features

  • Shorter page.tpl.php coding
  • Access block edit on block hover (in core - contextual links)
  • Custom page template recognition (in core)
  • Block additional classes - block-first
  • Additional body classes (in core)
  • IE6 to IE9 Conditional styling files ready
  • IE's 30 limit stylesheet override (in core)

back to top ^

Creating an OM Subtheme

  1. Duplicate the folder named subtheme and rename it to your own theme name, ex. awesome
    Example: (in drupal root folder )
    /sites/all/themes/om/core/
    /sites/all/themes/om/subtheme/  - duplicate this folder
    

    Your new theme

    /sites/all/themes/om/core/
    /sites/all/themes/om/subtheme/  
    /sites/all/themes/om/awesome/  - your new theme
    

    You can place it outside the om folder

    /sites/all/themes/om/core/
    /sites/all/themes/om/subtheme/  
    /sites/all/themes/awesome/  - your new theme outside the om folder
    
  2. Inside the awesome folder rename om_subtheme.info to awesome.info
    Example: (in /sites/all/themes/awesome folder )
    /sites/all/themes/awesome/om_subtheme.info
    

    Changed to awesome.info

    /sites/all/themes/awesome/awesome.info
    
  3. Open awesome.info and put your theme name like Awesome Subtheme
    Example: (in awesome.info )
    name = Awesome Subtheme
    
  4. You can add regions, just follow the format,
    Example: (in awesome.info)
    regions[special] = Special
    
    ; IMPORTANT (Drupal 7): If you are adding your custom regions, make sure you copy 
    ; /sites/all/themes/om/core/tpl/region.tpl.php to your subtheme folder
    ; the same rule applies to custom node.tpl.php and block.tpl.php
    
  5. Whatever region you add on the awesome.info, make sure that you also add on page.tpl.php.
    Example: (in page.tpl.php)
    <?php print om_region('special', $special, 1); ?>
    
  6. From here onwards, you'll ready to edit css/style.css, or add some jquery scripts on js/script.js, etc.
    Your awesome theme folder
    /sites/all/themes/awesome/css/style.css
    /sites/all/themes/awesome/css/images/ (all your theme images)
    /sites/all/themes/awesome/js/script.js
    /sites/all/themes/awesome/favicon.ico
    /sites/all/themes/awesome/logo.png
    /sites/all/themes/awesome/screenshot.png
    /sites/all/themes/awesome/template.php
    /sites/all/themes/awesome/page.tpl.php
    

back to top ^

Sample D6 OM Subtheme

View Sample D6 OM Subtheme
The sample OM Subtheme's page.tpl.php looks like this:

<body class="<?php print $body_classes; ?>">
  <div class="wrapper-outer">
    <div id="header" class="wrapper">
      <?php print om_identity($logo, $site_name, $site_slogan, $front_page); ?>
    </div> <!-- /#header -->
    <div id="navigation" class="wrapper">
      <?php print om_menu('primary', $primary_links, $primary_links_tree); ?>
      <div class="free-quotation"><a href="/">Free Quotation</a></div>
    </div> <!-- /#navigation -->
    <?php print om_region('highlight', $highlight, 0); ?>
    <?php if($is_front) { 
	print '<div id="social-bar">';
	print om_region('sharebar', $sharebar, 0);
	print om_search_box($search_box); 
	print '</div>';
	} ?>
    <?php print om_region('callout', $callout, 0); ?>
    <?php if(!$is_front): ?>
    <div id="container" class="wrapper">
      <div id="container-inner" class="wrapper-inner">
      <?php print om_region('sidebar-right', $right, 1); ?>
      <div id="main">
        <?php print $breadcrumb; ?>
        <div id="main-inner">
          <?php print om_content_elements($mission,$tabs,$title,$messages,$help) ?>
          <?php print om_region('content', $content, 1); ?>
          <?php print $feed_icons; ?>
        </div> <!-- /main-inner -->
      </div> <!-- /main -->
      <div class="clear-block"></div>
    </div></div> <!-- /#container-inner, /#container -->
    <?php endif; ?>
    <?php print om_region('sitemap', $sitemap, 1); ?>
    <?php print om_region('footer', $footer, 1); ?>
    <?php print om_region('footer-message', $footer_message, 0); ?>
  </div> <!-- /.wrapper-outer -->
  <?php print $closure; ?>
</body>

back to top ^

Simplicity to the core
If you have any ideas on simplifiying custom theming further or need any help, please contact me. Or send me a message through daniel@promethost.com

Sponsored by: Promet Source, an Acquia Drupal partner company

Back to OM Base Theme Project