CSS ব্যবহার করে জেনারেট প্রেস থিম কাস্টমাইজেশন করুন

যদি আপনি ওয়ার্ডপ্রেস ব্লগ সাইটে জেনারেট প্রেস প্রিমিয়াম থিমটি ব্যবহার করে থাকেন? তাহলে আজকের এই আর্টিকেল থেকে CSS  ব্যবহার করে আপনার জেনারেট প্রেস থিম দিয়ে তৈরি ব্লগ ওয়েবসাইটের অসাধারণ একটা ডিজাইন বা কাস্টমাইজেশন করতে পারবেন।

CSS কি?

আমরা অনেকেই জানি না সিএসএস কোড কি?

• তাই সংক্ষেপে সিএসএস কি বিষয়টি জেনে নিলে ক্ষতি নেই, CSS এর পূর্ণ নাম – Cascading Style Sheets.
• সিএসএস বর্ণনা করে যে কিভাবে এইচটিএমএল উপাদান গুলো স্কিন বা অন্যান্য মিডিয়াতে প্রদর্শিত হবে এ বিষয় এবং সিএসএস অনেক কাজ সময় বাঁচায়।
• এটি একসঙ্গে একাধিক পৃষ্ঠার বিন্যাস নিয়ন্ত্রণ করতে পারে।
• এছাড়াও বহিরাগত স্টাইল শিট গুলো সিএসএস ফাইল গুলিতে সংরক্ষণ করা হয়।

CSS কোড ব্যবহার করার নিয়ম

এখন আমরা জানবো কিভাবে সিএসএস কোড ব্যবহার করে জেনারেট প্রেস প্রিমিয়াম থিমের খুব সুন্দর কাস্টমাইজেশন করবো।

👉প্রথমে আপনি আপনার ওয়ার্ডপ্রেসের এডমিন প্যানেল ড্যাসবোর্ডে প্রবেশ করুন।

👉এরপর অ্যাপিয়ারান্স অপশন থেকে কাস্টমাইজেশন এই অপশনের উপরে ক্লিক করে দিন।

👉আপনার সামনে অনেকগুলো অপশন চলে আসবে নিচে থেকে আপনি “additional CSS” এই ঘরে। ক্লিক করে দিয়ে যে সিএসএস গুলো রয়েছে তা রিমুভ করে দিন।

এরপর আমাদের নিচে থাকা এই সিএসএস কপি করে নিন👇এবং additional  CSS  এখানে পেস্ট করুন।

.page-header-image-single .attachment-full{box-shadow:rgba(23,43,99,.3) 0 7px 28px;border-radius:20px;}

.comment-respond .comment-reply-title,.widget-title{border-radius:10px;color:#fff!important;box-shadow:rgba(23,43,99,.3) 0 7px 28px;background-image:linear-gradient(to right,#1fa2ff 0,#12d8fa 50%,#1fa2ff 100%)}

.comment-respond .comment-reply-title{padding:10px 10px 10px 25px;font-weight:600;font-size:22px!important}

.widget-title{padding:10px;font-weight:500;font-size:18px!important;text-align:center}

.sidebar .widget{box-shadow:rgba(23,43,99,.3) 0 6px 18px;border-radius:5px}.sidebar .widget:first-child{background-image:linear-gradient(to right,#1fa2ff 0,#12d8fa 50%,#1fa2ff 100%)}.button.light{background-color:#fff;border-radius:50px;font-weight:900;color:#333}.button.light:hover{background:#333;color:#fff}

@media (max-width:768px){.post-image-aligned-left .post-image img{margin-top:-10px;border-radius:12px;box-shadow:rgba(23,43,99,.2) 0 7px 28px!important}}

@media (min-width:769px){.post-image-aligned-left .post-image img{margin-top:-10px;border-radius:10px;box-shadow:rgba(23,43,99,.2) 0 7px 28px!important}

.site-content{display:flex}.inside-right-sidebar{height:100%}.inside-right-sidebar aside:last-child{position:-webkit-stcky;position:sticky;top:100px}}

a.read-more.button{background-image:linear-gradient(to right,#1fa2ff 0,#12d8fa 51%,#1fa2ff 100%);font-size:20px;padding:2px 20px;text-align:center;transition:.5s;background-size:500% auto;color:#fff;box-shadow:rgba(23,43,99,.3) 0 7px 28px;border-radius:12px}

entry-content h2,h3,h4,h5,h6{font-weight:900;padding:0 10px 10px 60px;background-image:linear-gradient(to right,#1fa2ff 0,#12d8fa 50%,#1fa2ff 100%);border-radius:10px;color:#fff!important;box-shadow:rgba(23,43,99,.3) 0 7px 50px}

.entry-title a {

    color: #000000;

    font-size: 25px;

}

এখন আপনি নিজে থেকে আপনার থিমের পরিবর্তনতা দেখতে পাবেন।

এই CSS  কোড পেস্ট করার পূর্বে যে কাজটি করবেন?

আপনি যদি জেনারেটর প্রেস থিমটি ইন্সটল করে থাকেন,তাহলে অবশ্যই “elements “সেকশন থেকে যতগুলি elements আছে সেগুলি রিমুভ করে দিতে হবে।

এই কাজটি না করলে আপনার এই সিএসএস কোড গুলো কাজ করবে না।

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

এছাড়াও সম্পূর্ণ প্রসেসটি জানতে এবং দেখতে নিচের ভিডিওটি অনুসরণ করুন 👇

শেষ কথা – উপরের সকল ইনফরমেশন গুলো সঠিক এবং আপনাদের জন্যই কোডগুলো তৈরি করা। আপনি যদি এখান থেকে উপকৃত হয়ে থাকেন তাহলে অবশ্যই আমাদের ওয়েবসাইটটি সাবস্ক্রাইব করে রাখবেন। পাশাপাশি ইউটিউব ফেসবুক এবং ব্লগার ওয়েবসাইট থেকে আর্নিং কৃত সকল ভিডিও বাংলা ভাষায় পেতে আমাদের ইউটিউব চ্যানেল এবং facebook পেজটি ফলো করে রাখুন।