TẠO MỘT TEMPLATE CHO JOOMLA

1. Xây dựng cấu trúc cho template

-

Section 1 : * Part 1 : đây là nơi hiển thị logo hoặc picture của website • Part 2 : là nơi hiển thị search field • Part 3 : đây là nơi hiển thị module cho vùng Breadcrumbs

-

Section 2 : • Part 4 : đây là phần quan trọng nhất hiển thị menu và các phần khác của cột bên trái • Part5 : đây là phần hiển thị nội dung của site • Part6 : hiển thị các thành phần bên cột bên phải

-

Section 3 : • Part 7 : footer

2 . Tạo một trang index.php <html> <head> <link href="/joomla150/templates/joomla150buch/css/template.css" rel="stylesheet" type="text/css" /> </head>

border: 2px dotted green.css body{ font-size: 12px. } #Part2{ /*main*/ .<body> <div id="part11">header / header<br /><br /> <div id="section1">section1</div> <div id="section2">section2</div> </div> <div id="part2">main display area / main<br /><br /> <div id="section3">breadcrumbs</div> <div id="section6">right side</div> <div id="section4">left side</div> <div id="section5">content</div> </div> <div id="part3">footer /footer<br /><br /> <div id="section7">section7</div> </div> </body> </html> 3 .Arial.css có path như sau CSS file / css / template. } #Part1{ /*header*/ float: left. font-family: Helvetica.sans-serif. Tạo file template.

background-color: #eee. width: 12em. margin: 0 0 1. background-color: #eee. border: 1px dashed silver.2em. } #Section2{ /*top left*/ float: right. width: 18em. } . border: 2px dotted yellow. } #Section5{ /*content*/ margin: 0 12em 1em 16em.float: left. } #Section4{ /*left side*/ float: left. padding: 0 1em. } #Section3{ /*breadcrumbs*/ border: 1px dashed silver. margin: 0 0 1. } #Section1{ /*top right*/ float: left. border: 1px dashed silver. } #Part3{ /*footer*/ clear:all. margin: 0 0 1.1em. border: 2px dotted red. width: 15em.2em. border: 1px dashed silver. border: 1px dashed silver. background-color: #eee.

.png</filename> <filename>css/template.11.#Section6{ /*right side*/ float: right.2007</creationDate> <author>Hagen Graf</author> <copyright>GNU/GPL</copyright> <authorEmail>hagen@cocoate.php</filename> <filename>templateDetails.css</filename> </files> . background-color: #eee.0</version> <creationDate>11. } 4 .5" type="template"> <name>joomla150book</name> <version>1. background-color: #eee.1em.xml</filename> <filename>template_thumbnail.cocoate. width: 12em. } #Section7{ /*footer*/ margin: 0 0 1..com</authorUrl> <version>0. border: 1px dashed silver. margin: 0 0 1.1em. Tạo file XML có cấu trúc như sau : <install version="1. description</description> <files> <filename>index.com</authorEmail> <authorUrl>http://www. border: 1px dashed silver.1</version> <description>.

Joomla ! sử dụng tên jdoc để tích hợp các yếu tố vào trong các template .css" rel="stylesheet" type="text/css" /> </head> <body> <div id="Part1">header / header <div id="Section1">Section1 <jdoc:include type="modules" name="user3" style="xhtml" /> </div> .</install> 5 . Nhúng các module vào trong các đoạn mã HTML Việc tích hợp các module vào trong template joomla được thực hiện bằng cách nhúng vào trong các đoạn mã HTML . Ví dụ : <head> <jdoc:include type=”head” /> </head> Bạn có thể nhúng các module vào trong trang index. Cấu trúc các thư mục trong một gói template [PathtoJoomla]/templates/[name of the template]/ [PathtoJoomla]/templates/[name of the template]/CSS/ [PathtoJoomla]/templates/[name of the template]/images/ 6 .php <html><head> <jdoc:include type="head" /> <link href="/joomla150/templates/joomla150book/css/template.

<div id="Section2">Section2 <jdoc:include type="modules" name="top" style="xhtml" /> </div> </div> <div id="Part2">main display area / main <div id="Section3">breadcrumbs <jdoc:include type="modules" name="breadcrumb" style="xhtml" /></div> <div id="Section6">right side <jdoc:include type="modules" name="right" style="xhtml" /></div> <div id="Section4">left side <jdoc:include type="modules" name="left" style="xhtml" /></div> <div id="section5">content <jdoc:include type="component" style="xhtml" /></div> </div> <div id="Part3">footer /footer <div id="Section7">Section7<jdoc:include type="modules" name="footer" style="xhtml" /> </div> </div> </body></html> 7 . Tạo một gói cài đặt template .

Sau đó ta nén thư mục này lại với đuôi zip - .png ) kích thước 227 x 162 pixel .- Bạn tạo một image để preview cho tempplate (template_thumbnail.

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.