The Definitive Guide to Convert 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. Expert drupal companies can easily help you in this.

Step-wise guide to convert HTML to Drupal 7 Template

Analyze your HTML Template

First of all, you have to check that all the HTML files in the browsers 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 converted 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 the 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.

Create themename.info

Now, you have to create “themename.info” file and put the name of this file same as your folder name, i.e. “Drupaltheme.info”. Afterward, you have to save your “Drupaltheme.info” inside your folder. At last, put the element’s  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 the 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 that you have stored all the CSS files and the JS file references present in the header section of your HTML file. Remember to add the references into yours .INFO file that you can refer 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:

<?php if ($page[sidebar_second]): ?>
<div id=”sidebar-1? class=”sidebar-1?>
<?php print render($page[sidebar_second]); ?>
endif; ?>

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 the above-given steps, you can simply 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 send your requirement here