[Drupal Theming] How to convert a PSD/HTML design to a standard Drupal theme?
https://www.zyxware.com/sites/default/files/styles/user_image/public/default_images/index.png?itok=2YmREnrP
BY tintu.manuel
6 years ago
Drupal-Technical
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


index
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

Pages

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

Boxes

  • box.tpl.php

Nodes

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

Comments

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

Blocks

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

The Drupal theme directory path is

sites/all/themes/themename

.

Notes

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

STEP-I

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


header
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; ?>

STEP-II

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; ?> 
</div>

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']); ?> 
  </div> 
<?php endif; ?>
</div> 

STEP-III


featured
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; ?>
</div>

STEP-IV


content-area

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

STEP-V

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.

footer

<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; ?>
</div>

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.


RELATED ARTICLE

/themes/custom/zyxpro_light/images/placeholder.png
close

on 01st January 2008 / by webmaster
We have added a few new modules to our site recently. Drupal Technical StumbleThis Leave a reply Your email address will not be published. Required fields are marked * Sean (not verified) access_time 24 May 2020 - 14:39 Hi there, I uploaded the files, enabled the modules to use SU, and now I see the link, but there is no icon... How can I fix this? Thanks, Sean webmaster access_time 24 May 2020 - 14:39 In reply to Icon doesn&#039;t show by Sean (not verified) What do you see when you view the source? Search for stumblethis_button and you should be able to see the code for the image and the URL. Then you should be able to troubleshoot from there. Juicy Couture Addict (not verified) access_time 24 May 2020 - 14:39 thanks for the post. would love to hear more of you. by the way, drupal's really popular nowadays as it has easy and fast features. you agree with me? thanks. Add new comment
/themes/custom/zyxpro_light/images/placeholder.png
close

on 16th January 2008 / by webmaster
Most webmasters do not realize this, but a lot of the content on lot of websites can be accessed from multiple URLs. A simple example would be where www.example.com and example.com leads to the same page. This is a fatal mistake in Search Engine Optimization and search engines penalize you for duplicate content. The correct configuration would be where the above two urls will lead you to the same page but example.com will redirect you to www.example.com with a 301 (Moved permanently) status which will not result in search engines penalizing the page. It is very easy to configure 301 redirects using Apache .htaccess file and the process is the same for a Drupal installation also. Drupal Technical Apache htaccess SEO Leave a reply Your email address will not be published. Required fields are marked * Anonymous (not verified) access_time 24 May 2020 - 14:39 Hello. I'm trying to make example.com show as www.example.com, and I'm running into difficulties. I'm on Apache 2.0 and using the following lines in my httpd.conf file: RewriteEngine on RewriteCond %{HTTP_HOST} ^xxxxxxxxxx\.com$ [NC] RewriteRule ^(.*)$ http://www.xxxxxxxxxx.com/$1 [L,R=301] When I go to http://xxxxxxxxxx.com, I get http://www.xxxxxxxxxx.com (as expected). However, when I go to http://xxxxxxxxxx.com/node/1 (it's a Drupal site), I get a 404 thrown and the URL changes to xxxxxxxxxx.com/var/www/drupal/node/1. Same thing with www.xxxxxxxxxx.com/node/1. Any suggestions? I want to run without Drupal's .htaccess file (instead incorporating these calls into my httpd.conf file). webmaster access_time 24 May 2020 - 14:39 In reply to Rewrite including filesystem path by Anonymous (not verified) I think the problem is with the base path which results in the redirection to /var/www/ part. The best approach I would think is to start with drupal htaccess and then strip out parts and move to httpd SNVC (not verified) access_time 24 May 2020 - 14:39 This is definitely a good guide. Thanks for this. wellyson access_time 24 May 2020 - 14:39 This is really nice and helpful. Add new comment
/themes/custom/zyxpro_light/images/placeholder.png
close

on 08th February 2008 / by webmaster
Attachment Size slashdotit.tar.gz 173.55 KB Similar to the StumbleThis module that we had created earlier we have created another bookmarking Drupal Technical Slashdotit Leave a reply Your email address will not be published. Required fields are marked * Shlomi Fish (not verified) access_time 24 May 2020 - 14:39 Hi! I'm interested in this module, but Drupal 6.2 complains that it's incompatible with it. Can you please update it or tell me how? Regards, Shlomi Fish shlomifish.org webmaster access_time 24 May 2020 - 14:39 In reply to Can you update it for Drupal-6.x? by Shlomi Fish (not verified) Sure we are working on this currently and will post an update soon. Also we will post this module on www.drupal.org as well Cheers Anoop John Team Zyxware Anonymous (not verified) access_time 24 May 2020 - 14:39 Hello! Nice Article very interesting, thanks 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.