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 个赞