[Drupal Theming] How to convert a PSD/HTML design to a standard Drupal theme?
BY tintu.manuel
5 years ago
0 comments comment

Drupal is an extremely flexible framework that you can manipulate in multiple ways. In Drupal, the theming is the final phase in the process of generation of dynamic web pages. It converts the data from PHP objects and arrays into HTML markup and CSS styles. Read on to know how to convert a PSD/HTML design to a standard Drupal theme

This is the HTML design we are going to convert to a Drupal theme using 960 grid system

To convert this template to a Drupal theme we have to create a .info file which will include all the styles, JS and regions of the theme and the page.tpl.php file for the pages of the template and page--front.tpl.php for the front page of the template.

There are two options to enable the 960 grid system in our theme:

1, Download the 960 basetheme from http://drupal.org/project/ninesixty and add it as basetheme in .info file, also make sure to enable it in Drupal.

2, In the second option, there is no need to to add 'ninesixty' as the basetheme. You just have to copy the css files and add the css links in .info file. This option would be more comfortable, since there is no need of downloading and enabling any theme as basetheme. Here is a sample info file

name = Business blog 
description = A flexible, recolorable theme with many regions. 
screenshot = screenshot.png 
package = Core 
core = 7.x 
base theme = ninesixty 

regions[header] = Header
regions[primarynav] = Primarynav
regions[search] = Search
regions[featured-thumbs] =  Featured-thumbs
regions[footer] = Footer
regions[copyright] = Copyright

Then we have to add the regions of the sections. You can see that we have added six regions for my theme. We can add different blocks/contents to these regions. After specifying the regions we can start to make the tpl files for our Drupal theme.

If you need a customized index page we have to create page--front.tpl.php and for all the pages we have to create a single page.tpl.php.

We can also design specifically for each section in the page.The description is shown below.

These are the .tpl files handles different sections of the theme.

  • page.tpl.php – Common for all page
  • front-page.tpl.php – Only for front page
  • block.tpl.php - Blocks of the pages
  • comment.tpl.php - Comments
  • forum.tpl.php – Forums


  • page-node-edit.tpl.php
  • page-node.tpl.php
  • page.tpl.php


  • box.tpl.php


  • node-type.tpl.php
  • node.tpl.php


  • comment.tpl.php
  • comment-wrapper.tpl.php


  • block-module-delta.tpl.php
  • block-module.tpl.php
  • block-region.tpl.php
  • block.tpl.php

The Drupal theme directory path is




  • Definitions, including regions and style sheet file names are placed into a .info file.
  • The logic and "decision making" are placed into a template.php file.
  • HTML markup is placed into template files ending with .tpl.php extension.
  • Styles are placed into Cascading Style Sheet files.


In the page--front.tpl.php we add the same HTML and CSS but without the contents or menu. We can add that in Drupal.
We have to

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

add this code where we want to print the required content and we have to use the PHP if condition, if you want to enable or disable the content. Have a look at the code.

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

To make this header section we have to print the logo and login section on top.
So the code for logo will is as folows,

<?php if ($site_name): ?> 
 <a href="<?php print check_url($front_page); ?>" title="<?php print t('Home'); ?>"> 
    <img src="<?php print $logo; ?>" alt="<?php print $site_name; ?>" /> </a> 
<?php endif; ?> 

and the login area in a specified area as shown below. So the login region will be printed inside the nested class called 'grid-8'

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


The primary navigation and search regions are nested in grid-12.

<div class="grid-12  main_nav"> 
  <?php if ($page ['primarynav']): ?> 
      <?php print render($page['primarynav']); ?>
  <?php endif; ?> 

The search region code look will like this,

<div class="grid-12  main_nav"> 
<?php if ($page ['search']): ?> 
  <div class="grid-5"> 
    <?php print render($page['search']); ?> 
<?php endif; ?>


To theme this area we have a region called featured-thumbs. We can add four blocks and images in this region

<div class="grid-12 alpha omega">	
  <?php if ($page ['featured-thumbs']): ?> 
    <?php print render($page['featured-thumbs']); ?> 
  <?php endif; ?>



We can see six articles in the above section. We have a content region to place these articles. Now we have to modify the styles to get the articles aligned similar to the theme.

For example:

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


Finally, we have a footer section. In the footer section we have 2 regions. That is the footer region and copyright region. In the footer region we can add three blocks like the design. To get a styled form inputs like the design, you have to style the footer section form inputs.


<div class="grid-12 footer_top"> 
  <?php if ($page ['footer']): ?> 
    <?php print render($page['footer']); ?>
  <?php endif; ?>
  <?php if ($page ['copyright']): ?>
    <?php print render($page['copyright']); ?> 
  <?php endif; ?>

When developing your page design and layout in Drupal you may choose to start with a downloaded Drupal theme in the beginning. You can get Free Drupal themes from site. http://freedrupalthemes.net/ If you are new to Drupal, the easiest approach is to start with a Drupal theme and customize it as needed.



on 10th November 2009 / by webmaster
Drupal allows very fine grained control over how content is presented to the end user. Web Development Drupal Drupal Theming Drupal 6 Drupal Planet Leave a reply Your email address will not be published. Required fields are marked * Gab (not verified) access_time 13 Nov 2019 - 11:35 Thanks for the advice Jake (not verified) access_time 13 Nov 2019 - 11:35 In reply to Great stuff by Gab (not verified) I agree with the entire comment above. Thanks for sharing nice information with us. like your post and all you share with us is up todate and quite informative, i would like to bookmark the page so i can come here again to read you, as you have done a wonderful job. sasha grey (not verified) access_time 13 Nov 2019 - 11:35 Just switched to Drupal and i find it quite confusing at first. However, thanks to your post everything seems much more simple now. vimal joseph (not verified) access_time 13 Nov 2019 - 11:35 You can use, $variables['cool_node_region'] = block_get_blocks_by_region('cool_node_region') in the preprocess_node hook and print render($cool_node_region) in the node.tpl.php Aya Younis (not verified) access_time 13 Nov 2019 - 11:35 Thank you , it was great help :) Pagination Current page 1 Page 2 Next page Next › Last page Last » Add new comment

on 08th August 2012 / by binny.thomas
Blocks are regions on a Drupal website that show small but significant pieces of content. Blocks are an important component from the perspective of a Drupal website. Blocks are usually assigned to regions in a page and they are supposed to be printed on a page. However there are many instances where you might want to print a block within a content. It is not directly possible to assign a block to a region within content (node in Drupal speak) as you can do with a page. But as with everything in Drupal there is a way to do that. Drupal Drupal Theming Drupal 6 Drupal Development Drupal Tips Leave a reply Your email address will not be published. Required fields are marked *

on 11th September 2012 / by binny.thomas
The trick explained briefly We are not actually going to theme the file upload field as it is presently nearly impossible to do that. Instead we are going to put an ordinary looking 'dummy' input text field over the file field. Next we proceed to make the 'original' file upload field invisible but accessible to the user via CSS. So when a user clicks on the dummy input text field they are actually clicking on the file upload field itself. To make it authentic we are going to copy the file path from the file upload field to the text input field via javascript. Javascript Drupal Theming CSS Drupal Development Tips and Tricks WebForm Leave a reply Your email address will not be published. Required fields are marked * Anonymous (not verified) access_time 13 Nov 2019 - 10:29 For drupal 7 and field collection ajax calls messup file fields. Here is a jquery version which uses drupal behaviors and respect ajax calls (function($) { Drupal.behaviors.dogmodule = { attach : function(context, settings) { $('input[type=file]', context).each(function(i,e){ var new_div = $(''); $(this).addClass('file-hidden').before(new_div); $(this).change(function(){ $(this).prev().find('input').val($(this).val()); }); }); } }; })(jQuery); thomask84 (not verified) access_time 13 Nov 2019 - 10:29 As soon as i try to put this in my template.php i get a UNEXPTECTED T_VAR ON LINE X error. Its the first line in the script that gives me issues. Komodo also gives me a warning about the same line. However, i dont see what's wrong with it. Closing bracked is there, everything is in place. I copy/pasted the exact same code as u placed above. Any idea what could be the problem? (btw, i also tried to put the code into a *.js file and load it via the *.info. The script gets loaded but it doesnt seem to work. Nothing happens to the webform browse file field.) Add new comment
Leave a reply
Your email address will not be published. Required fields are marked *

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type='1 A I'> <li> <dl> <dt> <dd> <h2 id='jump-*'> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
The content of this field is kept private and will not be shown publicly.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.