How to creat joomla template 3.0 step by step: basic template
Posted 19th March 2013 at 09:16 AM by lamvt
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
Affter Saved please open your css folder then edit style.css file with code bellow
YOUR_NEW_TEMPLATE_NAME/CSS/STYLE.CSS code
Can see Joomla Responsive Template here: http://joomres.com
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
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>
YOUR_NEW_TEMPLATE_NAME/CSS/STYLE.CSS code
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;
} Total Comments 0
