---
title: "Build Custom Theme in Drupal"  
description: "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 option"  
author: "Anonymous User"  
published: 2012-04-08  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/910/build-custom-theme-in-drupal  
category: "drupal"  
tags: ["drupal"]  
reading_time: 6 minutes  

---

# Build Custom Theme in Drupal

Drupal has enough power and flexibility for creation a [custom theme](https://www.mindstick.com/forum/23282/hide-the-title-bar-for-an-activity-in-xml-with-existing-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](https://www.mindstick.com/forum/157976/how-can-you-use-jquery-s-testing-framework-such-as-qunit-to-write-unit-tests-for-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](https://yourviews.mindstick.com/view/88474/why-understanding-yourself-is-so-difficult) of the most important things you need to know:

1. Drupal terminology

2. XHTML and CSS

3. [Javascript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-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](https://www.mindstick.com/blog/12586/list-of-the-five-best-content-management-systems-in-2019). 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](https://www.mindstick.com/forum/33530/convenience-vs-init-method-memory-usage).

Step 2: Before proceeding to next step first of all you’ve to aware some [file format](https://www.mindstick.com/forum/12820/how-to-check-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](https://www.mindstick.com/mindstickarticle/05872f50-1ff1-4e7a-bd74-253c15fee32f/images/79dc3116-ddd7-4ca9-bbe4-3153187245cd.png)

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 = MyThemedescription = MyTheme.version = VERSIONcore = 7.xengine = phptemplate features[] = logofeatures[] = namefeatures[] = sloganfeatures[] =
node_user_picturefeatures[] =
comment_user_picturefeatures[] = favicon stylesheets[all][]   =base.cssstylesheets[all][]   =style.cssstylesheets[all][]   =colors.css regions[header_menu]          =Header menuregions[footer_menu]          =Footer menuregions[sidebar]              =Sidebarregions[content]              =Contentregions[footer_column_first]  =Footer first columnregions[footer_column_second]= Footer second columnregions[help]                 =Helpregions[page_top]             =Page topregions[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-10version ="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](https://www.mindstick.com/mindstickarticle/05872f50-1ff1-4e7a-bd74-253c15fee32f/images/052ddca2-d047-4bd4-af3d-35e254519f22.png)

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

![Build Custom Theme in Drupal](https://www.mindstick.com/mindstickarticle/05872f50-1ff1-4e7a-bd74-253c15fee32f/images/49ab152a-79e6-41c5-9224-4470ccaac999.png)

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](https://www.mindstick.com/mindstickarticle/05872f50-1ff1-4e7a-bd74-253c15fee32f/images/50f212fc-a861-473e-8e5e-51ab709d7850.png)

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

![Build Custom Theme in Drupal](https://www.mindstick.com/mindstickarticle/05872f50-1ff1-4e7a-bd74-253c15fee32f/images/cd4d522f-2e60-43cc-accf-97353b3afaf8.png)

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](https://www.mindstick.com/mindstickarticle/05872f50-1ff1-4e7a-bd74-253c15fee32f/images/d471217b-6548-4289-aeee-536bc01fe83d.png)

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

![Build Custom Theme in Drupal](https://www.mindstick.com/mindstickarticle/05872f50-1ff1-4e7a-bd74-253c15fee32f/images/13c2ab86-4f94-4fe6-a7a6-6305e481a640.png)

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

![Build Custom Theme in Drupal](https://www.mindstick.com/mindstickarticle/05872f50-1ff1-4e7a-bd74-253c15fee32f/images/de379595-c70a-4678-9fcd-62ac193c67d6.png)

This is the complete description on [creating custom](https://www.mindstick.com/interview/34070/creating-custom-annotations-in-java) theme in drupal. I hope you will enjoy it.

---

Original Source: https://www.mindstick.com/articles/910/build-custom-theme-in-drupal

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.