将“+ 新主题”按钮的样式修改为与“回复”按钮一致

支持
1

我喜欢“回复”按钮的样式，它使用的是 /admin/customize/colors（颜色方案/选择）中定义的“次要”颜色。

image
image694×920 133 KB

我希望我们的“新建主题”按钮能像视频中展示的那样，与“回复”按钮的样式保持一致：

2

您可以尝试获取回复按钮的 CSS 样式，并将这些属性应用到“发布帖子”按钮上：

css
css1465×827 114 KB

background: #00a3cc;
color: #fff;

尝试添加以下代码：

 .header-buttons .btn.btn-default {
      background: #00a3cc;
      color: #fff;
  }

  .header-buttons .btn.btn-default svg {
      color: #fff !important;
  }

接下来，您需要为 :hover（悬停状态）添加 CSS 样式：


  .header-buttons .btn.btn-default:hover {
      background: #***;
  }

请更精确地选择所需的颜色，将 *** 替换为您想要的颜色值。

如何为 Discourse 添加 CSS：

您可以对 CSS 的任何部分进行此类操作。

2 个赞
3

太棒了的答案！！！非常感谢！

我还需要一点 CSS 建议……如何最好地压缩这两段代码？

更改标题栏中 [+ 新主题] 按钮的颜色

该标题栏按钮的存在是因为 所有页面的 (+ 新主题) 按钮主题

.header-buttons .btn.btn-default {
      background: #00ccff;
      color: #fff;
      font-weight: 600;
  }
.header-buttons .btn.btn-default svg {
      color: #fff !important;
  }
.header-buttons .btn.btn-default:hover {
      background: #00a3cc;
  }

更改分类和标签页面中 [+ 新主题] 按钮的颜色

button#create-topic {
      background: #00ccff;
      color: #fff;
      font-weight: 600;
  }
button#create-topic svg {
      color: #fff !important;
  }
button#create-topic:hover {
      background: #00a3cc;
  }
1 个赞
4

最小化？我不确定翻译是否准确，抱歉。试试结合这个：

.header-buttons .btn.btn-default, .header-buttons .btn.btn-default svg {
      background: #00ccff;
      color: #fff !important;
      font-weight: 600;
  }
.header-buttons .btn.btn-default:hover {
      background: #00a3cc;
}

或者

#new-create-topic, #new-create-topic svg {
    background: #00ccff;
    color: #fff !important;
    font-weight: 600;
}

#new-create-topic:hover {
    background: #00a3cc;
}

我看到那里有一个 id（new-create-topic），我不确定它的唯一性如何。试试用这个（我还没检查）。

实际上有很多选项。

使用：

  • .header-buttons
  • button
  • #new-create-topic

css
css868×120 14.7 KB

它们的任意组合……

2 个赞
5

感谢尝试帮助缩短代码。当我尝试了几种你建议的组合时，得到了这样的结果……（注意那个加号）

hoverstate

目前我决定保留这两段代码片段，一切都很完美！！再次感谢 @Stranik

1 个赞
6

我们没有为图标悬停状态设置 CSS：

#new-create-topic:hover, #new-create-topic:hover > svg {
    background: #00a3cc;
}

也许这样也可以。有时候本地测试并查看效果会更简单。:slightly_smiling_face:

您可以放心尝试不同的方案，并将它们组合起来。这里有很大的创意空间。祝您好运！

2 个赞
7

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