Main Content

Promet Source Releases OM Drupal Theme

Promet Source Releases OM Drupal Theme

What is OM Base Theme?

OM Base Theme is for professional subtheming. This theme is meant to be customized for specific designs and is easy to maintain. Daniel Honrade has grown into a pro-Drupal themer and has constantly been dabbling in the development of the most configurable Drupal theme ever. His OM based theme uses a simple template which can be customized in any way that you would like.

Why OM Base Theme? The Purpose behind the need for a new Theme

 

For custom theming, a pro theming job, you need the most basic, most simple template which can be customized in any way. A base theme can help simplify the process of implementation of web design layout. The less CSS it has the better because it means that there will not be a lot to override in creating new CSS rules.

 

Benefits of OM Base Theme

 

The obvious benefit of the OM Base Theme is that is is the most configurable Drupal Theme ever, which basically means, it's SIMPLE. There are something like 1,400 options to configure when you think about backgrounds, border, columns, layouts, etc and this theme allows you to easily customize allow of these configurations in a simple template. 

 

OM Base Theme Documentation


Simplified page.tpl.php

The core feature of this theme is its 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 is 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

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 constantly be indenting your codes on every revision. Buying 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.

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 -->

 

 

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 -->

 

 

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

 

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)

 

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)

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
  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

 

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>

 

This easy to maintain Theme is now available in Drupal 6 and Drupal 7. For more information on Drupal Theming, Drupal Web Development, or Drupal Web Design or contact us at support@promethost.com or call (773)-525-8255. For technical questions on the OM Base Theme, please contact Daniel Honrade at daniel@promethost.com.