هل توجد أي إضافة لوضع أيقونة بجانب الفئة؟

الدعم
1

مرحباً، أتساءل عما إذا كان هناك مكون إضافي من نوع ما يسمح بوضع أيقونة بجوار فئة مشابهة لهذا؟ أعرف أن هناك واحدًا ولكني لا أستطيع تذكر اسمه.

image
image493×287 18.2 KB

2

مرحباً @Glow :wave:

لا حاجة لمكون إضافي أو مكون سمة. انتقل إلى إعدادات الفئة عبر مفتاح الربط الإداري في الزاوية العلوية اليمنى لكل فئة تريد لها أيقونة صورة وانتقل إلى علامة التبويب “الصور” وهناك يمكنك تحميل صور لتظهر كما في لقطة الشاشة الخاصة بك. الصورة التي تريدها هي الأولى “شعار صورة الفئة”. لاحظ أنها ستظهر أيضًا في أعلى صفحة الفئة.

إعجاب واحد (1)
3

شكرًا لك! وهل هناك طريقة لجعله أصغر؟ إنه كبير جدًا

image
image1138×429 32.5 KB

4

في الشائع - css الخاص بموضوع أو مكون موضوع، يمكنك القيام بذلك:

.category-logo.aspect-image {
    width: 100px;
}

فقط قم بتغيير قيمة العرض إلى ما تريده. يمكن أيضًا استخدام النسبة المئوية بدلاً من البكسل. آمل أن يساعد هذا :slight_smile:

إعجاب واحد (1)
5

هممم، أنا متأكد من أنه لا يزال هناك مكون إضافي لأنني أتذكر استخدام شيء كهذا، لأن هذا يبدو غريبًا جدًا عندما أقوم بتغيير حجمه لأسفل، ولا يبدو تمامًا كما في الصورة، لكنني لا أتذكر الاسم.

image
image1184×412 14.9 KB

6

يمكنك استخدام CSS لتخصيص الصورة وموضعها بشكل أكبر.

هناك أيضًا هذا ولكن لست متأكدًا مما إذا كان هذا ما تريده.

إعجابَين (2)
7

هذا رمز كتبته من قبل…


:root {
    --category-logo-width: 70px;
    --category-spacing: 0px;
}

.desktop-view table.category-list .category-logo.aspect-image {
    width: var(--category-logo-width);
    height: calc(var(--category-logo-width) - 45px);
    margin: 0 5px 0 0;
    padding: 0;
    transform: translatey(-35px);
}
table.category-list .category-logo.aspect-image img{
    width: var(--category-logo-width);
    height: var(--category-logo-width);
}
.desktop-view .has-logo .category-text-title {
    margin-left: calc(var(--category-logo-width) + 5px);
}
.mobile-view .category-title-link {
    display: flex;
}
.mobile-view .category-logo.aspect-image {
    margin: 0 5px 0 0;
    margin-top: 0 !important;
    padding: 0;
    order: -1
}
.mobile-view .category-text-title {
    margin: auto 0;
}


.desktop-view td.category {
    margin: var(--category-spacing);
}
.desktop-view table.category-list {
    border-collapse: separate;
    border-spacing: 0 var(--category-spacing);
}
.desktop-view table.category-list tr {
    margin: var(--category-spacing);
}
إعجابَين (2)