如何使用CSS打造多功能横幅

支持
1

我希望更改横幅中“展开”和“关闭”项目的颜色。我猜这可以用 CSS 来完成。但如何为横幅组件执行此操作？

1 个赞
2

您可以按照以下步骤操作：

  1. 打开检查工具：
    导航到启用了通用横幅的网页。右键单击页面上的任意位置，然后选择**“检查”**（或在 Windows 上按 Ctrl + Shift + I，或在 Mac 上按 Cmd + Option + I）。这将打开浏览器的开发者工具。

  2. 找到横幅：
    在开发者工具的**“元素”选项卡中，将鼠标悬停在代码的各个部分上，以查看网页上相应的突出显示部分。找到横幅后，单击包含横幅的最外层 <div>**。这样可以确保您选择的是整个横幅及其所有元素。

  3. 检查元素：
    选中横幅后，您就可以在**“元素”选项卡**中看到横幅结构内的所有嵌套 HTML 元素。这将显示用于创建横幅的 HTML 层级。

  4. 检查样式：
    在开发者工具的右侧，您会找到**“样式”选项卡**。这将显示应用于所选元素的 CSS 样式。您可以查看继承的样式、内联样式以及来自外部样式表的样式。

  5. 尝试更改：
    选择横幅内的某个元素，直接在“样式”选项卡中修改其样式。例如，您可以调整颜色、字体大小、内边距、外边距或任何其他 CSS 属性。这些更改是临时的，并且会立即在网页上显示，让您可以自由尝试。

  6. 完成设计：
    对设计更改满意后，复制修改后的 CSS 代码。这可能包括对单个元素或整个横幅所做的更改。

  7. 应用更改：
    转到您的 https://yoursite.com/admin/customize/components 创建一个组件，然后编辑 HTML/CSS 部分并粘贴修改后的 CSS 代码。确保定位到适当的横幅类或 ID，以确保样式正确应用，然后将该组件应用于您的主题。

  8. 保存并查看：
    保存更新后的 CSS，刷新您的网站，并确认横幅已按预期反映了更改。
    您还可以查看：如何自定义 Discourse 中的 CSS

3

@MihirR 很棒的通用说明，非常感谢。

稍微阅读一下似乎表明 Firefox 在网页开发者工具中的样式编辑器比 Chrome 更好。

但回到具体情况，我遇到了很大的困难，因为“展开”和“关闭”按钮在悬停时会改变颜色，我费尽心思也找不到如何设置基本颜色。该项目似乎是类 span.d-button-label。

4

你好 :wave:

这是如何更改这些按钮颜色的示例。

.banner-box {
  .button-container {
    .btn {
      .d-icon,
      .d-button-label {
        color: var(--tertiary); // 更改为此处所需的颜色
      }
      // 悬停和焦点颜色
      .discourse-no-touch & {
        &:hover,
        &:focus {
          .d-icon,
          .d-button-label {
            color: var(--tertiary-hover); // 更改为此处所需的颜色
          }
        }
      }
    }
  }
}
4 个赞
5

@Dan 这是 SCSS 还是 LESS？我跟不上当前的 CSS 了。Discourse 在不让我编译的情况下就能使用它吗？

1 个赞
6

@Andro 这是 SCSS :))

7

Discourse 原生支持 SCCS 吗？

1 个赞
8

是的，它原生支持 SCSS。

2 个赞
9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.