Joomla Bangla Tutorial


জুমলা একটি পুরষ্কারপ্রাপ্ত কনটেন্ট ম্যানেজমেন্ট সিস্টেম (CMS)।আপনি যদি কোন প্রোগ্রামিং ল্যাংগুয়েজ নাও জানেন তবুও জুমলা দিয়ে ডাইনামিক ওয়েবসাইট তৈরী করতে পারবেন।তবে যে কোডিং জানে সে এর কোড এডিট করে যত সুন্দর করতে পারবে আপনি তা পারবেননা।
*জুমলা একটা সফটওয়্যার যেটা দিয়ে মাউস ক্লিক দ্বারাই ওয়েবসাইট তৈরী সম্ভব।
*জুমলা শেখার জন্য অনেক ওয়েবসাইট (বাংলা ইংরেজী দুটোই) আছে এমনকি বাংলা বইও আছে যা বিনামুল্যে ডাউনলোড করা যায়।
*জুমলা শেখার বাংলা বই বা সাইটে এডভান্সড লেভেলের টিউটোরিয়াল তেমন উল্লেখযোগ্য নয় যেমন,জুমলার টেম্পপ্লেট ডিজাইন,জুমলার নিরাপত্তা,সিপ্যানেল টিপস ইত্যাদি।
*ওয়েবকোচবিডিতে এসব এডভান্সড টিউটোরিয়াল থাকবে।
*ওয়েবকোচবিডিতে জুমলার কিছু কিছু এমন টিউটোরিয়াল থাকবে যেগুলির জন্য  আপনাকে এইচটিএমএল থেকে শুরু করে পিএইচপি পর্যন্ত সবকিছুর উপর দখল থাকতে হবে।যেমন টেমপ্লেট ডিজাইন।


আপনার জুমলা সাইটের নিরাপত্তার জন্য নিচের বিষয়গুলি খেয়াল রাখুন
*ভাল হোস্টিং প্রোভাইডারের কাছে সাইট হোস্ট করা : সস্তার তিন অবস্থা।কম দামে হোস্টিং সেবা এবং আনলিমিটেড ব্যান্ডওয়াইথ,ডেটাবেস ইত্যাদির প্রতিশ্রুতি যারা দেয় তাদের সমস্যা আছে।সস্তা দামে বেশি সুবিধা প্রদানকারী এসব সস্তা হোস্টিং প্রোভাইডারদের এড়িয়ে চলুন।শেয়ারড হোস্টিং এ বেশি সমস্যা ডেডিকেটেড এর তুলনায়,এসব জানতে এই সাইটের হোস্টিং টিউটোরিয়ালগুলি দেখতে পারেন।যাইহোক হোস্টিং করানোর আগে সিকিউরিটির ইস্যুগুলির ব্যাপারে তাদের জিজ্ঞেস করুন যেমন htaccess ফাইল কনফিগার করা,raw logs ফাইল এ এক্সেস পাওয়া ইত্যাদি।সর্বোপরি একজন অভিজ্ঞ ডেভেলপারের পরামর্শ নেয়া বুদ্ধিমানের কাজ হবে।জুমলা কিছু হোস্টিং প্রোভাইডারের তালিকা তাদের সাইটে অবশ্য দিয়েছে।

*মাঝে মাঝে সিকিউরিটি চেকলিস্ট দেখা : নিচের সাইট থেকে মাঝে মাঝে খবর নিতে পারেন এখানে জুমলার সর্বশেষ নিরাপত্তা বিষয়ক খবর ও সমাধান থাকে।

*জুমলার সর্বশেষ ভার্সন ব্যবহার করুন : কিছুদিন পরপরই জুমলার আপডেট বের হয়।আপনার সাইট সবসময় আপডেট রাখুন।যেভাবে আপডেট করতে হয়

*এক্সটেনশন সমাচার : আক্রমনযোগ্য জুমলার এক্সটেনশন ব্যবহার থেকে বিরত থাকুন।বিস্তারিত

*ব্যাকআপ ব্যাকআপ ব্যাকআপ ব্যাকআপ :এটা খুব দরকারি সাইটে নতুন কিছু যোগ করলে এর ব্যাকআপ নিয়ে রাখুন।ডেটাবেস এবং ফোল্ডারের।সাধারনত ডেটাবেসেই বেশি পরিবর্তন করা হয় তাই এখানে ডেটাবেস ব্যাকআপ নেয়ার পদ্ধতি আলোচনা করা হল।যেভাবে ব্যাকআপ নিবেন

*ডেটাবেস প্রিফিক্স পরিবর্তন করা : জুমলাতে ডিফল্ট ডেটাবেস প্রিফিক্স jos_ থাকে।এটা যদি পরিবর্তন না করেন তাহলে নিশ্চিত থাকতে পারেন যে আপনার সাইট হ্যাক হবে।যেভাবে ডেটাবেস প্রিফিক্স পরিবর্তন করতে হয়

*ইউজার নাম এবং পাসওয়ার্ড মাঝে মাঝে পরিবর্তন করা : জুমলা ইনস্টল দেয়ার পর যখন লগিন করেন তখন ইউজার নাম admin এবং পাসওয়ার্ড দিতে হয়,এই ইউজার নাম admin পরিবর্তন করুন।যেভাবে করতে হবে

*htaccess ফাইল : htaccess ফাইল এটা ছোট্র একটা ফাইল জুমলার রুট ফোল্ডারে থাকে কিন্তু খুব পাওয়ারফুল।এখানে কোড লিখে সাইটের নিরাপত্তা বাড়ানো যায়।যেভাবে করবেন

*ফাইল অনুমতি বা পারমিশন : সিপ্যানেলে খুব সহজে ফাইলের পারমিশন একসেস পরিবর্তন করে নিরাপত্তা জোরদার করা যায়।যেভাবে করতে হবে


জুমলা হ্যাক করার কোন পদ্ধতি আবিষ্কার হলেই জুমলার কোর ডেভেলপাররা খবর পেয়ে যান।হয় হ্যাকাররাই খবর দেয় না হয় তারাই গবেষনা করে বের করেন এবং সাথে সাথেই এর সমাধান বের করে নতুন ভার্সন রিলিজ করেন।তাই জুমলা আপডেট রাখা জরুরি এর নিরাপত্তার কারনে।ধরুন আপনি জুমলার ১.৫.২০ ভার্সনটি ব্যবহার করছেন এখন এর পরবর্তী ভার্সন বের হল,আপনি কি করবেন?খুব সহজ একটা পদ্ধতি আছে শুধু কয়েকটা ফাইল কপি করে পেস্ট করলেই জুমলা আপগ্রেড হয়ে যায়।এজন্য www.joomla.org সাইটে গিয়ে Download Latest version এ ক্লিক করুন এবং এরপর নিচের মত …

joomla upgrade
তারপর নিজের প্রয়োজনীয়টি বেছে নিন।আমি ১.৫.২০ থেকে ১.৫.২১ এ আপগ্রেডিং দেখাচ্ছি তাই সেটির উপর হাতের মত মাউস রাখা আছে।

joomla upgrade

ডাউনলোড করে লোকালহোস্টের জুমলার মুল ফোল্ডারটিতে পেস্ট করে দিন।existing ফাইল রিপ্লেস করবেন কিনা এমন একটা মেসেজ আসবে তখন yes করলেই আপনার জুমলা আপগ্রেড হয়ে গেল।এটা দেখালাম নিজের পিসিতে যখন XAMPP সার্ভারে কাজ করবেন তখনকার পদ্ধতি আর যদি সিপ্যানেলে হয় তাহলে রুট ফোল্ডারে পেস্ট করলেই হয়ে যাবে।


জুমলা আসলে অনেক নিরাপদ এবং এর কোর ডেভেলপাররা এটাকে নিখুদ করে তৈরী করেছেন কিন্তু জুমলার এক্সটেনসন কিন্তু যে কেউ তৈরী করতে পারে তাই এখানে সমস্যা থাকতে পারে সুতরাং জুমলার এক্সটেনসন ব্যবহারের সময় সতর্ক থাকতে হবে।যেকোন এক্সটেনসন ব্যবহারের আগে দেখে নিন সেটা আক্রমনযোগ্য এই লিস্টে আছে কিনা যদি থাকে এবং এরপরেও আপনি এটা ব্যবহার করেন তাহলে আপনার তৈরী জুমলা সাইট হ্যাক হলে দায় দায়িত্ব আপনার ঘারেই পরবে।এই লিংক থেকে লিস্টটি দেখতে পারেন
ব্যবহার যদি করতেই হয় তাহলে এসব এক্সটেনশনেরও আপডেট ঘন ঘন বের হয়.বের হবার সাথে সাথেই আপগ্রেড করে নিন।কোন এক্সটেনশন কত অনিরাপদ তা ঐ লিস্টেই বিভিন্ন রং দিয়ে বোঝানো হয়েছে।
আর একটা কথা,প্রয়োজনে যে এক্সটেনশনই ইনস্টল দেননা কেন আপডেট রাখবেন।


জুমলাতে বাই ডিফল্ট ডেটাবেস প্রিফিক্স jos_ এভাবে দেয়া থাকে।এটা পরিবর্তন করা জরুরি নিরাপত্তাজনিত কারনে।হ্যাকাররা এই সুত্র ধরে সাইট হ্যাকের নানান পথ পেয়ে যায়।তাই এই প্রিফিক্স পরিবর্তন করে ইচ্ছেমত প্রিফিক্স দিতে পারেন।এটা করার আগে সতর্কতা মুলক পদক্ষেপ নিন যেমন:
**ডেটাবেসের একটা ব্যাকআপ নিয়ে আগে রেখে দিন যাতে কোন ভুল হলে রিকভার করা যায় ।
এবার মাইএসকিএয়ল ডেটাবেসে যান অর্থ্যাৎ ব্রাউজারে http://localhost/phpmyadmin/ লিখে এন্টার এবং জুমলার ডেটাবেসটির উপর ক্লিক করুন ফলে ডেটাবেসটি খুলবে। এখান থেকে সব টেবিলগুলি সিলেক্ট করে ডিলিট করুন।(নিচে check all লিংকে ক্লিক করলে সব সিলেক্ট হয় এবং ঐ বরাবর দেখবেন একটা ড্রপডাউন মেনু আছে সেখানে লেখা থাকে with selected ওখানে ক্লিক করে drop এবং তারপর yes)।এর আগে আপনার জুমলা সাইটে লগিন করে ব্যাকইন্ডে ঢুকুন এবং site মেনু থেকে Global Configuration এ যান এখানে ৩টি ট্যাবের মত যে লিংকগুলি থাকে ( site system server) তারমধ্যে server ক্লিক করুন।এখানে দেখবেন ডানদিকে Database Settigs অংশের নিচে একটা অপশন আছে Database prefix নামে এই অংশে jos_ ডিফল্ট হিসেবে থাকে।এটা মুছে দিয়ে আপনার ইচ্ছেমত প্রিফিক্স দিন ধরুন দিলাম test80_ এবং শেষে সেভ করুন।

joomla database prifix

এখন কিন্তু এরর দেখাবে।ইতস্তত হবার কিছুই নেই এবার যেভাবে বলছি করুন সব ঠিক হয়ে যাবে।
এর আগেতো এই সাইটের ডেটাবেস  ব্যাকআপ নিয়ে রেখেছেন তাইনা?সেই ডেটাবেসটি বের করুন এবং নোটপ্যাডে খুলুন এবং সব সিলেক্ট করে কপি করে আরেকটা নতৃন একটা নোটপ্যাড ডকুমেন্ট খুলে সেখানে পেস্ট করুন পরে সেভ করুন।এবার  কিবোর্ড  থেকে Ctrl+H চাপুন এতে Replace উইন্ডো আসবে,ওয়ার্ডের মতই ওয়ার্ডে find replace করেননা? সেটাই।Find what বক্সে টাইপ করুন jos_ এবং replace with বক্সে টাইপ করুন test80_ লিখে replace all দিন।সেভ করুন।এবার মাইএসকিএয়ল ডেটাবেসে যান অর্থ্যাৎ ব্রাউজারে http://localhost/phpmyadmin/ লিখে এন্টার এবং জুমলার ডেটাবেসটির উপর ক্লিক করুন।এখনতো ডেটাবেসটি ফাকা,একটা টেবিলও নেই।এখন SQL ট্যাবে ক্লিক করুন এবং নোটপ্যাড (যে নোটপ্যাডে test80_ দিয়ে সব রিপ্লেস করলেন সেটা) থেকে সব সিলেক্ট করে করে কপি করে এখানে পেস্ট করে দিন।শেষে Go বাটনে ক্লিক করুন।ব্যাস ডেটাবেস রিস্টোর হয়ে গেল।আসলে সব এর আগের টিউটোরিয়াল ডেটাবেস রিস্টোর এর মতই শুধু এখানে দুটি কাজ বেশি একটি Global Configuration থেকে jos_ এর পরিবর্তন আর দ্বিতীয়টি test80_ দিয়ে নোটপ্যাডে jos_ এর রিপ্লেসমেন্ট।


জুমলা ইনস্টল করার পর এর ব্যাকইন্ডে লগিন করার সময় ইউজার নাম এবং পাসওয়ার্ড দিয়ে লগিন করতে হয়।এই ইউজার নাম বাই ডিফল্ট ‘admin’ থাকে এটা পরিবর্তন করে নতুন কোন নাম দেয়া জরুরি।তা নাহলে হ্যাকিং এর একটা রাস্তা খোলা থাকল।এটা করার জন্য ব্যাকইন্ডে লগিন করার পর site মেনু বা নিচের ট্যাবগুলি থেকে user manager এ যান এরপর super administrator বরাবর যে নাম আছে সেখানে ক্লিক করুন।এবার দেখবেন username  ‘admin’ আছে, এটা পরিবর্তন করে নিজের ইচ্ছেমত নাম দিন।এখানে আরও অনেক অপশন আছে যেম password,email ইত্যাদিও পরিবর্তন করতে পারেন।শেষে সেভ করে বের হয়ে আসুন।

joomla username


যেখানে জুমলা ইনস্টল দিয়েছেন সেখানে অর্থ্যাৎ রুট ফোল্ডারে গেলেই htaccess নামে একটা টেক্সক্ট ফাইল দেখতে পাবেন এটা যেকোন টেক্সক্ট এডিটরে খুলুন এবং নিচের মত কোডগুলি লিখুন এতে আপনার configuration.php এবং htaccess নিজে নিরাপদ হয়ে যাবে।গুরত্বপূর্ন যেকোন ফাইল এভাবে কোড লিখে নিরাপদ করতে পারেন।
1.<Files .htaccess>
2.order allow,deny
3.deny from all
4.</Files>
5.<Files configuration.php>
6.order allow,deny
7.deny from all
8.</Files>

পরে এই ফাইলটির নাম htaccess.txt থেকে পরিবর্তন করে .htaccess  দিন।উইন্ডোজে যদি লোকালহোস্টে এই নাম পরিবর্তন করতে সমস্যা হয় তাহলে ইতস্তত হবার কোন কারন নেই কারন সার্ভারে (হোস্টিং করার পর) সিপ্যানেলে এই ধরনের কোন সমস্যা হবেনা।
htaccess ফাইলের কাজটি শেষ করার পর Global Configuration এ গিয়ে Site ট্যাবের অধীনে ডানদিকে SEO Settings থেকে Use Apache mod_rewrite  এর  পাশে  Yes রেডিও বাটন ক্লিক করে সেভ  করে বেরিয়ে আসুন।


সিপ্যানেলে ফাইল ম্যানেজারে গিয়ে যেকোন ফোল্ডারের উপর রাইট বাটন ক্লিক করলে যে কনটেক্সক্ট মেনু আসে সেখানে change permission নামে একটা অপশন আছে।এখানে ক্লিক করে ফোল্ডারের পারমিশন ৭৫৫ করে দিন।এই অপশনগুলি দেখলেই বুঝতে পারবেন কি করা উচিৎ, read.write,execiute এধরনের অপশন থাকে এগুলোতে টিকমার্ক দিলেই নিচে এক একটা নাম্বার উঠে।কোন ফাইলের পারমিশন ৭৭৭ হওয়া উচিৎ নয় বিশেষ করে configuration.php
PHP ফাইল পারমিশন ৬৪৪
Config ফাইল পারমিশন ৬৬৬
অন্যান্য ফোল্ডার পারমিশন ৭৫৫

jooomla file permission change
উপরের চিত্রটিতে দেখুন Password Protect নামের একটা অপশন আছে,এটা ব্যবহার করে গুরত্বপূর্ন ফোল্ডারকে পাসওয়ার্ড দিয়ে রাখা বুদ্ধিমানের কাজ।যেমন Administrator ফোল্ডারটি পাসওয়ার্ড দিয়ে রাখতে পারেন

অনেকসময় কোন পেজে জাভাস্ক্রিপ্টের কোন স্ক্রিপ্ট ঢুকানো লাগতে পারে যেমন চলন্ত খবর,jquery দিয়ে কোন কাজ করা ইত্যাদি ।জুমলাতে ডিফল্ট এডিটর হিসেবে tinymce থাকে,প্লাগিন ম্যানেজার এ গিয়ে Editor-TinyMCE বের করেএর উপর ক্লিক করুন।এবার ডানদিকে প্লাগিন প্যারামিটার থেকে Code Cleanup on start এবং Code Cleanup on save এদুটি অপশনে যথাক্রমে Off এবং Never ঠিক করে সেভ দিয়ে বের হয়ে আসুন।এখন জুমলাতে আর্টিকেল লেখার সময় TinyMCE তে HTML নামের বাটনে ক্লিক করে যেখানে ইচ্ছে জাভাস্ক্রিপ্ট কোড বা মারকিউ ট্যাগ ইত্যাদি বসাতে পারেন,কাজ করবে।
যদি এবারও কাজ না করে তাহলে JCE editor নামে একটা জুমলার এক্সটেনশন আছে সেটা ইনস্টল দিয়ে গ্লোবাল কনফিগারেশন এ গিয়ে Default WYSIWYG Editor এর ড্রপডাউন মেনু থেকে JCE editor সিলেক্ট করে দিন তাহলে কাজ করবে।
এরপরেও না হলে গ্লোবাল কনফিগারেশন এর Default WYSIWYG Editor থেকে no editor সিলেক্ট করে সেভ করুন।এবার অবশ্যই কাজ করবে যেকোন জাভাস্ক্রিপ্ট কোড।
একটা অতিরিক্ত টিপস:সিপ্যানেলে ফাইল আপলোড করার সহজ পদ্ধতি
সিপ্যানেলে কোন বড় ফাইল আপলোডের দরকার হলে ফাইলটি জিপ (zip) করে আপলোড করুন এবং আপলোডের পর জিপ ফাইল সিলেক্ট করে উপরে ডান দিকে extract বাটনে ক্লিক করলে মুহুর্তেই সব এক্সট্রাক্ট হয়ে যাবে।

আপনি যদি জুমলা ইউজার হন তাহলে জুমলার ডেটাবেসের এই এররটির সাথে পরিচিত হওয়ার কথা
jtablesession::Store Failed
DB function failed with error number 145
Table ‘./joomla_database/jos_session’ is marked
as crashed and should be repaired SQL=INSERT INTO
`jos_session` (`session_id`,`time`,`username`,`gid`,
`guest`,`client_id`) VALUES
(’1ecb458814b53d190db10cafee822dc0′,
’1237429551′,”’0′,’1′,’0′);
এই সমস্যা সমাধানের জন্য নিচের পদ্ধতি অনুসরন করুন
১. PHPMyAdmin এ লগিন করুন
২. jos_session টেবিলটি চেকমার্ক দিন (এটা আপনার জুমলার ডেটাবেস প্রিফিক্স এর নির্ভর করে যেমন এক্ষেত্রে ডেটাবেস প্রিফিক্স হচ্ছে jos_)
৩. নিচের কম্বো বক্স থেকে "Repair Table" সিলেক্ট করুন
৪. এবার PHPMyAdmin একটা মেসেজ দিয়ে কাজ করে ফেলবে অর্থ্যাৎ ঠিক করে ফেলবে
৫. এবার আপনার জুমলা সাইটে একেসস করতে পারেন।
আরেকভাবেও এই কাজ করা যায়
১. প্রথমে আপনার মাইএসকিউয়েল ডেটাবেসে ঢুকুন অর্থ্যাৎ লগিন করুন
২. আপনার ডেটাবেস সিলেক্ট করুন (এই কমান্ড লিখলেও হবে use db_name এই db_name এর জায়গায় আপনার ডেটাবেসের নাম)
৩.আপনার jos_session টেবিলকে truncate jos_session কমান্ড ব্যবহার করে খালি (Empty) করুন
৪. এবার আপনার জুমলা সাইটে একসেস নিন।

জুমলার এডমিন ব্যাকইন্ডের ইউজার নাম বা পাসওয়ার্ড ভুলে গেলে হয়রান হবার কিছূ নেই কারন এটা উদ্ধার করা বেশ সহজ।নিচে বর্ননা দেয়া হল
১. প্রথমে জুমলার ডেটাবেসটিতে যান যেমন যদি লোকালহোস্টে করেন তাহলে http://localhost/phpmyadmin এ গিয়ে আগে জুমলার ডেটাবেসটি সিলেক্ট করুন আর যদি পাবলিক সার্ভারে হয় তাহলে সিপ্যানেল থেকে phpmyadmin আইকনে ক্লিক করে এরপর ডেটাবেসটি সিলেক্ট করুন।

joomla-password-recover

২. সিলেক্ট করার কারনে জুমলার ডেটাবেসের টেবিলগুলি দেখাবে এখান থেকে users টেবিলটি সিলেক্ট করুন যেমন আপনার ডেটাবেস প্রিফিক্স যদি থাকে jos_ তাহলে jos_users টেবিলটি সিলেক্ট করে ডানদিকে থেকে Edit আইকনে ক্লিক করুন।

joomla-password-edit

৩. এবার এডিট করার জন্য যে উইন্ডোটি আসবে সেখানে নিচের ছবির মত password ফিল্ডে Function MD5 এবং সেই বরাবর ডানে যে বক্সে লম্বা স্ট্রিং আছে সেটা পরিবর্তন করে দিন যেমন ছবিতে দেখুন আমি পরিবর্তন করে joomlatest দিয়েছি।

joomla-password-change

৪. সবশেষে Go বাটনে ক্লিক করুন,ব্যস পাসওয়ার্ড এবার পরিবর্তন হয়ে যেটা দিয়েছেন সেটা হয়ে যাবে,এক্ষত্রে পরিবর্তন হয়ে joomlatest হয়েছে।
*password ফিল্ডের কিছু উপরে user name ফিল্ড আছে ইচ্ছে করলে ইউজার নাম পরিবর্তন করতে পারে।এখান থেকে সবকিছুই পরিবর্তন করতে পারেন যেমন মুল নাম,মেইল ঠিকানা ইত্যাদি।

 

একটা জুমলা টেমপ্লেট কি?
জুমলা সিএমএস এর মধ্যে একটা টেমপ্লেট হচ্ছে কিছু ফাইলের ধারাবাহিকতা যেটা জুমলার কনটেন্টগুলি কিভাবে প্রদর্শিত হবে তা নিয়ন্ত্রন করে।এটা একটা ওয়েবসাইট নয় ।এটা হচ্ছে একটা ডিজাইন যেটা জুমলার ওয়েবসাইট দেখায়।একটা পূর্নাঙ্গ ওয়েবসাইট তৈরীর জন্য একটা টেমপ্লেট হাতের মত কাজ করে,অর্থ্যাৎ জুমলার ডেটাবেস থেকে এই হাত তথ্য তুলে আনে।আমরা টেমপ্লেটে কনটেন্টসহ  ছবি দেখি এই ছবি কিন্তু টেমপ্লেটের অংশ নয় তবে যে শিরোনাম দেখি এটা টেমপ্লেটের অংশ।
ডিজাইন পদ্ধতি
আপনি যখন জুমলার তৈরী কোন ওয়েব সাইট দেখেন,সেটা কিন্তু স্টাটিক নয় বরং ডাইনামিক।কনটেন্ট গুলি ডাইনামিকলি ডেটাবেস থেকে আপনার কাছে আসছে।একটা ওয়েব পেজ দেখা খুব সহজ কিন্তু এই পেজটি দেখাতে এর পেছনে একটা টেমপ্লেটে অনেক পিএইচপি কমান্ড লিখতে হয়েছে।যাইহোক প্রথমে খুবই সাধারন একটা জুমলা টেমপ্লেট তৈরী করতে হয় তা দেখাচ্ছি এরপর এডভান্সড লেভেলে যাব।
সবার আগে জুমলার ‘templates’ ফোল্ডারে (আমার ক্ষেত্রে এই ফোল্ডার আছে এই লোকেশনে XAMPP/htdocs/webcoachbd/templates) নিজের ইচ্ছেমত নামের একটা ফোল্ডার তৈরী করুন ধরুন আমি এই ফোল্ডারের নাম দিলাম joomtemp .এই ফোল্ডারে ২ টি টেক্সক্ট ফাইল “index.php” এবং “templateDetails.xml” তৈরী করুন যেকোন এডিটর দিয়ে যেমন আমি নোডপ্যাড++ দিয়ে করেছি।এই ফোল্ডারে আরো দুটি জিনিস তৈরী করতে হবে তবে কোন ফাইল নয় দুটি ফোল্ডার একটা “images” আরেকটা “css” নামের।“css” ফোল্ডারে “style.css” নামে একটা ফাইল তৈরী করুন।ব্যাস আপাতত কাজ শেষ এবার কোড লেখার পালা শুরু।
ফাইল ফোল্ডারের নকশাটি এরকম
joomtemp/
  • css/
    • style.css
  • images/
  • index.php
  • component.php
  • templateDetails.xml

তিন ধাপে টিউটোরিয়ালটি শেষ করব
১. খুব সাধারন মানের একটা টেমপ্লেট তৈরী
২.সিএসএস সহ আরেকটু উন্নতমানের টেমপ্লেট
৩.একটা পূর্নাঙ্গ টেমপ্লেট তৈরী

১. খুব সাধারন একটা টেমপ্লেট তৈরী

index.php এবং templateDetails.xml এদুটি ফাইলে কিছু কোড থাকলেই একটা সাধারন টেমপ্লেট তৈরী করা যায়।
একটা বেসিক templateDetails.xml  ফাইল তৈরী করা।এটা জরুরি, থাকতেই হবে।
এখানে টেমপ্লেট এর বিভিন্ন তথ্য থাকে যেমন টেমপ্লেট ডিজাইনারের নাম,তৈরীর তারিখ,ইমেইল ইত্যাদি।এখানে লিখিত কিছু তথ্য এডমিন ব্যাকইন্ডে দেখায়।এটা একটা XML ফরমেটের মেটাডেটা ফাইল,যেটা জুমলাকে বলে দেয় যে কি কি ফাইল প্রয়োজন হবে যখন একটা ওয়েব পেজ লোড হবে।যে ফাইল গুলি এই টেমপ্লেটে ব্যবহার হয়েছে।এডমিন ব্যাকইন্ডে টেমপ্লেটটি ইনস্টল হবার জন্যও এই ফাইলটি জরুরী।
01.<?xml version="1.0" encoding="utf-8"?>
02.<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
03.<install version="1.5" type="template">
04.<name>joomtemp</name>
05.<creationDate>2010-10-24</creationDate>
06.<author>Rejoanul Alam</author>
07.<authorEmail>refatju AT yahoo DOT com</authorEmail>
08.<authorUrl>www.webcoachbd.com</authorUrl>
09.<copyright>Rejoan 2010</copyright>
10.<license>GNU/GPL</license>
11.<version>1.5.22</version>
12.<description>My New Template</description>
13.<files>
14.<filename>index.php</filename>
15.<filename>component.php</filename>
16.<filename>templateDetails.xml</filename>
17.<filename>template_thumbnail.png</filename>
18.<filename>images/background.png</filename>
19.<filename>css/style.css</filename>
20.</files>
21.<positions>
22.<position>breadcrumbs</position>
23.<position>top</position>
24.<position>left</position>
25.<position>component</position>
26.<position>right</position>
27. 
28. 
29.</positions>
30.</install>

এখানে দেখুন আমি কিছু তথ্য মার্কআপ ট্যাগের মধ্যে রেখেছি।যেমন <install> থেকে </install>
পর্যন্ত আপনি এটা পুরোটাই কপি পেস্ট করতে পারেন আপনার templateDetails.xml ফাইলে তবে ইচ্ছে করলে কিছু তথ্য বদলাতে পারেন যেমন <author> <email> ইত্যাদি।
<files></files> এর ভিতরে সব ফাইলগুলির নাম থাকতে হবে যে ফাইলগুলি আপনি ব্যবহার করবেন।এরপর <positions></positions> এটা সব টেমপ্লেটেই কমন,মডিউলগুলির পজিশন নির্দেশ করে।
একটা বেসিক index.php  তৈরী করা

01.<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
02.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
03."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04.<html xmlns="http://www.w3.org/1999/xhtml"
05.xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
06.<head>
07.<jdoc:include type="head" />
08.<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
09.<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
10.<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/style.css" type="text/css" />
11.</head>
12.<body>
13.<jdoc:include type="module" name="breadcrumbs" />
14.<jdoc:include type="modules" name="top" />
15.<jdoc:include type="modules" name="left" />
16.<jdoc:include type="component" />
17.<jdoc:include type="modules" name="right" />
18.</body>
এই ফাইলটি হল টেমপ্লেটের জন্য ইন্জিনের মত।জুমলাতে যে পেজগুলি আমরা দেখি এসব পেজের জন্য index.php ফাইলটি হল কোর পেজ।এই পেজটি নিয়ন্ত্রন করে কোন কনটেন্ট দেখাবে আর কোনটি দেখাবেনা।যাইহোক কোডগুলি কপি করে পেস্ট করতে পারেন, আর আমি এখন পুরো কোডকে কয়েক ভাগে ভাগ করে ব্যাখ্যা দিচ্ছি। এটা হল সবচেয়ে উপরের অংশ
1.<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
2.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4.<html xmlns="http://www.w3.org/1999/xhtml"
5.xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
6. 

1.<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>

এই লাইন সবার উপরে থাকে যেকোন জুমলা টেমপ্লেট এর index.php ফাইল দেখলেই উপরে এই কোডটুকু দেখতে পারবেন।এই লাইনটি মতলববাজদের কাছ থেকে আপনার কোডকে লুকিয়ে রাখবে এতে করে তারা সাইট হ্যকিংএর অনেক রাস্তা হরিয়ে ফেলে।
দ্বিতীয় লাইনটি
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ব্রাউজার এবং স্পাইডার/রোবট ইত্যাদিকে পেজের ধরন সম্পর্কে জানানোর জন্য ব্যবহৃত হয়।বিশেষকরে সিএসএস কে ব্রাউজার কিভাবে প্রকাশ করবে তা বলে দেয়।
তৃতীয় লাইনটি
1.<html xmlns="http://www.w3.org/1999/xhtml"
2.xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

 বলে দেয় যে সাইটটি কোন ভাষায় করা হয়েছে।এটা গ্লোবাল কনফিগারেশন  থেকে সাইটের ল্যাংগুয়েজ তুলে নিয়ে আসে।
এর পরের লাইন হল হেডার বা শিরোনাম অংশ
1.<head>
2.<jdoc:include type="head" />
3.<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
4.<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
5.<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/style.css" type="text/css" />
6.</head>
প্রথম লাইনটিতে (<jdoc:include type="head" />) হেডার সম্পর্কিত সকল তথ্য থাকে।
এরপর link tag  গুলিতে টেমপ্লেটের জন্য সিএসএস ফাইলগুলি রয়েছে।প্রথমদুটি general.css  এবং system .css  জুমলার  নিজস্ব/জাতি  স্টাইল সীট।আর পরেরটা পুরো টেমপ্লেটেটির জন্য।এখানে এটার নাম দিয়েছি style.css


জুমলা ১.৫ টেমপ্লেটের বডি
1.<body>
2.<jdoc:include type="module" name="breadcrumbs" />
3.<jdoc:include type="modules" name="top" />
4.<jdoc:include type="modules" name="left" />
5.<jdoc:include type="component" />
6.<jdoc:include type="modules" name="right" />
7.</body>

Jdoc statement টি একটা টেমপ্লেটে বিভিন্ন ধরনের XHTML  আউটপুট দেয়।হোক কোন মডিউল এর XHTML
 বা কোন কমপোনেন্ট এর XHTML  .নিচের লাইনটি  কমপোনেন্ট থেকে আউটপুট দেবে।

1.<jdoc:include type="component" />

আর নিচের লাইনটি একটা মডিউল এর অবস্থান কোথায় হবে তা আউটপুট দেবে।
1.<jdoc:include type="modules" name="LOCATION" style="OPTION" />

LOCATION   এর জায়গায় right,left,top,user1,user2   যা ইচ্ছে দিতে পারেন।যদি top  দেন তার মানে এই নয় যে মডিউলটা উপরেই থাকতে হবে।তবে সাধারনত এমন নাম দেয়া ভাল যাতে কোড দেখে পরে সহজেই বুঝতে পারেন যে মডিউলটা কোথায় আছে।আর OPTION   এর জায়গায় “table”,”horz”,”xhtml”,”rounded”,”none”  ইত্যাদি দিতে পারেন।সাধারনত xhtml  দেয়া হয় এতে মডিউলটি একটা ডিভ এলিমেন্টের মধ্যে পরে যায়।অন্যান্যগুলি কেমন দেখাবে তা এই ফাইলে গিয়ে দেখলেই বুঝতে পারবেন templates/system/html/modules.php
জুমলার বডি তৈরী করা বেশ সহজ।শুধু কিছু জুমলার স্টেটমেন্ট ব্যবহার করা হয় মডিউল এর কনটেন্ট এবং মেইনবডি প্রদর্শনের জন্য।এবার Extension  থেকে Template Manager  এ গেলেই দেখতে পারবেন joomtemp  নামের একটি টেমপ্লেট, এখন এটা ডিফল্ট হিসেবে সেভ করে দেখুন সাধারন একটা টেমপ্লেট তৈরী হয়ে গেছে।যদি joomtemp ফোল্ডারটি বাইরে কোন ড্রাইভে তৈরী করে থাকেন তাহলে এটাকে জিপ করে অন্যান্য জুমলা টেমপ্লেটের মত ইনস্টল করা যাবে।


২. সিএসএস দিয়ে আরেকটু উন্নত টেমপ্লেট তৈরী করা

index.php  ফাইলে নিচের কোড কপি পেস্ট করুন
01.<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
02.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
03."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04.<html xmlns="http://www.w3.org/1999/xhtml"
05.xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
06.<head>
07.<jdoc:include type="head" />
08.<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
09.<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
10.<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/style.css" type="text/css" />
11.</head>
12.<body>
13.<div id="wrap">
14.<div id="header">
15.<div class="inside">
16.<jdoc:include type="modules" name="top" />
17.</div> </div>
18.<div id="sidebar">
19.<div class="inside">
20.<jdoc:include type="modules" name="left" />
21.</div>
22.</div>
23.<div id="content">
24.<div class="inside">
25.<jdoc:include type="component" />
26.</div>
27.</div>
28.<div id="sidebar-2">
29.<div class="inside">
30.<jdoc:include type="modules" name="right" />
31.</div>
32.</div>
33.<div id="footer">
34.<div class="inside"> Powered by <a href="http://joomla.org">Joomla!</a>. Valid <a href="http://validator.w3.org/check/referer">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>.
35.</div>
36.</div>
37.</div>
38.<!--end of wrap-->
39.</body>
এখানে দেখুন আগের টেমপ্লেটে যে কোড ব্যবহার করেছিলাম সেগুলিই এখানে দিয়েছি, অতিরিক্ত শুধু কিছু div এবং তাদের id দিয়েছি কারন এবার সিএসএস যোগ করব।
Css ফোল্ডারে style.css নামে একটা টেক্সক্ট ফাইল তৈরী করুন এখানে নিচের কোড কপি করে পেস্ট করে দিন।
01.#wrap {
02.min-width:760px;
03.max-width:960px;
04.}
05.#content {
06.float:left;
07.width:60%;
08.overflow:hidden;
09.}
10.#footer {
11.clear:both;
12.}
13..inside {
14.padding:10px;
15.}
16.#sidebar,#sidebar-2 {
17.float:left;
18.width:20%;
19.overflow:hidden;
20.}

ব্যাখ্যা: একটা বেসিক টেমপ্লেট (index.php ফাইল)জুমলার কমপোনেন্ট(মেইনবডি) এবং মডিউল লোড করে।ডিজাইন বা দেখতে কেমন হবে এবং লেআউট এটা সিএসএস এর কাজ এটা জুমলার কোন অংশই নয়।


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


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 ফোল্ডারে রাখলে ব্রাউজারের এড্রেসবারের বামে আইকনটি দেখাবে যেমন এই সাইটে দেখুন ৩টি গোলাকার রিং একটার ভিতর আরেকটা এমন একটা আইকন দেখাচ্ছে।

Comments

Post a Comment