ওয়ার্ডপ্রেস থিসিস থিম কাষ্টোমাইজ টিউটোরিয়াল পর্ব ৪ এ আপনাদের সবাইকে স্বাগতম। থিসিস থিম নিয়ে আমার আগের পোস্ট সমুহ দেখে নিতে পারেন
ওয়ার্ডপ্রেস থিসিস থিম কাষ্টোমাইজ টিউটোরিয়াল পর্ব ১
ওয়ার্ডপ্রেস থিসিস থিম কাষ্টোমাইজ টিউটোরিয়াল পর্ব ২
ওয়ার্ডপ্রেস থিসিস থিম কাষ্টোমাইজ টিউটোরিয়াল পর্ব ৩
গত পর্বে আমি আপনাদের নেভমেনুর ব্যাকগ্রাউন্ডে ইমেজ ও আইকন যুক্ত করা শিখিয়েছিলাম। আজকে আমি আপনাদের দেখাব থিস থিমের সাইডবার কাষ্টোমাইজ করা যায়।
তাহলে চলুন শুরু করা যাক,
প্রথমে দেখুন কিভাবে আপনার সাইডবারে হেডিং-এ ব্যাকগ্রাউন্ডে ইমেজ যুক্ত করা যায়,
প্রথমে আপনার সাইডবারের ব্যাকগ্রাউন্ডে ইমেজ তৈরি করুন , এবার ওয়ার্ডপ্রেস ব্লগে লগইন করুন ও থিসিস এর 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;
}
এবার আপনার ব্লগ রিফ্রেশ করে দেখুন আপনার সাইডবারের উইজেট ব্যাকগ্রাউন্ড পরিবর্তন ও বর্ডার যোগ হয়েছে।