সাইডবার ও উইজেটঃ ওয়ার্ডপ্রেস থিসিস থিম টিউটোরিয়াল পর্ব-চার

ওয়ার্ডপ্রেস থিসিস থিম কাষ্টোমাইজ টিউটোরিয়াল পর্ব ৪ এ আপনাদের সবাইকে স্বাগতম। থিসিস থিম নিয়ে আমার আগের পোস্ট সমুহ দেখে নিতে পারেন

ওয়ার্ডপ্রেস থিসিস থিম কাষ্টোমাইজ টিউটোরিয়াল পর্ব ১

ওয়ার্ডপ্রেস থিসিস থিম কাষ্টোমাইজ টিউটোরিয়াল পর্ব ২

ওয়ার্ডপ্রেস থিসিস থিম কাষ্টোমাইজ টিউটোরিয়াল পর্ব ৩ 

গত পর্বে আমি আপনাদের নেভমেনুর ব্যাকগ্রাউন্ডে ইমেজ ও আইকন যুক্ত করা শিখিয়েছিলাম। আজকে আমি আপনাদের দেখাব থিস থিমের সাইডবার কাষ্টোমাইজ করা যায়।

তাহলে চলুন শুরু করা যাক,

প্রথমে দেখুন কিভাবে আপনার সাইডবারে হেডিং-এ ব্যাকগ্রাউন্ডে ইমেজ যুক্ত করা যায়,

প্রথমে আপনার সাইডবারের ব্যাকগ্রাউন্ডে ইমেজ তৈরি করুন , এবার ওয়ার্ডপ্রেস ব্লগে লগইন করুন ও  থিসিস এর   Custom File Editor   ড্রপডাউন থেকে  Custom.css   সিলেক্ট করুন  এবং নিচের এই CSS কোডটি লিখে সেভ করুন।

/* code for add image in sidebar headings*/
.custom .sidebar h3{
background:url(“https://tutorialbd.com/wp-content/mages/YOUR-IMAGE-HERE.gif'”);

margin-left:-0.70em;

width:300px;
font-size:1.3em;
line-height:1.5em;
color:#ffffff;
padding-top:0.3em;
}

এবার আপনার ব্লগটি রিফ্রেশ দিয়ে দেখুন সাইডবারে ব্যাকগ্রাউন্ডে ইমেজ যুক্ত হয়েছে।

সাইডবারের উইজেট স্টাইল করা

থিসিস এর   Custom File Editor   ড্রপডাউন থেকে  Custom.css   সিলেক্ট করুন  এবং নিচের এই সিএসএস কোডটি লিখে সেভ করুন।

.custom .sidebar ul li ul li a{background:#E5ECF9;border: 1px solid #AABCE0;border-radius: 7px; color: #ff0000; display: block;font-size: 13px; padding: 4px 10px; margin:2px 0;}
.custom .sidebar ul li ul li a:hover{background:#D3DCED;}
.custom #widget_killer_recent_entries-2{background:#BFE2F2; border:10px solid #77D6FF;}
.custom #widget_killer_recent_entries-2 h3{padding: 5px 0; margin: 10px 0; font-size: 18px; font-weight: bold; text-align: center; color:#fff;}
.custom #widget_killer_recent_entries-2 ul { font-size: 14px; font-weight: bold; list-style: decimal; margin: 0 0 0 20px;}
.custom #widget_killer_recent_entries-2 ul li { border-bottom: 1px solid #ddd;margin: 0; padding: 5px 0;}
.custom #widget_killer_recent_entries-2 ul li a { color: #333; display:block; font-size: 12px; font-weight: normal; background: transparent; padding: 0;}
.custom #widget_killer_recent_entries-2 ul li a:hover {color:#e33e00;}

এবার আপনার ব্লগ রিফ্রেশ করে দেখুন আপনার সাইডবারের উইজেটে নতুন স্টাইল যুগ হয়েছে।

সাইডবার উইজেটর ব্যাকগ্রাউন্ড পরিবর্তন ও বর্ডার যোগ করা  

থিসিস এর   Custom File Editor   ড্রপডাউন থেকে  Custom.css   সিলেক্ট করুন  এবং নিচের এই সিএসএস কোডটি লিখে সেভ করুন

/*side bar widget area link style */

.custom li.widget ul li{
background:#F0F0F0;
border: 0.1em solid #C7C7C7;
-moz-border-radius:2px;
padding:0.5em;
margin:0.5em;
}
/*side bar widget bacground*/

.custom li.widget ul {
background:#FF0000;
border: 0.1em solid #ffoooo;
-moz-border-radius:2px;
padding:0.5em;
}

এবার আপনার ব্লগ রিফ্রেশ করে দেখুন আপনার সাইডবারের উইজেট ব্যাকগ্রাউন্ড পরিবর্তন ও বর্ডার যোগ হয়েছে।

পরবর্তী পোষ্ট করা পর্যন্ত আপনাদের কাছ থেকে এখানেই বিদায় নিচ্ছি সবাই ভাল থাকবেন ধন্যবাদ।