জুমলা টেমপ্লেট ডিজাইন টিউটোরিয়াল ২

14:41 – by 0

জুমলা টেমপ্লেট ডিজাইন টিউটোরিয়াল ২



একটা পূর্নাঙ্গ টেমপ্লেট


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.h1 {font-size: 200%;}
035.h2 {font-size: 175%;}
036.h3 {font-size: 150%;}
037.h4 {font-size: 125%;}
038. 
039. 
040.p, pre, blockquote, ul, ol, h1, h2, h3, h4, h5, h6 {
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..footer1, .footer2, .footer3{
225.width: 230px;
226.overflow: hidden;
227.margin-right: 10px;
228.float: left;
229.}
230. 
231. 
232..footer4{
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 ফোল্ডারে রাখলে ব্রাউজারের এড্রেসবারের বামে আইকনটি দেখাবে যেমন এই সাইটে দেখুন ৩টি গোলাকার রিং একটার ভিতর আরেকটা এমন একটা আইকন দেখাচ্ছে।

0 মন্তব্য(গুলি):

Post a Comment

Subscribe to: Post Comments (Atom)