Monochrome Pro থিমের হেডার সেকশন কিভাবে ট্রান্সপ্যারেন্ট করবেন?

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

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

.home .site-header,
.single.featured-image .site-header {
    background-color: transparent;
}

.home .shadow .site-header,
.home .site-header.search-visible,
.single.featured-image .shadow .site-header,
.single.featured-image .site-header.search-visible {
    background-color: #fff;
}

.home.header-image .site-title > a,
.single.featured-image.header-image .site-title > a {
    background-image: url(images/logo-white.png) !important;
}

.home .nav-primary .genesis-nav-menu > li > a,
.single.featured-image .nav-primary .genesis-nav-menu > li > a {
    color: #fff;
}

.home.header-image .shadow .site-title > a,
.single.featured-image.header-image .shadow .site-title > a {
    background-image: url(images/logo.png) !important;
}

.home .shadow .nav-primary .genesis-nav-menu > li > a,
.single.featured-image .shadow .nav-primary .genesis-nav-menu > li > a {
    color: #000;
}

.home .site-inner {
    margin-top: 0;
}

.entry-background {
    margin-top: 0;
}

এই কোড অনুযায়ী ৫০ পিক্সেল স্ক্রল করে নামার পর ব্যাকগ্রাউন্ড ইমেজটি চলে যাবে এবং যথারীতি সাদা ব্যকগ্রাউন্ড দেখাতে শুরু করবে।

নিচের দুটি স্ক্রিনশট দেখুন। প্রথমটি হোম পেইজ আর দ্বিতীয়টি সিঙ্গল পোস্ট পেইজ।

আশা করি আপনার কাজটি হয়েছে। কোনো সমস্যা ফেইস করলে নিচের কমেন্ট বক্সে জানাতে পারেন। যত জলদি সম্ভব সমাধান করে দেবার চেষ্টা করবো, ইনশাআল্লাহ।

Leave a Comment