ارتفاعات صور الفئات / الفهم العام لمتغيرات القالب

الدعم
1

مرحبًا بالجميع،

أثناء تجربتي لبعض تعديلات المظهر، لاحظت هذا الجزء من كود SCSS

@supports (--custom: property) {
  .category-logo.aspect-image {
    --max-height: 150px;
    max-height: var(--max-height);
    max-width: 60%;
    height: auto;
    width: calc(var(--max-height) * var(--aspect-ratio));

  }
}

أتساءل عن الطريقة الصحيحة (إن وُجدت) لتغيير متغير max-height هنا.

2

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

يُستخدم شعار الفئة في عدة أماكن افتراضيًا: في صفحة الفئات وفي صفحات الفئات المحددة.

إذا كنت ترغب في تعديل أحجام الشعار في كلتا الموقعين، فيمكنك استخدام الكود التالي:

@supports (--custom: property) {
  .category-logo.aspect-image {
    --max-height: 200px; // غيّر 200 إلى الارتفاع المطلوب
  }
}

بمجرد تغيير متغير --max-height، سيتم ضبط العرض تلقائيًا.

إذا كنت ترغب في إجراء تعديل أكثر تحديدًا، مثل تغيير أحجام الشعار في صفحة الفئات فقط، يرجى التحقق من إعداد الموقع desktop_category_page_style على موقعك وإخباري بما هو مُعيّن عليه.

إذا كنت تريد أن يحدث التغيير فقط على سطح المكتب، فأضف كود CSS أعلاه إلى تبويب CSS الخاص بسطح المكتب في نسختك. وإذا كنت تريد أن يحدث فقط على الجوال، فأضفه إلى تبويب CSS الخاص بالجوال. أما إذا كنت تريد أن يحدث على كل من الجوال وسطح المكتب، فأضفه إلى تبويب CSS المشترك.

3

حسنًا، لقد حاولت تغيير --max-height كما اقترحت، وبينما يتم تحديث هذا الجزء في الفاحص، تظل الصورة بنفس الحجم.

لقد لاحظت في الفاحص أن قيمة --aspect-ratio لا تبدو مضبوطة (لا يوجد رابط قابل للنقر في Chrome للقيمة) ولا يمكنني معرفة أين قد تكون مضبوطة. لقد بحثت في كود Discourse GitHub ولكني لم أجده.

هل لديك أي فكرة عن كيفية العثور على مكان ضبط --aspect-ratio أو ما هي القيمة التي يجب ضبطها له؟

تعديل: وجدت المشكلة، تم ضبط الارتفاع بواسطة Discourse Category Headers theme component

.category-header-widget .category-logo.aspect-image,
.category-header-widget .category-logo.aspect-image>img {
    float: left;
    margin: 0 0.5em 0.25em 0;
    max-height: 150px;
}

لذا قمت فقط بتجاوز max-height في نسقي.

category-header-widget .category-logo.aspect-image,
.category-header-widget .category-logo.aspect-image>img  {
	max-height: 80px;
}

تعديل #2: اقتراحك نجح بالنسبة لأيقونات الفئات في صفحة الفئات، لذا شكراً لك!