/* Theme Name: Smartnews Theme URI: https://www.deshjagaran.com/ Author: M.R. LITON Author URI: https://www.facebook.com/litonofc/ Description: Smart News is a modern, fast-loading Bengali news/magazine WordPress theme. You can install and use it directly on any WordPress site without any license key or activation code. Version: 2.25.80 Requires at least: 5.3 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: smart-news Tags: one-column, two-columns, right-sidebar, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog */ /* ============================================================================ v2.25.80 — "Add News" বক্সের প্রথম তিনটি ফিল্ড (News Title, Sub Title, Key Points) অনুমোদিত মকআপের সাথে হুবহু মিলিয়ে নতুনভাবে সাজানো হলো: — News Title: উপরে লেবেলের পাশে লাল * এবং ডানপাশে "0/150" লাইভ ক্যারেক্টার কাউন্টার, নিচে ফুল-উইথ ইনপুট, নতুন প্লেসহোল্ডার "Enter eye-catching news title here..." — Sub Title ও Key Points এখন একই সারিতে ২-কলাম গ্রিডে পাশাপাশি, লেবেলের পাশে "(Optional)" — Key Points-এর ডানপাশে "0/200" লাইভ কাউন্টার। নতুন প্লেসহোল্ডার যথাক্রমে "Add subtitle to give more context..." ও "Comma separated key points..."। কাউন্টার আপডেট হয় সাধারণ জাভাস্ক্রিপ্টে (ইনপুট ইভেন্টে), কোনো নতুন মেটা ফিল্ড/ডাটাবেস কী যোগ হয়নি — একই _sn_news_headline/_sn_sub_heading/ _sn_shoulder মেটাতেই সেভ হয়। দেখুন inc/post-meta-boxes.php। ============================================================================ */ /* ============================================================================ v2.25.79 — News Editor (Add/Edit News) স্ক্রিনের একদম উপরের অংশ অনুমোদিত "NEWSROOM" মকআপের সাথে হুবহু মিলিয়ে নতুনভাবে ডিজাইন করা হলো: — একটি স্টিকি সাদা টপবার: "NEWSROOM" ওয়ার্ডমার্ক + পাতলা ডিভাইডার + "Add New News"/"Edit News" পেজ-লেবেল + রঙিন স্ট্যাটাস পিল (Draft/ Published/Scheduled/Pending), ডানপাশে ৪টি বাটন — Site View, Preview, Save Draft, Publish News (সলিড ইন্ডিগো)। — ঠিক নিচেই ৫টি আইকন-ট্যাব — Content, SEO, Social, Extra, History — অ্যাক্টিভ ট্যাবে ইন্ডিগো আন্ডারলাইন সহ। আসল WordPress Publish/Save Draft/Preview বাটন এবং SEO/Social Watermark/ Location/Revisions বক্স নতুন করে বানানো হয়নি — শুধু জায়গা বদলানো হয়েছে (JS দিয়ে), তাই সব নন্স/AJAX/অটোসেভ আচরণ অক্ষত থাকে। বিস্তারিত দেখুন inc/post-editor-topbar.php। ============================================================================ */ /* ============================================================================ v2.25.78 — "Newsroom → All News" পেজ (edit.php) সম্পূর্ণ নতুনভাবে ডিজাইন করা হলো, অনুমোদিত মকআপের সাথে হুবহু মেলাতে: — স্ট্যাটাস ইন্ডিকেটর ডট, থাম্বনেইল, হেডলাইনের নিচে পোস্ট আইডি ও "Featured" ব্যাজ — Reporter কলামে ইনিশিয়াল-সহ রঙিন অ্যাভাটার + নাম — রঙিন Category পিল ও রঙিন Status পিল (Published/Scheduled/Draft/...) — Published কলাম, Views/Shares মেট্রিক (আইকনসহ) — Actions কলামে এডিট/প্রিভিউ/মোর আইকন বাটন — টুলবার/ট্যাব/সার্চ বক্স/ফিল্টার রো/পেজিনেশন সম্পূর্ণ রিস্কিন, এবং "All Formats" ফিল্টার ড্রপডাউন নতুন যোগ করা হলো বিস্তারিত দেখুন inc/modern-news-list.php। ============================================================================ */ /* ============================================================================ v2.25.77 — সিঙ্গেল পেজে প্রকাশের সময় গরমিল (পোস্ট করার সময়ের চেয়ে কয়েক ঘণ্টা এগিয়ে/পিছিয়ে দেখানো) ফিক্স করা হলো। কারণ: থিমের সব সময়/তারিখ ফাংশন WordPress-এর নিজস্ব "সাইট টাইমজোন" (Settings → General → Timezone) মেনে চলে। হোস্টিংয়ে এই সেটিং সঠিকভাবে "Dhaka" / UTC+6-এ সেট না থাকলে, এখনই প্রকাশ করা নিউজও ভুল সময়ে সেভ ও প্রদর্শিত হচ্ছিল। সমাধান: functions.php-এ pre_option_timezone_string ও pre_option_gmt_offset ফিল্টার যোগ করে থিম নিজে থেকেই সবসময় Asia/Dhaka (UTC+6) টাইমজোন জোর করে ব্যবহার করবে — হোস্টিং সার্ভারের Settings → General সেটিং যা-ই থাক না কেন। ============================================================================ */ /* ============================================================================ v2.25.76 — মোবাইল ড্যাশবোর্ডে "ALL NEWS" বাটনটি কার্ডের ডান মার্জিনের বাইরে চলে যাচ্ছিল, সেটা ফিক্স করা হলো। কারণ: CSS Grid-এর প্রতিটি আইটেমের ডিফল্ট min-width হলো "auto" — অর্থাৎ নিজের ভেতরের কনটেন্টের (আইকন + বড় হাতের, স্পেসড-আউট লেবেল টেক্সট) সমান। সরু ফোন স্ক্রিনে "ALL NEWS" / "MANAGE DESK" বাটনের ভেতরের কনটেন্ট তার নিজের গ্রিড কলামের চেয়ে বেশি জায়গা চাইছিল, তাই ব্রাউজার বাটনটিকে ছোট না করে কলামের বাইরে ঠেলে দিচ্ছিল — ফলে সেটা কার্ডের ও সাইটের মার্জিনের বাইরে চলে যাচ্ছিল। সমাধান: গ্রিডের ভেতরের বাটনগুলোতে min-width:0 এবং box-sizing:border-box যোগ করা হলো, যাতে সেগুলো নিজের কলামের প্রকৃত প্রস্থে ছোট হতে পারে; পাশাপাশি nowrap/ellipsis যোগ করা হলো, যাতে কোনো লেবেল তারপরও না আঁটলে সেটা "…" দিয়ে ছেঁটে দেখানো হয়, বাইরে না ছড়িয়ে। বাস্তবায়ন: inc/custom-dashboard.php (smart_news_dashboard_css())। ============================================================================ */ /* ============================================================================ v2.25.75 — থিম কাস্টমাইজেশন: মোবাইল সাইডবার আইকন-টেক্সট ওভারল্যাপ ফিক্স + ড্যাশবোর্ডের মোবাইল স্ক্রিনে "View Site" যুক্ত করা হলো। ১) মোবাইল ড্যাশবোর্ডের বাম সাইডবারে (News / Staff / Design / Settings / System) নীল আইকন ব্যাজটি মেনুর নামের ওপর বসে ওভারল্যাপ করছিল। কারণ: ওয়ার্ডপ্রেস কোরের নিজস্ব ≤782px রেসপন্সিভ CSS আইকনকে আবার পুরনো (overlapping) বক্স-মডেলে ফিরিয়ে দিচ্ছিল, যা আমাদের ডেস্কটপ flex লেআউটের ওপর দিয়ে চলে যাচ্ছিল। ≤782px ব্রেকপয়েন্টেই আইকন-ব্যাজ ও লেবেলকে জোর করে আলাদা flex আইটেম হিসেবে পাশাপাশি বসানো হলো, যেন আর কখনো একটার ওপর আরেকটা না বসে। বাস্তবায়ন: inc/admin-menu.php (smart_news_sidebar_redesign_css())। ২) ড্যাশবোর্ডের মাস্টহেডে "LIVE DESK" বাটনটি এখন শুধু মোবাইল স্ক্রিনে (≤782px) "View Site"-এ পরিণত হয় এবং ট্যাপ করলে লাইভ সাইট নতুন ট্যাবে খোলে। ডেস্কটপে আগের মতোই পালসিং "LIVE DESK" ব্যাজ অপরিবর্তিত থাকবে। বাস্তবায়ন: inc/custom-dashboard.php (smart_news_dashboard_css())। ============================================================================ */ /* ============================================================================ v2.25.74 — মোবাইল ড্যাশবোর্ডে "সাইট ভিউ" ট্যাব যুক্ত করা হলো এবং থিম কাস্টমাইজ করা হলো। ১) নিচের ফিক্সড বটম ট্যাব বারে (Dashboard / News / Add News / Comments / More) নতুন একটি "সাইট ভিউ" (Site View) ট্যাব যোগ করা হলো, যা লাইভ সাইট নতুন ট্যাবে খোলে। কারণ: টপবারের "View Site" বাটন ≤782px স্ক্রিনে হাইড করা থাকে (বটম ন্যাভ সেই নেভিগেশন কভার করে বলে), তাই এতদিন মোবাইল ড্যাশবোর্ড থেকে সরাসরি সাইট দেখার কোনো উপায় ছিল না। ২) বটম ন্যাভের প্রতিটি ট্যাব (flex:1 1 0 + min-width:0 + লেবেল ellipsis-truncate + সামান্য ছোট আইকন/অ্যাড-বাটন) টাইট করা হলো, যাতে ৬টি ট্যাব বারের নিজের বাম/ডান মার্জিনের ভেতরেই সমানভাবে বসে — কোনো ট্যাব স্ক্রিনের বাইরে বা মার্জিনের বাইরে না যায়। ৩) মোবাইল ব্রেকপয়েন্টে (≤782px) মাস্টহেডের উপরে টপ প্যাডিং/মার্জিন শূন্য (0) থাকা নিশ্চিত করা হলো (html.wp-toolbar, body.wp-admin, #wpcontent, #wpbody, #wpbody-content) — ড্যাশবোর্ড ভিউপোর্টের একদম উপরে ফাঁকা জায়গা ছাড়াই বসে। বাস্তবায়ন: inc/custom-dashboard.php (smart_news_render_dash_bottom_nav() + smart_news_dashboard_css())। ============================================================================ */ /* ============================================================================ v2.25.73 — Newsroom ড্যাশবোর্ডের টপবারে (inc/custom-dashboard.php), মোবাইল স্ক্রিনে, NEWSROOM ওয়ার্ডমার্কের বামে একটি মেনু আইকন (হ্যামবার্গার) বাটন যোগ করা হলো। কারণ: ফোনে সাইডবার সাধারণত WordPress কোরের নিজস্ব #wp-admin-bar-menu-toggle বাটনে ট্যাপ করে খোলা/বন্ধ করা যায় — সেই বাটন থাকে #wpadminbar-এর ভেতরে। কিন্তু inc/admin-topbar.php (v2.25.60) #wpadminbar-কে wp-admin-এর সব পেজ থেকেই সম্পূর্ণ লুকিয়ে দিয়েছিল, ফলে কোরের সেই বাটনটাও আর ট্যাপ করার উপায় ছিল না — মোবাইলে সাইডবার খোলার কোনো রাস্তাই অবশিষ্ট ছিল না। নতুন বাটনটি কোরের ঠিক একই টগল পুনরায় তৈরি করে (body-তে "wp-responsive-open" ক্লাস, যেটা #adminmenuwrap অফ-ক্যানভাস প্যানেলের জন্য কোরের নিজস্ব CSS আগে থেকেই ব্যবহার করে) — তাই এখন ট্যাপ করলে ঠিক আগের কোর বাটনের মতোই সাইডবার খোলে/বন্ধ হয়। শুধু ≤782px স্ক্রিনে দেখা যায়, ডেস্কটপ/ট্যাবলেটে হিডেন থাকে। বাস্তবায়ন: inc/custom-dashboard.php (smart_news_render_dash_welcome())। ============================================================================ */ /* ============================================================================ v2.25.72 — Newsroom ড্যাশবোর্ডের টপবারে (inc/custom-dashboard.php) একটি সার্চ বাটন যোগ করা হলো, ঠিক মকআপের লেআউট অনুযায়ী — Dark/Light টগলের আগে একটি গোল আইকন বাটন হিসেবে বসানো হয়েছে। ক্লিক করলে পাশে একটি ইনপুট ফিল্ড খুলে যায় এবং সাবমিট করলে edit.php?s= এ গিয়ে নিউজ লিস্টে সার্চ করে (আগে এই রো-তে কোনো সার্চ ফিল্ড ছিলই না)। সাথে মোবাইল ড্যাশবোর্ড স্ক্রিন ডিজাইনও ঠিক করা হলো: ছোট স্ক্রিনে NEWSROOM ওয়ার্ডমার্কের পাশে "Dashboard" লেবেল আর "View Site" বাটন আগে থেকেই হাইড করা থাকে, ফলে সার্চ ফিল্ড খোলা হলে ডেস্কটপের ফিক্সড 230px চওড়া না রেখে বাকি জায়গাটা (সর্বোচ্চ 280px পর্যন্ত) পূরণ করে নেয় — না হলে সরু ফোনে ওভারফ্লো হতো, চওড়া ফোনে অস্বাভাবিক ছোট দেখাতো। ইনপুটের ফন্ট-সাইজ 16px করা হয়েছে যাতে ফোকাস করলে iOS Safari নিজে থেকে পেজ জুম-ইন না করে। বাস্তবায়ন: inc/custom-dashboard.php (smart_news_render_dash_welcome())। ============================================================================ */ /* ============================================================================ v2.25.71 — মোবাইলে ড্যাশবোর্ড/সব wp-admin পেজ ভাঙা দেখানোর বাগ ফিক্স হলো: inc/admin-menu.php-এ #wpcontent, #wpfooter{ margin-left: 200px !important } রুলটা কোনো মিডিয়া কোয়েরি ছাড়াই সব স্ক্রিনে বসানো ছিল। WordPress কোর সাধারণত ≤782px স্ক্রিনে সাইডবারকে off-canvas ওভারলে বানিয়ে দেয় (কনটেন্ট ফুল-উইথই থাকে, মেনু বন্ধ থাকলে দেখাই যায় না) — কিন্তু আমাদের !important রুলটা সেই কোরের মোবাইল রিসেট ওভাররাইড করে ফেলছিল, ফলে মেনু লুকানো থাকলেও কনটেন্ট সবসময় ২০০px ডানে ঠেলা থাকতো: বাঁ পাশে বড় ফাঁকা জায়গা আর ডানে গাদাগাদি/ওভারফ্লো হওয়া বাটন (স্ক্রিনশটে দেখা বাগ)। এখন max-width:782px ব্লকের ভেতরে #wpcontent, #wpfooter{ margin-left:0 !important } যোগ করে মোবাইলে কোরের ডিফল্ট ফুল-উইথ আচরণ ফিরিয়ে আনা হলো। বাস্তবায়ন: inc/admin-menu.php (smart_news_modern_admin_menu_css())। ============================================================================ */ /* ============================================================================ v2.25.70 — Newsroom ড্যাশবোর্ড (inc/custom-dashboard.php) মোবাইলের জন্য নতুন করে সাজানো হলো (শুধু max-width:782px মিডিয়া কোয়েরির ভেতরে — ডেস্কটপ লেআউট অপরিবর্তিত): • টপবারে শুধু NEWSROOM ওয়ার্ডমার্ক + ডার্ক/লাইট টগল থাকে; "Dashboard" ডিভাইডার ও "View Site" বাটন মোবাইলে লুকানো হলো। • KPI গ্রিড (৫টি রঙিন কার্ড) ও ৭-দিনের লাইন চার্ট প্যানেল দুটো মোবাইলে হাইড করা হলো — ঘন/ডেস্কটপ-কেন্দ্রিক হওয়ায়। • মাস্টহেড এখন দুটো আলাদা কার্ডে ভাগ হয়ে যায়: উপরে গ্রিটিং (অ্যাভাটার+নাম+তারিখ), নিচে "Waiting for Review" কাউন্ট + LIVE DESK/ADD NEWS/MANAGE DESK/ALL NEWS বাটনগুলো ২×২ গ্রিডে — এর জন্য নতুন .sn-masthead-actions wrapper যোগ হলো (ডেস্কটপে display:contents, তাই flex রো-তে কোনো প্রভাব নেই)। • Statistics রো ৪-কলামেই কম্প্যাক্ট সাইজে থাকে; Quick Actions গ্রিড মোবাইলে ৩ কলামে (আগে ২) সাজানো হলো। • নিচে একটি ফিক্সড বটম ট্যাব-বার (.sn-bottom-nav) যোগ হলো — Dashboard / News / Add News / Comments (ব্যাজসহ) / More; শুধু মোবাইলে দেখা যায়, ডেস্কটপে display:none। বাস্তবায়ন: inc/custom-dashboard.php-এ smart_news_render_dash_bottom_nav() (in_admin_footer) + smart_news_dashboard_css()। ============================================================================ */ /* ============================================================================ v2.25.69 — "COLLAPSE MENU" লেবেলের (.collapse-button-label) padding 0-তে নামানো হলো (আগে ছিল 8px চারপাশে)। ব্যাজ(:before)-এর margin:0 12px 0 0 অপরিবর্তিত থাকায় ব্যাজ ও টেক্সটের মধ্যে গ্যাপ এখনো 12px-ই আছে, শুধু লেবেলের নিজস্ব ভেতরের প্যাডিং সরানো হলো। বাস্তবায়ন: inc/admin-menu.php (smart_news_sidebar_redesign_css())। ============================================================================ */ /* ============================================================================ v2.25.68 — "COLLAPSE MENU" ব্যাজ ও লেবেলের মধ্যেকার স্পেসিং এখন NEWS / STAFF / DESIGN / SETTINGS / SYSTEM-এর ব্যাজ+লেবেলের সাথে হুবহু মিলে যায়। আগে flex `gap:12px` ব্যবহার হচ্ছিল, কিন্তু .collapse-button-label WordPress কোরের ডিফল্ট CSS-এ absolute- positioned থাকায় flex flow-এর বাইরে গিয়ে ভুল জায়গায় বসছিল। এবার ঠিক করা হলো: ১) অন্য আইকনগুলোর মতোই (.wp-menu-image{ margin:0 12px 0 0 }), ব্যাজ(:before)-এ margin:0 12px 0 0 বসানো হলো — gap তুলে দিয়ে। ২) .collapse-button-label-কে position:static/top:auto/left:auto/ margin:0 দিয়ে জোর করে normal flex flow-এ ফেরানো হলো, প্যাডিং (8px চারপাশে) অন্য লেবেলগুলোর (div.wp-menu-name) সাথে অভিন্ন রাখা হলো। ফলাফল: ব্যাজ থেকে টেক্সট পর্যন্ত মোট স্পেসিং (12px + 8px) এখন সব রো-তে ঠিক এক। বাস্তবায়ন: inc/admin-menu.php (smart_news_sidebar_redesign_css())। ============================================================================ */ /* ============================================================================ v2.25.67 — সাইডবারের "COLLAPSE MENU" আইকন এখন NEWS / STAFF / DESIGN / SETTINGS / SYSTEM আইকনগুলোর সাথে হুবহু একই এলাইনমেন্টে ও সাইজে (34×34px, রাউন্ডেড-স্কয়ার ব্লু ব্যাজ) দেখাবে। আগে WordPress কোরের নিজস্ব .collapse-button-icon স্প্রাইট অ্যাবসোলিউট-পজিশনড থাকায় position/box-size ওভাররাইড করেও কিছুটা বামে সরে থাকছিল। এবার সমাধান ভিন্নভাবে করা হলো — কোরের .collapse-button-icon সম্পূর্ণ লুকিয়ে (display:none) দিয়ে, তার বদলে #collapse-button:before সিউডো- এলিমেন্ট দিয়ে সম্পূর্ণ নতুন একটি 34×34 ব্যাজ (উপরের আইকনগুলোর .wp-menu-image-এর হুবহু কপি) বসানো হয়েছে — এটা সম্পূর্ণ আমাদের নিজস্ব বক্স হওয়ায় কোরের CSS-এর সাথে আর কোনো সংঘাত হয় না এবং #collapse-button-এর flex row-এ ঠিক একই পজিশনে বসে। বাস্তবায়ন: inc/admin-menu.php (smart_news_sidebar_redesign_css())। ============================================================================ */ /* ============================================================================ v2.25.66 — টপ-বারের "Dashboard" লেখা এখন Capital Letters-এ ("DASHBOARD") দেখানো হচ্ছে (.sn-topbar-title{ text-transform: uppercase; }, letter-spacing সামান্য বাড়ানো হয়েছে পড়তে সুবিধার জন্য)। বাস্তবায়ন: inc/custom-dashboard.php। ============================================================================ */ /* ============================================================================ v2.25.65 — নেটিভ WordPress "Dashboard" হেডিং ওপরে ভেসে থাকার বাগ ফিক্স: আগের ভার্সনে (2.25.64) CSS সিলেক্টর সরাসরি চাইল্ড (">") ধরে নেটিভ h1.wp-heading-inline লুকানোর চেষ্টা করছিল, কিন্তু কিছু সেটআপে WordPress কোর হেডিংটি প্রত্যাশিত মার্কআপে রেন্ডার না করায় সেটা লুকাচ্ছিল না — ফলে NEWSROOM ব্র্যান্ডিংয়ের ওপরে প্লেইন "Dashboard" টেক্সট দেখা যাচ্ছিল। ফিক্স করা হলো দুইভাবে: ১) CSS সিলেক্টর থেকে ডিরেক্ট-চাইল্ড (">") শর্ত তুলে আরও সাধারণ করা হলো (#wpbody-content .wrap h1.wp-heading-inline ইত্যাদি)। ২) smart_news_render_dash_welcome_banner()-এর JS-এ, ব্যানার বসানোর সময় wrap-এর ভেতরের সব

এলিমেন্ট সরাসরি display:none করে দেওয়া হচ্ছে — এটা মার্কআপ যেভাবেই আসুক না কেন কাজ করবে (মার্কআপ-অ্যাগনস্টিক সেফটি-নেট)। ফলাফল: এখন শুধু "NEWSROOM" ওয়ার্ডমার্কের পাশে টপ-বারে একটাই "Dashboard" লেখা থাকে (NEWSROOM │ Dashboard), নেটিভ হেডিংয়ের ডুপ্লিকেট আর দেখা যায় না। ============================================================================ */ /* ============================================================================ v2.25.64 — NEWSROOM ড্যাশবোর্ড হেডার আবার আপডেট (অনুমোদিত মকআপ অনুযায়ী, হুবহু লেআউট): ১) মাস্টহেডের ওপরে একটি নতুন টপ-বার রো (.sn-topbar) যোগ হলো: বাঁ-দিকে "NEWSROOM / Editorial Control Room" ওয়ার্ডমার্কের পর একটি পাতলা ভার্টিক্যাল ডিভাইডার এবং "Dashboard" লেখা — সব একই লাইনে। ডান-দিকে একটি কার্যকরী Dark/Light Mode টগল সুইচ (#sn-theme-toggle) এবং তার পরে "VIEW SITE" বাটন। ২) "View Site" বাটনটি আগে নিচের বড় প্যানেলে LIVE DESK / ADD NEWS / MANAGE DESK ক্লাস্টারের সাথে ছিল — এখন সেখান থেকে সরিয়ে ওপরের নতুন টপ-বার রো-তে নেওয়া হলো। ৩) নিচের বড় মাস্টহেড প্যানেলের ডানদিকে, LIVE DESK / ADD NEWS / MANAGE DESK ক্লাস্টারের পর বাড়তি ফাঁক রেখে একটি নতুন "ALL NEWS" বাটন যোগ করা হলো (.sn-btn-allnews, edit.php-এ লিংক)। ৪) Dark/Light টগল ক্লিক করলে -তে `sn-light-mode` ক্লাস যুক্ত/অপসারণ হয়ে পুরো ড্যাশবোর্ডের কালার প্যালেট (--snd-* CSS ভ্যারিয়েবল) লাইট থিমে বদলে যায়; পছন্দ ব্রাউজারে localStorage-এ মনে রাখা হয় (ডিফল্ট: ডার্ক)। ৫) বাস্তবায়ন: inc/custom-dashboard.php (smart_news_render_dash_welcome(), smart_news_dashboard_css())। ============================================================================ */ /* ============================================================================ v2.25.63 — NEWSROOM মাস্টহেড হেডার আপডেট (অনুমোদিত মকআপ অনুযায়ী): ১) নেটিভ "Dashboard" শিরোনামের জায়গায় এখন "NEWSROOM / Editorial Control Room" ওয়ার্ডমার্কটি বসানো হলো — আগে এটি মাস্টহেড কার্ডের ভেতরে (অ্যাভাটারের পাশে) ছিল, এখন কার্ডের ঠিক উপরে, নেটিভ h1-এর জায়গায় বসে (inc/custom-dashboard.php; .sn-masthead-brand থেকে .sn-topbrand-এ রিনেম করে আলাদা করা হয়েছে)। "Dashboard" heading আগের মতোই display:none থাকছে, শুধু DOM insertion মার্কার হিসেবে অক্ষত আছে। ২) মাস্টহেডের ডানদিকে, LIVE DESK / ADD NEWS / MANAGE DESK ক্লাস্টার থেকে বাড়তি ফাঁক রেখে একটি নতুন "VIEW SITE" বাটন যোগ করা হলো, যা সাইটের হোমপেজ নতুন ট্যাবে খোলে (inc/custom-dashboard.php, .sn-btn-viewsite)। ৩) #collapse-button .collapse-button-icon:after-এ top: 0px যোগ করা হলো আইকনের ভার্টিক্যাল অ্যালাইনমেন্ট ঠিক করতে (inc/admin-menu.php, উভয় স্টাইল ব্লকে)। ============================================================================ */ /* ============================================================================ v2.25.62 — চারটি অ্যাডমিন UI ফিক্স: ১) সাইডবার ব্র্যান্ড ওয়ার্ডমার্ক "NEWSROOM" → "NEWS DESK" করা হলো (inc/admin-menu.php)। ২) টপবার থেকে "Dashboard" হেডিং ও "Screen Options" ট্যাব সম্পূর্ণ সরিয়ে ফেলা হলো (inc/custom-dashboard.php) — "Screen Options" এখন বাঁ-পাশের Settings মেনুর নিজস্ব একটি রো হিসেবে যুক্ত (inc/admin-menu-groups.php); ক্লিক করলে ড্যাশবোর্ডে গিয়ে নেটিভ Screen Options প্যানেলটি নিজে থেকেই খুলে যায় — ফিচারটি হুবহু অক্ষত, শুধু জায়গা পাল্টেছে। ৩) #adminmenu div.wp-menu-name-এ padding: 8px 8px 8px 8px যোগ করা হলো; Collapse Menu-র লেবেলেও একই প্যাডিং দিয়ে আইকনের সঙ্গে টেক্সট এলাইনমেন্ট মিলিয়ে দেওয়া হলো (inc/admin-menu.php)। ============================================================================ */ /* ============================================================================ v2.25.61 — NEWSROOM ড্যাশবোর্ড স্কিন সম্পূর্ণ রিডিজাইন (ডার্ক "Editorial Control Room" লুক)। inc/custom-dashboard.php-এর পুরো ড্যাশবোর্ড পেজ এখন একটি ডার্ক চারকোল থিমে রূপান্তরিত হয়েছে যা অনুমোদিত NEWSROOM মকআপের সাথে হুবহু মিলে যায়: — মাস্টহেডে ব্র্যান্ডেড "NEWSROOM" ওয়ার্ডমার্ক (গ্রেডিয়েন্ট টেক্সট, "Editorial Control Room" সাব-ট্যাগ সহ) + LIVE DESK ইন্ডিকেটর + Manage Desk / View Site / Add News বাটন। — ৫টি KPI কার্ড (PUBLISHED / PENDING / DRAFTS / SCHEDULED / COMMENTS), প্রতিটিতে কালার্ড আইকন ও মিনি স্পার্কলাইন। — "Last 7 Days" লাইন চার্ট (Published/Drafts/Pending — তিনটি লাইন, ইনলাইন SVG)। — Statistics রো: THIS WEEK / THIS MONTH / TOTAL VIEWS / TOTAL NEWS (+% ডেল্টা সহ)। — Recent News লিস্ট থাম্বনেইল + স্ট্যাটাস পিল সহ। — Quick Actions ৬-বাটন গ্রিড (Comments-এ নোটিফিকেশন ব্যাজ সহ)। — গ্রিন ফুটার ক্রেডিট বার "Thank you for creating with M. R. LITON"। সাইডবার ব্র্যান্ড ওয়ার্ডমার্ক "NEWS DESK" → "NEWSROOM" করা হয়েছে (inc/admin-menu.php) যাতে নাম সর্বত্র এক। সব ডেটা লাইভ — WordPress DB থেকে, কোনো প্লেসহোল্ডার নয়। ============================================================================ */ /* ============================================================================ v2.25.60 — ড্যাশবোর্ডের ওপরের টপ অ্যাডমিন বার সেকশন সম্পূর্ণ ডিলেট করা হলো (লোগো, Ctrl+K সার্চ, "+ Add News" বাটন, "Howdy" অ্যাকাউন্ট মেনু — সবকিছুসহ #wpadminbar)। কারণ: রিডিজাইন করা লেফট সাইডবারে (v2.25.58–59) ইতিমধ্যে নিজস্ব ব্র্যান্ড হেডার ও LOGOUT কার্ড যুক্ত হয়ে গেছে, ফলে টপ বার এখন ডুপ্লিকেট UI। WordPress-এর নিজস্ব `show_admin_bar` ফিল্টার দিয়ে শুধু wp-admin স্ক্রিনে (is_admin()) এটি বন্ধ করা হয়েছে — সাইটের ফ্রন্ট-এন্ডে লগইন করা ইউজারদের জন্য টপ বার আগের মতোই স্বাভাবিকভাবে দেখাবে, সেখানে কিছু বদলায়নি। বাস্তবায়ন: inc/admin-topbar.php (দেখুন smart_news_hide_admin_bar_in_dashboard())। ============================================================================ */ /* ============================================================================ v2.25.59 — সাইডবার ব্র্যান্ড হেডারের "TOB" টেক্সট ব্যাজের বদলে সাইটের আসল আইকন/লোগো বসানো হলো (উদাহরণ: Logo | NEWS DESK)। — সাইটের Site Icon (Customizer → Site Identity, বা সেট না থাকলে থিম অপশনের ফেভিকন — inc/admin-branding.php-এর ফলব্যাক অনুযায়ী) এখন স্বয়ংক্রিয়ভাবে ব্র্যান্ড হেডারে দেখাবে; কোনোটাই সেট না থাকলে থিমের বান্ডেল করা img/favicon.png ব্যবহার হবে, যাতে হেডার কখনো ভাঙা/খালি না দেখায়। — লোগো ও "NEWS DESK" লেখার মাঝে একটি পাতলা ভার্টিক্যাল সেপারেটর লাইন যোগ করা হয়েছে (উদাহরণে দেখানো "Logo | NEWS DESK" লেআউট অনুযায়ী)। বাস্তবায়ন: inc/admin-menu.php (smart_news_render_sidebar_extras())। ============================================================================ */ /* ============================================================================ v2.25.58 — ড্যাশবোর্ড সাইডবার সম্পূর্ণ নতুন ডিজাইনে সাজানো হলো ("TOB NEWS DESK" মকআপ অনুযায়ী, হুবহু): — সাইডবারের সবচেয়ে ওপরে আগের প্লেইন "Newsroom" রো লুকিয়ে তার জায়গায় ব্র্যান্ড হেডার বসানো হয়েছে: লাল "TOB" ব্যাজ + "NEWS DESK" লেখা, যেখানে ক্লিক করলে ড্যাশবোর্ডে যাওয়া যায় (index.php)। — প্রতিটি মেনু আইটেম (News, Staff, Design, Settings, System, Collapse Menu) এখন গোল-কোনা নীল আইকন ব্যাজ + বোল্ড আপারকেস লেবেল সহ দেখায়; বর্তমান/অ্যাক্টিভ আইটেমে নীল লেফট-অ্যাকসেন্ট বার ও হাইলাইট করা কার্ড। — মেনুর ঠিক নিচে একটি লাইভ তারিখ/সময়/আবহাওয়া প্যানেল যুক্ত হয়েছে (ডিভাইসের প্রকৃত ঘড়ি থেকে সময়; আবহাওয়া ঢাকার জন্য বিনামূল্যের, কী ছাড়া কাজ করা Open-Meteo API থেকে)। — সবচেয়ে নিচে একটি আলাদা LOGOUT কার্ড এবং তার নিচে একটি পাতলা লাল ব্র্যান্ড স্ট্রিপ যুক্ত হয়েছে। বাস্তবায়ন: inc/admin-menu.php (দেখুন smart_news_sidebar_redesign_css() এবং smart_news_render_sidebar_extras())। শুধু wp-admin সাইডবার স্টাইল/ মার্কআপ পরিবর্তিত হয়েছে — সাইটের ফ্রন্ট-এন্ডে কোনো প্রভাব পড়েনি। ============================================================================ */ /* ============================================================================ v2.25.57 — ফুটারের নিচে (পেজের একদম শেষে) দেখা যাওয়া অবাঞ্ছিত হরাইজন্টাল স্ক্রলবার-সদৃশ সরু বার সম্পূর্ণ বন্ধ করা হলো। কারণ: header.php-এর .dg_menu_row (ক্যাটাগরি মেনু-বার রো)-কে v2.25.37-এ width:100vw + margin-left/right:calc(50% - 50vw) কৌশল দিয়ে হেডারের max-width কন্টেইনার থেকে "ব্রেক আউট" করানো হয়েছিল, যাতে বর্ডার/ ব্যাকগ্রাউন্ড সবসময় পুরো ভিউপোর্ট-প্রস্থ জুড়ে যায়। সমস্যা হলো: 100vw ইউনিটে ব্রাউজারের নিজস্ব ভার্টিক্যাল স্ক্রলবারের প্রস্থও (সাধারণত ~15-17px) যোগ হয়ে যায় — তাই এলিমেন্টটি প্রকৃত দৃশ্যমান ভিউপোর্টের চেয়ে সামান্য চওড়া হয়ে যাচ্ছিল, যার ফলে পুরো পেজেই একটি অতিরিক্ত/ ভুয়া হরাইজন্টাল স্ক্রলবার তৈরি হচ্ছিল। যেহেতু এই বাগ পুরো পেজ-লেভেলে কাজ করে, ব্রাউজার সেটিকে সবসময় পেজের একদম নিচে (অর্থাৎ ফুটারের পরে) দেখাতো — দেখতে অনেকটা ফুটারের নিচে একটি বাড়তি ধূসর বার/স্ক্রলবারের মতো। এর আগে overflow-x:hidden সেফটি-নেট শুধু @media (max-width:767px) ব্লকের ভেতরে (শুধু মোবাইলে) সেট করা ছিল — ডেস্কটপ ও ট্যাবলেট ভিউতে কোনো সুরক্ষা ছিল না, তাই সেখানেই বাগটি ধরা পড়ছিল। সমাধান: html ও body উভয়েতেই (নিচের নতুন গ্লোবাল রুলে) সব স্ক্রিন সাইজে overflow-x:hidden এবং max-width:100% যোগ করা হলো। এতে .dg_menu_row-এর ফুল-উইথ ব্রেক-আউট ভিজ্যুয়ালি অবিকল আগের মতোই কাজ করে (মেনু-বারের বর্ডার/ব্যাকগ্রাউন্ড এখনও পুরো ভিউপোর্ট জুড়ে যায়, লেআউট/অ্যালাইনমেন্টে কোনো পরিবর্তন নেই) — শুধু স্ক্রলবার-উইথ থেকে তৈরি হওয়া কয়েক পিক্সেলের বাড়তি অংশ ক্লিপ হয়ে যায়, ফলে অবাঞ্ছিত হরাইজন্টাল স্ক্রলবারটি আর কখনো দেখা যাবে না — ডেস্কটপ, ট্যাবলেট ও মোবাইল, সব ভিউপোর্টেই। ============================================================================ */ /* ============================================================================ v2.25.56 — আসল কারণ ধরে ফিক্স: "Single Post Title Format" (Post Title only) সিলেক্ট করেও সোশ্যাল মিডিয়ায় (Facebook/WhatsApp/Twitter) এখনো "Post Title - Site Name" ফরম্যাটেই শেয়ার হওয়ার (ইউজার-রিপোর্টেড) বাগ সমাধান করা হলো। কারণ #১ (নতুন পোস্ট / রিসেভ করা পোস্ট): SEO Management ট্যাবের "SEO Title" ইনপুট ফিল্ড আগে সবসময় ব্রাউজারে আগের সেভ করা মান (অটো-জেনারেট হলেও) দিয়ে prefill হতো। ফলে অ্যাডমিন এই ট্যাব স্পর্শ না করেই পোস্ট "Update" করলেও ব্রাউজার সেই প্রি-ফিল্ড টেক্সটটাই আবার সাবমিট করত, আর সার্ভার সেটাকে খালি না দেখে "ম্যানুয়াল কাস্টম টাইটেল" ধরে চিরতরে ফ্রিজ করে ফেলত — এরপর Title Separator/Format যা-ই বদলানো হোক না কেন, ওই পোস্টে আর প্রতিফলিত হতো না। এখন এই ফিল্ড অটো-জেনারেট করা অবস্থায় খালিই থাকে (লাইভ মানটা শুধু placeholder-এ প্রিভিউ হিসেবে দেখানো হয়), তাই স্বাভাবিকভাবে Update করলে খালিই সাবমিট হয় এবং সার্ভার প্রতিবার লাইভ সেটিং দিয়ে ফ্রেশ regenerate করে। js/admin-meta.js-এর পেজ-লোডের পরের "নীরব" অটো-প্রিভিউ কলও (কোনো বাটন-ক্লিক ছাড়া) এখন আর ফিল্ডের আসল value-তে টেক্সট বসায় না — শুধু placeholder আপডেট করে; শুধু "Auto Generate" বাটনে সরাসরি ক্লিক করলেই (ইচ্ছাকৃত অ্যাকশন) আসল মান বসে। কারণ #২ (আগে থেকে পাবলিশড পুরনো পোস্ট): "এই ফিক্সের আগে সেভ হওয়া" পোস্টগুলোর জন্য একটা ব্যাকওয়ার্ড-কম্প্যাটিবিলিটি সেফটি-নেট ছিল যা স্টোর করা SEO Title-কে চিরকালের জন্য "ম্যানুয়াল" ধরে অক্ষুণ্ণ রাখত, Title Format বদলানো হলেও। এখন stored মানটা Post/Site Name-এর কোনো পরিচিত Separator+Format কম্বিনেশনের (Post Title only / Post Title SEP Site / Site SEP Post Title, ৬টা সেপারেটরের যেকোনোটাসহ) সাথে হুবহু মিললে সেটাকে "লিগ্যাসি অটো-জেনারেটেড" ধরে নেওয়া হয় (কারণ থিমের পুরনো কোড ঠিক এভাবেই টাইটেল তৈরি করত) — এডিটরের নিজের হাতে টাইপ করা সত্যিকারের কাস্টম টাইটেল থেকে আলাদা। ফলে পুরনো পোস্টগুলোও এখন Title Format বদলালে সাথে সাথে (আবার সেভ না করেই) হালনাগাদ হয়ে যায় — ট্যাগ ও সোশ্যাল শেয়ার (og:title/twitter:title) দুই জায়গাতেই। যে পোস্টের SEO Title সত্যিকার অর্থেই একটা ভিন্ন, ইচ্ছাকৃতভাবে লেখা হেডলাইন (উপরের কোনো প্যাটার্নের সাথে না মেলা), সেটা আগের মতোই অক্ষুণ্ণ থাকে — জোর করে বদলানো হয় না। ============================================================================ */ /* ============================================================================ v2.25.55 — SEO ফিক্স: "Title Separator" ও "Single Post Title Format" সিলেক্ট করেও কোনো প্রভাব না পড়ার (ইউজার-রিপোর্টেড) বাগ সমাধান করা হলো এবং Post-এর বাইরে অন্যান্য কনটেন্ট-টাইপের জন্যও আলাদা Title Format অপশন যোগ করা হলো (Theme Options → SEO): • Page Title Format • Category Title Format • Tag Title Format • Location Title Format • Reporter/Author Title Format কারণ: আগে <title> ট্যাগ ও og:title/twitter:title-এ শুধু Post-এর ক্ষেত্রেই Title Separator/Format লাইভভাবে প্রয়োগ হতো (smart_news_seo_format_title())। Page, Category, Tag, Location আর্কাইভ ও Reporter/Author আর্কাইভে কোনো ম্যানুয়াল SEO Title না দিলে সরাসরি WordPress কোরের নিজস্ব ডিফল্ট টাইটেল ফরম্যাট/সেপারেটর ("Term Name – Site Name") ব্যবহার হতো — Theme Options-এ যা-ই সিলেক্ট করা হোক না কেন। এখন inc/seo.php-তে একটি সাধারণ (জেনেরিক) ফরম্যাটার (smart_news_seo_format_title_generic()) যোগ করা হয়েছে এবং pre_get_document_title ফিল্টার + og:title/twitter:title আউটপুট — দুই জায়গাতেই Page/Category/Tag/Location/Reporter-Author, প্রতিটির নিজস্ব ফরম্যাট অপশন এবং একই Title Separator সেটিং সবসময় লাইভভাবে প্রয়োগ করে (ম্যানুয়াল SEO Title থাকুক বা না থাকুক)। প্রতিটির জন্য তিনটি অপশন: "শুধু নিজের নাম", "নিজের নাম + Separator + সাইটের নাম", "সাইটের নাম + Separator + নিজের নাম"। ============================================================================ */ /* ============================================================================ v2.25.54 — Theme Options → Homepage → "Add Location" ট্যাবের উপরে থাকা অতিরিক্ত ব্যাখ্যামূলক টেক্সট ("Section 2-এর লোকেশন ফিল্টার বারে... নিজের পছন্দমতো নাম/স্টাইল লিখুন। কোনো বক্স খালি রাখলে...") সরিয়ে ফেলা হলো, যাতে প্যানেলটি আরও পরিষ্কার দেখায়। ফিল্ডগুলোর কার্যকারিতা (Level 1/2/3 Label ও Search Button Text, খালি রাখলে ডিফল্ট বাংলা নাম ব্যবহার) অপরিবর্তিত আছে। ============================================================================ */ /* ============================================================================ v2.25.53 — Smart SEO Engine মেটাবক্স (inc/seo.php) থেকে "Canonical URL" ও "Exclude this post from search engines (noindex)" ফিল্ডের নিচের অতিরিক্ত ব্যাখ্যামূলক হিন্ট-টেক্সট লাইন দুটি (sn-field-hint) সরিয়ে ফেলা হলো, যাতে প্যানেলটি আরও পরিষ্কার ও ঝরঝরে দেখায়। ফিল্ড দুটির কার্যকারিতা অপরিবর্তিত আছে — শুধু নিচের বাড়তি ব্যাখ্যা বাদ দেওয়া হয়েছে। ============================================================================ */ /* ============================================================================ v2.25.52 — ক্যাটাগরি, লোকেশন ও ট্যাগ — এই তিনটি ব্লক হেডারেই (.sn-cat-block-wrap, .sn-loc-block-wrap, .sn-tag-block-wrap) এখন উপরে ১৫px প্যাডিং (padding-top) যোগ করা হলো। পাশাপাশি এই তিন পেজের মূল কন্টেইনারেও (.subcat_archive_container, .location_archive_container, .tag_archive_container) নিচে অর্থাৎ ফুটারের দিকে ১৫px প্যাডিং (padding-bottom) যোগ করা হলো — ডেস্কটপ ও মোবাইল (≤600px) উভয় ভার্সনেই। ============================================================================ */ /* ============================================================================ v2.25.51 — লোকেশন আর্কাইভ পেজের (taxonomy-location.php) পুরনো ব্লক ডিজাইন (গোল আইকন/ছবি হেডার + "লোকেশন আর্কাইভ" সাবটাইটেল + archieve_top_cat/subcat_left/subcat_right ক্লাস-ভিত্তিক পুরনো ৩-পোস্ট/১৫-পোস্ট লিস্ট লেআউট) সম্পূর্ণ মুছে ফেলা হলো। এখন লোকেশন পেজ ক্যাটাগরি পেজের (category.php + inc/sub-category-template.php) ব্লক ডিজাইন হুবহু কপি করে ব্যবহার করে — ব্লক-হেডার (inc/archive-block-header.php-এ নতুন location শাখা, .sn-loc-block-wrap), লিড পোস্ট + দুই কলাম গ্রিড + AJAX "আরও দেখুন" বাটন (নতুন inc/location-template.php + inc/location-grid-load-more.php/.js, নিজস্ব sn-loc-* ক্লাস/action সহ যাতে ক্যাটাগরি/ট্যাগ পেজের লোড-মোরের সাথে সংঘর্ষ না হয়) এবং ডান পাশে স্টিকি সাইডবার (বিজ্ঞাপন + "সর্বশেষ")। ফলাফল: লোকেশন পেজ এখন ক্যাটাগরি পেজের সাথে হুবহু একই রকম দেখায়। ============================================================================ */ /* ============================================================================ v2.25.50 — নতুন ফিচার: Homepage Section 2-এর "সারাদেশ" লোকেশন ফিল্টার বারে (বিভাগ / জেলা / উপজেলা ড্রপডাউন ও "খুঁজুন" সার্চ বাটন) এখন কাস্টম নাম/স্টাইল লেখা যাবে। নতুন ট্যাব: Theme Options -> Homepage -> Add Location - Level 1 Label (ডিফল্ট: বিভাগ) - Level 2 Label (ডিফল্ট: জেলা) - Level 3 Label (ডিফল্ট: উপজেলা) - Search Button Text (ডিফল্ট: খুঁজুন) প্রতিটি বক্স খালি রাখলে সেটির জন্য ডিফল্ট বাংলা নামই ব্যবহৃত হবে — অর্থাৎ কিছু না করলে আগের মতোই বিভাগ/জেলা/উপজেলা/খুঁজুন দেখাবে। পরিবর্তন করলে ড্রপডাউন প্লেসহোল্ডার, AJAX-এ লোড হওয়া জেলা/উপজেলা রিসেট প্লেসহোল্ডার এবং সার্চ বাটনের টেক্সট — সবজায়গায় নতুন নামটি প্রতিফলিত হবে (দেখুন template-parts/section-two.php)। পাশাপাশি একটি ছোট, পুরনো (থিমের সাথেই আসা) বাগ ঠিক করা হলো: template-parts/section-two.php ফাইলের একদম শুরুতে একটি অকার্যকর "<?>" ট্যাগ ছিল (আসল "<?php" ট্যাগের ঠিক আগে), যা মুছে ফেলা হলো। ============================================================================ */ /* ============================================================================ v2.25.49 — বাগ ফিক্স: "Photo Card" সেকশন Enable/Disable করা যাচ্ছিলো না — অ্যাডমিন প্যানেলে এর কোনো টগলই ছিল না, এবং v2.25.47-এর Show/Hide ফিল্টার চালু হওয়ার পর এটিকে ভুলবশত সবসময় Disabled ধরে হাইড করে দেওয়া হচ্ছিলো। কারণ: inc/section-manager.php -> smart_news_get_sections() এ 'photo-card' ছিল, কিন্তু অ্যাডমিন UI ও Show/Hide তালিকা তৈরি করা inc/theme-options.php -> smart_news_homepage_sections() এ ছিল না — ফলে Photo Card কখনোই কোনো টগল হিসেবে দেখা যেতো না, আর homepage- section['Show']-এ কখনো ঢুকতেও পারতো না। সমাধান: ১) smart_news_homepage_sections() ও ডিফল্ট homepage-section['Show'] তালিকায় 'photo-card' যোগ করা হলো — এখন Homepage Manager/Layout উভয় ট্যাব থেকেই এটি Enable/Disable করা যাবে। ২) ভবিষ্যতে এমন কোনো সেকশন যোগ হলে একই সমস্যা যেন আর না হয়, তাই smart_news_get_section_order()-এর ফিল্টার লজিক পুরোপুরি বদলে দেওয়া হলো: আগে "Show তালিকায় আছে কিনা" (intersect) দেখে সেকশন দেখানো হতো, এখন "Hide তালিকায় স্পষ্টভাবে আছে কিনা" দেখে বাদ দেওয়া হয় — Show/Hide কোথাও উল্লেখ নেই এমন সেকশন এখন থেকে ডিফল্টভাবে Enabled/দৃশ্যমান থাকবে, পুরনো সাইটেও কোনো নতুন সেকশন হুট করে হাইড হয়ে যাবে না। অ্যাডমিন প্যানেলের রেন্ডারিংও (theme-options.php -> smart_news_render_options_page()) একইভাবে আপডেট করা হলো, যাতে টগলের checked/unchecked অবস্থা হোমপেজে যা দেখানো হচ্ছে তার সাথে সবসময় মিলে থাকে। ============================================================================ */ /* ============================================================================ v2.25.48 — মূল বাগ ফিক্স (আসল কারণ): Theme Options ফর্মে "Homepage Manager" ও "Homepage Layout" — এই দুই ট্যাবেই প্রতিটি সেকশনের জন্য হুবহু একই name="section_show[...]" / name="section_order[...]" ফিল্ড রেন্ডার হতো। একই ফর্মে ডুপ্লিকেট-নামের ফিল্ড থাকায় সেভ করার সময় DOM-এ যেটা পরে থাকে (Homepage Layout) সেটাই আগেরটাকে (Homepage Manager) ওভাররাইট করে দিতো — ফলে "Homepage Manager" ট্যাব থেকে কোনো সেকশন Disable করলে সেটি সেভ হয়েও, ফর্ম সাবমিটের মুহূর্তেই আবার Enabled অবস্থায় ফিরে যেতো এবং হোমপেজে হাইড হতো না। সমাধান: "Homepage Manager" গ্রিডের টগলকে ভিজ্যুয়াল-অনলি করা হয়েছে (name attribute বাদ দিয়ে) এবং inc/admin-options.js-এ দুই ট্যাবের টগল একে অপরের সাথে two-way sync করা হয়েছে — তাই এখন যেকোনো ট্যাব থেকে Disable করলেই তা নির্ভরযোগ্যভাবে সেভ ও হোমপেজে প্রতিফলিত হবে। (এর আগে v2.25.47-এ smart_news_get_section_order() ফাংশনেও একটি সম্পর্কিত বাগ ফিক্স করা হয়েছিলো — Show/Hide তালিকা এখন সঠিকভাবে অর্ডার লিস্টের সাথে মিলিয়ে ফিল্টার হয়।) ============================================================================ */ /* ============================================================================ v2.25.47 — বাগ ফিক্স: Homepage Layout ম্যানেজার থেকে কোনো Section Disabled (টগল অফ) করলেও সেটি হোমপেজে হাইড হচ্ছিলো না। কারণ: inc/section-manager.php -> smart_news_get_section_order() ফাংশনটি হোমপেজের সেকশন-অর্ডার ঠিক করার জন্য আলাদাভাবে সংরক্ষিত 'smart_news_section_order' অপশন থেকে ডেটা রিটার্ন করতো, যেখানে থিম অ্যাক্টিভেশনের সময় থেকেই *সবগুলো* সেকশন (Enabled/Disabled নির্বিশেষে) জমা থাকতো। ফলে Homepage Layout ট্যাব থেকে টগল অফ করে "Hide" করা সেকশনও index.php-এর লুপে দেখানো হয়ে যাচ্ছিলো, কারণ ফাংশনটি Show/Hide স্ট্যাটাস মোটেও যাচাই করতো না। সমাধান: এখন smart_news_get_section_order() থিম অপশনে সংরক্ষিত homepage-section['Show'] তালিকার সাথে ইন্টারসেক্ট করে শুধুমাত্র Enabled সেকশনগুলোই রিটার্ন করে — Disabled সেকশন (এবং তার বিজ্ঞাপন স্লট) আর হোমপেজে দেখানো হবে না, অর্ডার/পজিশন যেটাই সংরক্ষিত থাকুক না কেন। ============================================================================ */ /* ============================================================================ v2.25.46 — SEO আরও উন্নত করা হলো: ১) মূল বাগ ফিক্স: "Title Separator" ও "Single Post Title Format" কাজ না করা। কারণ ছিল — SEO Title ফিল্ড খালি রেখে পোস্ট সেভ করলে একটা হার্ডকোডেড ফরম্যাটের টাইটেল posts meta-তে স্থায়ীভাবে বসে যেত (Theme Options-এর Separator/Format সেটিং উপেক্ষা করে), আর একবার সেভ হলে সেটাকে "ম্যানুয়াল" মান ধরে নেওয়ায় পরে সেটিং বদলালেও আর প্রতিফলিত হতো না। এখন অটো-জেনারেটেড টাইটেল সবসময় লাইভ Separator/Format ব্যবহার করে তৈরি হয় (নতুন "_sn_seo_title_is_auto" ফ্ল্যাগ দিয়ে ম্যানুয়াল বনাম অটো টাইটেল আলাদা করা হয়) — এডিটরের হাতে টাইপ করা কাস্টম টাইটেল আগের মতোই কখনো ওভাররাইট হয় না। ২) "noindex on Category/Archive" সেটিং যাচাই করে দেখা গেছে মূল লজিক সঠিক আছে; বাড়তি নির্ভরযোগ্যতার জন্য HTML <meta name="robots"> ট্যাগের পাশাপাশি একই নির্দেশনা এখন HTTP X-Robots-Tag হেডারেও পাঠানো হয় (কিছু ক্যাশিং লেয়ার/CDN <head> ঠিকমতো পাস-থ্রু না করলেও কাজ করবে)। ৩) নতুন: প্রতিটি পোস্টে আলাদা "Canonical URL" ফিল্ড (সিন্ডিকেটেড/ পুনঃপ্রকাশিত খবরের জন্য — BSS/UNB/AP ইত্যাদি) ও "Exclude from search engines (noindex)" টগল (গ্লোবাল সেটিং না বদলিয়ে একটা নির্দিষ্ট পোস্ট বাদ দিতে)। ৪) নতুন: og:image:type ও article:author মেটা ট্যাগ যোগ (আগে ডকুমেন্টেশনে দাবি করা হলেও আসলে প্রিন্ট হতো না)। ============================================================================ */ /* ============================================================================ v2.25.45 — সোশ্যাল ওয়াটারমার্ক ফিক্স: Facebook-এ শেয়ার করলে ওয়াটারমার্ক ব্যান্ড কেটে/নিচে চলে যাওয়ার সমস্যা সমাধান। কারণ: শেয়ার-প্রিভিউ ছবি (og:image) আগে ফিচার্ড ইমেজের নিজস্ব অনুপাতেই কম্পোজিট হতো এবং ওয়াটারমার্ক ব্যান্ড তার একদম নিচের কিনারে বসত। ফিচার্ড ছবির অনুপাত Facebook/WhatsApp-এর প্রত্যাশিত og:image অনুপাত (1.91:1, ≈1200×630) থেকে বেশি আলাদা হলে (প্রায়- স্কয়ার বা পোর্ট্রেট-ধাঁচের ছবি), Facebook/WhatsApp নিজেই প্রিভিউ বক্সে ফিট করাতে ছবিটি সেন্টার-ক্রপ করে ফেলত — আর ঠিক নিচের কিনারে বসানো ওয়াটারমার্ক ব্যান্ডটাই সবার আগে কাটা পড়ত। সমাধান (দেখুন inc/social-watermark.php): ১) কম্পোজিট ছবির ক্যানভাস এখন শুরু থেকেই FB-প্রত্যাশিত অনুপাতে (1200×630) ফিক্সড — মূল ছবির অনুপাত যাই হোক না কেন। মূল ছবি "cover" পদ্ধতিতে (প্রয়োজনে সেন্টার-ক্রপ করে, বিকৃত না করে) এই এরিয়া ভরিয়ে বসে, ওয়াটারমার্ক ব্যান্ড তার ঠিক নিচে — ফলে পুরো কম্পোজিট ছবিটাই আগে থেকে FB-এর প্রত্যাশিত অনুপাতে থাকায় আর অতিরিক্ত ক্রপ হয় না। ২) og:image:width/height মেটা ট্যাগে এখন কম্পোজিট ছবির প্রকৃত মাপ সঠিকভাবে বসানো হয় (আগে ইচ্ছাকৃতভাবে বাদ দেওয়া হতো) — Facebook/ WhatsApp আগে থেকেই সঠিক মাপ জেনে অনুমান-ভিত্তিক ক্রপ না করে। ৩) পুরোনো (আগের অনুপাতে জেনারেট হওয়া) ক্যাশড কম্পোজিট ছবি এড়াতে ক্যাশ-কী সল্ট বদলানো হলো, তাই সব পোস্টের জন্য পরের শেয়ারে নতুন করে কম্পোজিট জেনারেট হবে। নোট: এরপরও আগে-শেয়ার-হওয়া লিংকে Facebook পুরনো প্রিভিউ ক্যাশে রাখতে পারে — মেটাবক্সে দেখানো Facebook Sharing Debugger লিংক থেকে "Scrape Again" চাপলে নতুন প্রিভিউ দেখা যাবে। ============================================================================ */ /* ============================================================================ v2.25.44 — দুটি এডিটর মেটা-বক্স ফিক্স/উন্নতি: ১) Featured Image মেটা-বক্স: প্রিভিউ ছবি + Upload/Remove বাটন গ্রুপটি আগে .photo-preview-box-এর justify-content:center-এর কারণে বক্সের মাঝখানে বসত। এখন শুধু এই Featured Image রো-তে (.photo-featured-row .photo-preview-box) justify-content:flex-start যোগ করে বামে বসানো হলো। Content Image/Photo Gallery রিপিটার রো এবং রিপোর্টার-ছবির প্রিভিউ (যেগুলো একই .photo-preview-box ক্লাস শেয়ার করে কিন্তু .photo-featured-row-এর ভেতরে নয়) অপরিবর্তিত — আগের মতোই কেন্দ্রে। বিস্তারিত কমেন্ট: inc/post-meta-boxes.php। ২) Advanced SEO & Rank Management → Slug ফিল্ড: WordPress কোর sanitize_title()-এর ভেতরে বাংলা/অ-ল্যাটিন স্ল্যাগ ডাটাবেসে পার্সেন্ট- এনকোড করে সেভ করে (যেমন %e0%a6%89%e0%a6%a6...) — এটা কোরের নিজস্ব স্বাভাবিক আচরণ, ভ্যালিড URL-এর জন্য দরকারি। কিন্তু আগে সেই এনকোডেড মান সরাসরি Slug ইনপুটে বসানো হতো, ফলে পোস্ট পাবলিশ করে আবার এডিট করতে গেলে ফিল্ডে গিবারিশ দেখাত, আর js/admin-meta.js-এর কিওয়ার্ড- ম্যাচ চেক (Focus Keyword বনাম Slug) এনকোডেড টেক্সটে কখনো মিলত না, তাই সবুজ ডট আর দেখাত না। এখন PHP সাইডে urldecode() দিয়ে ফিল্ডে সবসময় পাঠযোগ্য বাংলা স্ল্যাগ দেখানো হচ্ছে — ঠিক যেমন WordPress কোরের নিজস্ব পারমালিংক-এডিটর করে (DB-তে এনকোডেড, UI-তে ডিকোডেড)। সেভ-লজিক (sanitize_title দিয়ে আবার এনকোড করে post_name আপডেট) অপরিবর্তিত রইলো — শুধু রিড/ডিসপ্লে সাইড ঠিক হলো। বিস্তারিত কমেন্ট: inc/seo.php, smart_news_render_seo_tab()। ============================================================================ */ /* ============================================================================ v2.25.43 — প্রিন্ট ভিউতে হেডারে শুধু লোগো থাকবে, আর কিছু না (তারিখ, সোশ্যাল আইকন, সার্চ/মেনু আইকন, ক্যাটাগরি মেনু-বার, ডেস্কটপ ড্রপডাউন প্যানেল, হেডার বিজ্ঞাপন — সব বাদ)। নতুন @media print রুলগুলো header.php-এর ইনলাইন <style> ব্লকের একদম শেষে যোগ করা হয়েছে (style.css-এ নয়) — কারণ হেডারের মোবাইল/ডেস্কটপ ব্লক টগল করার .bottom_nav { display:flex !important } (৯৭৯px-এর নিচের) রুলটিও ওই একই ইনলাইন ব্লকে আছে, এবং সমান specificity-র !important রুলে সোর্স-অর্ডারে পরের রুলটি জেতে — তাই style.css-এ রাখলে পুরনো .bottom_nav হাইড রুলটি (নিচে দেখুন) কার্যকর হতো না। বিস্তারিত কমেন্ট header.php-এর নতুন @media print ব্লকে। ============================================================================ */ /* ============================================================================ v2.25.42 — সাইটজুড়ে ব্যবহৃত সাধারণ .sidebar_ad (sidebar.php, হোমপেজের সেকশন-দুই, Photo-Card.php ইত্যাদিতে ব্যবহৃত বিজ্ঞাপন-বক্স) এখন বামে/ডানে কোনো প্যাডিং নেবে না — শুধু উপরে-নিচে 10px প্যাডিং অপরিবর্তিত থাকছে (আগে padding:10px চারদিকেই ছিল, এখন padding:10px 0)। ফলে বিজ্ঞাপন/ছবিটি তার প্যারেন্ট কন্টেইনারের (যেমন সাইডবার, ৩০০px) পুরো প্রস্থ জুড়ে বসবে, বামে/ডানে কোনো ফাঁকা মার্জিন থাকবে না। .sidebar_ad img/a/iframe/ins-এর width:400px !important + max-width:100% রুলটি অপরিবর্তিত, তাই কন্টেইনার ছোট হলে বিজ্ঞাপনটি এমনিতেই responsive ভাবে সংকুচিত হবে। এই পরিবর্তনের ফলে v2.25.40-এ যোগ করা স্কোপড .drop_nav_menu .sidebar_ad { padding-left:0; padding-right:0 } রুলটি এখন রিডানড্যান্ট হয়ে যাওয়ায় বাদ দেওয়া হয়েছে (নিচে .drop_nav_menu রুলের ঠিক পরে দেখুন) — আচরণ অভিন্ন, শুধু ডুপ্লিকেট CSS সরানো হলো। v2.25.41-এ যোগ করা 'drop_nav' বিজ্ঞাপন-স্লটের markup/থিম-অপশন কোনোটাই এই পরিবর্তনে বদলায়নি। ============================================================================ */ /* ============================================================================ v2.25.41 — আগের v2.25.40-এ .drop_nav_menu .sidebar_ad-এর বাম/ডান প্যাডিং বাদ দেওয়া হলেও কার্যকর প্রভাব দেখা যাচ্ছিল না, কারণ .drop_nav_menu-এর ভেতরে .sidebar_ad ক্লাসের কোনো এলিমেন্টই ছিল না — header.php-এর ড্রপডাউন মেনু মার্কআপে কখনো কোনো বিজ্ঞাপন রেন্ডার করা হতো না। এখন প্রকৃতপক্ষে একটি নতুন বিজ্ঞাপন লোকেশন যোগ করা হয়েছে: ১) inc/helpers.php → smart_news_ad_manager_locations()-এ 'drop_nav' লোকেশন যোগ; inc/theme-options.php-এ ডিফল্ট ad_manager অ্যারেতে 'drop_nav' => array() যোগ (সেভ-হ্যান্ডলার আগে থেকেই জেনেরিক, $field['location'] অনুযায়ী কাজ করে বলে আলাদা কোড লাগেনি)। ২) Theme Options → Advertisements → Header Ad ট্যাবে "Dropdown Menu Ad Boxes" নামে নতুন একটি ad_manager ফিল্ড যোগ করা হয়েছে (id: ad_manager_drop_nav, location: drop_nav) — অ্যাডমিন এখান থেকে ছবি/কোড/শর্টকোড বিজ্ঞাপন যোগ করতে পারবেন। ৩) header.php-এর উভয় .drop_nav_menu ব্লকে (ডেস্কটপ #dg_desktop_menu_panel এবং মোবাইল #panel) মেটা-বার (লোকেশন+তারিখ)-এর ঠিক নিচে <div class="sidebar_ad"><?php smart_news_render_ad_slot('drop_nav', 1); ?></div> যোগ করা হয়েছে — অন্য সব sidebar_ad ব্যবহারের সাথে ধারাবাহিক প্যাটার্ন। এখন v2.25.40-এর .drop_nav_menu .sidebar_ad { padding-left:0; padding-right:0 } রুলটি প্রকৃত এলিমেন্টে প্রযোজ্য হবে — বিজ্ঞাপনটি ড্রপডাউন প্যানেলের পুরো প্রস্থ জুড়ে (বাম/ডান কোনো প্যাডিং ছাড়া) বসবে, উপরে-নিচে 10px প্যাডিং বজায় থাকবে। থিম অপশনে কিছু সেভ না করা পর্যন্ত বক্সটি খালি থাকবে ও কোনো markup আউটপুট হবে না (অন্যান্য sidebar_ad স্লটের মতোই)। ============================================================================ */ /* ============================================================================ v2.25.40 — .drop_nav_menu-এর ভেতরে .sidebar_ad-এর বামে/ডানে প্যাডিং বাদ দেওয়া হয়েছে (বিস্তারিত নিচে .drop_nav_menu .sidebar_ad রুলের ঠিক উপরের কমেন্টে)। উপরে-নিচে 10px প্যাডিং অপরিবর্তিত; সাইটের অন্য কোথাও ব্যবহৃত সাধারণ .sidebar_ad-এ কোনো প্রভাব নেই। ============================================================================ */ /* ============================================================================ v2.25.39 — ডেস্কটপ ড্রপডাউন মেনু (.drop_menu, #dg_desktop_menu_panel / #panel) বাম দিকে সরে যাওয়ার বাগ ফিক্স: v2.25.37-এ .dg_menu_row-কে position:relative + width:100vw + নেগেটিভ মার্জিন (calc(50% - 50vw)) দিয়ে ভিউপোর্ট-প্রস্থে "ব্রেক আউট" করানো হয়েছিল, যাতে রো-এর বর্ডার/ব্যাকগ্রাউন্ড পুরো স্ক্রিন জুড়ে যায়। কিন্তু .drop_menu (এবং .fixed) হলো position:absolute + margin:auto দিয়ে সেন্টার করা — অথচ এতে left/right সেট করা ছিল না। CSS স্পেকে, left ও right উভয়ই auto থাকলে margin:auto কখনো সেন্টার করে না; এলিমেন্টটি তার "static position"-এ বসে যায়, যা এখন .dg_menu_row-এর নতুন ভিউপোর্ট-প্রস্থ কন্টেইনারের বাম প্রান্তের কাছাকাছি পড়ছিল — ফলে মেনু-প্যানেলটি সাইটের মার্জিন উপেক্ষা করে বাম দিকে সরে গিয়েছিল। সমাধান: .drop_menu ও .fixed উভয়েই left:0; right:0; যোগ করা হয়েছে, যাতে margin:auto আবার সঠিকভাবে কাজ করে। যেহেতু .dg_menu_row এখন পূর্ণ ভিউপোর্ট-প্রস্থ এবং সাইটের মূল কন্টেন্ট কলামও ভিউপোর্টে কেন্দ্রীভূত, তাই এই সেন্টারিং সাইটের প্রকৃত পেজ-মার্জিনের সাথে হুবহু মিলে যায় — ডেস্কটপ ও মোবাইল উভয় ড্রপডাউনেই ফিক্সড। ============================================================================ */ /* ============================================================================ v2.25.38 — হেডারে বাংলা তারিখ (বঙ্গাব্দ) কোনো প্লাগিন ছাড়াই অটো-শো বাগ ফিক্স: header.php-এর তারিখ লাইনে (ডেস্কটপ টপ-বার, মোবাইল টপ-বার, মোবাইল ড্রপডাউন মেনু — মোট ৪ জায়গায়) do_shortcode('[bangla_date]') কল করা হতো, কিন্তু থিমে এই শর্টকোড রেজিস্টার করা ছিল না — এটি একটি আলাদা প্লাগিনের উপর নির্ভরশীল ছিল, যা ইনস্টল না থাকলে স্ক্রিনে হুবহু "[bangla_date]" টেক্সট দেখাতো (বাংলা তারিখের বদলে)। এখন inc/dateEngToBanglaConverter.php-এ বাংলাদেশের সংশোধিত বঙ্গাব্দ পঞ্জিকা (২০১৯ সংস্করণ — পয়লা বৈশাখ স্থির ১৪ই এপ্রিল, প্রথম ৫ মাস ৩১ দিন, বাকিগুলো ৩০ দিন, ফাল্গুন লিপ-ইয়ার নিয়ম অনুযায়ী ২৯/৩০ দিন) অনুসরণ করে থিমের নিজস্ব গণনা যোগ করা হয়েছে এবং shortcode_exists() চেক দিয়ে [bangla_date] শর্টকোড রেজিস্টার করা হয়েছে — কোনো প্লাগিন আগে থেকে একই শর্টকোড রেজিস্টার করে রাখলে সেটিই প্রাধান্য পাবে (কনফ্লিক্ট হবে না), না থাকলে থিমের নিজস্ব গণনা ব্যবহৃত হবে। ফলাফল: হেডারে এখন সবসময় সঠিক বাংলা তারিখ (যেমন "১৫ই ভাদ্র, ১৪৩৩ বঙ্গাব্দ") অটো-শো হবে, কোনো প্লাগিনের প্রয়োজন ছাড়াই। header.php-এর কোনো কোড বদলাতে হয়নি — শুধু শর্টকোড এখন থিমের ভেতর থেকেই বৈধভাবে সংজ্ঞায়িত। ============================================================================ */ /* ============================================================================ v2.25.37 — হেডার কাস্টমাইজেশন (header.php): ১) হেডারের box-shadow সম্পূর্ণ বাদ দেওয়া হয়েছে। v2.25.36-এ যোগ করা সূক্ষ্ম শ্যাডো (0 2px 10px rgba(0,0,0,0.06)) <header class="nav_container"> ট্যাগের ইনলাইন স্টাইল থেকে মুছে ফেলা হলো — হেডার এখন সম্পূর্ণ ফ্ল্যাট, কোনো এলিভেশন/শ্যাডো ইফেক্ট ছাড়াই। ২) ডেস্কটপে .dg_menu_row (ক্যাটাগরি মেনু-বার রো)-এর border-top ও border-bottom আগে পুরো ভিউপোর্ট জুড়ে যেত না — কারণ .dg_menu_row প্যারেন্ট <header class="nav_container">-এর ভেতরে বসানো, আর .nav_container-এর নিজস্ব max-width (var(--sn-site-max-width)) ও 15px সাইড প্যাডিং থাকায় বর্ডার মাঝখানে ~1200-1280px-এ সীমাবদ্ধ থেকে যেত। এখন .dg_menu_row-কে width:100vw + margin-left/right: calc(50% - 50vw) কৌশল দিয়ে প্যারেন্ট কন্টেইনারের সীমা থেকে "ব্রেক আউট" করানো হয়েছে, ফলে ব্যাকগ্রাউন্ড ও উভয় বর্ডার এখন সবসময় পুরো ভিউপোর্ট প্রস্থ জুড়ে যায়। ভেতরের মেনু-লিংক (.dg_menu_row_inner) আগের মতোই সাইট ম্যাক্স-উইথে কেন্দ্রীভূত থাকছে (নতুন 15px প্যাডিং যোগ করে আগের অ্যালাইনমেন্ট অবিকল বজায় রাখা হয়েছে), তাই মেনু লিংকের পজিশন/স্পেসিং কিছু বদলায়নি — শুধু রো-এর ব্যাকগ্রাউন্ড/বর্ডার ফুল-উইথ হয়েছে। এই পরিবর্তন শুধু ডেস্কটপ ভিউকে প্রভাবিত করে; ৯৮০px-এর নিচে .dg_menu_row থাকা .dg_desktop_wrapper আগে থেকেই display:none। ============================================================================ */ /* ============================================================================ v2.25.36 — ভিজ্যুয়াল হায়ারার্কি/ডিজাইন কনসিস্টেন্সি পাস (প্রথম ধাপ): ১) ক্যাটাগরি/কিকার লেবেল (video/opinion/entertainment/world/lifestyle/ commerce/photo/4col সেকশন) আগে প্লেইন কালো টেক্সট ছিল — এখন থিমের ব্র্যান্ড রং (--sn-accent, #c4302b) ব্যবহার করে, যাতে প্রতিটি সেকশনের পরিচয় দ্রুত চোখে পড়ে (BBC/আল জাজিরা/প্রথম আলো-ধাঁচের "eyebrow" লেবেল স্টাইল)। ২) lifestyle ও commerce সেকশনের ফন্ট-সাইজ ছিল 24px (বাকি সব সেকশনে 22px) — এখন 22px-এ মিলিয়ে দেওয়া হয়েছে। ৩) world/lifestyle/commerce সেকশনের বাইরের margin ছিল 0 (বাকি সব সেকশনে margin: 25px 0), ফলে হোমপেজে কোথাও সেকশনের মাঝে ফাঁকা জায়গা ছিল, কোথাও ছিল না — এই তিনটি সেকশনেও এখন margin: 25px 0 করে পুরো হোমপেজে একটি অভিন্ন উলম্ব ছন্দ (rhythm) তৈরি হয়েছে। ৪) হেডারের box-shadow: none !important (header.php ইনলাইন স্টাইল) বদলে একটি সূক্ষ্ম শ্যাডো দেওয়া হয়েছে, যাতে হেডার কনটেন্ট থেকে সামান্য elevation/depth নিয়ে আলাদা করে বোঝা যায় (premium feel)। এটি একটি প্রথম, লক্ষ্যভিত্তিক ধাপ — সবচেয়ে বেশি চোখে পড়া অসামঞ্জস্যগুলো ঠিক করা হয়েছে; প্রতিটি সেকশনের নিজস্ব <style> ব্লক (৩,৫০০+ লাইন, ১৫টি আলাদা ফাইলে ছড়ানো) পুরোপুরি একটি single component system-এ মার্জ করাটা অনেক বড় কাজ, ভবিষ্যতে ধাপে ধাপে করা যেতে পারে। ============================================================================ */ /* ============================================================================ v2.25.35 — কিছু ফাইলে ট্রান্সলেশন স্ট্রিং-এ ভুল/প্লেসহোল্ডার টেক্সট-ডোমেইন ('textdomain', 'text-domain') ব্যবহার হচ্ছিল, যেখানে থিমের প্রকৃত টেক্সট ডোমেইন 'smart-news' (দেখুন উপরের হেডার)। ভুল ডোমেইনের কারণে ওই স্ট্রিংগুলো (search.php, archive.php, author.php, single-sn_reporter.php-এর পেজিনেশন prev/next টেক্সট এবং functions.php-এর কনভার্টার পেজ টাইটেল) থিমের .po/.mo ফাইল দিয়ে কখনো ট্রান্সলেট হতো না। সবগুলো এখন 'smart-news'-এ ঠিক করা হয়েছে; কোনো ফাংশনালিটি/মার্কআপ পরিবর্তন হয়নি। ============================================================================ */ /* ===================================================== ওয়েবসাইট ম্যাক্স উইথ (v2.25.16, সাইডবার লক v2.25.17) ===================================================== সাইটের মূল কনটেন্ট/সাইডবার কনটেইনারগুলোর প্রস্থ (আগে সরাসরি max-width:1200px হিসেবে হার্ডকোড করা ছিল) এখন এই একটি CSS ভ্যারিয়েবলের মাধ্যমে নিয়ন্ত্রিত হয়। ফলব্যাক মান (1200px) শুধু তখনই কাজ করবে যদি কোনো কারণে থিম অপশনের ডাইনামিক CSS (inc/helpers.php, smart_news_output_dynamic_css()) লোড না হয় — স্বাভাবিক অবস্থায় :root-এর প্রকৃত মান Theme Options → General Settings → Layout Width ট্যাবের "Website Max Width" সেটিং থেকে <head>-এ প্রিন্ট হয় এবং এই ফলব্যাককে override করে। সাইডবারের প্রস্থ (300px) ইচ্ছাকৃতভাবে ফিক্সড রাখা হয়েছে — বাম দিকের মূল কনটেন্ট কলাম flex:1 হওয়ায় প্রস্থ বাড়া/কমার পুরো পার্থক্যটুকু স্বয়ংক্রিয়ভাবে সেখানেই সমন্বয় হয়ে যায়, তাই গ্রিড/কলাম/গ্যাপ/অ্যালাইনমেন্ট কোনোটাই ভাঙে না। */ :root { --sn-site-max-width: 1280px; /* ============================================================ v2.25.36 — ইউনিফায়েড ডিজাইন টোকেন। উদ্দেশ্য: হেডার, হোমপেজের বিভিন্ন সেকশন (video/opinion/entertainment/world/lifestyle/ commerce/photo ইত্যাদি) ও কার্ড কম্পোনেন্টগুলো এতদিন যার যার মতো আলাদা <style> ব্লকে নিজস্ব রং/স্পেসিং/সাইজ ব্যবহার করছিল, ফলে সাইটজুড়ে ভিজ্যুয়াল হায়ারার্কি অসামঞ্জস্যপূর্ণ লাগছিল। এই ভ্যারিয়েবলগুলো একটি অভিন্ন রেফারেন্স হিসেবে যোগ করা হলো (নতুন/ভবিষ্যৎ CSS-এ ব্যবহারের জন্য), এবং সবচেয়ে দৃশ্যমান অসামঞ্জস্যগুলো (ক্যাটাগরি/কিকার লেবেলের রং, সেকশনের মধ্যকার গ্যাপ, হেডারের এলিভেশন) সরাসরি ঠিক করা হয়েছে — বিস্তারিত নিচে ও সংশ্লিষ্ট template-parts ফাইলগুলোর কমেন্টে। */ --sn-accent: #c4302b; /* থিমের প্রধান ব্র্যান্ড রং — এখন ক্যাটাগরি/কিকার লেবেলেও ব্যবহৃত */ --sn-accent-dark: #9a1515; --sn-text: #1a1a1a; --sn-text-muted: #6b7280; --sn-border: #e6e6e6; --sn-space-section: 25px; /* হোমপেজের প্রতিটি সেকশনের মধ্যে অভিন্ন উলম্ব গ্যাপ */ --sn-radius-sm: 6px; --sn-radius-md: 10px; --sn-shadow-header: 0 2px 10px rgba(0, 0, 0, 0.06); --sn-shadow-card-hover: 0 6px 18px rgba(0, 0, 0, 0.09); --sn-transition: 0.2s ease; } * { margin: 0; padding: 0; box-sizing: border-box } li { list-style: none } a, a:hover { text-decoration: none !important } blockquote { margin: 0 !important } img { display: block } img.wp-post-image { filter: brightness(95%); max-width: unset; } img.wp-post-image:hover { filter: brightness(110%); transition: .2s } #myBtn { display: none; z-index: 99; outline: 0; background-color: transparent; cursor: pointer; padding: 10px; position: fixed; overflow: hidden; z-index: 99999999; color: #f3151c; width: 40px; height: 40px; border: 3px solid #f3151c; line-height: 20px; right: 30px; bottom: 30px; padding-top: 2px; border-radius: 50px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out } #myBtn i { font-size: 25px; left: 0; bottom: 0; position: relative } .nav_container { max-width: var(--sn-site-max-width, 1200px); padding: 0 15px; width: 100%; margin: auto } /* মোবাইল/ছোট ট্যাবলেট রেঞ্জে (৯৭৯px পর্যন্ত) হেডারের নিজস্ব ১৫px পাশের প্যাডিং সরিয়ে দেওয়া হলো, যাতে মোবাইল হেডারের মেনু ও সার্চ আইকন দুটো স্ক্রিনের একদম কিনারা ঘেঁষে বসে — কোনো বাড়তি স্পেস/প্যাডিং না থাকে */ @media only screen and (max-width: 979px) { header.nav_container { padding-left: 0 !important; padding-right: 0 !important; } } /* আপডেট: ডেস্কটপ হেডার এখন ৩-সারির আধুনিক লেআউট — ১) তারিখ + সোশ্যাল/টুলস বার (উপরে) ২) লোগো (মাঝখানে) ৩) মূল মেনু (নিচে) */ @media only screen and (min-width:991px) { header.nav_container { display: flex; flex-direction: column; } header.nav_container .top_nav { order: 1; } header.nav_container .bottom_parent { order: 2; } header.nav_container .social_toggle_div { order: 3; } } .top_nav { background: #1a1a1a; padding: 4px 15px 4px 0; color: #fff; height: 32px; display: flex; flex-wrap: wrap } .date_time { height: max-content; display: flex } .date_time li { height: max-content; padding: 0 13px; font-size: 14px; position: relative } .top_nav .nav_menu { display: flex; flex-wrap: wrap; margin-bottom: 0 } .top_nav .nav_menu li { padding: 0 13px; font-size: 14px; position: relative } .top_nav .nav_menu li a:link, .top_nav .nav_menu li a:visited { text-decoration: none; color: #fff } .date_time li:nth-child(2)::before, .top_nav ul.nav_menu li::before { position: absolute; background-color: #fff; width: 1px; top: 5px; left: 0; content: ""; height: 14px } .social { display: flex; margin-left: auto } .social li { padding: 0 5px; font-size: 14px; color: #fff } .social li a:link i, .social li a:visited i { color: #fff } .share_tiggle { display: none } .mobile_meta_bar { display: none; } .social_toggle_div { text-align: center; display: none; height: 46px; background-color: #f3f3f3; width: 100%; padding: 6px } .social_toggle { display: flex } .flex_item { display: flex; margin: auto } .social_toggle li a { color: #fff } .social_toggle li:last-child { display: none } .social_toggle li>a>i { position: relative; text-align: center; padding-top: 6px; font-weight: 400; margin: 0 7px; height: 30px; width: 30px; font-size: 17px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50% } .social_toggle li a i.fa_md { background-color: #3b5998; box-shadow: 0 3px 10px rgba(0, 0, 0, .25) } .social_toggle li a i.tt_md { background-color: #55acee; box-shadow: 0 3px 10px rgba(0, 0, 0, .25) } .social_toggle li a i.yu_md { background-color: red; box-shadow: 0 3px 10px rgba(0, 0, 0, .25) } .social_toggle li a i.pt_md { background-color: #fa004b; box-shadow: 0 3px 10px rgba(0, 0, 0, .25) } .social_toggle li a i.in_md { background-color: #1b77b5; box-shadow: 0 3px 10px rgba(0, 0, 0, .25) } .social_toggle li a i.int_md { background: radial-gradient(circle at 30% 107%, #fdf497 0, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); box-shadow: 0 3px 10px rgba(0, 0, 0, .25) } .bottom_parent { width: auto; border-bottom: 2px solid #000; z-index: 9; position: relative; background: #fff; } .bottom_nav { display: flex; height: 70px } .bottom_nav .logo a { width: 180px; height: 70px; display: flex; align-items: center } .bottom_nav .logo a img { max-width: 100% } .nav_menu_ground { display: flex; width: 100%; z-index: 999 } .bottom_nav .nav_menu_ground ul.first_ull_menu { display: flex; margin: auto; align-items: center } .bottom_nav .nav_menu_ground ul.first_ull_menu li { font-size: 16px; padding: 0 9px; font-weight: 600; height: 70px; display: flex; align-items: center } .bottom_nav .nav_menu_ground ul.first_ull_menu li a { white-space: nowrap; text-decoration: none; color: #484848; font-weight: 700; height: 100%; display: flex; align-items: center } .bottom_nav .nav_menu_ground ul.first_ull_menu li:hover>a { color: #1e88e5 !important } .ham_burger { margin-left: auto } .ham_burger ul { display: flex; z-index: 99 } .ham_burger ul li span { padding: 0 5px; font-size: 16px; font-weight: 600; height: 70px; color: #4d4d4d; display: flex; align-items: center; cursor: pointer } .ham_burger ul li { height: 70px; display: flex; align-items: center; padding: 0 9px } .drop_menu { display: none; position: absolute; max-width: var(--sn-site-max-width, 1200px); height: auto; width: calc(var(--sn-site-max-width, 1200px) - 30px); z-index: 999; left: 0; right: 0; margin: auto } .fixed { position: fixed; background-color: #fff; top: 0; z-index: 99; max-width: var(--sn-site-max-width, 1200px); width: calc(var(--sn-site-max-width, 1200px) - 30px); left: 0; right: 0; margin: auto; box-shadow: 0 4px 3px -3px #000; border-bottom: none } .drop_nav_menu { background-color: #f7f7f7; padding: 20px; border-top: 1px solid #000 } /* v2.25.40 — .drop_nav_menu-এর ভেতরে .sidebar_ad-এ বামে/ডানে প্যাডিং বাদ দেওয়ার জন্য এখানে একটি স্কোপড ওভাররাইড রুল ছিল। v2.25.42-এ সাধারণ .sidebar_ad রুলটিই (উপরে খুঁজুন) সাইটজুড়ে বামে/ডানে প্যাডিং-শূন্য করে দেওয়ায় (padding: 10px 0) এই স্কোপড রুলটি এখন রিডানড্যান্ট — তাই বাদ দেওয়া হলো। ফলাফল অভিন্ন থাকছে, শুধু ডুপ্লিকেট CSS কমে গেল। */ .drop_menu ul:nth-child(1), .drop_menu ul:nth-child(2) { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: auto; padding-bottom: 10px; border-bottom: 1px solid #ccc } .drop_menu ul:nth-child(2) { margin-bottom: 0 } .drop_menu ul:nth-child(1) li a, .drop_menu ul:nth-child(2) li a { font-size: 16px; color: #484848; text-decoration: none; font-weight: 600; line-height: 35px } .drop_menu ul:nth-child(2) li i { margin-right: 10px } /* ============================================================================ ডেস্কটপ ড্রপডাউন মেনু (#dg_desktop_menu_panel — .dg_desktop_wrapper-এর হ্যামবার্গার আইকনে ক্লিক করলে খোলা প্যানেল) — আইকন ও টেক্সটের মাঝে আগে কোনো ফাঁকা ছিল না (আইকন টেক্সটের সাথে লেগে থাকত) এবং তালিকাটি এক কলামে (উপর-নিচ) দেখাত। এখানে ৮px ফাঁকা ও ৩-কলাম গ্রিড লে-আউট যোগ করা হলো। এই সিলেক্টর শুধু ডেস্কটপ প্যানেলকেই (#dg_desktop_menu_panel) টার্গেট করে — মোবাইল ড্রপডাউনের (#panel, ৯৯০px-এর নিচে ২-কলাম) সাথে কোনো সংঘর্ষ নেই। */ #dg_desktop_menu_panel .drop_nav_menu > ul { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: auto !important; column-gap: 24px !important; row-gap: 4px !important; } #dg_desktop_menu_panel .drop_nav_menu > ul li a { display: flex !important; align-items: center !important; gap: 8px !important; } #dg_desktop_menu_panel .drop_nav_menu > ul li.share_tiggle { grid-column: 1 / -1 !important; border-bottom: 1px solid #ccc !important; padding-bottom: 8px !important; margin-bottom: 8px !important; } .search_form { display: none; width: 100% } .search_form_inner { padding: 12.5px 0; display: flex; width: 100%; align-items: center } .screen-reader-text { position: absolute; left: -999px } #close_search, #close_search1 { border: 1px solid gray; background-color: #f80000; height: 45px; display: flex; width: 50px; border-radius: 0 5px 5px 0 } #close_search1 { margin-top: 0 } #close_search i, #close_search1 i { margin: auto } #close_search1:hover, #close_search:hover { background-color: #e21919; transition: .3s } #seachsubmit { border: 1px solid gray; position: relative; height: 45px; display: flex; background-color: #00c3ff; width: 50px } #seachsubmit:hover { background-color: #1da9d3; transition: .3s } #seachsubmit i { margin: auto } #s { padding: 9px 16px; border-radius: 5px 0 0 5px; border: 1px solid gray; width: 100% } .mobile_search { margin: 10px 0; display: flex; width: 100% } @media only screen and (max-width:1230px) { .fixed { max-width: 960px; width: 100% } .nav_container { max-width: 960px; width: 100%; padding: 0 } .drop_menu { max-width: 960px; width: 100% } .bottom_nav .nav_menu_ground ul.first_ull_menu li:last-child { display: none } } @media only screen and (max-width:990px) { .bottom_nav, .nav_container { width: 760px; margin: auto } .top_nav { height: auto } .fixed { width: 760px } .drop_menu { width: 760px } .nav_menu_ground { display: none } .ham_burger { position: relative; width: inherit; z-index: 99; background-color: #fff } .drop_menu ul:nth-child(1) { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(auto, 25px); border-bottom: 1px solid #666 } .drop_menu ul:nth-child(2) { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(auto, 25px); border-bottom: 1px solid #666; margin: 0; padding: 0 } .ham_burger ul { width: 100%; display: flex; justify-content: space-between; position: relative; margin-bottom: 0; z-index: 99; background-color: #fff } .ham_burger ul li:nth-child(1) span:nth-child(2) { display: none } .bottom_nav .logo { width: 100%; width: inherit; position: absolute; display: flex } .bottom_nav .logo a { margin: auto; z-index: 999 } .top_nav .date_time li:nth-child(1) { display: none } .date_time li::before { display: none } /* আপডেট: মোবাইলে হেডারের সম্পূর্ণ ওপরের বার (তারিখ, ক্যাটাগরি মেনু, শেয়ার আইকন) সম্পূর্ণ হাইড থাকবে — শুধু মেনু আইকন, লোগো ও সার্চ আইকন দেখা যাবে। তারিখ ও ক্যাটাগরি মেনু আইকনে ক্লিক করলে ড্রপডাউন প্যানেলের ভেতরে দেখা যাবে */ .top_nav { display: none !important; } .mobile_meta_bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; background-color: #f3f3f3; color: #333; padding: 10px 15px; font-size: 13px; border-bottom: 1px solid #e2e2e2; } .ham_burger ul li#drop_ground i.fa-bars, .ham_burger ul li#open_search i.fa-search { font-size: 22px; } .drop_category_menu_list { display: flex; flex-wrap: wrap; list-style: none; border-bottom: 1px solid #e2e2e2; } .drop_category_menu_list li { width: 50%; box-sizing: border-box; } .drop_category_menu_list li a { display: block; padding: 8px 15px; color: #222; text-decoration: none; font-size: 13px; border-bottom: 1px solid #eee; } .social { display: none } .share_tiggle { display: block; margin-left: auto; margin-bottom: 0 } /* আপডেট: শেয়ার আইকন এখন হেডারের টপবারে নয়, মেনু আইকনের ড্রপডাউনের ভেতরে একটি সাধারণ তালিকা-আইটেম হিসেবে দেখাবে */ .drop_nav_menu > ul { display: flex; flex-wrap: wrap; } .drop_nav_menu > ul li { width: 50%; box-sizing: border-box; } .drop_nav_menu > ul li a { display: flex; align-items: center; gap: 8px; } .drop_nav_menu > ul li.share_tiggle { width: 100%; margin-left: 0; border-bottom: 1px solid #ccc; padding-bottom: 8px; margin-bottom: 8px; } .drop_nav_menu > ul li.share_tiggle a { color: #1e88e5; font-weight: 700; } } .pic-loop { border-bottom: 1px solid #ccc; margin-bottom: 25px } .pic-loop a { overflow: hidden; display: block; position: relative } .pic-loop a i { position: absolute; left: 0; top: 0; z-index: 1; color: #fff; background: rgba(0, 0, 0, .5); padding: 6px 7px 5px 9px; opacity: .8; } .pic-loop img { transition: all .3s ease-out; max-width: 100%; } .pic-loop a:hover img { transform: scale(1.1); } .pic-loop a:hover i { background: #c4302b } @media only screen and (max-width:770px) { .photo_subcat_posts_grid { grid-template-columns: repeat(2, 1fr) !important } .bottom_nav, .nav_container { width: 100%; margin: auto } .ham_burger ul, .search_form { max-width: 570px; width: 100%; margin: auto } .fixed { width: 100% } .drop_menu { width: 100% } } .page_container { max-width: var(--sn-site-max-width, 1200px); width: 100%; margin: auto; padding: 0 15px } @media only screen and (max-width:1230px) { .page_container { width: 960px; margin: auto; padding: 0 15px } } @media only screen and (max-width:990px) { .page_container { width: 760px; margin: auto; padding: 0 15px } } @media only screen and (max-width:770px) { .page_container { max-width: 570px; width: 97%; margin: auto; padding: 0 10px } } article.page h2 { font-size: calc(1em + 1vw); margin: 15px 0; color: #383838; text-align: center } article.page p { font-size: calc(1em + .3vw); color: #484848; line-height: calc(1em + .5vw); margin-bottom: 30px } .home_page_ad { display: block; padding: 10px 0; margin: 0; width: 100%; text-align: center; overflow: hidden } .home_page_ad p { margin-bottom: 0; width: 100% } .home_lest_ad img { width: 100%; height: auto; max-height: 950px } .home_page_ad img, .home_page_ad a, .home_page_ad iframe, .home_page_ad ins { width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 auto !important; display: block } .home_page { max-width: var(--sn-site-max-width, 1200px); width: 100%; margin: auto; padding: 0 15px; display: flex } .home_page .home_page_left { flex: 1; min-width: 0; padding-right: 25px } .home_page .home_page_right { width: 300px; flex: 0 0 300px; padding-left: 5px } /* v2.9.4: হোমপেজে ডান সাইটবার তুলে দেওয়া হয়েছে, তাই home_page_left এখন ফুল-উইথ দেখাবে এবং সেকশনগুলোও পুরো প্রস্থ জুড়ে থাকবে */ .home_page.home_page-no-sidebar .home_page_left { flex: 1 1 100%; width: 100%; padding-right: 0 } .sidebar_ad { display: flex; justify-content: center; padding: 10px 0 } .sidebar_ad img, .sidebar_ad a, .sidebar_ad iframe, .sidebar_ad ins { width: 400px !important; aspect-ratio: 1 / 1; max-width: 100%; height: auto !important; object-fit: cover; margin: 0 auto; display: block } #id { height: auto; max-height: 250px; width: 300px; float: right; margin: 5px 0 5px 5px } .button_group { display: flex; justify-content: space-between } .button_group .leatest_btn, .button_group .popular_btn, .last_btn { font-size: 1rem; background-color: #3a495e; color: #fff; border: none; text-align: center; padding: 5px 0; width: 45%; border-radius: 5px; font-weight: 700; cursor: pointer } .buttonfixed, .popular_btn { background-color: transparent !important; color: #3a495e !important } .buttonfixed:hover, .popular_btn:hover { background-color: #eee !important } .popbuttonfixed { background-color: #3a495e !important; color: #fff !important } .popbuttonfixed:hover { background-color: #3a495e !important } .last_btn { width: 100%; cursor: pointer } .fixed_height { height: 430px; overflow-y: scroll } .first_item item6, .second_item item6 { width: 100%; display: flex; margin: 10px 0 10px 0 } .first_item item6 thumb_sidebar a img, .second_item item6 thumb_sidebar a img { width: 108px; display: block; height: 74px; object-fit: cover } .first_item item6 h2, .second_item item6 h2 { margin: auto 0; padding-left: 10px; color: #000; text-align: left; line-height: 21px; font-size: 1.05rem } .first_item item6 h2 a, .second_item item6 h2 a { color: #000; line-height: 22px; font-weight: 700 } .right_poll_block { width: 100%; margin: 15px 0; overflow: hidden; border-radius: 5px; background: #f0f0ed } .right_poll_block .right_poll_title, .widgettitle { background-size: cover; background-repeat: no-repeat; text-align: center; color: #fff; margin-bottom: 0; font-size: 20px; line-height: 35px; font-weight: 700; background-position: bottom center; background-image: url(img/right-poll-bg.png) } .blocks-gallery-grid, .wp-block-gallery { width: 100%; } .right_poll_block .right_poll_title a:link, .right_poll_block .right_poll_title a:visited { color: #fff } .wp-polls p strong { display: block; margin: 5px 0 10px; font-size: 16px; font-weight: 700; line-height: 22px } .right_poll_cont { border: 1px solid #d17c29; border-top: 0; padding: 10px; overflow: hidden; border-radius: 0 0 5px 5px } input[type=radio] { display: none } .wp-polls-ul { display: flex; justify-content: space-between; margin-left: 0; margin-bottom: 0 } .wp-polls-ul li label { display: flex; align-items: center } .wp-polls-ul li .pollbar { display: none } .wp-polls-ans p:nth-child(3) { display: none } .radio_three input[type=radio]+label:before, .radio_two input[type=radio]+label:before, [type=radio]+label:before { content: ""; width: 30px; height: 30px; padding: 3px; margin-right: 10px; background-clip: content-box; border: 3px solid #e00; transition: .9s; border-radius: 50% } .radio_three input[type=radio]:checked+label:before, .radio_two input[type=radio]:checked+label:before, input[type=radio]:checked+label:before { width: 30px; height: 30px; background-color: #f30303 } .wp-polls-ul li:nth-child(1) input[type=radio]+label:before { border: 3px solid green } .wp-polls-ul li:nth-child(1) input[type=radio]:checked+label:before { background-color: green } .wp-polls-ul li:nth-child(3) input[type=radio]+label:before { border: 3px solid #0053ee } .wp-polls-ul li:nth-child(3) input[type=radio]:checked+label:before { background-color: #0053ee } .wp-polls .Buttons { margin-top: 15px; padding: 4px 20px; background: #00a651; color: #fff; width: inherit; border: none; border-radius: 5px } .homepage_leatest_three_post { display: grid; grid-column-gap: 30px; grid-row-gap: 10px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); /* পুরো গ্রিডের উচ্চতা এখন কন্টেইনারের প্রস্থ অনুযায়ী aspect-ratio দিয়ে ফিক্সড — ক্যাপশন কত লাইন হলো তার উপর নির্ভর করে না, তাই বাম-ডান সবসময় ঠিক সমান উচ্চতায় মিলবে, কোনো ফাঁকা জায়গা বা ওভারফ্লো হবে না */ aspect-ratio: 1.8 / 1 } .homepage_leatest_three_post .homepage_leatest_three_post_inner { display: flex; flex-direction: column; height: 100%; overflow: hidden } .homepage_leatest_three_post .homepage_leatest_three_post_inner a { display: block; position: relative; overflow: hidden; border-radius: 4px; /* aspect-ratio এর বদলে flex:1 — ছবি যতটুকু জায়গা বাকি থাকে (ক্যাপশন বাদ দিয়ে) ততটুকুই নেবে, ফলে উচ্চতা মিসম্যাচ হওয়ার কোনো সুযোগ নেই */ flex: 1 1 auto; min-height: 0 } .homepage_leatest_three_post .homepage_leatest_three_post_inner:first-of-type { grid-column: 1/3; grid-row: 1/3 } .homepage_leatest_three_post .homepage_leatest_three_post_inner figcaption.figure-caption { flex: 0 0 auto; max-height: 3.2rem; overflow: hidden; margin-top: 10px } .homepage_leatest_three_post .homepage_leatest_three_post_inner:first-of-type figcaption.figure-caption { padding: 0; margin-top: 10px; max-height: 4.4rem } .homepage_leatest_three_post .homepage_leatest_three_post_inner figcaption.figure-caption a { /* width:100% জরুরি — এটা ছাড়া display:-webkit-box কন্টেন্ট-সাইজে সংকুচিত হয়ে হেডলাইন ১-২ শব্দের পরেই কেটে যাচ্ছিল */ width: 100% !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; overflow: hidden !important } .homepage_leatest_three_post .homepage_leatest_three_post_inner:first-of-type figcaption.figure-caption a { font-size: calc(1.5em + .4vw) !important; line-height: 1.2 !important; position: static !important; aspect-ratio: unset !important; height: auto !important } .leatest_nine_post { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, auto); grid-column-gap: 30px; grid-row-gap: 1rem } .leatest_nine_post a { display: block } .leatest_nine_post a thumb { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 10 } .homepage_leatest_three_post img, .leatest_nine_post a img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center; display: block; margin-bottom: .5rem; position: absolute; top: 0; left: 0 } .leatest_nine_post a img { margin-bottom: 0; position: absolute } .homepage_leatest_three_post .homepage_leatest_three_post_inner figcaption.figure-caption a, .leatest_nine_post a figcaption.figure-caption { color: #000 !important; font-size: 17px; font-weight: 600; line-height: 24px } .leatest_nine_post a figcaption.figure-caption { width: 100%; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; overflow: hidden !important; max-height: 48px !important; margin-top: 10px } .leatest_nine_post a:hover h4, img { color: #1e88e5 } /* ---- সেকশন ১৮: লিডের নিচের ছোট দুটি গ্রিড ---- */ .sn_two_mini_grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 30px } .sn_mini_grid_col { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 15px } .sn_mini_grid_item a { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 11; border-radius: 4px } .sn_mini_grid_item img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center; margin-bottom: 0; display: block } .sn_mini_grid_item figcaption.figure-caption { margin-top: 10px } .sn_mini_grid_item figcaption.figure-caption a { color: #000 !important; font-size: 14px; font-weight: 600; line-height: 20px } .two_coloumn_grid { display: flex; justify-content: space-between } .two_coloumn_grid .national { width: 48% } .two_coloumn_grid .political { width: 48% } .photo h3, .sports_grid_container h3, .two_coloumn_grid h3, .video h3 { line-height: 36px; color: #484848; font-size: 24px; font-weight: 600; padding-left: 2px; border-bottom: none; margin-top: 8px; margin-bottom: 8px } .photo h3 a, .sports_grid_container h3 a, .two_coloumn_grid h3 a, .video h3 a { color: #484848; font-weight: 700 } .vid.item { position: relative; width: 100%; padding-bottom: 56.25%; height: 0 } .vid.item iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-bottom: 35px } .cat_arrow { display: none } .two_coloumn_grid .national a:nth-child(2) img, .two_coloumn_grid .political a:nth-child(2) img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block } .two_coloumn_grid .national a:nth-child(3), .two_coloumn_grid .national a:nth-child(4), .two_coloumn_grid .national a:nth-child(5), .two_coloumn_grid .national a:nth-child(6), .two_coloumn_grid .political a:nth-child(3), .two_coloumn_grid .political a:nth-child(4), .two_coloumn_grid .political a:nth-child(5), .two_coloumn_grid .political a:nth-child(6) { display: flex; margin: 5px 5px 5px 0 } .two_coloumn_grid .national a:nth-child(3) thumb img, .two_coloumn_grid .national a:nth-child(4) thumb img, .two_coloumn_grid .national a:nth-child(5) thumb img, .two_coloumn_grid .national a:nth-child(6) thumb img, .two_coloumn_grid .political a:nth-child(3) thumb img, .two_coloumn_grid .political a:nth-child(4) thumb img, .two_coloumn_grid .political a:nth-child(5) thumb img, .two_coloumn_grid .political a:nth-child(6) thumb img { width: 90px; height: 60px; object-fit: cover; display: block; margin: 5px 10px 5px 0; flex-shrink: 0 } .two_coloumn_grid .national a:nth-child(2) h4, .two_coloumn_grid .political a:nth-child(2) h4 { font-size: 20px; line-height: 24px; padding: 10px 0; margin: 0; font-weight: 600; color: #212529 } .two_coloumn_grid .national a:nth-child(3) h4, .two_coloumn_grid .national a:nth-child(4) h4, .two_coloumn_grid .national a:nth-child(5) h4, .two_coloumn_grid .national a:nth-child(6) h4, .two_coloumn_grid .political a:nth-child(3) h4, .two_coloumn_grid .political a:nth-child(4) h4, .two_coloumn_grid .political a:nth-child(5) h4, .two_coloumn_grid .political a:nth-child(6) h4 { font-size: 1rem; line-height: 22px; margin: auto 7px auto 0; align-items: center; font-weight: 600; color: #000 } .two_coloumn_grid a:link, .two_coloumn_grid a:visited { color: #484848 } .two_coloumn_grid .national a:nth-child(2):hover h4, .two_coloumn_grid .political a:nth-child(2):hover h4 { color: #1e88e5 } .two_coloumn_grid .national a h4:hover, .two_coloumn_grid .political a h4:hover { color: #1e88e5 } .sports_grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, auto); grid-column-gap: 30px; grid-row-gap: 15px } .sports_grid a img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block } .sports_grid a h4 { font-size: 20px; padding-top: 10px } .sports_grid a:nth-child(2) h4, .sports_grid a:nth-child(3) h4, .sports_grid a:nth-child(4) h4, .sports_grid a:nth-child(5) h4 { color: #000; font-size: 16px; line-height: 20px; font-weight: 600; margin: auto 0; padding-top: 10px } .sports_grid a h4:hover { color: #1e88e5 } .sports_grid a h4, p { color: #000; font-weight: 600; margin-bottom: 5px } .sports_grid a:nth-child(1) { grid-column: 1/3; grid-row: 1/3 } /* বড় বক্সের নিজস্ব ছবি (aspect-ratio: 4/3, ডাবল প্রস্থে) আগে পুরো গ্রিডের ২টি "auto" সারিকেই নিজের উচ্চতার সমান বড় হতে বাধ্য করছিল — ফলে পাশের ছোট বক্সগুলোও অস্বাভাবিক লম্বা/ফাঁকা দেখাচ্ছিল। এখন এই বক্সকে (শুধু ডেস্কটপে, ≥৭৭১px — মোবাইলে .sports_grid আলাদা flex-column লেআউট ব্যবহার করে, তাই এখানে হাত দেওয়া হয়নি) flex-column বানিয়ে ছবি থেকে aspect-ratio বাদ দেওয়া হলো। বক্সের উচ্চতা এখন শুধু ছোট বক্সগুলোর (২,৩,৪,৫) স্বাভাবিক উচ্চতা অনুযায়ী ঠিক হবে, আর বড় বক্সের ছবি height:100% + object-fit:cover দিয়ে যতটুকু জায়গা পায় ততটুকু ভরাট করবে — কোনো বাড়তি টান/লম্বা হওয়া থাকবে না */ @media only screen and (min-width: 771px) { .sports_grid a:nth-child(1) { display: flex; flex-direction: column; overflow: hidden } .sports_grid a:nth-child(1) thumb { display: block; flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative } .sports_grid a:nth-child(1) img { aspect-ratio: unset !important; height: 100% !important; width: 100%; object-fit: cover; display: block } .sports_grid a:nth-child(1) h4, .sports_grid a:nth-child(1) p { flex: 0 0 auto } } .sports_grid a:nth-child(1):hover h4 { color: #1e88e5 } .sports_grid a p { display: none; font-weight: 400 } .sports_grid a:nth-child(1) p { display: block; font-size: 1rem; margin-top: .5rem } .three_col_grid { display: flex; justify-content: space-between } .three_col_grid .part_one { width: 31% } .three_col_grid .part_two { width: 31% } .three_col_grid .part_three { width: 31% } .three_col_grid .part_one h3, .three_col_grid .part_three h3, .three_col_grid .part_two h3 { line-height: 36px; color: #484848; font-size: 24px; font-weight: 600; padding: 0; padding-left: 2px; border-bottom: none; margin-top: 8px; margin-bottom: 8px } .three_col_grid .part_one h3 a, .three_col_grid .part_three h3 a, .three_col_grid .part_two h3 a { text-decoration: none; color: #484848; font-weight: 700 } .three_col_grid .part_one a img, .three_col_grid .part_three a img, .three_col_grid .part_two a img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block } .three_col_grid .part_one a:nth-child(3), .three_col_grid .part_one a:nth-child(4), .three_col_grid .part_one a:nth-child(5), .three_col_grid .part_one a:nth-child(6), .three_col_grid .part_three a:nth-child(3), .three_col_grid .part_three a:nth-child(4), .three_col_grid .part_three a:nth-child(5), .three_col_grid .part_three a:nth-child(6), .three_col_grid .part_two a:nth-child(3), .three_col_grid .part_two a:nth-child(4), .three_col_grid .part_two a:nth-child(5), .three_col_grid .part_two a:nth-child(6) { display: flex; margin-bottom: 5px; margin-top: 10px } .three_col_grid .part_one a:nth-child(3) img, .three_col_grid .part_one a:nth-child(4) img, .three_col_grid .part_one a:nth-child(5) img, .three_col_grid .part_one a:nth-child(6) img, .three_col_grid .part_three a:nth-child(3) img, .three_col_grid .part_three a:nth-child(4) img, .three_col_grid .part_three a:nth-child(5) img, .three_col_grid .part_three a:nth-child(6) img, .three_col_grid .part_two a:nth-child(3) img, .three_col_grid .part_two a:nth-child(4) img, .three_col_grid .part_two a:nth-child(5) img, .three_col_grid .part_two a:nth-child(6) img { width: 90px; height: 60px; aspect-ratio: auto; object-fit: cover; flex-shrink: 0; margin: 0 10px 7px 0 } .three_col_grid .part_one h4, .three_col_grid .part_three h4, .three_col_grid .part_two h4 { color: #343a40; font-size: 20px; line-height: 27px; font-weight: 600; padding-top: 10px; margin-bottom: 15px } .three_col_grid .part_one a:nth-child(3) h4, .three_col_grid .part_one a:nth-child(4) h4, .three_col_grid .part_one a:nth-child(5) h4, .three_col_grid .part_one a:nth-child(6) h4, .three_col_grid .part_three a:nth-child(3) h4, .three_col_grid .part_three a:nth-child(4) h4, .three_col_grid .part_three a:nth-child(5) h4, .three_col_grid .part_three a:nth-child(6) h4, .three_col_grid .part_two a:nth-child(3) h4, .three_col_grid .part_two a:nth-child(4) h4, .three_col_grid .part_two a:nth-child(5) h4, .three_col_grid .part_two a:nth-child(6) h4 { font-size: 14px; line-height: 20px; color: #000; padding-top: 0; margin: auto 0 } .photo_video { padding-bottom: 20px; display: grid; grid-gap: 15px; grid-template-columns: repeat(3, 1fr); grid-template-rows: none; grid-column-gap: 10px } .photo { grid-column: 1/3 } .video_grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); grid-gap: 15px } .video_content { width: 100%; position: relative } .video_content:nth-child(1) { grid-column: 1/3 } .video_content:nth-child(1) .the_title { border-bottom: 1px solid #dee2e6; color: #696969; padding: 5px 0 } .video_content img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block } .yt_logo i { position: absolute; z-index: 9; color: #fff; background: rgba(0, 0, 0, .5); padding: 13px 10px 12px 14px; top: 0; left: 0; opacity: .8 } .video_content:hover i { color: #ff004c } .video_content:nth-child(2) .yt_logo i, .video_content:nth-child(3) .yt_logo i { padding: 6px 7px 6px 9px; font-size: 14px } .the_title { font-size: 16px; text-align: left; line-height: 20px; margin-top: 10px } .leatest_popular_home { display: none } @media only screen and (max-width:1230px) { .home_page { width: 960px; padding: 0 } } @media only screen and (max-width:990px) { .home_page { width: 760px } } @media only screen and (max-width:770px) { .home_page { margin: 0 auto; display: flex; max-width: 570px; width: 96%; flex-direction: column } .leatest_popular_home { display: block } .home_page .leatest_popular_sidebar { display: none } .home_page_left .home_lest_ad { display: none } .home_page_ad { width: 100vw; max-width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); padding: 10px 0; box-sizing: border-box } .home_page_ad img { border-radius: 0 !important } .homepage_leatest_three_post, .leatest_nine_post { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(auto, auto); /* ডেস্কটপের জন্য বানানো aspect-ratio/flex সাইজিং মোবাইলে যেন প্রভাব না ফেলে (এটাই বড় ছবি কেটে যাওয়া ও ছোট গ্রিডে ছবি না দেখানোর কারণ ছিল) */ aspect-ratio: unset } .homepage_leatest_three_post .homepage_leatest_three_post_inner { height: auto; overflow: visible } .homepage_leatest_three_post .homepage_leatest_three_post_inner a { flex: none; min-height: unset } .homepage_leatest_three_post .homepage_leatest_three_post_inner:not(:first-of-type) a { aspect-ratio: 16 / 11; height: auto } .homepage_leatest_three_post .homepage_leatest_three_post_inner figcaption.figure-caption { max-height: none } .homepage_leatest_three_post .homepage_leatest_three_post_inner:first-of-type { grid-column: 1/3; position: relative } .homepage_leatest_three_post .homepage_leatest_three_post_inner:first-of-type a { height: auto; aspect-ratio: 16 / 10 } .homepage_leatest_three_post .homepage_leatest_three_post_inner:first-of-type img { margin-bottom: 0 } .homepage_leatest_three_post_inner:first-of-type figcaption.figure-caption { position: absolute; bottom: 0; left: 0; background: rgba(0, 0, 0, .5); color: #f1f1f1 !important; width: 100%; max-height: none; padding: 10px !important } .homepage_leatest_three_post_inner:first-of-type figcaption.figure-caption a { color: #f1f1f1 !important } .leatest_nine_post a:last-of-type { display: none } .sn_two_mini_grid { grid-template-columns: 1fr; grid-row-gap: 15px } .sports_grid { display: flex; flex-direction: column } .sports_grid a:nth-child(1) p { display: none } .sports_grid a:nth-child(1) { position: relative } /* v2.7.9 ফিক্স: আইটেম ২-৫ এর ছবির জন্য নিচে স্পষ্ট width/height/object-fit রুল আছে, কিন্তু বড় লিড বক্স (nth-child(1)) এর জন্য মোবাইলে ছবির কোনো সাইজিং রুলই ছিল না। ফলে ফিচার্ড ইমেজ না থাকা পোস্টে (ডিফল্ট/ফলব্যাক লোগো ছবি ব্যবহার হলে) সেই ছোট ছবিটি একটা বড়, ফাঁকা ধূসর বক্সের মাঝে ছোট হয়ে ভাসতে দেখাচ্ছিল, স্বাভাবিক নিউজ থাম্বনেইলের মতো লাগছিল না। এখন thumb-কে একটা ফিক্সড-অনুপাতের (16:9) কন্টেইনার বানিয়ে তার ভেতরের ছবিকে (আসল ফিচার্ড ইমেজ বা ফলব্যাক লোগো — উভয়ই) object-fit:cover দিয়ে পুরো বক্স ভরাট করে দেখানো হচ্ছে, ঠিক অন্য গ্রিডগুলোর মতোই। */ .sports_grid a:nth-child(1) thumb { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 9; background-color: #f2f2f2; } .sports_grid a:nth-child(1) img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: unset; object-fit: cover; display: block; margin: 0; } .sports_grid a:nth-child(1) h4 { position: absolute; left: 0; bottom: 0; width: 100%; color: #fff; padding: 7px; font-size: 23px; background-color: rgba(0, 0, 0, .383); margin-bottom: 0 } .sports_grid a:nth-child(2), .sports_grid a:nth-child(3), .sports_grid a:nth-child(4), .sports_grid a:nth-child(5) { display: flex } .sports_grid a:nth-child(2) img, .sports_grid a:nth-child(3) img, .sports_grid a:nth-child(4) img, .sports_grid a:nth-child(5) img { width: 90px; height: 60px; aspect-ratio: auto; object-fit: cover; flex-shrink: 0; margin-right: 10px } .two_coloumn_grid { display: flex; flex-direction: column } .photo h3 a, .sports_grid_container h3 a, .two_coloumn_grid h3 a, .video h3 a { display: flex; justify-content: space-between } .photo h3 .cat_arrow, .sports_grid_container h3 .cat_arrow, .two_coloumn_grid h3 .cat_arrow, .video h3 .cat_arrow { display: block; color: red; font-size: 24px } .two_coloumn_grid .political { width: 100% } .two_coloumn_grid .national { width: 100% } .two_coloumn_grid .national a:nth-child(2), .two_coloumn_grid .political a:nth-child(2) { position: relative; display: block } .two_coloumn_grid .national a:nth-child(2) h4, .two_coloumn_grid .political a:nth-child(2) h4 { position: absolute; left: 0; bottom: 0; width: 100%; color: #fff; padding: 7px; font-size: 23px; background-color: rgba(0, 0, 0, .383) } .three_col_grid { display: flex; flex-direction: column } .three_col_grid .part_one, .three_col_grid .part_three, .three_col_grid .part_two { width: 100% } .three_col_grid .part_one a:nth-child(2), .three_col_grid .part_three a:nth-child(2), .three_col_grid .part_two a:nth-child(2) { display: block; position: relative } .three_col_grid .part_one a:nth-child(2) h4, .three_col_grid .part_three a:nth-child(2) h4, .three_col_grid .part_two a:nth-child(2) h4 { position: absolute; left: 0; bottom: 0; width: 100%; color: #fff; padding: 7px; font-size: 23px; background-color: rgba(0, 0, 0, .383) } .home_page .home_page_left { width: 100%; padding-right: 0 } .home_page .home_page_right { width: 100%; text-align: center; padding-left: 0 } .photo_video { display: flex; flex-direction: column } .video_content:nth-child(2) .yt_logo img, .video_content:nth-child(3) .yt_logo img { width: 35px; bottom: 45% } } /* ===================================================== ফুটার — নতুন, আধুনিক, ফ্লেক্সিবল লেআউট (.sn-footer) প্রতিটি জোনের ব্যাকগ্রাউন্ড/টেক্সট/লিংক কালার ও প্রতিটি টেক্সট অংশের ফন্ট সাইজ/স্টাইল থিম অপশন থেকে বদলানো যায় (দেখুন: inc/helpers.php → smart_news_output_dynamic_css) ===================================================== */ .sn-footer { width: 100%; background-color: #f5f5f5; color: #222222; text-align: center; } .sn-footer-topbar, .sn-footer-bottombar { width: 100%; height: 3px; background-color: #9e9e9e; } .sn-footer-inner { max-width: 900px; margin: 0 auto; padding: 40px 20px 24px; display: flex; flex-direction: column; align-items: center; } .sn-footer-logo { margin-bottom: 18px; line-height: 0; } .sn-footer-logo img { display: inline-block; border-radius: 50%; object-fit: contain; } .sn-footer-editor { font-size: 1.7rem; font-weight: 700; margin: 0 0 10px; line-height: 1.4; } .sn-footer-editor-label { font-weight: 700; } .sn-footer-editor-name { font-weight: 700; } .sn-footer-address { font-size: 1.05rem; font-weight: 400; margin: 0 0 16px; line-height: 1.6; opacity: .9; } .sn-footer-address p { margin: 0 0 4px; } .sn-footer-menu { margin-bottom: 18px; width: 100%; } .sn-footer-menu ul.sn-footer-menu-ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0; margin: 0; padding: 0; } .sn-footer-menu ul.sn-footer-menu-ul li { display: flex; align-items: center; font-size: 1rem; } .sn-footer-menu ul.sn-footer-menu-ul li a { color: #222222; padding: 0 14px; display: inline-block; transition: color .2s ease; } .sn-footer-menu ul.sn-footer-menu-ul li a:hover { color: #d0342c; } .sn-footer-menu ul.sn-footer-menu-ul li:not(:last-child)::after { content: "|"; color: #9e9e9e; } .sn-footer-social { list-style: none; display: flex; gap: 10px; margin: 0 0 18px; padding: 0; } .sn-footer-social li a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, .08); color: #222222; transition: background-color .2s ease, color .2s ease, transform .2s ease; } .sn-footer-social li a:hover { background-color: #d0342c; color: #ffffff; transform: translateY(-2px); } .sn-footer-extra { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 18px; } .sn-footer-extra img { height: 40px; width: auto; border-radius: 5px; } .sn-footer-copyright-wrap { width: 100%; padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, .12); } .sn-footer-copyright-left { font-size: .85rem; font-weight: 400; opacity: .75; margin: 0 0 6px; } .sn-footer-copyright { font-size: .95rem; font-weight: 400; margin: 0; } .sn-footer-copyright a { color: inherit; text-decoration: underline; } @media only screen and (max-width: 767px) { .sn-footer-inner { padding: 30px 16px 18px; } .sn-footer-editor { font-size: 1.3rem; } .sn-footer-address { font-size: .95rem; } .sn-footer-menu ul.sn-footer-menu-ul li a { padding: 0 8px; font-size: .9rem; } } .single_page_container { max-width: var(--sn-site-max-width, 1200px); width: 100%; margin: auto; padding: 0 15px } /* সিঙ্গেল পেইজে হেডলাইনের ওপরে ক্যাটাগরি নাম — স্ক্রিনশট অনুযায়ী শুধু ছোট, সাদামাটা লেবেল হিসেবে দেখানো হয় (সাব-ক্যাটাগরি ড্রপডাউন লুকানো) */ .single_top_cat { display: block; margin: 18px 0 4px; padding-bottom: 10px; border-bottom: 1px solid #e6e6e6; } .single_top_cat ul { display: none; } .single_top_cat a:link, .single_top_cat a:visited { color: #000; font-weight: 700; font-size: .95rem; text-decoration: none; text-transform: uppercase; letter-spacing: .3px; } .single_top_cat a:hover { text-decoration: underline; } /* ============================================================================ 🖼️ মিডিয়া ক্যাপশন/ক্রেডিট — Featured Image, Content Image ও Photo Gallery — এই তিন জায়গার ক্যাপশন+ক্রেডিট একই লাইনে, একই স্টাইলে দেখায় (রেফারেন্স স্ক্রিনশট অনুযায়ী): "ক্যাপশন টেক্সট | ছবি: ক্রেডিট" ============================================================================ */ .sn_media_caption { width: 100%; font-size: 13.5px; line-height: 1.7; color: #444; padding: 10px 2px 12px; margin-bottom: 4px; border-bottom: 1px solid #ececec; } .sn_media_caption_text { color: #3a3a3a; } .sn_media_credit_text { display: inline-block; color: #9a9a9a; font-style: italic; white-space: nowrap; } .sn_media_caption_text + .sn_media_credit_text { margin-left: 8px; padding-left: 10px; border-left: 1px solid #d8d8d8; } /* ---------- Content Image (কার্সর-মার্কার দিয়ে কনটেন্টে বসানো) ---------- */ .sn_content_image_block { margin: 20px 0; width: 100%; } .sn_content_image_block img { width: 100%; height: auto; border-radius: 8px; display: block; box-shadow: 0 2px 14px rgba(0, 0, 0, .07); } /* Featured Image ও Photo Gallery-এর মতোই Content Image-এর ক্যাপশন/ক্রেডিটের পরেও বর্ডার — .sn_media_caption বেস ক্লাস থেকে হুবহু একই স্পেসিং/বর্ডার, তিন জায়গাতেই একদম অভিন্ন স্টাইল */ /* ---------- 📷 Photo Gallery (সিঙ্গেল আর্টিকেলে, সিঙ্গেল-পেইজ সিরিয়াল স্টাইল) ---------- */ .sn_photo_gallery_block { margin: 20px 0; } .sn_pg_item { margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid #ececec; } .sn_pg_item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .sn_pg_zoom { position: relative; display: block; border-radius: 10px; overflow: hidden; line-height: 0; } .sn_pg_item img { width: 100%; height: auto; display: block; transition: transform .35s ease; } .sn_pg_zoom:hover img { transform: scale(1.02); } /* উপরের বাম কোণায় ভাসমান সিরিয়াল ব্যাজ — "২ / ৮" (আরও গোল পিল, নরমাল বর্ডার, নম্বরের চারপাশে ফাঁকা জায়গাসহ) */ .sn_pg_counter { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; background: #fff; color: #c4302b; font-size: 14px; font-weight: 700; letter-spacing: .3px; padding: 9px 22px; border: 1.5px solid #c4302b; border-radius: 50px; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); } /* .sn_pg_caption -তে আলাদা কোনো ওভাররাইড নেই — .sn_media_caption বেস ক্লাসের স্পেসিং/বর্ডার সরাসরি প্রযোজ্য, Featured Image ও Content Image-এর সাথে হুবহু মিলিয়ে (ছবি থেকে ক্যাপশন ১০পিক্স, ক্যাপশনের পর বর্ডার) */ /* ফিচার্ড ইমেজ (ক্যাপশন থাকলে ক্যাপশন) থেকে রিপোর্টার/বাইলাইন বার পর্যন্ত হুবহু ১০ পিক্সেল ফাঁকা */ .the_post_banner { margin-bottom: 10px; } /* v2.9.57 — Format badge (Standard/Video/Image) on single article */ .sn_post_format_badge { display: inline-block; margin: 0 0 10px; padding: 3px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #fff; background: #005a84; } .sn_post_format_badge.sn_format_video { background: #b56100; } .sn_post_format_badge.sn_format_image { background: #6c5ce7; } .sn_post_format_badge.sn_format_live_stream { background: #d63031; } .sn_post_format_badge.sn_format_news_live { background: #e17055; } .sn_post_format_badge.sn_format_audio { background: #00897b; } /* v2.19.0 — Story Priority ribbon (Breaking / Developing) on single article, shown above the sub-heading. Mirrors the "breaking news" flag used in major international newsroom CMSs. */ .sn_priority_ribbon { display: flex; align-items: center; gap: 7px; width: fit-content; margin: 0 0 12px; padding: 6px 14px; border-radius: 4px; font-size: 12.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #fff; } .sn_priority_ribbon i { font-size: 11px; } .sn_priority_ribbon_breaking { background: #d63638; animation: sn-priority-ribbon-pulse 1.8s infinite; } .sn_priority_ribbon_live { background: #d63638; animation: sn-priority-ribbon-pulse 1.8s infinite; } @keyframes sn-priority-ribbon-pulse { 0% { box-shadow: 0 0 0 0 rgba(214,54,56,.45); } 70% { box-shadow: 0 0 0 8px rgba(214,54,56,0); } 100% { box-shadow: 0 0 0 0 rgba(214,54,56,0); } } /* v2.20.0 — Story Priority flag shown before the headline on EVERY grid across the site (all homepage blocks, category, archive, search, author, single "read more"/sidebar/related lists) — emitted from smart_news_grid_subtitle() in inc/helpers.php so no template needed individual edits. Live Updates → "সরাসরি", Breaking News → "ব্রেকিং নিউজ", both red + pulsing. */ .sn_grid_priority_flag { display: inline-block; background: #d63638; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .3px; padding: 2px 8px; border-radius: 4px; vertical-align: middle; margin-right: 2px; animation: sn-priority-ribbon-pulse 1.8s infinite; } .single_container .sigle_left .info_box { margin-top: 0; } .the_content_single p { margin: 12px 0; font-weight: 400; font-size: calc(1em + .1vw); line-height: 1.7; text-align: justify } .the_content_single img { width: 100%; height: auto } /* কনটেন্টে কোট করা অংশ (blockquote) — রেফারেন্স স্ক্রিনশটের কমলা/ক্রিম বক্স হুবহু */ .the_content_single blockquote { background: #fef8e0; border-top: 3px solid #c4302b; border-radius: 4px; margin: 24px 0; padding: 20px 22px; } .the_content_single blockquote p { margin: 0; font-size: calc(1em + .1vw); font-weight: 700; line-height: 1.85; color: #262626; text-align: left; } .the_content_single blockquote p + p { margin-top: 10px; } .the_content_single blockquote cite { display: block; margin-top: 10px; font-size: .85rem; font-weight: 400; font-style: normal; color: #777; } /* কনটেন্টের মধ্যে বসানো "আরও পড়ুন" লিংক-কার্ড — রেফারেন্স স্ক্রিনশট অনুযায়ী হুবহু */ .the_content_single .sn_inline_readmore { margin: 24px 0; } .sn_inline_readmore_label { display: block; font-size: .85rem; font-weight: 700; color: #5c5c5c; margin-bottom: 8px; } .sn_inline_readmore_card { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; padding: 14px 16px; text-decoration: none !important; } .sn_inline_readmore_card:hover { border-color: #c4302b; } .sn_inline_readmore_info { flex: 1; min-width: 0; } .sn_inline_readmore_title { display: block; font-size: calc(1em + .05vw); font-weight: 700; line-height: 1.5; color: #1a1a1a; } .sn_inline_readmore_card:hover .sn_inline_readmore_title { color: #c4302b; } .sn_inline_readmore_time { display: block; font-size: .82rem; color: #888; margin-top: 6px; } .sn_inline_readmore_thumb { flex: 0 0 92px; width: 92px; height: 68px; border-radius: 4px; overflow: hidden; } .sn_inline_readmore_thumb img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; } .single_container { display: flex } .single_main_col { flex: 1; min-width: 0; } .single_below_row { display: flex; } .single_page_container .sigle_leftbar { padding-right: 15px; width: 230px; flex: 0 0 230px } .single_page_container .sigle_left { padding: 0 0 0 0px; flex: 1; min-width: 0 } /* v2.25.17 — সিঙ্গেল পোস্ট পেজের ডান সাইডবার (.sigle_right) ইচ্ছাকৃতভাবে ফিক্সড 300px প্রস্থে রাখা হলো — Website Max Width সেটিং যতই বাড়ানো/ কমানো হোক না কেন (var(--sn-site-max-width) দিয়ে নয়), এই সাইডবার সবসময় ঠিক 300px থাকবে। প্রস্থের পার্থক্যটুকু পাশের .sigle_left (flex:1) কলাম নিজে থেকেই শোষণ করে নেয়, তাই লেআউট কখনো ভাঙে না। */ .single_page_container .sigle_right { padding-left: 35px; width: 300px; flex: 0 0 300px } /* বাম পাশের "আরও পড়ুন" বক্স — স্ক্রিনশট অনুযায়ী, শুধু লেখা, ছবি ছাড়া */ .sn_readmore_box { border: 1px solid #e6e6e6; border-radius: 4px; padding: 14px 16px; margin-top: 18px; } .sn_readmore_box h3 { font-size: 1rem; font-weight: 700; color: #222; margin: 8px 0 8px 0; padding-bottom: 0; border-bottom: none; } .sn_readmore_list li { padding: 9px 0; border-bottom: 1px dashed #e0e0e0; } .sn_readmore_list li:last-child { border-bottom: none; } .sn_readmore_list li a { color: #262626; font-size: .92rem; line-height: 1.4; text-decoration: none; display: block; } .sn_readmore_list li a:hover { color: #c4302b; } .single_page_container .single_first_ad { text-align: center } .single_page_container .single_first_ad img { width: auto; height: auto; margin: 5px auto } .Custom_breadcrumb { background: 0 0; font-weight: 700; margin: 20px 0; font-size: 1.1rem } .breadcrumb1 { margin: 20px 0; font-size: 1.1rem } .breadcrumb1 a { color: #1e88e5 } .single_container .single_main_col h1 { font-size: calc(1em + .9vw); font-weight: 600; color: #333; margin: 8px 0; padding-bottom: 0; border-bottom: none; } .single_container .sigle_left .info_box { display: flex; align-items: stretch; justify-content: space-between; flex-wrap: wrap; row-gap: 12px; border-bottom: #d0d0d0 1px solid; margin-bottom: 15px; padding-bottom: 15px; gap: 12px; } .info_box_right { margin-top: 0 } /* সিঙ্গেল পেইজ বাইলাইন: গোল অ্যাভাটার + নাম/তারিখ (স্ক্রিনশট অনুযায়ী হুবহু) */ .sn_byline { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 200px; } .sn_byline_avatar { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: transparent; overflow: hidden; } .sn_byline_avatar img.sn_reporter_photo { display: block !important; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: transparent; margin: 0 !important; vertical-align: middle; } .sn_byline_meta { display: flex; flex-direction: column; justify-content: center; align-self: center; line-height: 1.4; padding-top: 0; } .sn_byline_name { font-weight: 700; font-size: 0.95rem; color: #1a1a1a; line-height: 1.3; margin-bottom: 3px; } .sn_byline_date { font-size: 0.80rem; color: #888888; margin-top: 0px; line-height: 1.2; } /* সিঙ্গেল পেজে তারিখ/সময়ের পাশে শেয়ার বার */ .sn_share_bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sn_share_bar .sn_share_icon, .sn_share_bar .sn_font_btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 14px; text-decoration: none; cursor: pointer; border: none; line-height: 1; transition: opacity .15s ease; } .sn_share_bar .sn_share_icon:hover, .sn_share_bar .sn_font_btn:hover { opacity: .85; } .sn_share_bar .sn_share_fb { background: #1877f2; color: #fff; } .sn_share_bar .sn_share_x { background: #14171a; color: #fff; } .sn_share_bar .sn_share_more { background: #fd7e14; color: #fff; } /* v2.25.34 — News Card (থিমে বিল্ট-ইন, আগের "News Card Pro" প্লাগিনের বদলে) */ .sn_share_bar .sn_share_newscard { background: #d81f26; color: #fff; } .sn_share_bar .sn_share_newscard.sn_nc_loading { opacity: .6; pointer-events: none; } .sn_share_bar .sn_font_btn { background: #f1f1f1; color: #333; border: 1px solid #d8d8d8; border-radius: 50%; font-weight: 700; font-size: 12px; font-family: inherit; } .sn_share_bar .sn_share_print, .sn_share_bar .sn_share_bookmark { background: #fff; color: #444; border: 1px solid #d8d8d8; border-radius: 6px; } .sn_share_bar .sn_share_bookmark.sn_bookmarked { background: #212529; color: #fff; border-color: #212529; } .sn_toast_msg { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 10px); background: #212529; color: #fff; padding: 10px 18px; border-radius: 6px; font-size: .95rem; opacity: 0; transition: opacity .25s ease, transform .25s ease; z-index: 9999; pointer-events: none; } .sn_toast_msg.sn_toast_show { opacity: 1; transform: translate(-50%, 0); } @media print { .sn_share_bar, .bottom_nav, .sn_post_tags, .sn_single_ad_box, .more_single, .sn_infinite_scroll_root { display: none !important; } } /* সিঙ্গেল লোডিং পেইজ (ইনফিনিট স্ক্রল): পরবর্তী সম্পর্কিত আর্টিকেল ও লোডিং ইন্ডিকেটর .sn_infinite_scroll_root এখন .single_container-এর বাইরে, সরাসরি .single_page_container-এর ভেতরে থাকে — তাই এটি .sigle_left-এর সংকীর্ণ কলামে সীমাবদ্ধ না থেকে সাইটের পুরো ১২০০পিক্সেল কন্টেইনার জুড়ে বসে (কোনো viewport-hack ছাড়াই)। */ .sn_infinite_scroll_root { margin-top: 0; } /* প্রতিটি লোড হওয়া আর্টিকেল — শুধু পেজ-ডিভাইডার (বর্ডার/স্পেসিং)। ভেতরের .single_container/.sigle_left/.sigle_right, .single_top_cat ইত্যাদি ক্লাসগুলো একদম single.php-এর মতোই, তাই লেআউট/সাইজিং আলাদা করে এখানে লেখার দরকার নেই — উপরের একই নিয়মগুলো স্বয়ংক্রিয়ভাবে প্রযোজ্য হয়, ফলে লোড হওয়া পেইজ প্রথম পেইজের সাথে হুবহু মেলে। */ .sn_infinite_article { margin-top: 40px; padding-top: 40px; border-top: 3px solid #e0e0e0; position: relative; } /* পেজ ডিভাইডার — বর্ডারের মধ্যে গোল বৃত্তে আইকন (থিম অপশন থেকে বদলানো যাবে, দেখুন: থিম অপশন → সিঙ্গেল পেইজ → পেজ ডিভাইডার আইকন) */ .sn_infinite_article::before { content: '\f1ea'; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; background: #ffffff; border: 3px solid #e0e0e0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #c0392b; font-size: 13px; line-height: 1; } .sn_infinite_sentinel { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 20px 0; color: #777; font-size: .95rem; } .sn_infinite_spinner { width: 20px; height: 20px; border: 3px solid #e0e0e0; border-top-color: #c0392b; border-radius: 50%; display: inline-block; animation: sn_infinite_spin .8s linear infinite; } @keyframes sn_infinite_spin { to { transform: rotate(360deg); } } .sn_infinite_end { color: #999; font-size: .9rem; } .sn_infinite_retry { background: #f1f1f1; color: #333; border: 1px solid #d8d8d8; border-radius: 6px; padding: 6px 16px; cursor: pointer; font-family: inherit; font-size: .9rem; } .the_post_banner img { width: 100%; height: auto } .single_page_container .more_single { max-width: var(--sn-site-max-width, 1200px); margin: 30px auto 10px; padding: 0 15px; } .more_single h2 { color: #222; font-size: calc(1em + .2vw); font-weight: 700; padding: 0 0 10px; border-bottom: 2px solid #e3e3e3; margin-top: 8px; margin-bottom: 18px } .more_six_posts { display: grid; grid-gap: 18px; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(auto, auto); grid-auto-rows: max-content } @media only screen and (max-width:990px) { .more_six_posts { grid-template-columns: repeat(2, 1fr); } } .more_six_posts a { display: block; text-decoration: none; border: 1px solid #e0e0e0; border-radius: 3px; overflow: hidden; background: #fff; transition: box-shadow .2s ease, border-color .2s ease } .more_six_posts a:hover { border-color: #c9c9c9; box-shadow: 0 2px 8px rgba(0, 0, 0, .08) } .more_six_posts a thumb { display: block; width: 100%; height: 160px; line-height: 0 } .more_six_posts a img { width: 100%; height: 160px; object-fit: cover; display: block } .more_six_posts h4 { color: #1a4a8e; font-size: 15px; line-height: 22px; font-weight: 700; padding: 10px 12px; margin: 0 } .single_right_more h3 { font-size: 1.05rem; margin: 20px 0 12px; color: #222; font-weight: 700; padding: 2px 0 2px 12px; border-left: 4px solid #c4302b; line-height: 1.3; } .single_right_more .single_right_post a { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: 10px; margin: 0; padding: 10px 0; border-bottom: 1px solid #eee; } .single_right_more .single_right_post a:last-child { border-bottom: none; } .single_right_more .single_right_post rihgt_thumb { flex: 0 0 auto; display: block; line-height: 0; } .single_right_more .single_right_post rihgt_thumb img { width: 96px; height: 68px; object-fit: cover; border-radius: 3px; margin: 0 } .single_right_more .single_right_post a h2 { font-size: .92rem; color: #222; margin: 0; font-weight: 600; line-height: 1.35; flex: 1; } @media only screen and (max-width:1230px) { .single_page_container { width: 960px; margin: auto; padding: 0 } } @media only screen and (max-width:990px) { .single_page_container { width: 760px; margin: auto; padding: 0 } .sigle_leftbar { display: none } .info_box .smp-regular-but [data-network=linkedin], .info_box .smp-regular-but [data-network=pinterest] { display: none } .single_page_container .single_first_ad { display: none } .info_box_right i.pr_md { display: none } /* ট্যাবলেটের জন্য ইনফিনিট স্ক্রল পেজ ডিভাইডার */ .sn_infinite_article { margin-top: 38px; padding-top: 38px; } .sn_infinite_article::before { top: -13px; width: 28px; height: 28px; font-size: 16px; } } @media only screen and (max-width:770px) { .single_page_container { max-width: 570px; width: 97% } .single_container { display: flex; flex-direction: column } .single_container .sigle_left .info_box { display: flex; flex-direction: column; align-items: flex-start; height: auto; border-bottom: none } .single_container .sigle_left .info_box .sn_byline { width: 100%; align-items: center; padding-bottom: 12px; border-bottom: #d0d0d0 1px solid } .sn_byline_avatar { width: 50px; height: 50px; flex: 0 0 50px; } .sn_byline_avatar img.sn_reporter_photo { width: 50px; height: 50px; } .sn_byline_name { font-size: 0.90rem; } .sn_byline_date { font-size: 0.75rem; } .info_box_right { margin: 12px auto 0 auto; width: 100%; justify-content: flex-start; } .info_box .smp-regular-but [data-network=linkedin], .info_box .smp-regular-but [data-network=pinterest] { display: block } .single_page_container .sigle_left { padding: 0; width: 100% } .single_page_container .sigle_right { padding-left: 0; width: 100% } .sigle_leftbar { display: none } .more_single h2 { color: #222; background: none; font-size: 1.05rem; font-weight: 700; padding: 0 0 8px; border-bottom: 2px solid #e3e3e3 !important; margin-top: 10px; margin-bottom: 14px } .single_page_container .more_single { padding-left: 0; padding-right: 0 } .more_six_posts { display: grid; grid-gap: 12px; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(auto, auto) } .more_six_posts a thumb, .more_six_posts a img { height: 110px } .more_six_posts h4 { font-size: 13px; line-height: 18px; padding: 8px } /* মোবাইলের জন্য ইনফিনিট স্ক্রল পেজ ডিভাইডার স্টাইলিং — কনটেন্ট ও সাইডবার কলাম একটার নিচে একটা সাজানো হবে (মূল পেইজের .single_container রেসপন্সিভ নিয়ম অনুযায়ীই, উপরে দেখুন max-width:770px) */ .sn_infinite_article { margin-top: 35px; padding-top: 35px; border-top: 3px solid #e0e0e0; } .sn_infinite_article::before { top: -13px; width: 26px; height: 26px; font-size: 14px; } } .archive_page_container { max-width: var(--sn-site-max-width, 1200px); margin: auto; padding: 0 15px } /* সার্চ পেজ ও ট্যাগ/লেখক/তারিখ আর্কাইভ পেজের মূল কন্টেইনার — আগে কোনো width সীমা ছিল না, তাই স্ক্রিন জুড়ে ছড়িয়ে যেত। এখন সাইটের বাকি সব পেজের মতো একই প্রস্থে সীমাবদ্ধ করা হলো। */ .all_posts_container { max-width: var(--sn-site-max-width, 1200px); width: 100%; margin: auto; padding: 0 15px; display: flex } .all_posts_container_left { flex: 1; min-width: 0; padding-right: 25px } .all_posts_container_right { width: 300px; flex: 0 0 300px; padding-left: 5px } @media only screen and (max-width:1230px) { .all_posts_container { width: 960px; padding: 0 } } @media only screen and (max-width:990px) { .all_posts_container { width: 760px; padding: 0 } } @media only screen and (max-width:770px) { .all_posts_container { max-width: 570px; width: 97%; margin: auto; padding: 0; display: flex; flex-direction: column } .all_posts_container_left, .all_posts_container_right { width: 100%; padding: 0 } } .archieve_top_cat { margin-bottom: 16px; padding-top: 15px; display: flex; align-items: center; height: 45px; padding: 5px 0; font-size: 1rem; border-bottom: 1px solid #ccc } .archieve_top_cat a { font-size: 19px; font-weight: 600 } .archieve_top_cat ul { display: flex; margin-bottom: 0; margin-left: 20px; font-weight: 600 } .archieve_top_cat ul li { margin-right: 10px; padding-right: 10px; border-right: #acacac 1px solid } .archieve_top_cat ul li:last-child { border: none } .archieve_top_cat ul li a:link, .archieve_top_cat ul li a:visited { font-size: 1rem; color: #484848 !important; font-weight: 700 } .archieve_top_cat ul li a:hover { color: #1e88e5 !important } .archive_first_ad img { max-width: 100%; height: auto; margin: 10px auto } .archive_leatest_three_posts { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; grid-column-gap: 26px; grid-row-gap: 15px } .archive_leatest_three_posts item3:nth-child(1) { grid-column: 1/3; grid-row: 1/3; position: relative } .archive_leatest_three_posts item3:nth-child(2) { grid-row: 1/2 } .archive_leatest_three_posts item3:nth-child(3) { grid-row: 2/3 } .archive_leatest_three_posts item3 img { height: 100%; width: 100%; object-fit: cover } .archive_leatest_three_posts item3 { position: relative } .archive_leatest_three_posts item3 h4 { margin-bottom: 0; padding-bottom: 0; font-size: calc(1em + .9vw) } .archive_leatest_three_posts item3 h4 a { width: 100%; position: absolute; bottom: 0; color: #fff; font-weight: 700; background: linear-gradient(0deg, #222, transparent); left: 0; padding: 10px 10px 10px 15px } .archive_leatest_three_posts item3:nth-child(2) h4 a, .archive_leatest_three_posts item3:nth-child(3) h4 a { font-size: .7em } .archive_leatest_three_posts item3:hover h4 a { color: #ffb300 } .archive_container { display: flex } .archieve_left_part { flex: 1; min-width: 0; padding-right: 12px } .archieve_right_part { width: 300px; flex: 0 0 300px; padding-left: 13px; margin-top: 15px } .subcat_six_posts { margin-top: 15px } .subcat_six_posts h2 { width: 100%; line-height: 36px; color: #484848; font-size: 24px; padding-left: 2px; border-bottom: none; display: flex; margin-top: 8px; margin-bottom: 8px } .subcat_six_posts h2 a:link, .subcat_six_posts h2 a:visited { color: #484848; font-weight: 600; text-decoration: none } .subcat_six_posts_grid h4 { margin-bottom: 0; padding-bottom: 0; font-size: 1rem } .subcat_six_posts_grid h4 a:link, .subcat_six_posts_grid h4 a:visited { color: #000; display: block; margin-top: 7px; font-weight: 600 } .subcat_six_posts_grid h4 a:hover { color: #1e88e5 } .subcat_six_posts_grid item6 thumb1 { display: block; width: 100%; height: auto; margin-bottom: .5rem; line-height: 0 } .subcat_six_posts_grid item6 thumb1 img { position: relative; width: 100%; height: auto; object-fit: cover; display: block; max-height: 180px; aspect-ratio: 16/9 } .subcat_six_posts_grid { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, auto); grid-column-gap: 30px; grid-row-gap: 15px } .down, .down h2 { display: none } .archive_sub_cat_for_mobile { display: none } @media only screen and (max-width:1230px) { .archive_page_container { width: 960px; margin: auto; padding: 0 } } @media only screen and (max-width:990px) { .archieve_top_cat { margin-bottom: 0; border-bottom: none; background-color: #e9ecef } .archieve_top_cat ul { display: none } .archive_page_container { width: 760px; margin: auto; padding: 0 } .archieve_top_cat a { color: #000 !important; margin-left: 15px } .archive_sub_cat_for_mobile { align-items: center; display: flex; background-color: #f8f9fa } .archive_sub_cat_for_mobile ul { margin-bottom: 0; } .archive_sub_cat_for_mobile li { padding-left: 15px } .archive_sub_cat_for_mobile li a { color: #484848; text-decoration: none; font-weight: 600; line-height: 35px } .down { display: flex; align-items: center; width: 100% } .down h2 { display: block; color: #000; font-size: 22px; font-weight: 600; margin-left: 45%; margin-top: 10px; padding-left: 5px; border-left: 2px solid red } .archive_sub_cat_for_mobile ul { margin-left: 0; z-index: 99; background-color: #f3f3f3; display: grid; max-width: 760px; width: 100%; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(auto, auto) } .archive_leatest_three_posts { margin-top: 10px; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, auto); grid-gap: 15px } .archive_leatest_three_posts item3:nth-child(1) { grid-column-start: 1; grid-column-end: 3 } .archive_leatest_three_posts item3:nth-child(2) { grid-row: 3/4 } .archive_leatest_three_posts item3:nth-child(3) { grid-row: 3/4 } .archive_leatest_three_posts item3:nth-child(2) img, .archive_leatest_three_posts item3:nth-child(3) img { height: 140px; object-fit: cover; margin-bottom: 5px } .archive_leatest_three_posts item3:nth-child(2) h4, .archive_leatest_three_posts item3:nth-child(3) h4 { line-height: 15px; margin: 7px 0 } .archive_leatest_three_posts item3:nth-child(2) h4 a, .archive_leatest_three_posts item3:nth-child(3) h4 a { color: #020202; background: 0 0; padding: 0; font-size: .7em; position: relative } .subcat_six_posts_grid item6:nth-last-child(-n+3) { display: none } .subcat_six_posts_grid { display: flex; flex-direction: column } .subcat_six_posts_grid item6:nth-child(1) { position: relative } .subcat_six_posts_grid item6:nth-child(1) h4 a { position: absolute; font-size: 25px; color: #fff; background-color: rgba(0, 0, 0, .323); width: 100%; bottom: 0; padding: 8px 0; left: 0 } .subcat_six_posts_grid item6:nth-child(2), .subcat_six_posts_grid item6:nth-child(3) { display: flex } .subcat_six_posts_grid item6:nth-child(2) h4, .subcat_six_posts_grid item6:nth-child(3) h4 { margin: auto 5px } .subcat_six_posts_grid item6:nth-child(2) thumb1 img, .subcat_six_posts_grid item6:nth-child(3) thumb1 img { width: 90px; height: 60px; object-fit: cover } } @media only screen and (max-width:770px) { .subcat_six_posts h2 .cat_arrow { display: block; color: red; font-size: 24px; margin-left: auto } .archive_page_container { max-width: 570px; width: 97%; margin: auto; padding: 0 } .archive_first_ad { display: none } #id { display: none } .archieve_left_part { width: 100%; padding-right: 0 } .archieve_right_part { width: 100% } .archive_container { margin: 0 5px; display: flex; flex-direction: column } } .subcat_archive_container { max-width: var(--sn-site-max-width, 1200px); margin: 0 auto; padding: 0 15px } .subcat_page_container { display: flex } .subcat_page_container .subcat_left { flex: 1; min-width: 0; padding-right: 9px } .subcat_page_container .subcat_right { width: 300px; flex: 0 0 300px; padding-left: 13px; margin-top: 15px } .archive_leatest_eighteen_posts { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, auto); grid-column-gap: 30px; grid-row-gap: 5px } .archive_leatest_eighteen_posts item15 img { width: 100%; height: 150px; object-fit: cover } .archive_leatest_eighteen_posts item15 { margin-top: 15px } .archive_leatest_eighteen_posts item15 h4 { color: #000; display: block; font-size: 1rem; text-decoration: none; overflow: hidden; margin-top: 7px } .archive_leatest_eighteen_posts item15 h4 a { color: #000; font-weight: 600 } .fullwidth { width: 100%; padding: 10px; display: block; text-align: center; background-color: #337ab7; font-size: 20px; margin: 5px 0 } a.fullwidth a { text-decoration: none; color: #fff } @media only screen and (max-width:1230px) { .subcat_archive_container { width: 960px; margin: auto; padding: 0 } } @media only screen and (max-width:990px) { .bottom_parent { border-bottom: none; box-shadow: 0 4px 3px -4.5px #000; } .subcat_archive_container { width: 760px; margin: auto; padding: 0 } .archive_leatest_eighteen_posts { display: grid; grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(auto, auto); grid-gap: 10px } .archive_leatest_eighteen_posts item15 { display: flex; margin-top: 0 } .archive_leatest_eighteen_posts item15 h4 { margin: auto 5px } .archive_leatest_eighteen_posts item15 img { width: 120px; height: 68px; object-fit: cover } } @media only screen and (max-width:770px) { .subcat_archive_container { max-width: 570px; width: 97%; padding: 0 } .subcat_page_container { display: flex; flex-direction: column } .subcat_page_container .subcat_left { width: 100%; padding-right: 0 } .subcat_page_container .subcat_right { width: 100%; background-color: rgba(95, 158, 160, .411) } } .photo_archive_conatiner { max-width: var(--sn-site-max-width, 1200px); width: 100%; margin: 0 auto; padding: 0 15px; display: flex } .photo_archieve_left_part { width: 70% } .photo_subcat { padding: 0 10px 10px 10px; border: 1px solid #a5a5a5; border-top: 2px solid #000; margin-bottom: 30px } .photo_subcat h2 { margin-bottom: 10px; font-size: 20px } .photo_subcat h2 a { background: #630933; clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%); text-decoration: none; padding: 1px 25px 4px 25px; color: #fff } .photo_subcat_posts_grid item8 { background-color: #f7f7f7; border: 1px solid #ddd; position: relative } .photo_subcat_posts_grid item8 { position: relative } .photo_subcat_posts_grid item8 figure { width: 100%; height: auto; margin: 0; line-height: 0 } .photo_subcat_posts_grid item8 img { width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 1.5/1; max-height: 200px } .photo_subcat_posts_grid item8 i { position: absolute; border: 2px solid #fff; color: #fff; background: rgba(0, 0, 0, .5); padding: 13px 10px 12px 14px; opacity: .8; top: 20%; left: 35%; border-radius: 50%; -webkit-border-radius: 50% } figure { display: block; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0 } .photo_subcat_posts_grid item8 h4 { color: #000; font-size: 16px; text-align: center; border-top: 1px solid #ddd; padding: 5px } .photo_subcat_posts_grid item8:hover h4 { text-decoration: underline } .photo_subcat_posts_grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, auto); grid-gap: 15px } .photo_archieve_right_part { width: 30% } .pv_bread { margin: 15px 0 15px 0; font-size: 1rem; font-weight: 700 } .pv_bread a { color: #000; font-size: 18px } .video_archive_conatner { max-width: var(--sn-site-max-width, 1200px); width: 100%; margin: 0 auto; padding: 0 15px; display: flex } .all_twinty_posts { display: flex; flex-direction: column; gap: 15px } .all_twinty_posts > a { display: flex; gap: 12px; align-items: flex-start } .all_twinty_posts > a img { width: 160px; height: 100px; object-fit: cover; flex-shrink: 0 } .all_twinty_posts .item20span h4 { font-size: 1rem; font-weight: 600; color: #333; margin-bottom: 5px } .all_twinty_posts .item20span p { font-size: .85rem; color: #777 } @media only screen and (max-width:770px) { .all_twinty_posts > a img { width: 110px; height: 75px } } .pagination1 { width: 100%; margin: 10px 0; display: flex } .page-numbers { position: relative; display: block; padding: .3rem .75rem; margin-left: -1px; line-height: 1.25; color: #1e88e5; background-color: #fff; border: 1px solid #dee2e6 } .pagination1 .current { color: red } .pagi_inner { margin-left: auto; display: flex } .home_menu_inner { width: 100%; margin: 0 0 10px; position: relative } .map_inner_block { width: 100%; background: #e6e6fa; margin-bottom: 0; position: relative } .map_inner { background: #e6e6fa; padding: 15px; overflow: hidden } .st0 { opacity: .7 } .st1 { fill: #80c2eb; cursor: pointer } .st2 { fill: none; cursor: pointer } .st3 { fill: #008c44; stroke: #fff; stroke-width: .75; stroke-miterlimit: 10; cursor: pointer } .st4 { fill: #008c44; stroke: #fff; stroke-width: .75; stroke-miterlimit: 10; cursor: pointer } .st5 { fill: #008c44; stroke: #fff; stroke-width: .75; stroke-miterlimit: 10; cursor: pointer } .st6 { fill: #008c44; stroke: #fff; stroke-width: .75; stroke-miterlimit: 10; cursor: pointer } .st7 { fill: #008c44; stroke: #fff; stroke-width: .75; stroke-miterlimit: 10; cursor: pointer } .st8 { fill: #008c44; stroke: #fff; stroke-width: .75; stroke-miterlimit: 10; cursor: pointer } .st9 { fill: #008c44; stroke: #fff; stroke-width: .75; stroke-miterlimit: 10; cursor: pointer } .st10 { fill: #008c44; stroke: #fff; stroke-width: .75; stroke-miterlimit: 10; cursor: pointer } .st11 { fill: #008c44; stroke: #fff; stroke-width: .75; stroke-miterlimit: 10; cursor: pointer } .st13 { fill: #008c44; stroke: #fff; stroke-width: .25; stroke-miterlimit: 10; cursor: pointer } .st14 { fill: #008c44; stroke: #fff; stroke-width: .75; stroke-miterlimit: 10; cursor: pointer } .st15 { fill: #008c44; stroke: #fff; stroke-width: .25; stroke-miterlimit: 10; cursor: pointer } .st16 { enable-background: new; cursor: pointer } .st17 { fill: #fff; cursor: pointer } .st18 { opacity: .34; cursor: pointer } .st19 { fill: #008c44; cursor: pointer } #rangpur:hover path { fill: #9a1515 } #rangpur:hover path.st17 { fill: #fff } #rangpur:hover path.st19 { fill: #d5d5d5 } #mymensingh:hover path { fill: #9a1515 } #mymensingh:hover path.st17 { fill: #fff } #mymensingh:hover path.st19 { fill: #d5d5d5 } #sylhet:hover path { fill: #9a1515 } #sylhet:hover path.st17 { fill: #fff } #sylhet:hover path.st19 { fill: #d5d5d5 } #rajshahi:hover path { fill: #9a1515 } #rajshahi:hover path.st17 { fill: #fff } #rajshahi:hover path.st19 { fill: #d5d5d5 } #khulna:hover path { fill: #9a1515 } #khulna:hover path.st17 { fill: #fff } #khulna:hover path.st19 { fill: #d5d5d5 } #borishal:hover path { fill: #9a1515 } #borishal:hover path.st17 { fill: #fff } #borishal:hover path.st19 { fill: #d5d5d5 } #chittagong:hover path { fill: #9a1515 } #chittagong:hover path.st17 { fill: #fff } #chittagong:hover path.st19 { fill: #d5d5d5 } #dhaka:hover path { fill: #9a1515 } #dhaka:hover path.st17 { fill: #fff } #dhaka:hover path.st19 { fill: #d5d5d5 } .home_menu_online { width: 100%; border-bottom: 1px solid #fe0104; padding-left: 7px } .home_menu_online .catTitle { margin-bottom: 0 !important; font-size: 24px; line-height: 36px } .info_box_right .st-btn { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-transition: opacity .2s ease-in, top .2s ease-in; -ms-transition: opacity .2s ease-in, top .2s ease-in; -o-transition: opacity .2s ease-in, top .2s ease-in; -webkit-transition: opacity .2s ease-in, top .2s ease-in; transition: opacity .2s ease-in, top .2s ease-in; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; border: none; cursor: pointer; display: inline-block; height: 35px !important; width: 35px !important; line-height: 40px; margin-right: 8px; padding: 0 10px; position: relative; text-align: center; top: 0 !important; vertical-align: baseline; white-space: nowrap; display: inline-block !important } .info_box_right .st-total { display: inline-block; position: relative; width: 60px; border-right: 1px solid #cecece; margin-right: 15px; text-align: center; color: #282828 !important; line-height: 10px; margin-right: 5px !important } .info_box_right .st-btn>img { display: inline-block; height: 25px !important; width: 25px !important; position: relative; top: 5px !important; left: -4px; vertical-align: top } /* ========================================================================= Smart News — Modern UI Refresh (v2.0.0) Additive, non-breaking visual polish layered on top of the original theme. ========================================================================= */ :root { --sn-accent: #d81f26; --sn-accent-dark: #a9151b; --sn-ink: #1a1a1a; --sn-muted: #6b6b6b; --sn-line: #eaeaea; --sn-card-bg: #ffffff; --sn-radius: 10px; --sn-shadow: 0 2px 14px rgba(0, 0, 0, 0.07); --sn-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12); } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } /* v2.25.57 — সাইটজুড়ে (ডেস্কটপ+মোবাইল, সব ব্রেকপয়েন্টে) হরাইজন্টাল স্ক্রলবার সম্পূর্ণ বন্ধ। কারণ: header.php-এর .dg_menu_row রুলে width:100vw + margin-left/right:calc(50% - 50vw) ব্যবহার করে ফুল-ভিউপোর্ট-উইথ "ব্রেক আউট" করা হয়েছে (v2.25.37) যাতে মেনু-বারের বর্ডার/ব্যাকগ্রাউন্ড পুরো স্ক্রিন জুড়ে যায়। কিন্তু 100vw ইউনিটে ব্রাউজারের ভার্টিক্যাল স্ক্রলবারের প্রস্থও (~15-17px) যোগ হয়ে যায়, ফলে এলিমেন্টটি দৃশ্যমান ভিউপোর্টের চেয়ে চওড়া হয়ে পুরো পেজে একটি অতিরিক্ত হরাইজন্টাল স্ক্রলবার তৈরি করছিল — যা ফুটারের ঠিক নিচে (পেজের একদম শেষে) একটি সরু বার হিসেবে দেখা যেত। আগে overflow-x:hidden শুধু max-width:767px মিডিয়া-কোয়েরির ভেতরে (মোবাইল) সেট ছিল, ডেস্কটপ/ ট্যাবলেটে কোনো সেফটি-নেট ছিল না। এখন html ও body উভয়েই সব স্ক্রিন সাইজে overflow-x:hidden এবং max-width:100% যোগ করা হলো, যাতে কোনো ফুল-উইথ ব্রেক-আউট এলিমেন্ট থেকে ভবিষ্যতেও হরাইজন্টাল স্ক্রলবার আর কখনো দেখা না যায় — পেজের ভিজ্যুয়াল লেআউট/অ্যালাইনমেন্টে কোনো পরিবর্তন হয় না, শুধু অবাঞ্ছিত স্ক্রলবারটি মুছে যায়। */ html, body { overflow-x: hidden; max-width: 100%; } a, button, input, .btn, img { transition: all 0.2s ease-in-out; } img.wp-post-image, .sn-default-thumb, .home_page_ad img, .sidebar_ad img, .archive_first_ad img, .single_first_ad img { border-radius: 6px; } /* v2.7.9: ফলব্যাক/ডিফল্ট থাম্বনেইল ছবিটি (ফিচার্ড ইমেজ নেই এমন পোস্টে ব্যবহৃত হয়) যেন সবসময় তার কন্টেইনার অনুযায়ী ঠিকভাবে ক্রপ হয়ে বসে, কখনো স্ট্রেচ বা ছোট হয়ে ভেসে না থাকে — এটা একটা সেফটি-নেট, প্রতিটি গ্রিডের নিজস্ব img রুলের পাশাপাশি কাজ করবে, তার জায়গা নেবে না। */ .sn-default-thumb { width: 100%; max-width: 100%; object-fit: cover; display: block; } /* Card-style lift on post thumbnails for a more modern magazine feel */ img.wp-post-image:hover, .sn-default-thumb:hover { transform: translateY(-2px); filter: brightness(0.97); } /* Modern focus states for accessibility */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--sn-accent); outline-offset: 2px; } /* Scrollbar polish (WebKit) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #c9c9c9; border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: var(--sn-accent); } /* Selection color */ ::selection { background: var(--sn-accent); color: #fff; } /* ======================================================================= Smart News 2.1.0 আপডেট — নতুন কম্পোনেন্টের স্টাইল (ডেস্কটপ হেডার লেআউট, ফুটার মডার্নাইজেশন, শর্টকোড বক্স, সিঙ্গেল পেজ নতুন উপাদান) ======================================================================= */ /* ৬. ডেস্কটপ হেডার — রেফারেন্স ছবির সাথে হুবহু মেলানো আধুনিক ৩-সারি লেআউট সারি ১: তারিখ (বামে) + সোশ্যাল আইকন, সার্চ, মেনু আইকন (ডানে) — সাদা ব্যাকগ্রাউন্ড সারি ২: লোগো + ট্যাগলাইন, মাঝ বরাবর সারি ৩: মূল মেনু, বামদিক থেকে শুরু, পাতলা বর্ডারসহ */ @media only screen and (min-width:991px) { /* ---- সারি ১: টপ বার ---- */ .top_nav { background: #fff; color: #333; height: auto; min-height: 40px; padding: 10px 0; display: flex; align-items: center; border-bottom: 1px solid #e6e6e6; } .date_time { flex-direction: column; justify-content: center; height: auto; } .date_time li { height: auto; padding: 0; font-size: 12.5px; line-height: 1.5; color: #666; font-weight: 400; } .date_time li:first-child { font-size: 15px; color: #111; font-weight: 700; margin-bottom: 2px; } .date_time li:nth-child(2)::before, .date_time li:nth-child(3)::before { display: none; } .top_nav .nav_menu { display: none; } .top_nav .share_tiggle { display: none; } .social { margin-left: auto; align-items: center; } .social li { width: 30px; height: 30px; margin: 0 4px; padding: 0; display: flex; align-items: center; justify-content: center; background-color: #1a1a1a; border-radius: 50%; transition: background-color .2s ease, transform .2s ease; } .social li:hover { background-color: var(--sn-accent, #c4302b); transform: translateY(-2px); } .social li a:link i, .social li a:visited i { color: #fff; font-size: 13px; } .social li:hover a i { color: #fff; } /* রেফারেন্স ছবির ক্রম অনুযায়ী আইকন সাজানো: ফেসবুক, ইনস্টাগ্রাম, এক্স/টুইটার, ইউটিউব */ .social li:nth-child(1) { order: 1; } .social li:nth-child(6) { order: 2; } .social li:nth-child(2) { order: 3; } .social li:nth-child(3) { order: 4; } .social li:nth-child(4), .social li:nth-child(5), .social li:nth-child(7) { display: none; } /* রেফারেন্স ছবিতে সার্চ ও মেনু আইকন টপ বারে নেই, নিচের মেনু-বারে আছে — তাই টপ বারের এই আইকন জোড়া ডেস্কটপে লুকানো থাকবে (কাজ করবে মেনু-বারের .ham_burger আইকন দুটো, নিচে দেখুন) */ .sn_header_tools { display: none !important; } /* ---- সারি ২: লোগো ---- */ .bottom_parent { position: relative; border-bottom: 1px solid #e2e2e2 !important; } header.nav_container .bottom_nav { flex-wrap: wrap !important; height: auto !important; padding: 26px 0 22px !important; } header.nav_container .bottom_nav .logo { width: 100% !important; order: 1 !important; flex-direction: column; justify-content: center; display: flex !important; height: auto !important; padding-bottom: 0; } header.nav_container .bottom_nav .logo a { margin: 0 auto; height: auto !important; width: auto; max-width: 260px; } header.nav_container .bottom_nav .logo a img { max-height: 58px; width: auto; margin: 0 auto; } .sn_logo_tagline { display: block; text-align: center; margin-top: 10px; font-size: 13px; color: #7a7a7a; letter-spacing: .3px; } /* ---- সারি ৩: মূল মেনু (ক্যাটাগরি লিংক + ডানপ্রান্তে সার্চ/মেনু আইকন) ---- */ header.nav_container .bottom_nav .nav_menu_ground { order: 3 !important; width: auto !important; flex: 1 1 auto; min-width: 0; justify-content: flex-start; border-top: 1px solid #e6e6e6; background-color: #fff; margin-top: 22px; } header.nav_container .bottom_nav .nav_menu_ground ul.first_ull_menu { justify-content: flex-start; width: 100%; margin: auto 0; } header.nav_container .bottom_nav .nav_menu_ground ul.first_ull_menu li { height: 48px; font-size: 15px; padding: 0 14px 0 0; } header.nav_container .bottom_nav .nav_menu_ground ul.first_ull_menu li:first-child { padding-left: 0; } header.nav_container .bottom_nav .nav_menu_ground ul.first_ull_menu li a { position: relative; color: #262626; } header.nav_container .bottom_nav .nav_menu_ground ul.first_ull_menu li a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background-color: var(--sn-accent, #c4302b); transform: scaleX(0); transition: transform .2s ease; } header.nav_container .bottom_nav .nav_menu_ground ul.first_ull_menu li:hover>a { color: var(--sn-accent, #c4302b) !important; } header.nav_container .bottom_nav .nav_menu_ground ul.first_ull_menu li:hover>a::after { transform: scaleX(1); } /* রেফারেন্স ছবি অনুযায়ী সার্চ ও মেনু আইকন মূল মেনু-বারের ডানপ্রান্তে — সার্চ আগে, মেনু (হ্যামবার্গার) পরে, লেখা ("আরও") ছাড়া শুধু আইকন */ header.nav_container .ham_burger { display: flex !important; order: 4; margin-left: auto; flex-shrink: 0; border-top: 1px solid #e6e6e6; margin-top: 22px; } header.nav_container .ham_burger ul { height: 48px; align-items: center; } header.nav_container .ham_burger ul li { height: 48px; padding: 0 8px; cursor: pointer; } header.nav_container .ham_burger ul li#open_search { order: 1; } header.nav_container .ham_burger ul li#drop_ground { order: 2; margin-left: 6px; padding-left: 14px; border-left: 1px solid #e2e2e2; } header.nav_container .ham_burger ul li span:nth-child(2) { display: none; } header.nav_container .ham_burger ul li span, header.nav_container .ham_burger ul li i { font-size: 16px; color: #333; height: auto; } header.nav_container .ham_burger ul li:hover span, header.nav_container .ham_burger ul li:hover i { color: var(--sn-accent, #c4302b); } } /* ১. সিঙ্গেল পেজ — শোল্ডার, সাব-হেডিং, রিপোর্টার ছবি, লিড/সাব-লিড, ট্যাগ, বিজ্ঞাপন/শর্টকোড বক্স */ .sn_shoulder { display: block; color: #000; font-weight: 700; font-size: 15px; letter-spacing: .3px; margin-top: 8px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #e6e6e6; text-transform: uppercase; } /* ২. গ্রিড/লিস্টিং পেজ (হোমপেজ, ক্যাটাগরি, আর্কাইভ, সার্চ ইত্যাদি) — পোস্টে শোল্ডার সেট থাকলে হেডলাইনের অংশ হিসেবেই (একই হেডিং লাইনে) দেখাবে, শুধু শোল্ডারের অংশটুকু লাল কালারে। আলাদা লাইন/হেডলাইন হয়ে যাবে না। শোল্ডার না থাকলে এই অংশ প্রিন্টই হয় না, তাই স্পেসিং স্বাভাবিক থাকে — বেশি ফাঁকাও লাগবে না, বেশি চাপাও লাগবে না। */ .sn_grid_shoulder { display: inline; color: var(--sn-accent, #c4302b); font-weight: 700; } /* Sub-Title (_sn_sub_heading) — same red inline style as .sn_grid_shoulder, shown before the headline on every grid across the theme when a post has a Sub-Title set. */ .sn_grid_subtitle { display: inline; color: var(--sn-accent, #c4302b); font-weight: 700; } .sn_sub_heading { font-size: 1.15rem; font-weight: 500; color: #444; margin: 8px 0 8px 0; padding-bottom: 0; border-bottom: none; line-height: 1.5; } .sn_reporter_photo { display: inline-block !important; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 6px; } .sn_lead { font-size: 1.1rem; font-weight: 600; line-height: 1.7; color: #222; margin: 14px 0; padding-left: 12px; border-left: 3px solid #c4302b; } .sn_sub_lead { font-size: 1rem; font-weight: 500; line-height: 1.6; color: #333; margin: 0 0 14px 0; } .sn_post_tags { margin: 18px 0; padding-top: 12px; border-top: 1px dashed #ddd; font-size: .95rem; } .sn_post_tags a { display: inline-block; background: #f2f2f2; color: #333; padding: 4px 12px; margin: 3px 4px; border-radius: 20px; text-decoration: none; font-size: .85rem; } .sn_post_tags a:hover { background: #c4302b; color: #fff; } .sn_single_ad_box, .sn_single_shortcode_wrap, .sn_sidebar_bottom_boxes, .sn_category_section_box_wrap { margin: 16px 0; } .sn_shortcode_box, .sn_single_shortcode_box, .sn_sidebar_bottom_box, .sn_category_section_box { margin-bottom: 14px; text-align: center; overflow: hidden; } .sn-load-more-wrap { text-align: center; margin: 12px 0 24px 0; } .sn-load-more-btn { background-color: #c4302b; color: #fff; border: none; padding: 9px 26px; font-size: .95rem; font-weight: 600; border-radius: 4px; cursor: pointer; transition: background-color .2s ease; } .sn-load-more-btn:hover { background-color: #a5271f; } .sn-load-more-btn:disabled { opacity: .6; cursor: default; } /* পুরনো ফুটার ক্লাসগুলো নতুন .sn-footer লেআউটে প্রতিস্থাপিত হয়েছে */ @media only screen and (max-width:770px) { .sn_lead { font-size: 1rem; } } /* ============================================================================ আধুনিক মোবাইল লেআউট (৩২০px – ৭৬৭px) - সব মূল কনটেইনারে দুই পাশে সমান ১৬px প্যাডিং - কোনো কনটেন্ট/ছবি/কার্ড স্ক্রিনের কিনারা স্পর্শ করবে না - ছবি, শিরোনাম ও নিউজ কার্ড সমানভাবে সারিবদ্ধ - এই ব্লক শুধু max-width:767px এর মধ্যেই কার্যকর, ডেস্কটপ অপরিবর্তিত থাকে ============================================================================ */ @media only screen and (max-width: 767px) { html, body { overflow-x: hidden; width: 100%; } /* ---------- সব প্রধান পেজ-কনটেইনার একই নিয়মে: ফুল-উইথ + ১৬px পাশের প্যাডিং ---------- */ /* v2.9.101: .sn-cat-block-wrap (ক্যাটাগরি আর্কাইভ ব্লক হেডার) এই তালিকায় যোগ করা হলো, যাতে মোবাইলে এটি .subcat_archive_container-এর মতো একই ১৬px গাটারে অ্যালাইন থাকে এবং হেডারের নিচের বর্ডার আর কনটেন্টের চেয়ে চওড়া না দেখায়। */ .nav_container, .bottom_nav, .fixed, .drop_menu, .drop_nav_menu, .home_page, .page_container, .single_page_container, .archive_page_container, .subcat_archive_container, .sn-cat-block-wrap, .sn-tag-block-wrap, .all_posts_container, .photo_archive_conatiner, .ham_burger ul, .search_form, .sn-footer-inner { max-width: 100% !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; } /* ভেতরের সাব-কনটেইনার যেগুলো প্যারেন্ট থেকে ইতিমধ্যে প্যাডিং পাচ্ছে, তাদের নিজস্ব সাইড-প্যাডিং সরিয়ে দেওয়া হলো — যাতে ডাবল প্যাডিং না হয় এবং সব কনটেন্ট একই লাইনে সমানভাবে সারিবদ্ধ থাকে */ .home_page .home_page_left, .home_page .home_page_right, .single_page_container .sigle_left, .single_page_container .sigle_right, .archive_page_container .archieve_left_part, .archive_page_container .archieve_right_part, .subcat_page_container .subcat_left, .subcat_page_container .subcat_right, .all_posts_container_left, .all_posts_container_right { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; } /* ---------- ছবি/মিডিয়া: কখনোই প্যারেন্টের বাইরে যাবে না ---------- */ img, iframe, video, table, embed, object { max-width: 100% !important; height: auto; } /* কনটেন্টের ভেতরে থাকা ভাসমান বিজ্ঞাপন (#id) মোবাইলে ফুল-উইথ ও সেন্টার করা হলো, যাতে এটি ১৬px প্যাডিং-এর বাইরে না যায় */ #id { width: 100% !important; max-width: 300px; float: none !important; margin: 10px auto !important; } /* ---------- শিরোনাম ও টেক্সট: সমান বাম-সারিবদ্ধ, ছোট স্ক্রিনে ভেঙে না যাওয়া ---------- */ h1, h2, h3, h4, h5, h6, p { word-break: break-word; overflow-wrap: break-word; } /* ---------- নিউজ কার্ড/গ্রিড: সমান gap দিয়ে সারিবদ্ধ, ওভারফ্লো বন্ধ ---------- */ .all_twinty_posts, .archive_leatest_eighteen_posts, .photo_subcat_posts_grid { width: 100%; box-sizing: border-box; } .all_twinty_posts > a, item8, item15, item20 { max-width: 100%; box-sizing: border-box; } } /* খুব ছোট স্ক্রিনে (৩২০px–৩৭৪px) থাম্বনেইল আরেকটু ছোট করে যাতে টেক্সটের জন্য যথেষ্ট জায়গা থাকে এবং কার্ড ভেঙে না পড়ে */ @media only screen and (max-width: 374px) { .all_twinty_posts > a img { width: 90px; height: 65px; } } /* ============================================================================ মোবাইল হেডার ফিক্স (৩২০px–৯৭৯px) লে-আউট: [মেনু আইকন — বামে, কিনারা থেকে ১০px স্পেস] [লোগো — মাঝখানে] [সার্চ আইকন — ডানে, কিনারা থেকে ১০px স্পেস] পুরোনো position:absolute / width:inherit / width:760px হ্যাক সরিয়ে পরিষ্কার flexbox দিয়ে পুনর্গঠন করা হলো, যাতে যেকোনো স্ক্রিন সাইজে (৩২০px থেকে ৯৭৯px পর্যন্ত, যেখানেই top bar/date_time বার লুকানো থাকে) আইকন-লোগো একে অপরের সাথে ওভারল্যাপ না করে এবং কনটেইনারের বাইরে ৭৬০px/১১৪০px-এর মতো ফিক্সড উইথের কারণে সরে/ভেঙে না যায়়। আপডেট (২.৭.৪): মেনু ও সার্চ আইকন এখন স্ক্রিনের একদম কিনারা ঘেঁষে না বসে, প্রতিটির পাশে ১০px প্যাডিং/স্পেস রাখা হলো — .bottom_nav-এর নিজস্ব সাইড প্যাডিং দিয়ে। */ @media only screen and (max-width: 979px) { .dg_mobile_wrapper .bottom_nav { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; max-width: 100% !important; padding: 0 10px !important; margin: 0 !important; box-sizing: border-box !important; height: 60px !important; } .dg_mobile_wrapper .bottom_nav .nav_menu_ground { display: none !important; } /* .ham_burger ও তার ul-এর নিজস্ব বক্স সরিয়ে দেওয়া হলো (display:contents), যাতে ভেতরের দুইটা <li> (মেনু আইকন ও সার্চ আইকন) সরাসরি .bottom_nav-এর ফ্লেক্স-আইটেম হিসেবে আলাদা আলাদা প্রান্তে বসতে পারে */ .dg_mobile_wrapper .bottom_nav .ham_burger, .dg_mobile_wrapper .bottom_nav .ham_burger ul { display: contents !important; } /* আইকনের নিজস্ব প্যাডিং/মার্জিন ০ — কিনারা থেকে ১০px স্পেস .bottom_nav-এর সাইড প্যাডিং (উপরে) থেকেই আসে */ .dg_mobile_wrapper .bottom_nav .ham_burger ul li { width: auto !important; flex: 0 0 auto !important; display: flex !important; align-items: center !important; padding: 0 !important; margin: 0 !important; } .dg_mobile_wrapper .bottom_nav .ham_burger ul li#drop_ground { order: 1 !important; } .dg_mobile_wrapper .bottom_nav .ham_burger ul li#open_search { order: 3 !important; } /* লোগো: মাঝখানের সব জায়গা নেবে এবং তার ভেতরে কনটেন্ট সেন্টার থাকবে — তাই আইকনের সাইজ যাই হোক, লোগো ঠিক দুই আইকনের মাঝখানে থাকবে */ .dg_mobile_wrapper .bottom_nav .logo { order: 2 !important; position: static !important; width: auto !important; flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; min-width: 0 !important; } /* লোগোর পুরনো ফিক্সড উইথ (১৮০px) ও position:absolute বাদ — নাহলে লোগো ঠিক মাঝখানে সেন্টার না হয়ে একদিকে হেলে থাকতে পারে */ .dg_mobile_wrapper .bottom_nav .logo a { position: static !important; margin: 0 !important; width: auto !important; height: auto !important; max-width: 100% !important; justify-content: center !important; } .dg_mobile_wrapper .bottom_nav .logo a img { max-width: 100% !important; height: auto !important; } /* সার্চ ফর্ম প্যানেল (টগল হলে দেখা যায়) — সামান্য পাশের প্যাডিং রাখা হলো যাতে ইনপুট বক্স ও ক্লোজ আইকন একদম কিনারায় চেপে না যায় */ .dg_mobile_wrapper .search_form { max-width: 100% !important; width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; margin: 0 !important; box-sizing: border-box !important; } } /* ============================================================================ মোবাইল হেডার ফিক্সড/স্টিকি (স্ক্রল করলে উপরে আটকে থাকবে) থিমে আগে থেকেই স্ক্রল করলে .bottom_parent-এ "fixed" ক্লাস যোগ হওয়ার জাভাস্ক্রিপ্ট (js/script.js) ছিল, কিন্তু .fixed ক্লাসের CSS ছিল শুধু ডেস্কটপের জন্য (width:1200px, margin:auto) — মোবাইলে স্ক্রল করলে হেডার পর্দার বাইরে ১১৭০px চওড়া বক্স হয়ে ভেঙে/সরে যেত। নিচের রুল দিয়ে মোবাইলে .fixed অবস্থায় হেডার ঠিক ভিউপোর্টের সমান চওড়া, ১৬px প্যাডিং ও একই মেনু-লোগো-সার্চ লেআউট বজায় রেখে উপরে আটকে থাকবে। কনটেন্ট যাতে হেডারের নিচে চাপা না পড়ে তা আগে থেকেই থিমের .nav-placeholder উপাদান দিয়ে সামলানো হয় (js/script.js), তাই এখানে আলাদা padding-top লাগবে না */ @media only screen and (max-width: 979px) { /* আপডেট (২.১২.০১): ৭৬৭px-এর নিচে একটি জেনেরিক নিয়ম (".fixed" ক্লাসের উপর, সাধারণ পেজ-কনটেইনার প্যাডিং যোগ করার জন্য) .bottom_parent.fixed -কেও বাড়তি ১৬px সাইড-প্যাডিং দিয়ে দিচ্ছিল। .bottom_nav-এর নিজস্ব ১০px প্যাডিং তার উপরে যোগ হয়ে স্ক্রল করার পর আইকনগুলো কিনারা থেকে ~২৬px ভেতরে সরে যাচ্ছিল — ফলে স্টিকি হেডার সাধারণ (non-fixed) হেডারের ডিজাইনের মতো হুবহু দেখাচ্ছিল না। .dg_mobile_wrapper .bottom_parent.fixed (৩টি ক্লাস) সিলেক্টর জেনেরিক .fixed (১টি ক্লাস) থেকে বেশি স্পেসিফিক, তাই এখানে padding:0 !important দিলে সেটাই জিতবে এবং .bottom_nav-এর ১০px প্যাডিংই একমাত্র প্যাডিং থাকবে — স্টিকি অবস্থায়ও ঠিক একই মেনু-লোগো-সার্চ লে-আউট বজায় থাকবে। */ .dg_mobile_wrapper .bottom_parent.fixed { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background-color: #ffffff !important; z-index: 99999 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important; box-sizing: border-box !important; } /* আপডেট (২.১২.০৪): .dg_top_thick_bar-এর রঙ গাঢ় ধূসর (#4a4a4a) থেকে হালকা ধূসর (#d9d9d9) করা হলো — .bottom_nav ও .bottom_parent.fixed দুই অবস্থাতেই একই হালকা রঙ প্রযোজ্য */ .dg_mobile_wrapper .bottom_parent .dg_top_thick_bar { width: 100% !important; height: 3px !important; background-color: #d9d9d9 !important; display: block !important; clear: both !important; } } /* ============================================================================ গ্লোবাল .dg_top_thick_bar (ডেস্কটপ) — পুরনো ৫px গাঢ় ধূসর বার পুনরায় চালু করা হলো। এটি <body>-এর সরাসরি চাইল্ড (body > .dg_top_thick_bar) হিসেবে সিলেক্ট করা হয়েছে, যাতে .dg_mobile_wrapper .bottom_parent-এর ভেতরের পৃথক .dg_top_thick_bar (মোবাইল, ৩px হালকা ধূসর) এর সাথে এটি মিশে না যায় — দুটো ভিন্ন এলিমেন্ট, ভিন্ন আচরণ। ডেস্কটপে (৯৮০px+) দেখাবে, মোবাইলে (৯৭৯px ও তার নিচে) এই গ্লোবাল বারটি লুকানো থাকবে — মোবাইলে শুধু .bottom_nav-এর নিজস্ব ৩px বারটিই দেখা যাবে। */ body > .dg_top_thick_bar { width: 100% !important; height: 5px !important; background-color: #4a4a4a !important; display: block !important; clear: both !important; } @media only screen and (max-width: 979px) { body > .dg_top_thick_bar { display: none !important; } } /* ===================================================== বিজ্ঞাপন (Ad Slots) — Responsive এবং সাইট মার্জিনের মধ্যে ===================================================== হেডারের উপরে (header-1), হেডারের নিচে (header-rest), ফুটারের উপরে (footer-1) ও ফুটারের নিচে (footer-rest) — এই ৪টি বিজ্ঞাপন স্লট PHP-তে <header>/<footer>-এর বাইরে/ফুল-উইথ এরিয়ায় বসানো, তাই এদের .nav_container-এর মতোই max-width:1200px + একই সাইড প্যাডিং/ব্রেকপয়েন্ট দিয়ে সাইটের মূল মার্জিনের ভেতরে আটকে রাখা হলো, যাতে বিজ্ঞাপন কখনোই সাইটের কনটেন্টের চেয়ে চওড়া দেখা না যায়। */ .sn-ad-slot-header-1, .sn-ad-slot-header-rest, .sn-ad-slot-footer-1, .sn-ad-slot-footer-rest { max-width: var(--sn-site-max-width, 1200px) !important; width: 100% !important; margin: 12px auto !important; padding: 0 15px !important; box-sizing: border-box !important; } /* মোবাইলে হেডার/মেনু নিজে edge-to-edge (প্যাডিং-শূন্য) দেখানো হলেও বিজ্ঞাপন যেন কখনোই স্ক্রিনের একদম কিনারা ছুঁয়ে না যায় — তাই এখানে হেডারের মতো প্যাডিং শূন্য করা হয়নি; ছোট স্ক্রিনে শুধু প্যাডিং একটু কমানো হলো, কিন্তু সবসময় একটা নূন্যতম সাইড মার্জিন বজায় থাকবে। (!important দেওয়া হলো, যাতে অন্য কোনো generic .sn-ad-slot নিয়ম বা থিমের অন্য কোনো CSS এসে এই সাইড মার্জিন শূন্য করে দিতে না পারে) */ @media only screen and (max-width: 767px) { .sn-ad-slot-header-1, .sn-ad-slot-header-rest, .sn-ad-slot-footer-1, .sn-ad-slot-footer-rest { padding: 0 12px !important; margin: 10px auto !important; } } @media only screen and (max-width: 480px) { .sn-ad-slot-header-1, .sn-ad-slot-header-rest, .sn-ad-slot-footer-1, .sn-ad-slot-footer-rest { padding: 0 10px !important; } } /* সব লোকেশনের (হেডার, ফুটার, সাইডবার, সিঙ্গেল, পেইজ, আর্কাইভ, হোমপেজ) বিজ্ঞাপন বক্সের জন্য কমন Responsive নিয়ম — অ্যাডসেন্স/iframe/ব্যানার কোড যেই সাইজেরই হোক না কেন, প্যারেন্ট কন্টেইনারের সমান/ছোট হয়ে স্বয়ংক্রিয়ভাবে এডজাস্ট হবে এবং কখনো নিজের বক্সের বাইরে/স্ক্রিনের বাইরে ছড়িয়ে পড়বে না (কোনো হরাইজন্টাল স্ক্রল তৈরি হবে না)। */ .sn-ad-slot { display: flex !important; justify-content: center !important; align-items: center !important; flex-wrap: wrap !important; width: 100%; box-sizing: border-box !important; overflow: hidden; text-align: center; } .sn-ad-box { max-width: 100%; box-sizing: border-box; overflow: hidden; margin: 0 auto !important; text-align: center; } .sn-ad-box img { max-width: 100% !important; height: auto !important; margin: 0 auto !important; } .sn-ad-box iframe, .sn-ad-box ins, .sn-ad-box embed, .sn-ad-box object, .sn-ad-box video { max-width: 100% !important; width: 100% !important; height: auto !important; border: 0; margin: 0 auto !important; } /* কিছু অ্যাড নেটওয়ার্ক/থার্ড-পার্টি কোড (raw script/table/div ব্যানার) নিজস্ব ইনলাইন width, float বা fixed মার্জিন নিয়ে আসে — যার কারণেই বিজ্ঞাপন বাম দিকে সরে গিয়ে সাইটের মার্জিনের বাইরে চলে যাচ্ছিল। নিচের নিয়মে সেই কোডের ভেতরের যেকোনো এলিমেন্টের float/margin জোর করে রিসেট করে মাঝ বরাবর (center) এনে প্যারেন্টের ভেতরে আটকে রাখা হলো। */ .sn-ad-code, .sn-ad-code * { max-width: 100% !important; float: none !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } .sn-ad-code { display: block !important; width: 100%; text-align: center; } .sn-ad-code table { width: 100% !important; } /* ===================================================== হোমপেজ সেকশন বিজ্ঞাপন (Homepage Section Ads) — v2.9.66 ===================================================== থিম অপশন → Advertisements → Homepage Ads: নম্বর ১ = section-one এর ওপরে, নম্বর ২ = section-two এর ওপরে … নম্বর ১১ = section-eleven এর ওপরে অটো বিজ্ঞাপন বক্স। নম্বর ০ = সবার উপরে টপ ফুল-উইথ ব্যানার। প্রতিটি সেকশন ব্লকের ঠিক আগে বসে, সেকশনের width অনুযায়ী সাইজ নেয়। */ .sn-ad-slot-homepage-section { width: 100% !important; margin: 14px auto 16px auto !important; padding: 0 !important; box-sizing: border-box !important; } /* নম্বর ০ — সবার উপরে টপ ফুল-উইথ ব্যানার (home_page র‍্যাপের ভেতরে) */ .sn-ad-slot-homepage-0, .home_page > .sn-ad-slot { max-width: var(--sn-site-max-width, 1200px) !important; margin: 12px auto !important; padding: 0 15px !important; } @media only screen and (max-width: 767px) { .sn-ad-slot-homepage-section { margin: 10px auto 12px auto !important; } .sn-ad-slot-homepage-0, .home_page > .sn-ad-slot { padding: 0 12px !important; } } @media only screen and (max-width: 480px) { .sn-ad-slot-homepage-section { margin: 8px auto 10px auto !important; } .sn-ad-slot-homepage-0, .home_page > .sn-ad-slot { padding: 0 10px !important; } } /* ===================================================== হোমপেজ সাইডবার বিজ্ঞাপন (Homepage Sidebar Ads) — v2.9.67 ===================================================== থিম অপশন → Advertisements → Homepage Sidebar Ad: নম্বর ১ = লিড সাইডবার (300x250), নম্বর ২ = section-two সাইডবার (300x250), নম্বর ৩ = Photo-Card সাইডবার (300x350)। সাইডবার বিজ্ঞাপন ঘরের ভেতরে অটো বসে, সাইজ অনুযায়ী রেসপন্সিভ। বিজ্ঞাপন না থাকলে ঘরটি লুকিয়ে যায় যাতে লেআউট ভেঙে না যায়। */ .sn-ad-slot-homepage-sidebar { width: 100% !important; max-width: 300px !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; display: block !important; } /* Photo-Card sidebar ঘর (300x350) — একটু লম্বা, তাই সর্বোচ্চ উচ্চতা বাড়ানো হয়েছে */ .sn-ad-slot-homepage-sidebar-3 { max-width: 300px !important; } .sn-ad-slot-homepage-sidebar img, .sn-ad-slot-homepage-sidebar iframe { max-width: 100% !important; height: auto !important; display: block !important; margin: 0 auto !important; border: 0 !important; } .sn-ad-slot-homepage-sidebar .sn-ad-item { width: 100% !important; margin: 0 !important; padding: 0 !important; } .sn-ad-slot-homepage-sidebar:empty { display: none !important; } /* ছোট স্ক্রিনে সাইডবার বিজ্ঞাপন সেন্টারে থাকে, সাইজ অটো স্কেল করে */ @media only screen and (max-width: 991px) { .sn-ad-slot-homepage-sidebar { max-width: 300px !important; margin: 12px auto !important; } } @media only screen and (max-width: 480px) { .sn-ad-slot-homepage-sidebar { max-width: 100% !important; margin: 8px auto !important; } .sn-ad-slot-homepage-sidebar img, .sn-ad-slot-homepage-sidebar iframe { max-width: 100% !important; } } /* ===================================================== ডেস্কটপ মুড ফোর্স (Desktop Mode Force) — v2.9.67 ===================================================== মোবাইল ব্রাউজারে "Request Desktop Site" সিলেক্ট করলে বা থিমের ডেস্কটপ টগল বাটনে ক্লিক করলে <html> এ .sn-desktop-mode ক্লাস যোগ হয়। এই ক্লাস থাকলে viewport নির্বিশেষে ডেস্কটপ wrapper ফোর্স করে দেখাবে, যাতে ফুল ডেস্কটপ লেআউট হুবহু দেখায়। viewport meta width=1280 এর সাথে এটি একটি CSS সেফটি-নেট। */ html.sn-desktop-mode .dg_desktop_wrapper { display: block !important; } html.sn-desktop-mode .dg_mobile_wrapper { display: none !important; } /* ডেস্কটপ মুডে সাইটের মূল কন্টেইনার ডেস্কটপ প্রস্থে থাকে (v2.25.16 — Website Max Width সেটিং অনুযায়ী স্বয়ংক্রিয়, header.php-এর viewport মেটা ট্যাগের মানের সাথে সবসময় মিলে থাকে) */ html.sn-desktop-mode body { min-width: var(--sn-site-max-width, 1280px); } /* ডেস্কটপ মুডে মোবাইল-স্পেসিফিক লুকানো এলিমেন্ট পুনরায় দেখাবে না, কিন্তু ডেস্কটপ এলিমেন্টগুলো দৃশ্যমান থাকে — উপরের নিয়মে সেট হয়েছে। */