How I Convert a HTML Template to Joomla

Everything to do with Joomla! 2.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Locked
toonytoony2004
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 162
Joined: Tue Apr 12, 2011 8:53 am

How I Convert a HTML Template to Joomla

Post by toonytoony2004 » Sat Oct 12, 2013 2:01 am

;) ;) i create a html template with a little Knowledge

I am a newbie joomla boy and try to modify joomla template " TFJ ONE" that download from

Code: Select all

www.joomla24.com/remository/Download/Tem...mplates/Tfj_One.html
and change some file of template..

1. index.php
2.create css file name project1


Now in the template file have a code in the div code Because i don't understand how to Convert a HTML Template to Joomla with jdoc or php. Example <?php if... and counted as part of the code is Joomla.

Please explain how to Convert a HTML Template to Joomla and right concept to learn for me.. Thanks all

index.php

Code: Select all

<?php

/*******************************************************************************************/


// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );

JHTML::_('behavior.framework', true);

// including base setup file
include_once(JPATH_ROOT . "/templates/" . $this->template . '/lib/php/tmptools.php');


?>

<!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; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
<link rel="shortcut icon" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/favicon.ico" />
<link href='http://fonts.googleapis.com/css?family=Doppio+One&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template_css.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/project1.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/superfish.css" type="text/css" />

<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/hoverIntent.js" type="text/javascript"></script>

<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/superfish.js" type="text/javascript"></script>
<script type="text/javascript">  $.noConflict(); // Code that uses other library's $ can follow here.
</script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/tools.js" type="text/javascript"></script>
</script>
</head>
<body>
<div id="main_top">
       <div id="main_top_body">
             <div id="logo">
                   <a id="logo_pic" href="/<?php echo $this->baseurl?>"></a>
             </div>
          
             <div id="search">
                   <jdoc:include type="modules" name="search" style="none" />
             </div>
          
       </div>
</div>

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

<div id="main_top_menu">
   <div id="main_menu_body">
      <div id="main_menu">
      </div>
      
      <div class="clear"></div>
      
      <div id="main_message">
      </div>
   </div>
</div>

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

<div id="main_slider">
   <div id="main_slider_body">
         <div id="slider">
         </div>
   </div>
</div>

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

<div id="main_content">
       <div id="main_content_body">
             <div id="column_content_left">    
             </div>
          
             <div id="column_content_right">      
             </div>

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

<div id="main_content2">
       <div id="main_content_body2">
             <div id="column_content_1">    
             </div>
          
             <div id="column_content_2">      
             </div>
          
          <div id="column_content_3">      
             </div>

       </div>
</div>

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

<div id="main_content3">
       <div id="main_content_body3">
             <div id="column_content_4">    
             </div>
          
             <div id="column_content_5">      
             </div>
          
          <div id="column_content_6">      
             </div>

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

<div id="main_bottom">
      <div id="main_bottom_body">
         <div id="bottom">
         </div>
</div>

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

<div id="main_bottom2">
       <div id="main_bottom_body2">
             <div id="column_bottom_1">    
             </div>
          
             <div id="column_bottom_2">      
             </div>
          
          <div id="column_bottom_3">      
             </div>
          
          <div id="column_bottom_4">      
             </div>

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

<div id="main_footer">
       <div id="main_footer_body">
             <div id="footer">    
             </div>
          
      </div>
</div>
 
<jdoc:include type="modules" name="debug" />
</body>
</html>
project1.css

Code: Select all

@charset "utf-8";
/* CSS Document */
.clear {clear:both;}
#main_top{
   width:100%;
   height:auto;
   background:url(../images/header_bg.jpg);
}
#main_top_body{
   width:1000px;
   height:110px;
   margin:0 auto 0 auto;
   /*background:#000;*/
}
a#logo_pic {
   width:495px;
   height:105px;
   background:url(../images/logo2.png) center no-repeat;
   float:left;
}
 #search{
    width: 400px;
    height:20px;
    float:right;
   margin-top: -30px;
 }

/********************************************head_logo_menu**********************************************************/
   
#main_intro1{
   width:100%;
   height:300px;   
}
#main_intro1_body{
   width:1000px;
   height:auto;
   margin:0 auto 0 auto;
   /*background:#000;*/
}
#column_intro1{
   width:320px;
   height:281px;
   float:left;
   position:absolute;
   margin:10px auto 5px auto;
   z-index:2;
   background:#000;   
}

/********************************************main_top_menu**********************************************************/
#main_top_menu{
   width:100%;
   height:100px;
   margin-top: 5px;   
}
#main_menu_body{
   width:1000px;
   height:auto;
   margin:0 auto 0 auto;
   background: #06a4fc;
}
#main_menu{
   width:1000px;
   height:50px;
   margin:0 auto 0 auto;
   background: #06a4fc;
}
#main_message{
   width:1000px;
   height:50px;
   margin:0 auto 0 auto;
   background: #f4fd06;
}

/********************************************intro_slider**********************************************************/

#main_slider{
   width: 100%;
   height:auto;
   min-height:350px;
   background: #000000;
   margin-top: 5px;
   
   
}
#main_slider_body{
   width: auto;
   height:auto;
   min-height:350px;
   background: #000000;
   
}
/*************************************************************content**********************************************/

#main_content{
   width:100%;
   height:auto;
   background: #FFFFFF;
   margin-top: 5px;
   
}
#main_content_body{
   width:1000px;
   height: auto;
   margin:0 auto 0 auto;
   

}

#column_content_left{
   float: left;
   margin-right: 10px;
   width: 250px;
   height:300px;
   background-color: #ccccff;

   
}
#column_content_right{
   width:740px;
   height:300px;
   float:right;
   background: #016f0c;
   
}

/*************************************************************content2**********************************************/

#main_content2{
   width:100%;
   height:auto;
   background: #FFFFFF;
   margin-top: 5px;
   
   
}
#main_content_body2{
   width:1000px;
   height: auto;
   margin:0 auto 0 auto;
   

}

#column_content_1{
   float: left;
   margin-right: 20px;
   width: 320px;
   height:150px;
   background-color: #176b9a;

   
}
#column_content_2{
   float: left;
   margin-right: 20px;
   width: 320px;
   height:150px;
   background-color: #176b9a;
   
}

#column_content_3{
   float: right;
   width: 320px;
   height:150px;
   background-color: #176b9a;   
}

/*************************************************************content3**********************************************/

#main_content3{
   width:100%;
   height:auto;
   background: #FFFFFF;
   margin-top: 5px;
   
   
}
#main_content_body3{
   width:1000px;
   height: auto;
   margin:0 auto 0 auto;
   

}

#column_content_4{
   float: left;
   margin-right: 20px;
   width: 320px;
   height:250px;
   background-color: #176b9a;

   
}
#column_content_5{
   float: left;
   margin-right: 20px;
   width: 320px;
   height:250px;
   background-color: #176b9a;
   
}

#column_content_6{
   float: right;
   width: 320px;
   height:250px;
   background-color: #176b9a;   
}

/********************************************main_bottom**********************************************************/
#main_bottom{
   width:100%;
   height:autop;
   margin-top: 5px;
}
#main_bottom_body{
   width:1000px;
   height:200px;
   margin:0 auto 0 auto;
   background: #000000;
}
#bottom_{
   width:1000px;
   height:200px;
   float: left;
   background: #00000;
}

/********************************************main_bottom2**********************************************************/

#main_bottom2{
   width:100%;
   height:auto;
   background: #FFFFFF;
   margin-top: 5px;
   
   
}
#main_bottom_body2{
   width:1000px;
   height: auto;
   margin:0 auto 0 auto;
   

}

#column_bottom_1{
   float: left;
   margin-right: 20px;
   width: 235px;
   height:250px;
   background-color: #000;
  
}

#column_bottom_2{
   float: left;
   margin-right: 20px;
   width: 235px;
   height:250px;
   background-color: #000;
   
}

#column_bottom_3{
   float: left;
   margin-right: 20px;
   width: 235px;
   height:250px;
   background-color: #000;
   
}

#column_bottom_4{
   float: right;
   width: 235px;
   height:250px;
   background-color: #000;
   
}

/********************************************footer**********************************************************/

#main_footer{
   width:100%;
   height:autop;
   margin-top: 20px;
   
}

#main_footer_body{
   width:1000px;
   height:150px;
   margin:0 auto 0 auto;
   background: #000000;
}

#footer{
   float: right;
   width: 500px;
   height:100px;
   margin: 25px 25px 25px auto;
   background: #780303;
}
You do not have the required permissions to view the files attached to this post.
Top
iextensions
I've been banned!
Posts: 1498
Joined: Fri Jul 12, 2013 5:37 pm
Contact:
Contact iextensions

Re: How I Convert a HTML Template to Joomla

Post by iextensions » Sat Oct 12, 2013 2:32 am

you can read this guide first:
http://docs.joomla.org/Creating_a_basic ... !_template
Top
toonytoony2004
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 162
Joined: Tue Apr 12, 2011 8:53 am

Re: How I Convert a HTML Template to Joomla

Post by toonytoony2004 » Sat Oct 12, 2013 4:22 am

Can anyone show Convert a HTML Template to Joomla in my code?

^^
Top
iextensions
I've been banned!
Posts: 1498
Joined: Fri Jul 12, 2013 5:37 pm
Contact:
Contact iextensions

Re: How I Convert a HTML Template to Joomla

Post by iextensions » Sat Oct 12, 2013 7:07 am

send me all source code of html and I convert it to joomla template for you
Top
toonytoony2004
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 162
Joined: Tue Apr 12, 2011 8:53 am

Re: How I Convert a HTML Template to Joomla

Post by toonytoony2004 » Sat Oct 12, 2013 9:13 am

i sent PM to you , Thanks
Top
iextensions
I've been banned!
Posts: 1498
Joined: Fri Jul 12, 2013 5:37 pm
Contact:
Contact iextensions

Re: How I Convert a HTML Template to Joomla

Post by iextensions » Sat Oct 12, 2013 1:35 pm

toonytoony2004 wrote:i sent PM to you , Thanks
- first, you need to have file html, css, image, icon from your image design
- then you use them to build joomla template
Top
toonytoony2004
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 162
Joined: Tue Apr 12, 2011 8:53 am

Re: How I Convert a HTML Template to Joomla

Post by toonytoony2004 » Sat Oct 12, 2013 3:11 pm

iextensions wrote:
toonytoony2004 wrote:i sent PM to you , Thanks
- first, you need to have file html, css, image, icon from your image design
- then you use them to build joomla template

i have all file but i can't build joomla template, so i need someone teach me or explain step by step with my code or my file on

Code: Select all

https://www.dropbox.com/s/hqzf35nzq79vker/project1ziptpl.zip


Thanks
Top
Locked

Return to “Templates for Joomla! 2.5”