Are you facing problem in converting HTML into Drupal 7 Template?

Read this post and get step-wise guidance to convert your HTML files into Drupal 7 Template with an ease.


HTML to Drupal 7 Template

Drupal is one of the best choices as content management systems for those businesses, whose current site is not able to bring traffic or doesn’t have important features like cross-browser compatibility, SEO semantic code, and so on. Drupal CMS has ability to develop dynamic sites, from simple to complex one.

If we are considering today’s challenge, we find that customization is necessary to take business to the next level. With the help of customization, one can deal with all obstacles and get a strong web presence.

Step-wise guide to convert HTML to Drupal 7 Template

Analyze your HTML Template

First of all, you have to check all the HTML files in the browsers to check whether they are working or not. You should also check that they are free from bugs. The firebug tool is available for checking. After that, examine every section of your HTML template that you want to be converting to Drupal block regions. Make use of the editing software like Adobe Dreamweaver to convert the sections of your existing website to Drupal template.

Create a Folder and Copy Your Files into the Folder

In next step, you have to create a folder for your Drupal theme inside the path – sites/all/themes/directory and copy all the HTML files into themes folders that you have made.


Now, you have to create “” file and put the name of this file same as your folder name, i.e. “”. Afterwards, you have to save your “” inside your folder. At last, put the element’s name like name, description, stylesheets, regions etc.

Rename Your HTML Files

As we all know that Drupal is written in PHP language and thus, it is most essential to develop a duplicate copy of your HTML file “index.html” or “index.htm” that will be latterly renamed to page.tpl.php.

Copy all other HTML Template Files you want to Use

Now, you have to copy all the HTML layout files that you want to prevail and after that, edit your php files like node.tpl.php, html.tpl.php, and block.tpl.php, and add all the edited files to your Drupal theme folder. Going through such steps, you can easily change file without making tweaks to the original code

Change and Remove Tags from your page.tpl.php file

One more time, you have to open your page.tpl.php file and start editing. You have to start with removing all tags like DOCTYPE, to the body” tag, to close body tag and at last the closing html” tag.

Check and Define all the Reference into .INFO file

Ensure to have stored all CSS files and JS file references present in the header section of your HTML file. Remember to add the references into your .INFO file that you can refer to later.

Begin Inserting your Block Regions

Every section of your web page that you want to edit through the Drupal user-interface can be converted into a region. For example:

Begin to Insert Variables

You have to add all the essential variables by using the Render API. You can also add them in an appropriate spot, where you want to get them showed on your web page. Such variables are inserted into page.tpl.php file. Some common variables are $breadcrumbs, $site_name, $logo, etc.

Tweak your CSS

Tweak your CSS and default Drupal style sheet for adjusting and integrating your theme designing into your Drupal powered site.

Test, Test, Test

Lastly, you have to test your Drupal 7 template to ensure that it works excellently and bug-free.

Following above given steps, you can simple convert your existing basic HTML template to Drupal 7 theme. If you want to know more about HTML to Drupal 7 Template conversion, you can sent your requirement here

Related Blogs

Comment (0)

Leave a Reply

Your email address will not be published. Required fields are marked *