[Drupal] How to create a Drupal 7 theme from scratch
BY rohith.pv
5 years ago
0 comments comment

Theming with Drupal is extremely simple. You can build a simple theme from scratch. When you are developing a new theme, you have to follow certain methods i.e. creating a .info file and template files. If you want to create a custom Drupal 7 theme for your site, read the following tips.

Let us see how to create a basic Drupal 7 theme. Read Drupal.org to learn more about theming. Create a new directory inside Drupal sites/all/themes and rename it as YOURTHEME. This is nothing but your theme name. Inside this directory, create .info and other files.

Creating .info file

This file is important for any theme you create. You must name this file as YOURTHEME.info. This file tells Drupal the name of your theme. Also, if you are using style sheets or JavaScript, you must define them in this file. You can also define many other properties like region same file. However, these are optional .

A sample .info file.

core = 7.x
description = A simple theme with three column layout.
regions[header] = 'Header'
stylesheets[all][] = css/main.css 
scripts[] = js/script.js

The region you create will have a machine name and a human readable name. This region name will appear in the block settings if you want to assign blocks in a region.

Creating .tpl.php files

For your theme, you can create many .tpl.php files, which contain php variables and XHTML for your theme. Create a directory inside your theme directory and rename it to "templates". Inside the templates directory, you can start with page.tpl.php and node.tpl.php

Creating a page.tpl.php

In this file, you can create a custom design for all your Drupal pages. Create an html page with div's. You can give id's and classes for each div's. Next is rendering regions with variable. For example, you can render a region with

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

Here the region name should match with the machine name that you have specified in .info file. In my example, "header" is the name of region. You can also theme specific pages for your site. For example, for front page, you can create a file with name "page--front.tpl.php"

Like you create page.tpl.php, you can also create a node.tpl.php but here you are going to theme all the node inside your Drupal site. So, you can start a div with node id. For example

<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
/*-----theme your node here--------*/

You can use node variables to theme any node with node.tpl.php file. To theme a specific node, you can create another file with its name. For example, blogs can be themed with "node--blog.tpl.php" file.

Create a style sheet and script files for your theme. With CSS, you can style your theme with colors and images. You can also create a file called template.php inside your theme directory. In this file, you can override theme functions to fit according to your theme. You can read more about creating a template.php here.

If you do this much, a basic theme is ready for your site. You can style your theme with CSS, tpl.php files and JS files. I hope you found this article helpful. So what are you waiting for? Start building your own theme! Thanks. :)



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 25 May 2020 - 01:08 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 25 May 2020 - 01:08 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 25 May 2020 - 01:08 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

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 25 May 2020 - 01:08 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 25 May 2020 - 01:08 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 25 May 2020 - 01:08 This is definitely a good guide. Thanks for this. wellyson access_time 25 May 2020 - 01:08 This is really nice and helpful. Add new comment

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 25 May 2020 - 01:08 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 25 May 2020 - 01:08 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 25 May 2020 - 01:08 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.