বেসিক জুমলা টেমপ্লেট ডিজাইন

জুমলার এত প্রচুর টেমপ্লেট ও এক্সটেনশন রয়েছে যে আমাদের মত সাধারন জুমলা সাইট ডেভেলাপাররা কখনও কষ্ট করে টেম্পলেট বা এক্সটেনশন ডেভেলাপ করতে যান না। তারপরেও যারা কাজ করতে ইচ্ছুক তাদের জন্য এখানে টেমপ্লেট ডিজাইণের বেসিক আলোচনা করি। কেউ যদি প্রফশেনালি কাজ করতে চান তাহলে তাদের জন্য মন হয় জুমলার প্রচুর টেমপ্লেট থেকে আপনার প্রয়োজনীয় টেমপ্লেটটি নিয়ে কাস্টমাইজ করা ।কারন এর সব কোড ও প্রয়োজনীয় সব ফাইলই উন্মুক্ত থাকে।এছাড়া্ও বিভিন্ন টেমপ্লেট ডিজাইনার কোম্পানী তাদের ফ্রেমওয়ার্ক ব্যবহার করে কিভাবে টেমপ্লেট ডিজাইন করা যায় এসব তাদের সাইটের টিউটরিয়ালেই বলে দিয়ে থাকেন। যেমন- T3 framework,Helix framework ইত্যাদি।

আপনার গ্রাফিক্স,সিএসএস,জাভাস্ক্রিফট ইত্যাদিতে ভাল দক্ষতা থাকলে আপনি সহজেই www.joomla24.com থেকে একটি টেমপ্লেট ডাউনলোড করে কাস্টমাইজের মাধ্যমে একটি প্রফেশনাল টেমপ্লেটের রুপ দিতে পারবেন।

এবার আমরা দেখব কিভাবে একটি টেমপ্লেট ডিজাইন করতে পারি।

প্রথমে আপনি tutorial নামে একটি ফোল্ডারতৈরি করন । এর অধানে css ও images নামে আরও দুটি ফোল্ডার এবং index.php ও templateDetails.xml নামে দুটি ফাইল তৈরি করুন। এজন্য আপনি বিভিন্ন কোড এডিটর ব্যবহার করতে পারেন। যেমন।– উইনসিনটেক্স (http://www.winsyntax.com/)

এবার index.php ফাইলে নিম্নের কোড গুলো লিখবেন।

———————————————————————————————

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="&lt;?php echo $this-&gt;language; ?&gt;" lang="&lt;?php echo $this-&gt;language; ?&gt;" &gt;

&lt;head&gt;

&lt;jdoc:include type="head" /&gt;

 

&lt;link rel="stylesheet" href="&lt;?php echo $this-&gt;baseurl ?&gt;/templates/&lt;?php echo $this-&gt;template;?&gt;/css/template.css" type="text/css" /&gt;    (এই লাইন আপনার সা্ইটের সিএসএস ফাইল কোথায় আছে )

 

 

&lt;/head&gt;

 

 

&lt;body&gt;

&lt;div id="container"&gt;

&lt;div id="header"&gt;&lt;jdoc:include type="modules" name="top" /&gt; &lt;/div&gt;

&lt;div id="sidebar_left"&gt;&lt;jdoc:include type="modules" name="left" /&gt;&lt;/div&gt;

&lt;div id="content" class="float"&gt;&lt;jdoc:include type="component" /&gt;&lt;/div&gt;

&lt;div id="sidebar_right"class="float"&gt;&lt;jdoc:include type="modules" name="right" /&gt;&lt;/div&gt;

&lt;div id="footer"&gt;&lt;jdoc:include type="modules" name="footer" /&gt;&lt;/div&gt;

&lt;/div&gt;

&lt;/body&gt;

 

 

&lt;/html&gt;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

<head>

<jdoc:include type="head" />

</head>

<body>

</div>

</body>

</html>

এবার templateDetails.xml ফাইল বানাতে হবে।এতে নিম্নের কোডগুলো লিখুন।

&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd"&gt;
&lt;install version="1.5" type="template"&gt;
&lt;name&gt;tutorial&lt;/name&gt;
&lt;creationDate&gt;10/2011&lt;/creationDate&gt;
&lt;author&gt;pskpartha&lt;/author&gt;
&lt;authorEmail&gt;…………&lt;/authorEmail&gt;
&lt;authorUrl&gt;http://www.techprithibi.com&lt;/authorUrl&gt;
&lt;copyright&gt;pskpartha&lt;/copyright&gt;
&lt;license&gt;GPL&lt;/license&gt;
&lt;version&gt;1.0.0&lt;/version&gt;
&lt;description&gt;Basic Joomla Template&lt;/description&gt;
&lt;files&gt;
&lt;filename&gt;index.php&lt;/filename&gt;
&lt;filename&gt;templateDetails.xml&lt;/filename&gt;
&lt;filename&gt;css/template.css&lt;/filename&gt;
&lt;/files&gt;
&lt;positions&gt;
&lt;position&gt;breadcrumb&lt;/position&gt;

&lt;position&gt;left&lt;/position&gt;

&lt;position&gt;right&lt;/position&gt;

&lt;position&gt;top&lt;/position&gt;

&lt;position&gt;user1&lt;/position&gt;

&lt;position&gt;user2&lt;/position&gt;

&lt;position&gt;user3&lt;/position&gt;

&lt;position&gt;user4&lt;/position&gt;

&lt;position&gt;footer&lt;/position&gt;


&lt;/positions&gt;
&lt;/install&gt;

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">

<name>tutorial</name>

<author>pskpartha</author>

<authorUrl>http://www.techprithibi.com</authorUrl>

<copyright>pskpartha</copyright>

<description>Basic Joomla Template</description>

<files>

<filename>index.php</filename>

<filename>templateDetails.xml</filename>

<filename>css/template.css</filename>

</files>

<position>breadcrumb</position>

<position>right</position>

<position>footer</position>

</positions>

</install>

এবার দেখি templateDetails.xml ফাইলে কি কি আছে।

<install version=”1.5″ type=”template”> – এখানে আপনি জুমলা যেভার্সনের টেমপ্লেটটি তৈরি করছেন উল্লেখ করবেন।
<name>tutorial </name> – এখানে আপনি টেমপ্লেট এর নাম দিবেন।যা টেমপ্লেট টি ইনস্টল করার পর টেমপ্লেট ম্যানেজারে দেখাবে;
<creationDate>10/2011</creationDate> এখানে আপনি কবে টেমপ্লেটটি ডিজাইন করেছেন উল্লেখ করে দিতে পারবেন।
<author>pskpartha</author> – এখানে টেমপ্লেটের ডেভেলাপারের নাম থাকবে;
<authorEmail>………..</authorEmail> – ডেভেলাপার এর ইমেইল এড্রেস দিবেন;
<authorUrl>………</authorUrl> – ডেভেলাপারদের ওয়েবসাইটের এড্রসে;
<copyright>…………</copyright> – টেমপ্লেটের জন্য কপিরাইট তথ্য
<license>GPL</license> – কোন লাইসেন্সের এর অধীন আপনার টেমপ্লেটটি মুক্তি দিবেন।
<version>1.0.0</version> – আপনার টেমপ্লেটটির ভার্সন;
<description>Basic Joomla Template</description> – এখানে আপনার টেমপ্লেটির একটি ভার্সন লিখে দিতে পারেন।
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>css/template.css</filename>
</files> – এখানে আপনার টেমপ্লেট কোন কোন ফাইল একসেস করবে বলে দিতে পারেবন।.

<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>footer</position>
</positions> – আপনি আপনার টেমপ্লেটে কোন কোন মডিউল পজিশন ঠিক করেছেন এখানে উল্লেখ করবেন।.

এবার টেমপ্লেটের জন্য সিএসএস ফাইল তৈরি করতে হবে।এবার tutorial>css>template.css ফাইলে নিম্নের কোডগুলো পেস্ট করে সেইভ করুন।

{
padding: 0;
margin: 0;
}
img {
border: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.3em;
margin: 0;
padding: 0;
font-size: 13px;
color: #0F0F0F;
}
a:link, a:visited {
text-decoration: underline;
font-weight: normal;
color: #000;
outline: none;
text-align: left;
}
.float {  
float: left;  
}  
.clear {  
clear: both;  
}  
.overall {
background-color: #fff;    
}
div.center {
text-align: center;
margin: 0px auto 0 auto;
padding: 0;
width: 950px;
background: #FFFFFF;
}
#container {
width:960px;
margin: auto;
background-color: #f4f9fc;
border: 1px solid #e2e2e2;
text-align: left;
}
#header {
text-align: center;
background-color:#f4f9fc;
height: 80px;
}
#content {
width: 598px;
text-align: left;
background-color:#f4f9fc;
padding: 5px;
}
#sidebar_left {
text-align: center;
background-color:#f4f9fc;
width: 165px;
border-right: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
padding: 5px;
}
#sidebar_right {  
background-color:#f4f9fc;
text-align: center;
width: 165px;  
border-left: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
padding: 5px;
}
#footer {  
background-color:#f4f9fc;
text-align:center;
border-top: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
padding: 5px;
}

{

padding: 0;

margin: 0;

}

img {

border: 0;

}

body {

font-family: Arial, Helvetica, sans-serif;

line-height: 1.3em;

margin: 0;

padding: 0;

font-size: 13px;

color: #0F0F0F;

}

a:link, a:visited {

text-decoration: underline;

font-weight: normal;

color: #000;

outline: none;

text-align: left;

}

.float {

float: left;

}

.clear {

clear: both;

}

.overall {

background-color: #fff;

}

div.center {

text-align: center;

margin: 0px auto 0 auto;

padding: 0;

width: 950px;

background: #FFFFFF;

}

#container {

width:960px;

margin: auto;

background-color: #f4f9fc;

border: 1px solid #e2e2e2;

text-align: left;

}

#header {

text-align: center;

background-color:#f4f9fc;

height: 80px;

}

#content {

width: 598px;

text-align: left;

background-color:#f4f9fc;

padding: 5px;

}

#sidebar_left {

text-align: center;

background-color:#f4f9fc;

width: 165px;

border-right: 1px solid #e2e2e2;

border-bottom: 1px solid #e2e2e2;

padding: 5px;

}

#sidebar_right {

background-color:#f4f9fc;

text-align: center;

width: 165px;

border-left: 1px solid #e2e2e2;

border-bottom: 1px solid #e2e2e2;

padding: 5px;

}

#footer {

background-color:#f4f9fc;

text-align:center;

border-top: 1px solid #e2e2e2;

border-bottom: 1px solid #e2e2e2;

padding: 5px;

}

এবার টিউটরিয়াল ফোল্ডারটি জিপ করুন।তারপর জিপ করা ফাইলটি জুমলার কন্ট্রোল প্যানেল থেকে Extensions >Extensions Manager দিয়ে অন্যান্য টেমপ্লেট এর মত ইনস্টল করুন। দেখবেন এটি ইনস্টল হয়ে template manager এর গ্যালারিতে দেখাবে। এখন এটি সাইটের জন্য ডিপল্ট দিয়ে ব্যবহার করতে পারবেন।

তারপর একে ডিপল্ট হিসাবে দিলে ডিসপ্লেতে নিম্নের মত দেখবেন।

এভাবে আপনি একটি টেমপ্লেট তৈরি করতে পারবেন।আরোও বিস্তারিত জুমলার ডকুমেন্ট গ্যালারি পাবেন। http://docs.joomla.org/Creating_a_basic_Joomla!_template

এছাড়াও আপনি যদি জুমলার বিভিন্ন মডিউল,কম্পোনেন্ট ডিজাইন করতে চান তাহলে জুমলার ডকুমেন্ট এ বিস্তারিত টিউটরিয়াল পাবেন।http://docs.joomla.org/