How to creat joomla template 3.0 step by step: basic template

In this tutorial to creat basic joomla 3.0 template from scratch, the fisrt we will creat template structures, no frunction – simple template.

Creat new folder called your_new_template_name (you can replace with your name like ja_konia or vinaora)

in this folder (your_new_template_name) we will creat folder css and blank index.html file and index.php file, in your css folder we will creat style.css file and index.html blank too

 

your_new_template_name |–css

your_new_template_name |–css|–index.html

your_new_template_name |–css|–style.css

your_new_template_name |–index.html

your_new_template_name |–index.php

User your editor like Dreamwaver or  Notepad++ (recommended) to open your index.php file and add code bellow:

YOUR_NEW_TEMPLATE_NAME/INDEX.PHP code

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<!-- main container -->
<div class='main_container'>
<!-- header -->
<div class='header'>Header</div>

<!-- mid container - includes main content area and right sidebar -->
<div class='mid_container'>

<!-- main content area -->
<div class='main_content_area'>
Main Content Area
</div>

<!-- right sidebar -->
<div class='right_sidebar'>
Right SideBar
</div>

<div style='clear:both;'></div>

</div>

<!-- footer -->
<div class='footer'>
Footer
</div>

</div>
</body>
</html>

Affter Saved please open your css folder then edit style.css file with code bellow

YOUR_NEW_TEMPLATE_NAME/CSS/STYLE.CSS code

body{ margin:0; padding:0; font-size:12px; font-family:arial; }.main_container {
width:940px;
margin-left:auto;
margin-right:auto;
}
.mid_container {
margin:20px 0px;
}
.main_content_area {
float:left;
width:700px;
}
.right_sidebar {
float:right;
width: 220px;
}
.main_content_area,
.right_sidebar,
.footer,
.header {
border:1px solid #bbb;
}

 

 

Be Sociable, Share!

Leave a comment