@font-face{font-weight:400;font-style:normal;font-family:"woodmart-font";src:url(//ekramshop.com/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=7.2.5) format("woff2");font-display:swap}.wd-popup.wd-promo-popup{background-color:#111;background-image:none;background-repeat:no-repeat;background-size:contain;background-position:left center}.page-title-default{background-color:#007cc3;background-image:none;background-size:cover;background-position:center center}.footer-container{background-color:#fff;background-image:none}:root{--wd-text-font:"Lato", Arial, Helvetica, sans-serif;--wd-text-font-weight:400;--wd-text-color:#777777;--wd-text-font-size:14px}:root{--wd-title-font:"Poppins", Arial, Helvetica, sans-serif;--wd-title-font-weight:600;--wd-title-color:#242424}:root{--wd-entities-title-font:"Poppins", Arial, Helvetica, sans-serif;--wd-entities-title-font-weight:500;--wd-entities-title-color:#333333;--wd-entities-title-color-hover:rgb(51 51 51 / 65%)}:root{--wd-alternative-font:"Lato", Arial, Helvetica, sans-serif}:root{--wd-widget-title-font:"Poppins", Arial, Helvetica, sans-serif;--wd-widget-title-font-weight:600;--wd-widget-title-transform:uppercase;--wd-widget-title-color:#333;--wd-widget-title-font-size:16px}:root{--wd-header-el-font:"Lato", Arial, Helvetica, sans-serif;--wd-header-el-font-weight:700;--wd-header-el-transform:uppercase;--wd-header-el-font-size:13px}:root{--wd-primary-color:rgb(0,124,195)}:root{--wd-alternative-color:rgb(255,153,55)}:root{--wd-link-color:#333333;--wd-link-color-hover:rgb(0,124,195)}:root{--btn-default-bgcolor:#f7f7f7}:root{--btn-default-bgcolor-hover:#efefef}:root{--btn-accented-bgcolor:rgb(255,153,55)}:root{--btn-accented-bgcolor-hover:rgb(255,123,0)}:root{--notices-success-bg:#459647}:root{--notices-success-color:#fff}:root{--notices-warning-bg:#E0B252}:root{--notices-warning-color:#fff}:root{--wd-form-brd-radius:0px;--wd-form-brd-width:2px;--btn-default-color:#333;--btn-default-color-hover:#333;--btn-accented-color:#333;--btn-accented-color-hover:#333;--btn-default-brd-radius:0px;--btn-default-box-shadow:none;--btn-default-box-shadow-hover:none;--btn-default-box-shadow-active:none;--btn-default-bottom:0px;--btn-accented-bottom-active:-1px;--btn-accented-brd-radius:0px;--btn-accented-box-shadow:inset 0 -2px 0 rgba(0, 0, 0, .15);--btn-accented-box-shadow-hover:inset 0 -2px 0 rgba(0, 0, 0, .15);--wd-brd-radius:0px}@media (min-width:1025px){.whb-boxed:not(.whb-sticked):not(.whb-full-width) .whb-main-header{max-width:1270px}}.container{max-width:1300px}:root{--wd-container-w:1300px}@media (min-width:1317px){.platform-Windows .wd-section-stretch>.elementor-container{margin-left:auto;margin-right:auto}}@media (min-width:1300px){html:not(.platform-Windows) .wd-section-stretch>.elementor-container{margin-left:auto;margin-right:auto}}div.wd-popup.popup-quick-view{max-width:920px}.woodmart-woocommerce-layered-nav .wd-scroll-content{max-height:223px}Tuesday 11:52 AM این صفحه اصلی سایت منه ببینش نظرت راجب اینکه این مدلیش کنیم چیه؟ یا ایده بهتری داری؟ Edit اینجا؟ میام تو این صفحه هنوز سی اس اس قبلی هست اینجوری شده این شد الان هدر این شکلیه هم خیلی پهنه هم خیلی فضای خالی اضافی داره از منظر ui/ux بهترش کن برام مشکلم با سفیدی اضافه دو طرفه حتماً. کل CSS فعلی رو پاک کن و این نسخه جدید رو یکجا بذار تا هم شبکه‌های اجتماعی، هم سرچ، هم منوی پایین، هم عرض کامل هدر درست بشه:.ekram-top-social .wd-social-icon,.ekram-top-social .wd-social-icon a,.ekram-top-social a{color:#ffffff!important;font-size:15px!important}.ekram-top-social .wd-social-icon a:hover,.ekram-top-social a:hover{color:#FF8A00!important}.ekram-top-social .wd-social-icons{display:flex!important;align-items:center!important;gap:10px!important}.ekram-top-social svg{width:15px!important;height:15px!important;fill:currentColor!important}@media (min-width:1025px){.page-id-14658 .whb-main-header .container,.page-id-14658 .whb-header-bottom .container{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;padding-left:24px!important;padding-right:24px!important}}.page-id-14658 .whb-main-header{background:#FFFFFF!important}.page-id-14658 .whb-main-header [class*="wd-header-search-form"]{width:100%!important;max-width:650px!important}.page-id-14658 .whb-main-header [class*="wd-header-search-form"] form{width:100%!important}.page-id-14658 .whb-main-header [class*="wd-header-search-form"] input[type="text"],.page-id-14658 .whb-main-header [class*="wd-header-search-form"] input[type="search"]{height:42px!important;border:1px solid #E5E7EB!important;border-radius:22px!important;background:#FFFFFF!important;color:#17202A!important;font-size:13px!important}.page-id-14658 .whb-main-header [class*="wd-header-search-form"] input::placeholder{color:#9CA3AF!important;opacity:1!important}.page-id-14658 .whb-main-header [class*="wd-header-search-form"] input:focus{border-color:#FF8A00!important;outline:none!important;box-shadow:none!important}.page-id-14658 .whb-main-header [class*="wd-header-search-form"] button{height:42px!important;background:transparent!important;color:#FF8A00!important}.page-id-14658 .whb-main-header [class*="wd-header-search-form"] button:hover{background:transparent!important;color:#FF8A00!important}.page-id-14658 .whb-main-header .wd-tools-element{color:#17202A!important;margin-left:4px!important;margin-right:4px!important}.page-id-14658 .whb-main-header .wd-tools-element:hover{color:#FF8A00!important}.page-id-14658 .whb-header-bottom{background:#FFFFFF!important;border-top:1px solid #F1F1F1!important;border-bottom:1px solid #F1F1F1!important}.page-id-14658 .whb-header-bottom .wd-nav>li>a{color:#17202A!important;padding-left:13px!important;padding-right:13px!important;font-size:14px!important}.page-id-14658 .whb-header-bottom .wd-nav>li>a:hover{color:#FF8A00!important}بعد:ذخیره تنظیمات برو Preview صفحه Home New Ctrl+F5 با این نسخه دیگه اون فضای سفید زیاد دو طرف هدر نباید بمونه، و محتوا فقط 24px از لبه‌ها فاصله خواهد داشت. بازم فضای خالی هست آره؛ الان فهمیدم چرا با CSS قبلی تغییری ندیدی. Selector قبلی دقیقاً به Container اصلی ردیف WoodMart نمی‌خورد. در WoodMart وقتی Full Width Header فعال است، خود ردیف اصلی از ساختار whb-general-header>.container استفاده می‌کند. خود WoodMart هم برای Full Width همین منطق را به‌کار می‌برد. فعلاً فقط بخش مربوط به عرض هدر در CSS قبلی را حذف کن و این را جایگزینش کن:@media (min-width:1025px){.page-id-14658 .whb-full-width .whb-general-header>.container{width:100%!important;max-width:100%!important;padding-left:24px!important;padding-right:24px!important;margin-left:0!important;margin-right:0!important}.page-id-14658 .whb-full-width .whb-header-bottom>.container{width:100%!important;max-width:100%!important;padding-left:24px!important;padding-right:24px!important;margin-left:0!important;margin-right:0!important}}و داخل Header Builder → Settings مطمئن شو:سربرگ تمام عرض=فعال ✅ بعد:ذخیره → Preview → Ctrl+F5 این بار باید خود محتویات هدر تقریباً تا دو طرف صفحه باز شود و فقط 24px حاشیه امن داشته باشد. نکته مهم:من نمی‌خواهم صفر پیکسل به لبه مانیتور بچسبد؛ از نظر UI/UX آن حالت بدتر است. هدف ما این است:| 24px | حساب/سبد —— سرچ بزرگ —— لوگو | 24px | نه این:| فضای سفید بزرگ | محتوا | فضای سفید بزرگ | اگر بعد از همین تغییر هنوز فضای خالی ماند، دیگر حدس نمی‌زنیم؛ از روی همان Preview دقیقاً Container بعدی WoodMart را هدف می‌گیریم. کل سی اس اس جدید رو از اول بده بله. کل CSS فعلی داخل WoodMart → CSS سفارشی عمومی رو پاک کن و این نسخه رو از اول، کامل و یکجا جایگزین کن:.ekram-top-social,.ekram-top-social .wd-social-icons{display:flex!important;align-items:center!important}.ekram-top-social .wd-social-icons{gap:10px!important}.ekram-top-social a,.ekram-top-social .wd-social-icon,.ekram-top-social .wd-social-icon a{color:#FFFFFF!important;font-size:15px!important}.ekram-top-social a:hover,.ekram-top-social .wd-social-icon a:hover{color:#FF8A00!important}.ekram-top-social svg{width:15px!important;height:15px!important;fill:currentColor!important}@media (min-width:1025px){.page-id-14658 .whb-general-header>.container,.page-id-14658 .whb-main-header .whb-general-header>.container,.page-id-14658 .whb-main-header>.container,.page-id-14658 .whb-full-width .whb-general-header>.container,.page-id-14658 .whb-full-width .whb-main-header>.container{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;padding-left:24px!important;padding-right:24px!important}.page-id-14658 .whb-header-bottom>.container,.page-id-14658 .whb-header-bottom .container,.page-id-14658 .whb-full-width .whb-header-bottom>.container{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;padding-left:24px!important;padding-right:24px!important}}.page-id-14658 .whb-main-header,.page-id-14658 .whb-general-header{background:#FFFFFF!important}.page-id-14658 .whb-main-header [class*="wd-header-search-form"]{width:100%!important;max-width:680px!important}.page-id-14658 .whb-main-header [class*="wd-header-search-form"] form{width:100%!important}.page-id-14658 .whb-main-header [class*="wd-header-search-form"] input[type="text"],.page-id-14658 .whb-main-header [class*="wd-header-search-form"] input[type="search"]{width:100%!important;height:42px!important;background:#FFFFFF!important;border:1px solid #E2E5E9!important;border-radius:22px!important;color:#17202A!important;font-size:13px!important;padding-right:18px!important}.page-id-14658 .whb-main-header [class*="wd-header-search-form"] input::placeholder{color:#9CA3AF!important;opacity:1!important}.page-id-14658 .whb-main-header [class*="wd-header-search-form"] input:focus{border-color:#FF8A00!important;outline:none!important;box-shadow:none!important}.page-id-14658 .whb-main-header [class*="wd-header-search-form"] button{height:42px!important;color:#FF8A00!important;background:transparent!important;border:0!important;box-shadow:none!important}.page-id-14658 .whb-main-header [class*="wd-header-search-form"] button:hover{color:#E97800!important;background:transparent!important}.page-id-14658 .whb-main-header .wd-tools-element{color:#17202A!important;margin-left:4px!important;margin-right:4px!important}.page-id-14658 .whb-main-header .wd-tools-element:hover{color:#FF8A00!important}@media (min-width:1025px){.page-id-14658 .whb-main-header .wd-header-cart,.page-id-14658 .whb-main-header .wd-header-wishlist,.page-id-14658 .whb-main-header .wd-header-my-account{margin-left:2px!important;margin-right:2px!important}}.page-id-14658 .whb-header-bottom{background:#FFFFFF!important;border-top:1px solid #F2F3F5!important;border-bottom:1px solid #F2F3F5!important}.page-id-14658 .whb-header-bottom .wd-nav>li>a{color:#17202A!important;font-size:14px!important;font-weight:500!important;padding-left:13px!important;padding-right:13px!important}.page-id-14658 .whb-header-bottom .wd-nav>li>a:hover{color:#FF8A00!important}@media (min-width:1025px){.page-id-14658 .whb-main-header .whb-column,.page-id-14658 .whb-header-bottom .whb-column{min-width:0!important}}@media (max-width:1024px){.page-id-14658 .whb-main-header [class*="wd-header-search-form"]{max-width:100%!important}}@media (max-width:767px){.page-id-14658 .whb-header-bottom{padding:5px 12px!important;background:#FFFFFF!important}.page-id-14658 .whb-header-bottom [class*="wd-header-search-form"]{width:100%!important;max-width:100%!important;margin:0!important}.page-id-14658 .whb-header-bottom [class*="wd-header-search-form"] form{width:100%!important}.page-id-14658 .whb-header-bottom [class*="wd-header-search-form"] input[type="text"],.page-id-14658 .whb-header-bottom [class*="wd-header-search-form"] input[type="search"]{width:100%!important;height:44px!important;border:1px solid #E5E7EB!important;border-radius:22px!important;background:#FFFFFF!important;color:#17202A!important;font-size:13px!important;padding-right:16px!important}.page-id-14658 .whb-header-bottom [class*="wd-header-search-form"] input::placeholder{color:#9CA3AF!important;opacity:1!important}.page-id-14658 .whb-header-bottom [class*="wd-header-search-form"] input:focus{border-color:#FF8A00!important;outline:none!important;box-shadow:none!important}.page-id-14658 .whb-header-bottom [class*="wd-header-search-form"] button{width:44px!important;height:44px!important;background:transparent!important;color:#FF8A00!important;border:0!important;box-shadow:none!important}}