自定义新主题按钮

社区维基 开发者
1

你好，

我想与大家分享一下我是如何制作我们的新主题按钮的。一点 CSS 技巧 :slight_smile:

我使用了以下颜色变量：tertiary、secondary 和 primary-medium。

新主题按钮

new-topic

打开草稿按钮

draft-topic

#create-topic {
  color: var(--secondary);
  border: 2px solid var(--tertiary);
  background: var(--tertiary);
  transition: background .25s ease-out;
  .d-icon {
    color: var(--secondary);
  }
  
  &:hover,
  &:focus {
    background: var(--secondary);
    color: var(--tertiary);
    .d-icon {
      color: var(--tertiary);
    }
  }
  
  &.open-draft {
    background: var(--primary-medium);
    border: 2px solid var(--primary-medium);
    transition: background .25s ease-out;
    
    &:focus,
    &:hover {
      background: var(--secondary);
      color: var(--primary-medium);
      border: 2px solid var(--primary-medium);
      .d-icon {
        color: var(--primary-medium);
      }
    }
  }
}

祝您有美好的一天！:slight_smile:

10 个赞
Developer Index
2021: The Year in Review
2

之前

image
image303×115 2.82 KB

之后
image
image294×106 2.54 KB

没有任何变化 :no_good_man:

3

@valsha 我只是猜测，也许是因为那个 CSS 技巧正在改变悬停状态，而你并没有进行悬停操作？

一般来说，你们大多数人都知道这一点：更改悬停状态（以及许多其他效果）仅在使用鼠标的系统中生效。在移动设备上则不会生效——因为用户只是点击按钮而已 :wink:

2 个赞
4

我喜欢那个按钮的样式。你是怎么做的？

而且这完全离题了……你在录制或转换这些 GIF 时用的是哪个工具？

（哎呀……我是不是点错回复按钮了？所以：@Don）

2 个赞
5

你好，

这似乎是 Dracula 主题。我检查了源代码。

你需要在 #create-topic 之前加上 button 来覆盖它。

所以它应该如下所示 :arrow_down:

button#create-topic {

如果你想保留绿色的 success 颜色，则需要将 var(--tertiary) 改为 var(--success)。如下所示 :arrow_down:

button#create-topic {
  color: var(--secondary);
  border: 2px solid var(--success);
  background: var(--success);
  transition: background .25s ease-out;
  .d-icon {
    color: var(--secondary);
  }
  
  &:hover,
  &:focus {
    background: var(--secondary);
    color: var(--success);
    .d-icon {
      color: var(--success);
    }
  }
}
2 个赞
6

是的，这个按钮来自 Dracula 主题。
@Don 一如既往，你真是救星 :+1:

2 个赞
7

各位女士们、先生们，这就是当某人做事前没多想一步（而且总是他……）时会发生的演示。这次错误地标记某人并在错误的地方提问，可能会让人困惑。谢天谢地，这只是一个关于 CSS/主题的话题，而不是世界和平、42 或其他什么重要的事情：rofl：

其实我原本对 @Don 的按钮有些疑惑。不过，当然，那种霓虹绿也很不错：+1：

2 个赞
8

你是如何将“New Topic”改为“Create a new Topic”的？@Don

9

您好，

请访问 /admin/customize/site_texts，搜索相关文本并进行修改。:slightly_smiling_face:

10

能否在主题内部实现这一功能？

11

通过主题实现此功能的方法是添加一个脚本，该脚本会修改 I18n.translations 对象。

2 个赞
13

现在有一个主题组件，可让您轻松自定义文本、图标和其他相关的按钮行为：

它不允许您更改按钮样式，但我认为这有潜力可以添加。

2 个赞