Category image heights / General understanding of theme variables

الدعم
1

Hey all,

while playing with some theme modifications I noticed this piece of SCSS code

@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));

  }
}

I wonder what a proper way is (if there’s anyI) to change the max-height var here.

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

I’m not sure what you’re trying to achieve, but if you just want to make the logo bigger / smaller then here’s something to get you started.

The category logo is used in a couple of places by default - on the categories page and on specific category pages.

If you want to modify the logo sizes in both those locations, you can use this

@supports (--custom: property) {
  .category-logo.aspect-image {
    --max-height: 200px; // change 200 to the desired height
  }
}

Once you change the--max-height variable, the width should adjust automatically.

If you want to something more specific, like changing the logo sizes on the categories page only, then please check the desktop_category_page_style site setting on your site and let me know what it’s set to.

If you want the change to only occur on desktop, then add the CSS above to the desktop CSS tab of your theme. If you want it to only occur on mobile then add it to the mobile CSS tab. If you want it to occur on both mobile and desktop, then add it to the common CSS tab.

5 إعجابات
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: اقتراحك نجح بالنسبة لأيقونات الفئات في صفحة الفئات، لذا شكراً لك!

3 إعجابات