joomla

CMS >> Joomla >> Joomla 3.9 >> Custom Template

Custom Template

By | January 2nd 2019 11:33:16 AM | viewed 813 times

Same to Joomla 1.5. Just replace <extension version="3.1" type="template" client="site"></extension> instead of <install version="1.5" type="template"></install> in templateDetails.xml file

Create a theme directory in the location: ukmjoomla\templates\ as follows:

   ukmjoomla\templates\textiledefault

create a file index.php in the location:ukmjoomla\templates\textiledefault\ and add the following code:

<?php
//defined('_JEXEC') or die;
defined( '_JEXEC' ) or die( 'Restricted access' );

/** @var JDocumentHtml $this */

$app  = JFactory::getApplication();
$user = JFactory::getUser();

// Output as HTML5
$this->setHtml5(true);

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />


<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/textiledefault/css/style.css"/>

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/textileAssign/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/textiledefault/js/jquery.idTabs.min.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/textiledefault/js/ddtabmenu.js"></script>


<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/textiledefault/css/chromemenu.css" />



<script type="text/javascript">
//SYNTAX: ddtabmenu.definemenu("tab_menu_id", integer OR "auto")
ddtabmenu.definemenu("ddtabs5", -1) //initialize Tab Menu #5 with NO tabs selected (-1)
</script>

<script type="text/javascript">
    jQuery.noConflict();
	   
</script>

<script type="text/javascript">
var dolphintabs={
    subcontainers:[], last_accessed_tab:null,
    revealsubmenu:function(curtabref){
    this.hideallsubs()
    if (this.last_accessed_tab!=null)
        this.last_accessed_tab.className=""
    if (curtabref.getAttribute("rel")) //If there's a sub menu defined for this tab item, show it
    document.getElementById(curtabref.getAttribute("rel")).style.display="block"
    curtabref.className="current"
    this.last_accessed_tab=curtabref
    },
    hideallsubs:function(){
    for (var i=0; i</script>

</head>

<body>
<div id="wrapper">
	<div id="header">
    	<div id="logo"><img src="<?php echo $this->baseurl ?>/templates/textiledefault/images/logo.jpg" alt="" /></div>
        <div id="topmenu">
        	<jdoc:include type="modules" name="topmenu" />
                
            <table align="right" width="266" border="0" cellspacing="6" cellpadding="0">
                  <tr>
                        <jdoc:include type="modules" name="search" />
                  </tr>
                </table>
        </div>
        
        <div class="clear"></div>
    </div>


    
<div id="ddtabs5" class="chromemenu">
	<ul>
		<li><a href="index.php?option=com_content&view=article&id=46&Itemid=69" rel="cm1">Home</a></li>
		<li><a href="#" rel="cm2">Current Student</a></li>
		<li><a href="#" rel="cm3">Prospective Student</a></li>
		<li><a href="about.html" rel="cm4">Admission</a></li>
		<li><a href="#" rel="cm5">Faculty & Staff</a></li>
		<li><a href="#" rel="cm6">Alumni & Friends</a></li>
		<li><a href="#" rel="cm7">Departmenthead & Dean </a></li>
	</ul>
</div>

        <DIV class="tabcontainer">
            <div id="cm1" class="tabcontent">
           		<div class="tab-content-holder">
                	<div class="commonmneu">
                    	<jdoc:include type="modules" name="home-one" style="xhtml" />
                    </div>

                    <div class="commonmneu">
                    	<jdoc:include type="modules" name="home-five" style="xhtml" />
                    </div>
                    <div class="commonmneu">
                    	<jdoc:include type="modules" name="home-three" style="xhtml" />
                    </div>
                    
                    	<jdoc:include type="modules" name="home-four" style="xhtml" />
                    </div>
                    <div class="commonmneu">
                    	<jdoc:include type="modules" name="home-two" style="xhtml" />
                    </div>
                    <div class="commonmneu">
                    	<jdoc:include type="modules" name="home-six" style="xhtml" />
                    </div>

                    
                </div>
                <div class="clear"></div>
            </div>

            <div id="cm2" class="tabcontent">
                <div class="tab-content-holder">
                	<div class="commonmneu">
                    	<jdoc:include type="modules" name="currentStudent-one" style="xhtml" />
                    </div>
                    <div class="commonmneu">
                    	<jdoc:include type="modules" name="currentStudent-two" style="xhtml" />
                    </div>
                    <div class="commonmneu">
                    	<jdoc:include type="modules" name="currentStudent-three" style="xhtml" />
                    </div>
                    <div class="commonmneu">
                    	<jdoc:include type="modules" name="currentStudent-four" style="xhtml" />
                    </div>
                    <div class="commonmneu">
                    	<jdoc:include type="modules" name="currentStudent-five" style="xhtml" />
                    </div>
                     <div class="commonmneu">
                    	<jdoc:include type="modules" name="currentStudent-six" style="xhtml" />
                    </div>
                    
                </div>
                <div class="clear"></div>
            </div>

            <div id="cm3" class="tabcontent">
            	<div class="tab-content-holder">
                	<div class="commonmneu">
                    	<jdoc:include type="modules" name="prospectiveStudent-one" style="xhtml" />
                    </div>
                    <div class="commonmneu">
                    	<jdoc:include type="modules" name="prospectiveStudent-two" style="xhtml" />
                    </div>
                    <div class="commonmneu">
                    		<jdoc:include type="modules" name="prospectiveStudent-three" style="xhtml" />
                    </div>
                    <div class="commonmneu">
                    	<jdoc:include type="modules" name="prospectiveStudent-four" style="xhtml" />
                    </div>
                    <div class="commonmneu">
                    	<jdoc:include type="modules" name="prospectiveStudent-five" style="xhtml" />
                    </div>
                    <div class="commonmneu">
                    	<jdoc:include type="modules" name="prospectiveStudent-six" style="xhtml" />
                    </div>
                  
                </div>
                <div class="clear"></div>
            </div>

          
        </DIV>


        <div id="breadcrum">
        	<jdoc:include type="modules" name="breadcrumb" style="xhtml" />
                 <div class="logindiv">
             <jdoc:include type="modules" name="login-out" style="xhtml" />
                 </div>

        </div>
    <div id="container">
    	<div id="sidebar-left" >
            <div class="message">
            <jdoc:include type="message" />
            </div>
            <div>
        	<jdoc:include type="component" />
                <div class="clear"></div>
            </div>
            
            <div class="commonbox commonbox-minheight">
        	<div class="boxcontent academic">
                    <jdoc:include type="modules" name="laboratory" style="xhtml" />
            	
                <a href="index.php?option=com_content&view=article&id=82" class="presslik">Explore all »</a>
            </div>
        </div>
        <div class="commonbox commonbox-minheight vc-inner">
        	<div class="boxcontent academic vcmessage">
            	<jdoc:include type="modules" name="messageFromVC" style="xhtml" />
            </div>
        </div>
        </div>
        <div id="sidebar">
        <div class="commonbox commonbox-minheight">
        	<div class="boxcontent academic vcmessage">
                    <jdoc:include type="modules" name="careerProspects" style="xhtml" />
            </div>
        </div>
        <div class="commonbox commonbox-minheight">
        	<div class="boxcontent academic">
            	       <jdoc:include type="modules" name="studyingTextile" style="xhtml" />
            </div>
        </div>
        <div class="commonbox commonbox-minheight">
        	<div class="boxcontent academic">
            	 <jdoc:include type="modules" name="academies" style="xhtml" />
            </div>
        </div>
        <div class="commonbox commonbox-minheight commonbox-noborder">
            <div style='margin-top:10px;'>

              <jdoc:include type="modules" name="staticEvents" style="xhtml" />
            </div>
        		
        </div>
        </div>
    <div class="clear"></div>
    </div>

    <div id="footer-wrapper">
    	<div id="footerblock">
        	<div class="commonbox1">
            	<div class="boxcontent academic archives">
                    <jdoc:include type="modules" name="archives"  style="xhtml" />
            	
            </div>
            </div>
            <div class="commonbox1">
            	<div class="boxcontent academic recentphoto ">
                    <jdoc:include type="modules" name="photoGallery"  style="xhtml" />
            </div>
            
           
            </div>
            <div class="commonbox1">
            	<div class="boxcontent academic recentphoto">
                     <jdoc:include type="modules" name="joinWithUs"  style="xhtml" />
				<a href="#" ><img class="imgreset" src="images/joinus.png" alt="" /></a>
                <div class="clear"></div>
            </div>
            </div>
            <div class="commonbox1">
            	<div class="boxcontent academic recentphoto">
                     <jdoc:include type="modules" name="locationMAP"  style="xhtml" />
            	
            </div>
            </div>
        </div>
        <div id="footerbottomarea"><p>Copyright © 2010, Bangladesh University of Textiles. All rights reserved.</p> </div>
    </div>
</div>
<jdoc:include type="modules" name="debug" />
</body>
</html>

create a folder css in the locaton:ukmjoomla\templates\textiledefault\ and add necessary cascading stylesheed files

create a folder js in the locaton:ukmjoomla\templates\textiledefault\ and add necessary javascript files

create a folder images in the locaton:ukmjoomla\templates\textiledefault\ and add necessary image files

create a file params.ini in the locaton:ukmjoomla\templates\textiledefault\ and if have any variavle then add as follows:

  colorVariation=blue
  backgroundVariation=blue
  widthStyle=fmax

create a file template_thumbnail.png which is the screenshort of the template in the location:ukmjoomla\templates\textiledefault\ and if have any variavle then add as follows:

create a file templateDetails.xml in the location:ukmjoomla\templates\textiledefault\ and add the following code:

 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
<extension version="3.1" type="template" client="site">
	<name>textiledefault</name>
	<creationDate>14/12/18</creationDate>
	<author>Uzzal Kumar Modak</author>
	<authorEmail>uzzalmodak@yahoo.com</authorEmail>
	<authorUrl>http://www.ukmodak.com</authorUrl>
	<copyright></copyright>
	<license>GNU/GPL</license>
	<version>1.0</version>
	<description>textileAssign</description>
	<files>
		<filename>index.php</filename>
		<filename>templateDetails.xml</filename>
		<filename>template_thumbnail.png</filename>
		<filename>params.ini</filename>
		<folder>images/</folder>
		<folder>css/</folder>
                <folder>js/</folder>
		
	</files>
	<positions>
		<position>topmenu</position>
                <position>headerBanner</position>
                <position>search</position>
                
		<position>home-one</position>
                <position>home-two</position>
                <position>home-three</position>
                <position>home-four</position>
                <position>home-five</position>
                 <position>home-six</position>

		 <position>currentStudent-one</position>
                <position>currentStudent-two</position>
                <position>currentStudent-three</position>
                <position>currentStudent-four</position>
                <position>currentStudent-five</position>
                <position>currentStudent-six</position>


		<position>prospectiveStudent-one</position>
                <position>prospectiveStudent-two</position>
                <position>prospectiveStudent-three</position>
                <position>prospectiveStudent-four</position>
                <position>prospectiveStudent-five</position>
                <position>prospectiveStudent-six</position>

		
		<position>debug</position>
		
	</positions>
</extension>

Login admin panel and go to extention->manager->discover then select template and click on install

Latest Tutorial