# 空气主题

**URL:** https://meta.discourse.org/t/air-theme/197703
**Category:** Theme
**Tags:** air-theme
**Created:** [2021年七月20日 20:24 UTC](https://meta.discourse.org/t/air-theme/197703 "2021-07-20T20:24:30Z")
**Posts on this page:** 1
**Showing post:** 525

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [2024年八月14日 01:05 UTC](https://meta.discourse.org/t/air-theme/197703/525 "2024-08-14T01:05:32Z")

</div>

Air 主题的“在线用户”插件支持 #Customization > Plugin

创建 #Customization > Theme component

编辑通用 CSS 并添加以下代码

```plaintext
// Whis Online 自定义设置
.discovery-list-container-top-outlet.online_users_widget {
      display: flex;
      padding-top: .38em;
      background-color: var(--secondary);
      border: 1px solid rgba(var(--primary-rgb), 0.2);
      border-radius: 0.65em;
      transition: box-shadow 100ms ease-in-out;
      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
}

```

在 Air 主题中启用该组件

效果：之前显示时没有背景色或边框，导致难以辨认

 ![Screenshot_20240813-222849](https://global.discourse-cdn.com/meta/original/4X/6/5/9/6591d5b2d371ae65f4af80ec53b397b142f75871.jpeg)

还有几个区域存在类似问题，希望进行修复。

如我之前的帖子中所示。

* * *

EDiT 全局横幅的新增修复 [问题](https://meta.discourse.org/t/air-theme/197703/514?u=heliosurge)

关于全局横幅规格的其他信息：

> [@awesomerobot](#):
>
> 全局置顶横幅可以容纳 1050px x 150px 的图片，且不会出现滚动条。

* * *

> [@awesomerobot](#):
>
> 请注意，当你缩小浏览器窗口时，图片将无法完全显示，并会出现滚动条。你可以通过在主题中添加一些自定义 CSS 来重新缩放图片以避免这种情况……但一旦窗口缩小到移动设备的尺寸，图片会变得非常小，所以这并不是完美的解决方案。

```plaintext
//全局横幅图片修复
#banner img {
    width: 100%;
    height: auto;
}

```

特别感谢 @awesomerobot 提供此代码片段

---

_[View the full topic](https://meta.discourse.org/t/air-theme/197703)._