سیستمی‌ها
اصلاح ظاهر لیست محصولات در اپن کارت 2.0 - نسخه‌ی قابل چاپ

+- سیستمی‌ها (http://forums.systemiha.ir)
+-- انجمن: کامپیوتر (http://forums.systemiha.ir/forumdisplay.php?fid=1)
+--- انجمن: اپن کارت OpenCart (http://forums.systemiha.ir/forumdisplay.php?fid=38)
+--- موضوع: اصلاح ظاهر لیست محصولات در اپن کارت 2.0 (/showthread.php?tid=91)

اصلاح ظاهر لیست محصولات در اپن کارت 2.0 - mojtabamalaekeh - 2016/06/23

توی این پست میخوایم کمی ظاهر فروشگاه اپن کارت 2.0 البته با پوسته پیشفرض رو زیباتر کنیم.

بیشتر تغییرات مربوط به لیست محصولات هست که توی صفحه اصلی خیلی به چشم میاد.
اگر ورژن اپن کارت شما هم 2.0 هست و پوسته‌ی پیشفرض رو استفاده می کنید،
این فایل رو از توی هاست پیدا و ویرایش کنید:
کد:
catalog/view/theme/default/stylesheet/stylesheet-rtl.css


لیستی از تغییرات رو در زیر می بینید که نباید یک جا همه رو کپی و توی اون فایل Paste کنید Sleepy
بلکه هر بخش رو ابتدا باید جستجو کنید (با امکان Search مرورگر که با Ctrl+F فعال میشه)
اگر اون بخش در فایل stylesheet-rtl.css موجود بود، اصلاح کنید
و اگر موجود نبود، اضافه اش کنید. Smile

همین ابتدا دو تا عکس از قبل و بعد تغییرات میذارم:
[تصویر: product-list-before.png]

بعد از تغییرات:

[تصویر: product-list-after.png]

برای سایه دادن و گرد کردن گوشه‌های قاب محصول در لیست محصولات اپن کارت
عبارت .product-thumb رو سرچ کنید. توجه کنید که چندین مورد پیدا میشه ولی ما با اونی کار داریم که بلافاصله بعدش آکولاد باز اومده.
محتوای داخل آکولاد رو مطابق کدهای CSS زیر تغییر بدین:

کد:
.product-thumb {
    border: 1px solid #ddd;
    margin-bottom: 20px;
    overflow: auto;
    border-radius: 5px;
    box-shadow: 2px 2px 3px gray;
}


برای این که عکس محصول به قاب محصول نچسبه و کمی از بالا فاصله بگیره
عبارت .product-thumb .image رو سرچ کنید. توجه کنید که چندین مورد پیدا میشه ولی ما با اونی کار داریم که بلافاصله بعدش آکولاد باز اومده.
محتوای داخل آکولاد رو مطابق کدهای CSS زیر تغییر بدین:

کد:
.product-thumb .image {
    text-align: center;
    padding-top: 5px;
}


تنظیم ارتفاع ثابت برای بخش حاوی عنوان، توضیحات و قیمت محصول
عبارت .product-thumb .caption رو سرچ کنید. توجه کنید که چندین مورد پیدا میشه ولی ما با اونی کار داریم که بلافاصله بعدش آکولاد باز اومده.
محتوای داخل آکولاد رو مطابق کدهای CSS زیر تغییر بدین:

کد:
.product-thumb .caption {
    padding: 0 20px;
    height: 220px;
}


تنظیم ارتفاع ثابت برای عنوان محصول در لیست محصولات اپن کارت
عبارت .product-thumb h4 رو سرچ کنید. احتمالا فقط 1 مورد پیدا بشه ولی اگه موارد بیشتری بود طبق راهنمایی که بالا کردم عمل کنید.
محتوای داخل آکولاد رو مطابق کدهای CSS زیر تغییر بدین:
  • حذف خاصیت Bold
  • وسط چین کردن متن
کد:
.product-thumb h4 {
    font-weight: normal;
    height: 50px;
    text-align: center;
}

اصلاح ظاهر توضیحات کوتاه محصول در لیست محصولات اپن کارت
این تغییرات شامل:
  • مشخص کردن ارتفاع ثابت برای توضیحات محصول
  • تراز کردن متن از دو طرف (Justify)
  • مخفی کردن اضافه متن (در صورت وجود) که اگر توضیحات طولانی دارید می تونید ارتفاع رو اضافه کنید یا به جای hidden از auto استفاده کنید.
کد زیر رو که فکر نکنم از قبل داشته باشید هر جا دوست داشتین اضافه کنید. البته میگم هر جا نرید بین آکولادهای یک Rule دیگه Paste کنید Big Grin

کد:
.product-thumb .caption h4+p {
    height: 100px;
    text-align: justify;
    overflow: hidden;
}

برای افزودن قاب دور سربرگ‌های «توضیحات، خصوصیات، نظرات» در صفحه محصول
[تصویر: tab-content-border.png]
1- این Rule رو پیدا کنید و به جای 15 صفر بذارید

کد:
.nav-tabs {
    margin-bottom: 15px;
}

یعنی اینجوری:

کد:
.nav-tabs {
    margin-bottom: 0px;
}


2- این Rule رو اضافه کنید

کد:
.tab-content {
    padding: 5px;
    border: 1px solid lightgray;
    border-top: none;
}

تمام Angel

RE: اصلاح ظاهر منوی ناوبری در اپن کارت 2.0 - mojtabamalaekeh - 2016/10/15

درست کردن منوی ناوبری سایت برای عرض کم صفحه نمایش

قبل از اصلاح:

[تصویر: breadcrumb-before.png]

بعد از اصلاح:
[تصویر: breadcrumb-after.png]

به مسیر زیر بروید (به جای default نام پوسته‌ی فروشگاه شما)
کد:
catalog/view/theme/default/stylesheet
فایل stylesheet-rtl.css را ویرایش کنید.

عبارت @media (max-width: 478px) را جستجو کنید.
اگر بیش از یک مورد وجود داشت فرقی نمی‌کند کدهای جدید را در کدام قسمت وارد کنید.
اگر وجود نداشت، ابتدا آن را با کدهای زیر بسازید:
کد:
@media (max-width: 478px) {

}

حالا که بلوک بالا را یافتید یا آن را ساختید، کدهای زیر را درونش اضافه کنید:
کد:
    .breadcrumb > li:after { display: none !important; }
    .breadcrumb > li { display: block; text-align: center; }