Creating a new template in drupal 7

ZenRays 00:39 Add Comment Edit

A collection of files which defines the presentation layer is called theme. Lets continue with how to create a theme from scratch.

Step 1 : To create the folder structure.
Let us create folder for our new theme in sites/all/themes, folder should be given with a unique name without any spaces. We can also organize the folder by including sub-folders for images and CSS files.
Step 2 : Creating a .info file
.info file provides information of the theme. It is a text file with .info extensions. It should have the name of the theme followed with .info extension. For example themename.info. This file should contain

name - name of your theme
description - a description of the theme
version - version of Drupal
region - the block regions available.Inside square brackets, machine name of the region is included. E.g. regions[header_top_left]
stylesheets - CSS files in included. The media type will be included in the first set of bracket. E.g. stylesheets[all][]. The values are relative to theme directory.
scripts - any scripts required by template. The values are relative to theme directory

Below is the example .info file

name = Scholarly
description = A Bootstrap-based, responsive Drupal theme by <a href="http://www.morethanthemes.com/" target="_blank">More than (just) Themes</a>.
version = 2.1.1
core = 7.x

stylesheets[all][] = js/flexslider/flexslider.css
stylesheets[all][] = mdb/css/bootstrap.min.css
stylesheets[all][] = style.css

scripts[] = mdb/js/mdb.min.js
scripts[] = mdb/js/tether.min.js

regions[header_top_left] = Header Top Left
regions[header_top_right] = Header Top Right
regions[header] = Header

Step 3 : Template files
Themes are based on template files with the extension .tpl.php. These files contains the html for theme, as well as some variables that tell Drupal where to put things.
page.tpl.php - It is used to display the page. It does not contain doctype, head section but it contains the code for the page body. The default page.tpl.php file is contained in the system module.
html.tpl.php - It includes code for the structure of the document. It contains the doctype, the <head> section, and opening and closing <body> and <html> tags.
Creating page.tpl.php file
This file contains all the code for the main <body> section of your theme and consists of three elements:

The HTML mark-up
Region definitions
Variables for other content items

Lets start with basic structure

<div id="header">
</div>

<div id="wrapper">
 <div id="content">
 </div>

 <div id="sidebar">
 </div>
</div>

<div id="footer">
</div>

Step 4 : Creating Regions
Any part of your page that has to be editable in the Drupal interface (via Blocks) has to be a region. It includes header, right sidebar, content area, and footer and has to be introduced in the .info file first. Variables, including regions, are inserted using render arrays in drupal 7. Render array is a way of outputting the regions and other elements. The following code creates a conditional to check that the footer region has something in it, then prints out the contents

<?php if ($page['footer']): ?>    
<?php print render($page['footer']); ?>
<?php endif; ?>

In $page['footer'], footer must be the machine name. Here is the sample page.tpl.php file

 <div id="header">
    <a href="<?php print $front_page;?>">
      <img src="/<?php print $directory;?>/images/logo.png" alt="<?php print $site_name;?>" height="80" width="150" />
    </a>
 
    <?php if ($main_menu): ?>
      <?php print theme('links', $main_menu); ?>
    <?php endif; ?>

  </div>
 
  <div id="content">
    <?php print render($title_prefix); ?>
      <?php if ($title): ?><h1><?php print $title; ?></h1><?php endif; ?>
    <?php print render($title_suffix); ?>

    <?php print render($messages); ?>
    <?php if ($tabs): ?><div class="tabs"><?php print render($tabs); ?></div><?php endif; ?>
    <?php if ($action_links): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php endif; ?>

    <?php print render($page['content']); ?>
  </div>

  <?php if ($page['sidebar_first']): ?>    
    <div id="sidebar">
      <?php print render($page['sidebar_first']); ?>
    </div>
  <?php endif; ?>  

  <div id="footer">
    <?php if ($page['footer']): ?>    
      <?php print render($page['footer']); ?>
    <?php endif; ?>  
  </div>

If you want to change the block appearance, then we can make changes in block.tpl.php. Navigate to modules >> block >> block.tpl.php. Copy block.tpl.php and paste it in your newly created theme and edit. Lets continue with an example of changing the title of the block. Lets give a class to <h2> tag in block.tpl.php

<?php print render($title_prefix); ?>
<?php if ($block->subject): ?>
<h2 class="title"<?php print $title_attributes; ?>><?php print $block->subject ?></h2>
<?php endif;?>
<?php print render($title_suffix); ?>

Here h2 tag has a class named as title. Next step is to specify styling for title. Go to your theme's CSS file and add the following lines of code

.title{
  text-decoration: underline;
  color: blue;
  font-family: Georgia;
  font-size: 20px;
  font-style: italic;
}

Now the title of the block will appear in blue color.
If you want to change the appearance of comments, we can make in comment.tpl.php. Navigate to modules >> comment >> comment.tpl.php. Copy comment.tpl.php and place it in your theme. Lets continue with an example of moving submitted information below the comment. In comment.tpl.php place the submitted class below the content. Below is the code snippets to do so.

<div class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
<?php print $picture ?>
<?php if ($new): ?>
<span class="new"><?php print $new ?></span>
<?php endif; ?>
<?php print render($title_prefix); ?>
<h3<?php print $title_attributes; ?>><?php print $title ?></h3>
<?php print render($title_suffix); ?>
<div class="content"<?php print $content_attributes; ?>>
<?php
hide($content['links']);
print render($content);
?>
<div class="submitted">
<?php print $submitted; ?>
</div>
<?php if ($signature): ?>
<div class="user-signature clearfix">
<?php print $signature ?>
</div>
<?php endif; ?>
</div>
<?php print render($content['links']) ?>
</div>

After clearing the cache, the submitted information will appear below the comment. Finally navigate to Appearance and in newly created theme section, select enable and set as default option.

ZenRays provide the following to make you expert

zenrays providing drupal training in Bangalore

Fully practical and project-based sessions from first class.
Training by Experienced Consultants, not regular Trainers
Friendly and enthusiastic faculty to clear your doubts 24X7
Free Live project after the training to get you industry experience

If you want more details please visit us:

Zenrays.com Reach us at trainings@zenrays.com

ABOUT THE AUTHOR

Hello We are OddThemes, Our name came from the fact that we are UNIQUE. We specialize in designing premium looking fully customizable highly responsive blogger templates. We at OddThemes do carry a philosophy that: Nothing Is Impossible