您可以按照以下步骤操作：
-
打开检查工具：
导航到启用了通用横幅的网页。右键单击页面上的任意位置，然后选择**“检查”**（或在 Windows 上按Ctrl + Shift + I，或在 Mac 上按Cmd + Option + I）。这将打开浏览器的开发者工具。 -
找到横幅：
在开发者工具的**“元素”选项卡中，将鼠标悬停在代码的各个部分上，以查看网页上相应的突出显示部分。找到横幅后，单击包含横幅的最外层<div>**。这样可以确保您选择的是整个横幅及其所有元素。 -
检查元素：
选中横幅后，您就可以在**“元素”选项卡**中看到横幅结构内的所有嵌套 HTML 元素。这将显示用于创建横幅的 HTML 层级。 -
检查样式：
在开发者工具的右侧，您会找到**“样式”选项卡**。这将显示应用于所选元素的 CSS 样式。您可以查看继承的样式、内联样式以及来自外部样式表的样式。 -
尝试更改：
选择横幅内的某个元素，直接在“样式”选项卡中修改其样式。例如，您可以调整颜色、字体大小、内边距、外边距或任何其他 CSS 属性。这些更改是临时的，并且会立即在网页上显示，让您可以自由尝试。 -
完成设计：
对设计更改满意后，复制修改后的 CSS 代码。这可能包括对单个元素或整个横幅所做的更改。 -
应用更改：
转到您的https://yoursite.com/admin/customize/components创建一个组件，然后编辑 HTML/CSS 部分并粘贴修改后的 CSS 代码。确保定位到适当的横幅类或 ID，以确保样式正确应用，然后将该组件应用于您的主题。 -
保存并查看：
保存更新后的 CSS，刷新您的网站，并确认横幅已按预期反映了更改。
您还可以查看：如何自定义 Discourse 中的 CSS