Q:

How to convert an html template to joomla

I am new to joomla and trying to change a simple html template to joomla template. I made changes over the templatedetails.xml and index.php. Now my template is visible at templates of joomla. But it is not allowing to add menus or perform any joomla operation over to it.
Here is my index.php file,
<?php
/****************************************************
#####################################################
##-------------------------------------------------##
##             TEMP                      ##
##-------------------------------------------------##
## Copyright = TEMP  - 2013                ##
## Date      = april 2013                          ##
## Author    = XYZ                      ##
## Websites  = http://www.google.com       ##
##                                                 ##
#####################################################
****************************************************/

// no direct access
defined('_JEXEC') or die('Restricted access');
/* The following line loads the MooTools JavaScript Library */
JHtml::_('behavior.framework', true);

/* The following line gets the application object for things like displaying the site name */
$app = JFactory::getApplication();
$csite_name  = $app->getCfg('sitename');
$path = $this->baseurl.'/templates/'.$this->template;
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <jdoc:include type="head" />

  <?php  $mod_right = $this->countModules( 'position-7' );
    if ( $mod_right ) {
  $width = '';
    } else {
  $width = '-full'; }
    ?>

  <?php
  $newsflash = $this->params->get("newsflash", " Content to be added here.. ");
    ?>

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<script language="javascript" type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/js/superfish.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/js/hoverIntent.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/js/hide.js"></script>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/slideshow.js"></script>
<link rel="icon" type="image/gif" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/favicon.gif" />

<!--[if IE 7]>
<link href="templates/<?php echo $this->template ?>/css/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->

      <script type="text/javascript">
    // initialise plugins
    jQuery(function(){
      jQuery('.navigation ul').superfish();
            });
    </script>

</head>
<body>
<!-- start header -->
<div id="header">
  <div id="logo">

  </div>
  <div id="menu">
    <ul id="main">
      <li class="current_page_item"><a href="#">Home</a></li>
      <li><a href="#">Courses and Admission </a></li>
      <li><a href="#">Department</a></li>
      <li><a href="#">Research</a></li>
      <li><a href="#">Hospital</a></li>
    </ul>
    <ul id="feed">
      <li><a href="#">Webmail</a></li>
      <li><a href="#">Contact us </a></li>
    </ul>
  </div>

</div>
<!-- end header -->
<div id="wrapper">
  <!-- start page -->
  <div id="page">
    <div id="sidebar1" class="sidebar">
      <ul>
        <li>
          <h2>Recent Posts</h2>
                    <marquee scrollamount="3" direction="up" onmouseout="start()" onmouseover="stop();">
          <ul>
            <li><a href="#">Aliquam libero</a></li>
            <li><a href="#">Consectetuer adipiscing elit</a></li>
            <li><a href="#">Metus aliquam pellentesque</a></li>
            <li><a href="#">Suspendisse iaculis mauris</a></li>
            <li><a href="#">Proin gravida orci porttitor</a></li>
            <li><a href="#">Aliquam libero</a></li>
            <li><a href="#">Consectetuer adipiscing elit</a></li>
            <li><a href="#">Metus aliquam pellentesque</a></li>
            <li><a href="#">Suspendisse iaculis mauris</a></li>
            <li><a href="#">Proin gravida orci porttitor</a></li>
          </ul>
          </marquee>
        </li>
        <li>
          <h2>Recent Comments</h2>
          <ul>
            <li><a href="#"> Templates</a> on <a href="#">Aliquam libero</a></li>
            <li><a href="#"> Templates</a> on <a href="#">Consectetuer adipiscing elit</a></li>
            <li><a href="#"> Templates</a> on <a href="#">Metus aliquam pellentesque</a></li>
            <li><a href="#"> Templates</a> on <a href="#">Suspendisse iaculis mauris</a></li>
            <li><a href="#"> Templates</a> on <a href="#">Urnanet non molestie semper</a></li>
            <li><a href="#"> Templates</a> on <a href="#">Proin gravida orci porttitor</a></li>
          </ul>
        </li>
        <li>
          <h2>Categories</h2>
          <ul>
            <li><a href="#">Aliquam libero</a></li>
            <li><a href="#">Consectetuer adipiscing elit</a></li>
            <li><a href="#">Metus aliquam pellentesque</a></li>
            <li><a href="#">Suspendisse iaculis mauris</a></li>
            <li><a href="#">Urnanet non molestie semper</a></li>
            <li><a href="#">Proin gravida orci porttitor</a></li>
          </ul>
        </li>
        <li>
          <h2>Archives</h2>
          <ul>
            <li><a href="#">September</a> (23)</li>
            <li><a href="#">August</a> (31)</li>
            <li><a href="#">July</a> (31)</li>
            <li><a href="#">June</a> (30)</li>
            <li><a href="#">May</a> (31)</li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- start content -->
    <div id="content">
      <div class="flower">
      <img src="templates/<?php echo $this->template ?>/images/img06.jpg" width="510" height="250" alt="logotype" /></div>
      <div class="post">
        <h1 class="title"><a href="#">Welcome to TEMP !</a></h1>

        <div class="entry">
          <p>
          <strong>TEMP </strong> is one of the SIX TEMP like apex healthcare institutes being established by the Ministry of Health & Family Welfare, Government of India under the Pradhan Mantri Swasthya Suraksha Yojna (PMSSY). With the aim of correcting regional imbalances in quality tertiary level healthcare in the country, and attaining self sufficiency in graduate and postgraduate medical education and training the PMSSY planned to set up 6 new TEMP like institutions in under served areas of the country.</p>
          <p>These institutions are being established by an Act of Parliament on the lines of the original All India Institute of Medical Sciences in New Delhi which imparts both undergraduate and postgraduate medical education in all its branches and related fields, along with nursing and paramedical training. to bring together in one place educational facilities of the highest order for the training of personnel in all branches of health care activity. </p>
          <p>&nbsp;</p>
          <p class="links"><a href="#" class="more">&laquo;&laquo;&nbsp;&nbsp;Read More&nbsp;&nbsp;&raquo;&raquo;</a></p>
        </div>
      </div>
      <div class="post">
        <h2 class="title"><a href="#">Sample Tags</a></h2>

        <div class="entry">
          <h3>An H3 Followed by a Blockquote:</h3>
          <blockquote>
            <p>&#8220;Donec leo, vivamus nibh in augue at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh.&#8221;</p>
          </blockquote>
          <h3>Bulleted List:</h3>
          <ul>
            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            <li>Phasellus nec erat sit amet nibh pellentesque congue.</li>
            <li>Cras vitae metus aliquam risus pellentesque pharetra.</li>
          </ul>
          <h3>Numbered List:</h3>
          <ol>
            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            <li>Phasellus nec erat sit amet nibh pellentesque congue.</li>
            <li>Cras vitae metus aliquam risus pellentesque pharetra.</li>
          </ol>
          <p class="links"><a href="#" class="more">&laquo;&laquo;&nbsp;&nbsp;Read More&nbsp;&nbsp;&raquo;&raquo;</a></p>
        </div>
      </div>
    <!-- end content -->
    <!-- start sidebars -->
    <div id="sidebar2" class="sidebar">
      <ul>
        <li>
          <form id="searchform" method="get" action="#">
            <div>
              <h2>Site Search</h2>
              <input type="text" name="s" id="s" size="15" value="" />
            </div>
          </form>
        </li>
        <li>
          <h2>Tags</h2>
          <p class="tag"><a href="#">dolor</a> <a href="#">ipsum</a> <a href="#">lorem</a> <a href="#">sit amet</a> <a href="#">dolor</a> <a href="#">ipsum</a> <a href="#">lorem</a> <a href="#">sit amet</a></p></li>
        <li>
          <h2>Calendar</h2>
          <div id="calendar_wrap">
            <table summary="Calendar">
              <caption>
              October 2009
              </caption>
              <thead>
                <tr>
                  <th abbr="Monday" scope="col" title="Monday">M</th>
                  <th abbr="Tuesday" scope="col" title="Tuesday">T</th>
                  <th abbr="Wednesday" scope="col" title="Wednesday">W</th>
                  <th abbr="Thursday" scope="col" title="Thursday">T</th>
                  <th abbr="Friday" scope="col" title="Friday">F</th>
                  <th abbr="Saturday" scope="col" title="Saturday">S</th>
                  <th abbr="Sunday" scope="col" title="Sunday">S</th>
                </tr>
              </thead>
              <tfoot>
                <tr>
                  <td abbr="September" colspan="3" id="prev"><a href="#" title="View posts for September 2009">&laquo; Sep</a></td>
                  <td class="pad">&nbsp;</td>
                  <td colspan="3" id="next">&nbsp;</td>
                </tr>
              </tfoot>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td id="today">4</td>
                  <td>5</td>
                  <td>6</td>
                  <td>7</td>
                </tr>
                <tr>
                  <td>8</td>
                  <td>9</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                </tr>
                <tr>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>18</td>
                  <td>19</td>
                  <td>20</td>
                  <td>21</td>
                </tr>
                <tr>
                  <td>22</td>
                  <td>23</td>
                  <td>24</td>
                  <td>25</td>
                  <td>26</td>
                  <td>27</td>
                  <td>28</td>
                </tr>
                <tr>
                  <td>29</td>
                  <td>30</td>
                  <td>31</td>
                  <td class="pad" colspan="4">&nbsp;</td>
                </tr>
              </tbody>
            </table>
          </div>
        </li>
        <li>
          <h2>Categories</h2>
          <ul>
            <li><a href="#">Aliquam libero</a></li>
            <li><a href="#">Consectetuer adipiscing elit</a></li>
            <li><a href="#">Metus aliquam pellentesque</a></li>
            <li><a href="#">Suspendisse iaculis mauris</a></li>
            <li><a href="#">Urnanet non molestie semper</a></li>
            <li><a href="#">Proin gravida orci porttitor</a></li>
            <li><a href="#">Aliquam libero</a></li>
            <li><a href="#">Consectetuer adipiscing elit</a></li>
            <li><a href="#">Metus aliquam pellentesque</a></li>
            <li><a href="#">Urnanet non molestie semper</a></li>
            <li><a href="#">Proin gravida orci porttitor</a></li>
            <li><a href="#">Aliquam libero</a></li>
            <li><a href="#">Consectetuer adipiscing elit</a></li>
            <li><a href="#">Metus aliquam pellentesque</a></li>
            <li><a href="#">Suspendisse iaculis mauris</a></li>
            <li><a href="#">Urnanet non molestie semper</a></li>
            <li><a href="#">Proin gravida orci porttitor</a></li>
            <li><a href="#">Metus aliquam pellentesque</a></li>
            <li><a href="#">Suspendisse iaculis mauris</a></li>
            <li><a href="#">Urnanet non molestie semper</a></li>
            <li><a href="#">Proin gravida orci porttitor</a></li>
            <li><a href="#">Metus aliquam pellentesque</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- end sidebars -->
    <div style="clear: both;">&nbsp;</div>
  </div>
  <!-- end page -->
</div>
<div id="footer">
  <p class="copyright">&copy;&nbsp;&nbsp;2009 All Rights Reserved &nbsp;&bull;&nbsp; Design by <a href="http://www.google.com/"> TEMP IT Dept.</a>.</p>
  <p class="link"><a href="#">Privacy Policy</a>&nbsp;&#8226;&nbsp;<a href="#">Terms of Use</a></p>
</div>
</html>

Please suggest how i can change this html template to exact joomla template. Thanks.

A:

Replace conrete content with references to module positions, message container and component output. Your template will then look like
<?php
/**
 * My template
 *
 * @copyright  (C)2013 Neetesh <neetesh@example.com>
 * @author     XYZ
 * @link       http://www.google.com
 */

// No direct access
defined('_JEXEC') or die('Restricted access');
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <jdoc:include type="head" />

    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
    <link rel="icon" type="image/gif" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/favicon.gif" />
    <!--[if IE 7]>
    <link href="templates/<?php echo $this->template ?>/css/ie7.css" rel="stylesheet" type="text/css" />
    <![endif]-->
</head>
<body>
<!-- start header -->
<div id="header">
    <div id="logo">
        <jdoc:include type="modules" name="logo" />
    </div>
    <div id="menu">
        <jdoc:include type="modules" name="header" />
    </div>
</div>

<div id="wrapper">
    <div id="page">

        <div id="sidebar1" class="sidebar">
            <jdoc:include type="modules" name="left" />
        </div>

        <div id="content">
            <jdoc:include type="message" />
            <jdoc:include type="component" />
        </div>

        <div id="sidebar2" class="sidebar">
            <jdoc:include type="modules" name="right" />
        </div>

        <div style="clear: both;">&nbsp;</div>

    </div>
</div>

    <div id="footer">
        <jdoc:include type="modules" name="footer" />
    </div>
</html>

The example above provides the module positions logo, header, left, right, and footer. Add these to the templateDetails.xml.
Next, find modules producing the sudebar content, you want, and assign them to the position, where you want to see them.

