Home > DeveloperSection > Beginner > Build Custom Theme in Drupal

Build Custom Theme in Drupal


Drupal Drupal 
Ratings:
0 Comment(s)
 3382  View(s)
Rate this:

Build Custom Theme in Drupal

Drupal has enough power and flexibility for creation a custom theme. But you need to know how Drupal works with themes to be able to choose the optional way. Knowing of theme creation principles you can minimize your code and resources.

Does it mean that you should learn CMS from beginning to the end just to create your own Drupal theme? For understanding of the most important things you need to know:

1.       Drupal terminology

2.       XHTML and CSS

3.       Javascript and jQuery (It’s needed when you are going to do a theme with supporting for these scripts)

4.       PHP (It is not necessary but in many situations PHP knowledges can help you to understand what are we talking about)

In this article I will explain how to create or build own custom theme in Drupal content management system. To create the custom theme in drupal, follows the following steps:

Step 1: Create a folder with ‘mycustomtheme’ name; it is not mandatory that you’ve used the same name it depends on your convenience.

Step 2: Before proceeding to next step first of all you’ve to aware some file format which is widely used in drupal template. Let’s take a brief idea about these files.

1.       .info file (Drupal Information File): A required file that is new to Drupal 6 which provides information about the theme.

2.       page.tpl.php: The main template file that defines the content on most of the page.

3.       style.css:  The CSS file that sets CSS rule for the template.

4.       node.tpl.php: this file defines the content of node.

5.       block.tpl.php: Defines the content of blocks.

6.       comment.tpl.php:  defines the content of comment.

7.       box.tpl.php: puts a box around things like comment.

8.       style-rtl.css: I think it's a CSS for right to left languages and can be ignored if you're using a left-to-right language like English.

Here I’m making custom theme files format like this:

Build Custom Theme in Drupal

This is only for our convenience; it is not a mandatory part.

Creating .info file for drupal custom theme:

Here I have created info file with ‘mycustomtheme.info’ name and the code of this file will be:

‘mycustomtheme.info’ Code:

; $Id: typebased.info,v 1.6 2011/01/10 14:20:00 jarek Exp $

 

name = MyTheme

description = MyTheme.

version = VERSION

core = 7.x

engine = phptemplate

 

features[] = logo

features[] = name

features[] = slogan

features[] = node_user_picture

features[] = comment_user_picture

features[] = favicon

 

stylesheets[all][]   = base.css

stylesheets[all][]   = style.css

stylesheets[all][]   = colors.css

 

regions[header_menu]          = Header menu

regions[footer_menu]          = Footer menu

regions[sidebar]              = Sidebar

regions[content]              = Content

regions[footer_column_first]  = Footer first column

regions[footer_column_second] = Footer second column

regions[help]                 = Help

regions[page_top]             = Page top

regions[page_bottom]          = Page bottom

 

settings[base_font_size]        = '12px'

settings[layout_1_width]        = '75%'

settings[layout_1_min_width]    = '500px'

settings[layout_1_max_width]    = '900px'

settings[layout_2_width]        = '85%'

settings[layout_2_min_width]    = '850px'

settings[layout_2_max_width]    = '1000px'

settings[trim_pager]            = '5'

 

 

; Information added by drupal.org packaging script on 2011-01-10

version = "7.x-1.8"

core = "7.x"

project = "MyTheme"

datestamp = "1294669562"

 

‘page.tpl.php’ Code:

<div id="wrapper">

  <div id="header">

 

    <div id="branding">

      <?php if ($logo): ?>

        <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">

          <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />

        </a>

      <?php endif; ?>

 

      <?php if ($site_name): ?>

        <?php if ($title): ?>

          <div id="site-name"><strong>

            <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><?php print $site_name; ?></a>

          </strong></div>

        <?php else: /* Use h1 when the content title is empty */ ?>

          <h1 id="site-name">

            <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><?php print $site_name; ?></a>

          </h1>

        <?php endif; ?>

      <?php endif; ?>

 

      <?php if ($site_slogan): ?>

        <div id="site-slogan"><?php print $site_slogan; ?></div>

      <?php endif; ?>

    </div> <!-- /#branding -->

 

  <?php if ($page['header_menu']): ?>

    <div id="header-menu">

      <?php print render($page['header_menu']); ?>

    </div>

  <?php endif; ?>

 

 

  </div> <!-- /#header -->

 

  <div id="main">

    <?php if ($page['content']): ?>

      <div id="content" class="column">

        <div class="inner">

          <?php if ($breadcrumb): ?><div id="breadcrumb" class="clearfix"><?php print $breadcrumb; ?></div><?php endif; ?>

          <?php if ($messages): ?><div id="messages"><?php print $messages; ?></div><?php endif; ?>

          <?php if ($tabs): ?><div class="tabs"><?php print render($tabs); ?></div><?php endif; ?>

 

          <a id="main-content"></a>

          <?php print render($title_prefix); ?>

         

          <?php if ($title && !isset($node)): ?>

            <h1 class="page-title"><?php print $title ?></h1>

          <?php endif; ?>

         

          <?php print render($title_suffix); ?>

 

          <?php print render($page['help']); ?>

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

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

          <?php print $feed_icons; ?>

        </div> <!-- /.inner -->

      </div> <!-- /#content -->

    <?php endif; ?>

 

    <?php if ($page['sidebar']): ?>

      <div id="sidebar" class="column">

          <?php print render($page['sidebar']); ?>

      </div> <!-- /#sidebar-first -->

    <?php endif; ?>

 

  </div> <!-- /#main -->

 

  <div id="footer">

 

    <?php if ($page['footer_column_first'] || $page['footer_column_second']): ?>

      <h2 class="element-invisible"><?php print t('Footer'); ?></h2>

      <div id="footer-columns">

        <?php if ($page['footer_column_first']): ?>

          <div id="footer-column-first" <?php if (!$page['footer_column_second']): ?>class="single"<?php endif; ?>>

            <?php print render($page['footer_column_first']); ?>

          </div>

        <?php endif; ?>

 

        <?php if ($page['footer_column_second']): ?>

          <div id="footer-column-second" <?php if (!$page['footer_column_first']): ?>class="single"<?php endif; ?>>

            <?php print render($page['footer_column_second']); ?>

          </div>

        <?php endif; ?>

      </div><!-- /#footer-columns -->

    <?php endif; ?>

 

    <div id="closure">

      <div id="info">Drupal theme by <a href="http://www.woothemes.com">WooThemes</a> and <a href="http://www.kiwi-themes.com">Kiwi Themes</a></div>

 

      <?php if ($page['footer_menu']): ?>

        <div id="footer-menu">

          <?php print render($page['footer_menu']); ?>

        </div> <!-- /#footer-menu -->

      <?php endif; ?>

    </div> <!-- /#closure -->

 

  </div> <!-- /#footer -->

</div> <!-- /#wrapper -->

‘maintenance-page.tpl.php’ Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">

 

<head>

  <title><?php print $head_title; ?></title>

  <?php print $head; ?>

  <?php print $styles; ?>

  <?php print $scripts; ?>

</head>

 

<body class="<?php print $classes; ?>">

  <div id="main-wrapper">

    <div id="main">

 

      <div id="branding" <?php if ($logo): ?>class="logo-enabled clearfix"<?php endif; ?>>

        <?php if ($logo): ?>

          <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">

            <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />

          </a>

        <?php endif; ?>

 

        <?php if ($site_name): ?>

            <h1 id="site-name">

              <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><?php print $site_name; ?></a>

            </h1>

        <?php endif; ?>

 

        <?php if ($site_slogan): ?>

          <div id="site-slogan"><?php print $site_slogan; ?></div>

        <?php endif; ?>

      </div> <!-- /#branding -->

 

      <div id="message">

        <?php if (!empty($title)): ?>

          <h1 class="title" id="page-title"><?php print $title; ?></h1>

        <?php endif; ?>

        <?php print $content; ?>

      </div>

 

    </div> <!-- /#main -->

  </div> <!-- /#main-wrapper -->

</body>

</html>

‘node.tpl.php’ Code:

<div class="node-wrapper">

  <div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>

 

    <div class="node-meta">

      <?php if ($display_submitted): ?>

        <div class="date">

          <div class="day"><?php print format_date($node->created, 'custom', 'd') ?></div>

          <div class="month-and-year">

            <div class="month"><?php print format_date($node->created, 'custom', 'M') ?></div>

            <div class="year"><?php print format_date($node->created, 'custom', 'Y') ?></div>

          </div>

        </div>

        <div class="user-name"><?php print $name; ?></div>

      <?php endif; ?>

      <?php print render($content['links']['comment']); ?>

    </div> <!-- /.node-meta -->

 

    <div class="content"<?php print $content_attributes; ?>>

      <?php print render($title_prefix); ?>

      <?php if ($page): ?>

        <h1 class="node-title" <?php print $title_attributes; ?>><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h1>

      <?php endif; ?>

      <?php if (!$page): ?>

        <h2 class="node-title" <?php print $title_attributes; ?>><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h2>

      <?php endif; ?>

      <?php print render($title_suffix); ?>

 

      <?php

        // We hide the comments and links now so that we can render them later.

        hide($content['comments']);

        hide($content['links']);

        print render($content);

        print render($content['links']);

      ?>

    </div>

 

    <?php print render($content['comments']); ?>

 

  </div> <!-- /.node -->

 

  <?php if (!$page): ?>

    <div class="node-separator"></div>

  <?php endif; ?>

 

</div> <!-- /.node-wrapper -->

 

After creating all template files just put these files in one directory, here I’ve put these files in directory with ‘mytheme’.

Build Custom Theme in Drupal

Now open the Drupal Administrator Panel and go to option ‘Appearance’. 

Build Custom Theme in Drupal

To install the Theme, click on ‘Install new theme’ link and select your file either it on web or on local computer.

Build Custom Theme in Drupal

After choosing your file, click on ‘Install’ button to install your theme.

Build Custom Theme in Drupal

 

Now your plugin installed successfully in your website. If you want to set it as default theme of your website then just click on Enable newly added themes -> set as default.

Build Custom Theme in Drupal

This is your newly installed theme. Now click on ‘Enable and set default’ button.

Build Custom Theme in Drupal

Now you can see your website with look and feel or newly installed theme.

Build Custom Theme in Drupal

This is the complete description on creating custom theme in drupal. I hope you will enjoy it.


Don't want to miss updates? Please click the below button!

Follow MindStick