گاهی در سایتهایی که با قالب وودمارت و المنتور ساخته شدهاند، در بخش اسلایدر محصولات یک حالت سایه، تیرگی یا محوشدگی در لبههای چپ و راست دیده میشود. خیلی وقتها مدیر سایت فکر میکند این مشکل از box-shadow ساده کارت محصول است، اما در واقع موضوع کمی فنیتر است.
این آموزش دقیقاً برای همین مشکل نوشته شده تا اگر بعداً خودتان یا شخص دیگری خواست آن را برطرف کند، بداند باید کجا را بررسی کند و چرا بعضی کدهای معمولی جواب نمیدهند.
اصل مشکل چیست؟
- در بعضی ویجتهای محصولات وودمارت، خود قالب به صورت خودکار کلاسهایی مثل
wd-products-with-shadowبه اسلایدر اضافه میکند. - این کلاسها برای زیباتر کردن ظاهر اسلایدر ساخته شدهاند، اما گاهی باعث میشوند در کنارههای اسلایدر یک سایه یا تیرگی ناخواسته دیده شود.
- علاوه بر
box-shadow، گاهی وودمارت یا ساختار اسلایدر ازmask-image،filterیا فاصلههای داخلی (padding) هم استفاده میکند و همین باعث میشود مشکل فقط با یک خط CSS ساده حل نشود.
چرا کدهای قبلی معمولاً جواب نمیدهند؟
- خیلیها اول با آیدیهایی مثل
#carousel-886کد مینویسند. - مشکل اینجاست که این آیدیها در وودمارت و اسلایدرها ممکن است داینامیک باشند؛ یعنی امروز یک عدد باشند و بعداً عوض شوند.
- در نتیجه، کدی که بر اساس آن آیدی نوشته شده، شاید فقط موقتاً کار کند یا اصلاً روی لودهای بعدی بیاثر شود.
راهحل درست چیست؟
راهحل حرفهای این است که به همان ویجتی که مشکل دارد، یک کلاس اختصاصی و ثابت بدهیم؛ بعد CSS را فقط روی همان کلاس اعمال کنیم. این روش هم دقیق است، هم امن است و هم باعث نمیشود بقیه اسلایدرهای سایت خراب شوند.
مرحله ۱: اضافه کردن کلاس اختصاصی به ویجت
در المنتور:
- صفحه مورد نظر را باز کنید.
- روی ویجت اسلایدر یا تب محصولات که مشکل دارد کلیک کنید.
- وارد تب
Advancedیاپیشرفتهشوید. - در قسمت
CSS Classesاین عبارت را وارد کنید:
maj-no-shadow
- سپس صفحه را ذخیره یا
Updateکنید.
نکته مهم:
- این عبارت را بدون نقطه وارد کنید.
- یعنی فقط بنویسید
maj-no-shadowنه.maj-no-shadow
مرحله ۲: اضافه کردن کد CSS
حالا کد زیر را در بخش Custom CSS قالب یا بخش CSS سفارشی سایت قرار دهید:
/* حذف کامل سایه و افکتهای کناری فقط برای ویجت مشخص شده */
.maj-no-shadow,
.maj-no-shadow .wd-products-with-shadow,
.maj-no-shadow .wd-carousel-container,
.maj-no-shadow .wd-carousel-inner,
.maj-no-shadow .wd-carousel-wrap,
.maj-no-shadow .swiper,
.maj-no-shadow .swiper-wrapper,
.maj-no-shadow .swiper-slide {
box-shadow: none !important;
-webkit-box-shadow: none !important;
mask-image: none !important;
-webkit-mask-image: none !important;
filter: none !important;
}
/* حذف سایه یا افکت از کارتهای محصول */
.maj-no-shadow .wd-product,
.maj-no-shadow .product-grid-item,
.maj-no-shadow .wd-product-wrapper,
.maj-no-shadow .wd-product:hover,
.maj-no-shadow .wd-product-wrapper:hover {
box-shadow: none !important;
-webkit-box-shadow: none !important;
filter: none !important;
}
/* حذف فاصلههایی که گاهی باعث دیده شدن افکت کناری میشوند */
.maj-no-shadow .wd-carousel-container,
.maj-no-shadow .wd-carousel-inner {
padding-left: 0 !important;
padding-right: 0 !important;
overflow: visible !important;
}
این کد دقیقاً چه کاری میکند؟
- هر نوع
box-shadowرا از کانتینر اسلایدر حذف میکند. - اگر قالب از
mask-imageبرای محوشدگی لبهها استفاده کرده باشد، آن را هم غیرفعال میکند. - اگر افکت با
filterساخته شده باشد، آن را هم حذف میکند. - اگر مشکل از فاصله داخلی کنارهها باشد،
paddingرا هم صفر میکند. - همه این تغییرات فقط روی ویجتی اعمال میشود که کلاس
maj-no-shadowدارد.
چرا این روش بهتر از استفاده از آیدی است؟
- کلاس
maj-no-shadowثابت میماند. - با تغییر لود صفحه یا تبها عوض نمیشود.
- فقط همان بخش را هدف میگیرد.
- روی بقیه محصولات یا اسلایدرهای سایت اثر ناخواسته نمیگذارد.
اگر باز هم کار نکرد، مشکل معمولاً از این موارد است
- کلاس را اشتباه وارد کردهاید.
- کلاس را با نقطه نوشتهاید.
- کد CSS را در جای اشتباه قرار دادهاید.
- کش سایت یا کش مرورگر هنوز نسخه قدیمی را نشان میدهد.
- قالب یا افزونه کش، فایل CSS را هنوز دوبارهسازی نکرده است.