帮助中心 CSS 指南

我的服务模式是什么？

您可以使用级联样式表 (CSS) 轻松自定义帮助中心的外观和风格。本指南旨在帮助您根据需要打造帮助中心。

注意：试用用户可获得 Professional 服务模式（包含代码编辑选项），但他们购买 Suite Team 后无法再访问该功能。

要在 Guide 中访问和编辑 CSS，请参阅自定义 CSS 或 JavaScript。

如果您不熟悉 CSS 或感到有些生疏，请查看以下教程，以便快速上手：

• CSS 入门是面向初学者的最完整的 CSS 教程。它通过您可以自己尝试的实际示例，指导您了解该语言的基本特征。

• CSS 初学者教程是非常好的入门资源。

您还可以使用帮助中心模板化语言或 JavaScript 自定义帮助中心的外观：

• 帮助中心模板参考
• 帮助中心模板化指南
• 帮助中心 JavaScript 指南

目录

本指南分为几个部分，涵盖了帮助中心的各个元素。每个部分都包含可直接粘贴到主题样式表中的 CSS 代码。直接使用此代码，或对其进行编辑，使其成为您自己的代码。

本指南并非详尽无遗。通过修改 HTML 模板和 CSS 样式表，您可以进行做很多事情。

页首和页脚

• 更改页首或页脚的背景颜色
• 更改页首或页脚的高度
• 更改页首或页脚上方或下方的间距
• 更改选定语言的外观
• 更改“提交请求”链接的外观
• 隐藏“提交请求”链接
• 更改登录链接的外观
• 更改徽标尺寸

搜索

• 更改搜索字段的宽度或高度
• 更改搜索字段的背景颜色
• 更改搜索文本的外观
• 更改结果页面标题的外观
• 更改搜索结果关键字突出显示的外观
• 更改知识库和社区标题的外观
• 更改结果之间的间距
• 更改结果文本的外观
• 更改结果链接的颜色

痕迹导航

• 更改痕迹导航上方和下方的间距
• 更改痕迹导航文本的外观
• 更改痕迹导航链接的颜色
• 更改痕迹导航中的指针字符 (>)

文章列表

• 更改文章列表周围的间距
• 更改文章之间的间距
• 更改文章链接的外观
• 更改文章链接的颜色

知识库文章

• 更改文章标题的外观
• 更改文章文本的外观
• 更改文章链接的颜色
• 更改作者姓名的外观
• 更改最后更新的字符串的外观
• 更改“这篇文章有帮助吗？”的外观。
• 更改投票计数器的外观
• 更改“有更多问题？提交请求”的外观
• 更改评论标题的外观
• 更改评论文本的外观

社区问答

• 更改问题标题的外观
• 更改问题文本的外观
• 更改问题链接的颜色
• 更改问题作者姓名的外观
• 更改问题发布后时间的外观
• 更改分享问题链接的外观
• 更改回答标题的外观
• 更改回答文本的外观
• 更改回答作者姓名的外观
• 更改回答发布后时间的外观
• 更改分享回答链接的外观

页首和页脚

页首将根据主题和用户角色显示徽标和其他组件。您可以使用页脚显示相关链接、公司相关信息或法律声明。

返回至目录。

更改页首或页脚的背景颜色

在以下选择器中更改或添加 background-color 属性。

页首：

.header {
  background-color: #666;
}

页脚：

.footer {
  background-color: #333;
}

更改页首或页脚的高度

在以下选择器中更改或添加 height 属性。

页首：

.header {
   height: 70px;
}

页脚：

.footer {
   height: 20px;
}

更改页首或页脚上方或下方的间距

在以下选择器中更改或添加 margin-bottom 和 margin-top 属性。

页首：

.header {
     margin-bottom: 20px;
}

页脚：

.footer {
     margin-top: 10px;
}

更改选定语言的外观

添加以下选择器和属性：

.language-selector .dropdown-toggle {
  color: green;
}

更改“提交请求”链接的外观

header.hbs 模板在同一模板中包含桌面版和移动版的标头，以使其呈响应式。桌面版包含在类名为 nav-wrapper-desktop 的 div 中，移动版包含在类名为 nav-wrapper-mobile 的 div 中。每个 div 都包含一个单独的“提交请求”链接。要更改链接外观，您需要创建 CSS 规则的桌面版和移动版，并提高其选择器的特定性。

在 style.css 文件中添加以下选择器并修改文本属性：

.nav-wrapper-desktop a.submit-a-request {
  font-size: 14px;
  color: green;
}

.nav-wrapper-mobile a.submit-a-request {
  font-size: 12px;
  color: green;
}

隐藏“提交请求”链接

在 style.css 文件中添加以下选择器：

.nav-wrapper-desktop a.submit-a-request {
  display:none;
}

.nav-wrapper-mobile a.submit-a-request {
  display:none;
}

更改登录链接的外观

在以下选择器中添加或修改文本属性：

.login {
  font-size: 14px;
  color: green;
}

更改徽标尺寸

尽管建议的徽标图像大小为 200px x 50px，但您可以根据需要覆盖此默认值。

注意：要使用大于推荐大小的徽标，您需要将徽标图像托管在您的 Zendesk Support 实例之外。

更改徽标大小

1. 在 Guide 中，单击侧栏中自定义设计图标 ()。
2. 单击编辑主题。
3. 单击 CSS 以打开 CSS 样式表，然后搜索以下规则：

   .logo img {
     max-height: 37px;
   }

   要搜索，请在代码编辑器内部单击，然后按 Control+F (Windows) 或 Cmd+F (Mac)。

4. 修改“.logo img”选择器中的 height 属性，使其与图像的高度匹配。
5. 单击保存。

搜索

搜索框可查找知识库和社区中的内容，并在结果页面上显示链接。您可以根据需要移除搜索框。有关更多信息，请参阅帮助中心模板指南中的搜索助手。

返回至目录。

更改搜索字段的宽度或高度

更改以下选择器中的宽度或高度值。

大搜索框：

.search input[type=search] {
  height: 50px;
  width: 90%;
}

小搜索框：

.search-small input[type=search] {
  height: 50px;
  width: 320px;
}

更改搜索字段的背景颜色

在以下选择器中更改 background 属性。

大搜索框：

.search input[type=search] {
  background: #999;
}

小搜索框：

.search-small input[type=search] {
  background: #999;
}

更改搜索文本的外观

在以下选择器中更改或添加文本属性。

大搜索框：

.search {
  font-size: 12px;
  font-family: Tahoma, Arial, sans-serif;
}

小搜索框：

.search-small {
  font-size: 12px;
  font-family: Tahoma, Arial, sans-serif;
}

更改结果页面标题的外观

搜索结果页面上的标题包括搜索词返回的结果数量。例如：“序列号”有 9 条结果。

添加以下选择器（如果样式表中还没有），并更改或添加文本属性：

.search-results-heading {
  font-size: 36px;
  font-family: Tahoma, Arial, sans-serif;
}

更改搜索结果关键字突出显示的外观

搜索结果中突出显示的词条括在 .search-result-description 容器下的内联元素 <em> 中。如果您想让突出显示内容显示为粗体、黄色背景，您可进行以下操作：

.search-result-description em {  
  font-weight: bold;
  background-color: #FFF3CA;
  padding: 0px 3px 2px;
  border-radius: 3px;
}

更改知识库和社区标题的外观

在以下选择器中添加或修改文本属性：

.search-results-subheading {
  font-size: 24px;
  font-family: Tahoma, Arial, sans-serif;
}

更改结果之间的间距

在以下选择器中添加 margin-bottom 属性：

.search-result {
  margin-bottom: 20px;
}

更改结果文本的外观

在以下选择器中更改或添加文本属性：

.search-result {
  font-size: 105%;
  font-family: Arial, Helvetica, sans-serif;
}

更改结果链接的颜色

在以下选择器中添加或修改 color 属性：

.search-result a {
  color: #484;
}

痕迹导航

痕迹导航可帮助用户在您的帮助中心导航内容。您可以根据需要移除痕迹导航。有关更多信息，请参阅帮助中心模板指南中的痕迹导航助手。

返回至目录。

更改痕迹导航上方和下方的间距

在以下选择器中添加或更改 padding 属性：

.breadcrumbs {
  padding-top; 20px;
  padding-bottom: 16px;
}

更改痕迹导航文本的外观

在以下选择器中更改或添加文本属性：

.breadcrumbs li {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

更改痕迹导航链接的颜色

添加以下选择器和属性：

.breadcrumbs li a {
  color: #484;
}

更改痕迹导航中的指针字符 (>)

更改以下选择器的 color 和 content 属性：

.breadcrumbs li + li:before {
  color: #158EC2;
  content: ">>";
}

文章列表

根据主题的不同，文章列表可用于主页、类别登录页面和组别登录页面。

返回至目录。

更改文章列表周围的间距

添加或修改以下选择器和 padding 属性：

.article-list {
  padding-left: 16px;
  padding-right; 20px;
}

更改文章之间的间距

在以下选择器中更改 margin-bottom 属性：

.article-list > li {
  margin-bottom: 10px;
}

更改文章链接的外观

在以下选择器中更改或添加文本属性：

.article-list > li {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

更改文章链接的颜色

添加以下选择器和属性：

.article-list li a {
  color: #FFF;
}

知识库文章

您可以更改知识库中文章的外观和风格。

返回至目录。

更改文章标题的外观

添加或修改以下选择器和属性：

.article-header h1 {
  color: #993;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 20px;
}

更改文章文本的外观

添加或修改以下选择器和属性：

.article-body {
  color: #666;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

更改文章链接的颜色

添加或修改以下选择器和属性：

.article-body a {
  color: #930;
}

更改作者姓名的外观

添加或修改以下选择器和属性：

.article-author a {
  color: #669;
  font-family: Georgia, Times New Roman, serif;
  font-size: 16px;
}

更改最后更新的字符串的外观

添加或修改以下选择器和属性：

.article-updated {
  color: #CCC;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 13px;
}

更改“这篇文章有帮助吗？”的外观。

添加或修改以下选择器和属性：

.article-vote-question {
  color: #763;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

更改投票计数器的外观

例如：“8 人中有 6 人觉得这有帮助”。添加或修改以下选择器和属性：

.article-vote-count {
  font-family: Georgia, Times New Roman, serif;
  font-size: 10px;
}

更改“有更多问题？提交请求”的外观

添加或修改以下选择器和属性：

.article-more-questions {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 105%;
}

更改评论标题的外观

添加或修改以下选择器和属性：

.article-comments h2 {
  color: #666;
  font-family: Georgia, Times New Roman, serif;
  font-size: 130%;
}

更改评论文本的外观

添加或修改以下选择器和属性：

.comment-body  {
  color: #666;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
}

社区问答

您可以更改社区中内容的外观和风格。

返回至目录。

更改问题标题的外观

添加或修改以下选择器和属性：

.question-title {
  color: #484;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 120%;
}

更改问题文本的外观

添加或修改以下选择器和属性：

.question-text {
  color: #666;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
}

更改问题链接的颜色

添加或修改以下选择器和属性：

.question-text a {
  color: #484;
}

更改问题作者姓名的外观

添加或修改以下选择器和属性：

.question-author {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

要更改链接颜色，添加或修改以下选择器和属性：

.question-author a {
  color: #484;
}

由于问题作者的姓名、问题发布后的时间以及分享链接通常一起出现在一个页面上，因此最好使这三个元素看起来相同。为此，请使用以下组合选择器：

.question-author, .question-published, .question-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

更改问题发布后时间的外观

添加或修改以下选择器和属性：

.question-published {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

更改分享问题链接的外观

添加或修改以下选择器和属性：

.question-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

更改回答标题的外观

添加或修改以下选择器和属性：

.answer-list-heading {
  color: #4CC;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 105%;
}

更改回答文本的外观

添加或修改以下选择器和属性：

.answer-text {
  color: #333;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 105%;
}

更改回答作者姓名的外观

添加或修改以下选择器和属性：

.answer-author {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

要更改链接颜色，添加或修改以下选择器和属性：

.answer-author a {
  color: #484;
}

由于回答作者姓名、回答发布后的时间以及分享链接通常一起出现在一个页面上，因此最好使这三个元素看起来相同。为此，请使用以下组合选择器：

.answer-author, .answer-published, .answer-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

更改回答发布后时间的外观

添加或修改以下选择器和属性：

.answer-published {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

更改分享回答链接的外观

添加或修改以下选择器和属性：

.answer-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}