CSS 增加 logo 和 header 的高度,桌面到移动端视图

从我的 PC 桌面,通过 Firefox 中的检查器,控制徽标高度的 CSS 标签是:

.d-header .title {
  --d-logo-height: 4em;
}

但是,我注意到,当我将此 CSS 标签插入桌面 CSS 编辑器中的默认主题时,它既不会改变我 PC 桌面上的徽标高度,也不会改变手机上的徽标高度。
然而,如果我将相同的 CSS 代码插入移动设备部分,它不仅会改变我 PC 桌面上的徽标高度,也会改变手机上的徽标高度。这是 Discourse 的一个错误,还是我遗漏了什么?

1 个赞

您好,

以防万一,您把这个 CSS 放在哪里了?

2 个赞

在寻求帮助时,最好能更好地阐述你的请求。这里有很多人都非常乐意提供帮助,但事情的完成方式多种多样,因此清晰的解释对于尽快获得帮助至关重要 :slight_smile:

另外,如果你在本地测试,别忘了在网址后附加 ?mobile_view=1

3 个赞

从我的 PC 桌面,通过 Firefox 中的检查器,操作徽标高度的 CSS 标签是:

.d-header .title {
  --d-logo-height: 4em;
}

但是,我注意到当我将此 CSS 标签插入到桌面 CSS 编辑器中的默认主题时,它既没有改变我在 PC 桌面或手机上看到的徽标高度。
但是,如果我将相同的 CSS 代码插入到移动设备下,它不仅会改变 PC 桌面的徽标高度,也会改变手机的徽标高度。这是 Discourse 的一个错误,还是我遗漏了什么。

我尝试重现您所做的操作,但无法重现此问题:

它能正确更改移动设备,但不会影响桌面。

如果我在编辑器中添加此 CSS,它会按预期在桌面上工作:

对于移动设备,您只需设置徽标的高度,而不是标题的高度:

希望这有帮助。

1 个赞

谢谢,我切换到另一台机器上,一台运行 Ubuntu 22.04(Web 服务器)的机器,桌面 CSS 存储桶中的 CSS 代码渲染正确,所以可能是我的另一台运行 Windows 7 的 PC 桌面上的浏览器问题。
我确实注意到,在移动 CSS 存储桶中,我似乎仅限于:

.d-header #site-logo {
  height: 3em;
}

即使在刷新缓存后,任何试图超过 3em 的尝试都不会增加我手机 GS23 上的徽标高度。

有什么想法吗?

是的,尝试取消设置 logo 上的 max-width,这样就可以解除任何限制。

1 个赞

感谢您的输入,我在设置中找不到该选项。这是通过 CSS 或 Rails 中的命令行输入完成的吗?如果是,它看起来是怎样的?

那将是 CSS,如下所示:

.d-header #site-logo {
  max-width: unset;
}

如果那不起作用,请添加 !important

3 个赞

感谢您的帮助:

对于那些在我之后来并希望在桌面和移动视图中增大徽标大小的人。
1)自定义 → 主题 → 默认 → 编辑 CSS/HTML

a)在桌面存储桶中发布:

.d-header {
  height: 5em;
}
.d-header #site-logo {
  height: 5em;
}

b)在移动存储桶中发布:

.d-header #site-logo {
  max-width: unset;
}
.d-header #site-logo {
  height: 4em;
}
2 个赞

这些可以合并成一条规则:

.d-header #site-logo {
  max-width: unset;
  height: 4em;
}

我认为你也可以压缩第一个规则集,但我一时想不起来怎么做。

2 个赞

另外,还有一件事可以帮助添加的是如何减小填充,以便在移动视图中将徽标向左移动——有什么想法吗?

.wrap {
  padding-left: 0;
}

此时,学习 CSS 入门课程可能是一个好主意,因为:

您可以在 dev 类别 中阅读更多关于开发您自己的主题的信息。

2 个赞

查理,谢谢你,我很感激。
我熟悉使用检查器,例如 Firefox,并从中获得了一些解决方案。

您认为为什么 Discourse 的核心功能不包括徽标调整大小?任何网站的品牌推广都至关重要,而在这方面缺乏细微差别令人惊讶。

1 个赞

“Logo 操作”完全是可能的,就像其他所有类型的样式一样,可以在主题和主题组件中进行。
你只需要学习 HTML/CSS/JS 的基础知识,并通过元(meta)上的大量文档来自己完成,或者你需要找一个可以雇佣的人来为你进行所需的更改。
后者可以在市场类别中完成。
既然你的原始问题已经得到解答,我认为我们可以结束这个话题了。
祝你的论坛一切顺利。

3 个赞

我个人不认为公司徽标的大小调整会是论坛平台核心功能的一部分。此外,我们的软件是开源的,我们确实提供了上述支持来帮助您完成此操作。我们还提供了大量关于学习开发自己定制功能的信息。

3 个赞

您好 Charlie,

我所说的“Logo Manipulation”是指在 UI 中更改 Logo 大小的能力。

感谢您的帮助。

此主题在上次回复后 30 天自动关闭。不再允许回复。