একটা পূর্নাঙ্গ টেমপ্লেট
index.php ফাইল
001.
<?php
002.
defined(
'_JEXEC'
)
or
die
(
'Restricted access'
);
003.
?>
004.
<!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML 1.0
005.
Transitional
//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
006.
<html xmlns=
"http://www.w3.org/1999/xhtml"
xml:lang=
"en-gb"
lang=
"en-gb"
>
007.
<head>
008.
<jdoc:
include
type=
"head"
/>
009.
<link rel=
"stylesheet"
href="/<?php
010.
echo
$this
->baseurl; ?>/templates/system/css/system.css
" type="
text/css" />
011.
<link rel=
"stylesheet"
href=
012.
"templates/_system/css/general.css"
type=
"text/css"
/>
013.
<link rel=
"stylesheet"
href="/templates/<?php
014.
echo
$this
->template ?>/css/template.css
" type="
text/css" />
015.
016.
017.
</head>
018.
<body>
019.
<!-- Header /-->
020.
<div
class
=
"headerbg"
>
021.
<div
class
=
"containerheader"
>
022.
<div
class
=
"headeratas"
>
023.
024.
025.
<?php
if
(
$this
->countModules(
'search'
)) :?>
026.
<div id=
"search"
><jdoc:
include
type=
027.
"module"
name=
"search"
/></div>
028.
<?php
endif
; ?>
029.
</div>
030.
<?php
if
(
$this
->countModules(
'topmenu'
)) :?>
031.
<div id=
"topmenu"
><jdoc:
include
032.
type=
"modules"
name=
"topmenu"
/></div>
033.
<?php
endif
; ?>
034.
</div>
035.
</div>
036.
<!-- Mainbody
//-->
037.
<div
class
=
"mainbodybg"
>
038.
<div
class
=
"container"
>
039.
<?php
if
(
$this
->countModules(
'left'
)) :?>
040.
<div
class
=
"leftcolumn"
>
041.
<div
class
=
"leftcolumnatas"
>
042.
<div
class
=
"leftcolumnbawah"
>
043.
<div
class
=
"leftmain"
><jdoc:
include
type=
044.
"modules"
name=
"left"
style=
"rounded"
/></div>
045.
</div>
046.
</div>
047.
</div>
048.
<?php
endif
; ?>
049.
<div
class
=
"centercolumn"
>
050.
<div
class
=
"messagecontainer"
>
051.
<jdoc:
include
type=
"message"
/></div>
052.
<?php
if
(
$this
->countModules(
'user1'
)) :?>
053.
<div
class
=
"centercolumnatas"
><jdoc:
include
054.
type=
"modules"
name=
"user1"
style=
"XHTML"
/></div>
055.
<?php
endif
; ?>
056.
<div id=
"pathway"
><jdoc:
include
type=
057.
"module"
name=
"breadcrumbs"
/></div>
058.
<div
class
=
"centercolumntengah"
>
059.
<jdoc:
include
type=
"component"
/></div>
060.
<?php
if
(
$this
->countModules(
'user2'
)) :?>
061.
<div
class
=
"centercolumntengah"
>
062.
<jdoc:
include
type=
"modules"
name=
"user2"
style=
"XHTML"
/></div>
063.
<?php
endif
; ?>
064.
</div>
065.
<?php
if
(
$this
->countModules(
'right'
)) :?>
066.
<div
class
=
"rightcolumn"
><jdoc:
include
type=
067.
"modules"
name=
"right"
style=
"XHTML"
/></div>
068.
<?php
endif
; ?>
069.
</div>
070.
</div>
071.
<!-- Footer
//-->
072.
<div
class
=
"footerbg"
>
073.
<div
class
=
"container"
>
074.
<?php
if
(
$this
->countModules(
'user3 or user4 or user5 or user6'
)) :?>
075.
<div
class
=
"footer1"
>
076.
<jdoc:
include
type=
"modules"
name=
"user3"
style=
"XHTML"
/></div>
077.
<div
class
=
"footer2"
>
078.
<jdoc:
include
type=
"modules"
name=
"user4"
style=
"XHTML"
/></div>
079.
<div
class
=
"footer3"
>
080.
<jdoc:
include
type=
"modules"
name=
"user5"
style=
"XHTML"
/></div>
081.
<div
class
=
"footer4"
>
082.
<jdoc:
include
type=
"modules"
name=
"user6"
style=
"XHTML"
/></div>
083.
<?php
endif
; ?>
084.
</div>
085.
</div>
086.
087.
088.
<div
class
=
"copyrightbg"
>
089.
<div
class
=
"container"
>
090.
<div
class
=
"copyright"
>
091.
Copyright &
copy
; webcoachbd 2010 .
092.
Designed by <a href=
"http://www.webcoachbd.com"
>
093.
webcoachbd.com</a> <br />
094.
<span>XHTML
and
CSS valid</span>
095.
</div>
096.
</div>
097.
</div>
098.
</body>
099.
</html>
আগের index.php ফাইলের মতই এখানে শুধু নিচের মত কয়েকটা লাইন বেশি দেখতে পাচ্ছেন
1.
<?php
if
(
$this
->countModules(
'search'
)) :?>
এবং শেষে
1.
<?php
endif
; ?>
প্রথম লাইনটি রিটার্ন করে যে search পজিশনে কয়টা মডিউল আছে।এই countModule ফাংশনটি কোন মডিউল পজিশনে মডিউল আছে কিনা তা নির্নয় করার জন্য ব্যবহৃত হয়। এই টেকনিক কে বলে collapsible column. এখানে আমাদের টেমপ্লেটের একটা উদাহরন যেমন
1.
<?php
if
(
$this
->countModules(
'search'
)) :?>
2.
<div id=
"search"
><jdoc:
include
type=
"module"
3.
name=
"search"
/></div>
4.
<?php
endif
; ?>
এখানে পিএইচপির কন্ডিশনাল স্টেটমেন্ট দিয়ে বলা হচ্ছে যে search নামের মডিউল পজিশনে যদি একটা মডিউল থাকে তাহলে search নামের মডিউলটা এই ডিভের মধ্যে দেখাবে আর তানাহলে কিছুই করবেনা।শেষে endif দিয়ে পিএইচপি কোডকে স্টপ করা হয়।
Xml ফাইল
01.
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
02.
<
install
version
=
"1.5"
type
=
"template"
>
03.
<
name
>Rejoanul Alam</
name
>
04.
<
version
>1.5.22</
version
>
05.
<
creationDate
>08/01/10</
creationDate
>
06.
<
author
>rejoan</
author
>
07.
<
authorEmail
>refatju AT yahoo DOT com</
authorEmail
>
08.
<
authorUrl
>www.webcoachbd.com</
authorUrl
>
09.
<
copyright
>2010 (c) Webcoach.com</
copyright
>
10.
<
license
>GPU/GPL</
license
>
11.
<
description
>Webcoachbd is a site where u can
12.
find all kinds of web development tutorial in bengali plz visit
13.
wwww.webcoachbd.com</
description
>
14.
<
files
>
15.
<
filename
>index.php</
filename
>
16.
<
filename
>templateDetails.xml</
filename
>
17.
<
filename
>template_thumbnail.png</
filename
>
18.
<
filename
>favicon.ico</
filename
>
19.
20.
21.
</
files
>
22.
23.
24.
<
positions
>
25.
<
position
>breadcrumb</
position
>
26.
<
position
>search</
position
>
27.
<
position
>right</
position
>
28.
<
position
>left</
position
>
29.
<
position
>topmenu</
position
>
30.
<
position
>user1</
position
>
31.
<
position
>user2</
position
>
32.
<
position
>user3</
position
>
33.
<
position
>user4</
position
>
34.
<
position
>user5</
position
>
35.
<
position
>user6</
position
>
36.
</
positions
>
37.
</
install
>
Css ফাইল
001.
html, body, form, fieldset {
002.
margin
:
0
;
003.
padding
:
0
;
004.
}
005.
006.
007.
body {
008.
background
:
#FFFFFF
;
009.
color
:
#666
;
010.
font-family
:
"Trebuchet MS"
,
Verdana
,
Arial
;
011.
font-size
:
12px
;
012.
line-height
:
1.5
;
013.
}
014.
015.
016.
/* Normal link */
017.
a:link, a:visited {
018.
color
:
#CC0000
;
019.
text-decoration
:
none
;
020.
}
021.
022.
023.
a:hover, a:active {
024.
text-decoration
:
underline
;
025.
}
026.
027.
028.
a img {
029.
border
:
none
;
030.
}
031.
032.
033.
/* Heading */
034.
h
1
{
font-size
:
200%
;}
035.
h
2
{
font-size
:
175%
;}
036.
h
3
{
font-size
:
150%
;}
037.
h
4
{
font-size
:
125%
;}
038.
039.
040.
p,
pre
, blockquote, ul, ol, h
1
, h
2
, h
3
, h
4
, h
5
, h
6
{
041.
margin
:
5px
0
;
042.
padding
:
0
;
043.
}
044.
045.
046.
ul {
047.
list-style
:
none
;
048.
}
049.
050.
051.
ul li {
052.
padding-left
:
20px
;
053.
}
054.
055.
056.
ol li {
057.
margin-left
:
35px
;
058.
}
059.
060.
061.
th {
062.
font-weight
:
bold
;
063.
padding
:
8px
;
064.
text-align
:
left
;
065.
}
066.
067.
068.
fieldset {
069.
padding
:
5px
5px
;
070.
border
:
none
;
071.
}
072.
073.
074.
fieldset a {
075.
font-weight
:
bold
;
076.
}
077.
078.
079.
fieldset.input {
080.
padding
:
0
;
081.
background
:
none
;
082.
}
083.
084.
085.
hr {
086.
border-bottom
:
0
;
087.
border-left
:
0
;
088.
border-right
:
0
;
089.
border-top
:
1px
solid
#EEEEEE
;
090.
height
:
1px
;
091.
}
092.
093.
094.
br {
095.
height
:
1px
;
096.
font-size
:
1px
;
097.
}
098.
td, th, div {
099.
font-size
:
100%
;
100.
text-align
:
left
;
101.
}
102.
103.
104.
.containerheader{
105.
width
:
950px
;
106.
margin
:
0
auto
;
107.
}
108.
109.
110.
.container{
111.
width
:
950px
;
112.
margin
:
0
auto
;
113.
overflow
:
hidden
;
114.
}
115.
116.
117.
/*================================ HEADER ============================*/
118.
.headerbg{
119.
width
:
100%
;
120.
height
:
212px
;
121.
background
:
#000000
;
122.
background-position
:
top
;
123.
margin-top
:
-10px
;
124.
}
125.
126.
127.
#search{
128.
width
:
150px
;
129.
height
:
29px
;
130.
margin
:
25px
0px
0px
340px
;
131.
padding
:
5px
0px
0px
40px
;
132.
float
:
left
;
133.
background-position
:
left
top
;
134.
}
135.
136.
137.
.headeratas{
138.
width
:
100%
;
139.
height
:
170px
;
140.
}
141.
142.
143.
#topmenu{
144.
clear
:
both
;
145.
display
:
block
;
146.
height
:
20px
;
147.
padding-top
:
2px
;
148.
}
149.
/*================================ MAINBODY ============================*/
150.
/*Left*/
151.
.mainbodybg{
152.
width
:
100%
;
153.
overflow
:
hidden
;
154.
background-color
:
#FFFAEB
;
155.
background-position
:
top
center
;
156.
padding-bottom
:
20px
;
157.
border-bottom
:
15px
solid
#EEE8D1
;
158.
}
159.
160.
161.
.leftcolumn{
162.
width
:
250px
;
163.
overflow
:
hidden
;
164.
background-color
:
maroon
;
165.
float
:
left
;
166.
margin-top
:
15px
;
167.
}
168.
169.
170.
.leftcolumnatas{
171.
width
:
100%
;
172.
overflow
:
hidden
;
173.
}
174.
175.
176.
.leftcolumnbawah{
177.
width
:
100%
;
178.
overflow
:
hidden
;
179.
padding
:
10px
;
180.
}
181.
182.
183.
.leftmain{
184.
width
:
230px
;
185.
overflow
:
hidden
;
186.
}
187.
188.
189.
/*Center*/
190.
.centercolumn{
191.
width
:
490px
;
192.
float
:
left
;
193.
overflow
:
hidden
;
194.
margin-top
:
15px
;
195.
margin-left
:
10px
;
196.
}
197.
198.
199.
#pathway{
200.
margin
:
5px
0px
5px
0px
;
201.
}
202.
203.
204.
205.
206.
/*Right*/
207.
.rightcolumn{
208.
width
:
190px
;
209.
float
:
left
;
210.
overflow
:
hidden
;
211.
margin-top
:
15px
;
212.
margin-left
:
10px
;
213.
}
214.
215.
216.
/*================================ FOOTER ============================*/
217.
.footerbg{
218.
width
:
100%
;
219.
overflow
:
hidden
;
220.
background-color
:
#4C3A08
;
221.
}
222.
223.
224.
.footer
1
, .footer
2
, .footer
3
{
225.
width
:
230px
;
226.
overflow
:
hidden
;
227.
margin-right
:
10px
;
228.
float
:
left
;
229.
}
230.
231.
232.
.footer
4
{
233.
width
:
230px
;
234.
overflow
:
hidden
;
235.
float
:
left
;
236.
}
237.
238.
239.
/*============================== COPYRIGHT ============================*/
240.
.copyrightbg{
241.
width
:
100%
;
242.
padding
:
15px
0px
10px
0px
;
243.
background-color
:
#EEE8D1
;
244.
}
245.
246.
247.
.copyright{
248.
text-align
:
center
;
249.
}
250.
251.
252.
.copyright span{
253.
color
:
#996600
;
254.
}
255.
#topmenu .moduletable{
256.
margin
:
0
;
257.
}
258.
259.
260.
#topmenu ul{
261.
margin
:
0
;
262.
padding
:
0
;
263.
width
:
auto
;
264.
}
265.
266.
267.
268.
269.
#topmenu ul li{
270.
margin
:
0
;
271.
padding
:
0
;
272.
height
:
40px
;
273.
float
:
left
;
274.
position
:
relative
;
275.
276.
277.
}
278.
#topmenu ul li a{
279.
color
:
#EEE
;
280.
height
:
22px
;
281.
display
:
block
;
282.
font-family
:
Verdana
,
Arial
,
Helvetica
,
sans-serif
;
283.
font-size
:
11px
;
284.
font-weight
:
bold
;
285.
padding
:
8px
15px
8px
15px
;
286.
287.
288.
289.
290.
}
291.
#topmenu ul li ul {
292.
display
:
block
;
293.
height
:
auto
;
294.
width
:
14em
;
295.
position
:
absolute
;
296.
z-index
:
99
;
297.
left
:
-999em
;
298.
color
:
#660000
;
299.
}
300.
301.
302.
#topmenu ul li ul ul {
303.
margin
:
-40px
0
0
14em
;
304.
}
305.
306.
307.
#topmenu ul li li {
308.
width
:
14em
;
309.
}
310.
311.
312.
313.
314.
#topmenu ul li li a{
315.
color
:
#DDD
;
316.
text-transform
:
none
;
317.
display
:
block
;
318.
background-color
:
#202020
;
319.
padding
:
10px
;
320.
font-family
:
Verdana
,
Arial
,
Helvetica
,
sans-serif
;
321.
font-size
:
11px
;
322.
font-weight
:
bold
;
323.
border-top
:
1px
solid
#333
;
324.
}
325.
326.
327.
#topmenu ul li ul {
328.
left
:
-999em
;
329.
}
330.
331.
332.
.leftmain{
333.
color
:
#ffffff
;
334.
}
335.
336.
337.
.leftmain a:link, .leftmain a:visited{
338.
color
:
#ffffff
;
339.
340.
341.
}
342.
343.
344.
.leftmain a:hover, .leftmain a:active{
345.
background-color
:
#604500
;
346.
color
:
#FAFAFA
;
347.
text-decoration
:
none
;
348.
349.
350.
}
এখানে ছবি ব্যবহার করা হয়নি, সিএসএস জানলে কিভাবে ছবি যোগ করতে হয় তা তো জনাই থাকবে।ইচ্ছেমত ছবি, ব্যানার যোগ করে আরও দৃষ্টিনন্দন টেমপ্লেট তৈরী করতে পারেন।
এছাড়াও টেমপ্লেটে প্যারামিটার যোগ করে এডমিনকে অনেক কন্ট্রোল দেয়া যায়।সময় পেলে একটা টেউটোরিয়াল দিয়ে দেব।
টেমপ্লেট টা লোড করে একটা png ফরমেটে ছবি উঠিয়ে Joomtemp ফোল্ডারে template_thumbnail.png নামে 206x155px এ সেভ করলে,Template Manager এ মাউস উপরে নিয়ে গেলে এর পিভিউ দেখাবে।
ফটোশপে 16x16px এর একটা আইকন তৈরী করে joomtemp ফোল্ডারে রাখলে ব্রাউজারের এড্রেসবারের বামে আইকনটি দেখাবে যেমন এই সাইটে দেখুন ৩টি গোলাকার রিং একটার ভিতর আরেকটা এমন একটা আইকন দেখাচ্ছে।