কেমন আছেন আপনারা। আবারও আসলাম ওয়ার্ডপ্রেস টেম্পেলেট তৈরির ৩য় পর্ব নিয়ে। আপনি যদি এই ওয়ার্ডপ্রেস টেম্পেলেট তৈরির ২য় পর্ব মিস করে থাকেন তাহলে লিঙ্কে ক্লিক করে দেখতে পারেন। মুলত এটি একটি সিরিজ টিউটোরিয়াল। আমি মনে করি আমার এই টেম্পেলেট তৈরির সিরিজটি ফলো করলে আপনিও পারবেন আপনার নিজের ওয়ার্ডপ্রেস ও এইচটিএমএল টেম্পেলেট তৈরি করতে। আমি আবার ও বলছি টেম্পেলেট তৈরি করতে হলে আপনা কে অবশ্যই HTML এবং CSS সম্পর্কে কিছু ধারনা থাকতে হবে। এ জন্য আপনি আমার HTML টিউটোরিয়াল এবং CSS টিউটোরিয়াল দেখতে পারেন।

টেম্পেলেট এর লেআউট তৈরি ২

আপনার style.css ফাইলটি Dreamweaver অথবা  Note pad দিয়ে খুলুন। যেটি আমরা ওয়ার্ডপ্রেস টেম্পেলেট তৈরি ১ম পর্বে তৈরি করেছি। এবং নিচের কোড টুকু লিখুন অথবা পেস্ট করুন।

 /* CSS Document */

body {

background: none repeat scroll 0 0 #E6F4D5;

color: #333333;

font-family: arial;

font-size: 15px;

line-height: 150%;

margin: 0;

padding: 0;

}

img {

border:none;

}



* {

margin:0;

padding:0;

border:none;

}



#wraper {

background: none repeat scroll 0 0 #cfd9be;

margin: 0 auto;

padding: 0;

width: 980px;

}



/*------------------------------

--Header style

---------------------------------*/

#header {

background: none repeat scroll 0 0 #a2bb7d;

height: 100px;

padding: 10px;

width: 960px;

}



/*------------------------------

--Menu style

---------------------------------*/



#menu {

background: none repeat scroll 0 0 #001144;

height: 35px;

margin: 0;

padding: 0;

width: 100%;

}



#menu ul {

list-style:none;

}



#menu li {

float:left;

}



#menu a {

border-left: 1px solid -moz-visitedhyperlinktext;

color: #FFFFFF;

display: block;

padding: 5px 10px;

text-align: center;

text-decoration: none;

}



#menu a:hover {

display:block;

background:#0CF;

color:#000000;

border-bottom:2px solid #F93;

}



/*------------------------------

--container style

---------------------------------*/

#container {

background: none repeat scroll 0 0 #CFD9BE;

margin: 0;

padding: 0;

width: 980px;

}



#content {

background: none repeat scroll 0 0 #FFFFFF;

float: left;

margin: 0;

padding: 10px;

width: 560px;

}



/*------------------------------

--Post style

---------------------------------*/

.post {

background: none repeat scroll 0 0 #FFFFFF;

border: 1px dotted #BBBDDE;

float: left;

margin: 0 0 17px;

overflow: hidden;

padding: 10px;

width: 540px;

}

.entry {

}



/*------------------------------

--Sidebar style

---------------------------------*/

#sidebar {

}



#sidebar a {

}



#sidebar a:hover {

}



#sidebar #left-sidebar {

background: none repeat scroll 0 0 #DDEACA;

float: left;

min-height: 300px;

width: 180px;

padding:0 10px;

}



#sidebar #right-sidebar {

background: none repeat scroll 0 0 #DDEACA;

float: right;

min-height: 300px;

padding: 0 10px;

width: 180px;

}



/*------------------------------

--Footer widgets style

---------------------------------*/

.footer-widgets {

background: none repeat scroll 0 0 #93938E;

height: auto;

padding: 0 10px;

width: 960px;

}



/*------------------------------

--Footer style

---------------------------------*/

.footer {

background: none repeat scroll 0 0 #93938E;

border-top: 1px solid #666666;

padding: 10px;

width: 960px;

}



/*------------------------------

--other style

---------------------------------*/

.clear {

clear:both;

}
 

এখন পেজ টি সেভ করে আপনার index.html ফাইল টি যে কোন ওয়েব ব্রাউজার দিয়ে খুলুন। তাহলে নিচের মত ফলাফল দেখতে পাবেন।

আপনার যদি আমার ডিজাইন টি পছন্দ না হই তাহলে শুধুমাত্র কিছু সিএসএস কোড অ্যাড করে নিজের মনের মত করে নিতে পারেন। যেমন আপনি আপনার টেম্পেলেটের রং, ফন্ট সাইজ, ফন্ট ফ্যামিলি ইত্যাদি সবি style.css ফাইল আর মাধ্যমে খুব সহজে করতে পারবেন। আর এর জন্য আপনাকে CSS সম্পর্কে জানতে হবে। যদি না জানেন তাহলে আমার CSS টিউটোরিয়াল দেখতে পারেন। যার লিঙ্ক আমি এই পেজ এর প্রথম দিকে দিয়েছি।  আশা করি ভালোই লাগবে।

ওয়ার্ডপ্রেস টেম্পেলেট তৈরি ৪র্থ পর্ব দেখুন এবং শিখুন কি ভাবে পার্ট বাই পার্ট করে HTML টেম্পেলেটকে PHP টেম্পেলেট তৈরি করতে হই। এটি শুধু ওয়ার্ডপ্রেস টেম্পেলেট তৈরির জন্যই গুরুত্বপূর্ণ নই যে কোন বড় স্ট্যাটিক ওয়েব সাইট এর জন্যও খুব গুরুত্বপূর্ণ।