修改CSS以自定义帮助中心
很多时候，您需要自定义特定的元素，如文章详细信息页面、添加工单表单、主题列表或任何在帮助中心主题上可见的内容。您可能还希望全局编辑（在整个帮助中心上）或仅针对特定类别进行编辑。在这些情况下，您需要使用级联样式表（CSS）来定制主题的样式。
但是，如果您是CSS的新手，您需要了解一些事情。帮助中心的元素是给定的类和id。您可以在帮助中心主题的CSS部分设置特定类和id的样式。对于这个任务，您可以使用的最强大的工具是浏览器检查器，它将向您显示与帮助中心页面任何部分相关联的所有CSS。检查器将帮助您识别包含要更改的属性的选择器或原始样式。然后可以将这些选择器复制到CSS自定义框中，以添加自定义属性。
在本指南中，我们将共享您可以自定义的属性，并演示可以在帮助中心完成的CSS自定义。
如上图所示，我们的帮助中心页面代码以下面内容开头:
<portal data-reactroot class="html articleSubCategory signedIn zohodesk">
这是React组件的根元素，您可以在其中以清晰和安全的方式自定义帮助中心的外观和行为。它由三个不同的类属性组成，让我们看看下面的每一个:
- articleSubCategory: 此属性定义定制所应用到的页面，以便样式不会应用于其它任何地方。下表列出了在执行定制时应引用的其它属性。页面类名称主页home工单列表ticketList工单详情ticketDetail添加工单ticketForm知识库类别列表kbLanding知识库子类别article_subcategory文章列表articleList文章详情articleDetail社区类别communityLanding主题列表communityList主题详情communityDetail添加主题topicForm用户简档userProfile登录signin已登录signedIn注册signup忘记密码forgetPwd
- signedIn:此属性定义用户的身份验证状态。指定之后，将会为登录到帮助中心的用户显示该定制。在进行全局更改时，可以删除此属性。
- zohodesk:此属性引用类别的名称。指定之后，将为访问特定知识库类别的用户显示该定制。
CSS定制示例
让我们看一个CSS定制脚本示例，该脚本删除页眉上的背景图像，并向“知识库子类别”页面添加背景色。
定制之前
定制之后
您可以使用如下CSS代码来自定义以上页面：
.articleSubCategory .Header__header{
background-image: none;
background-color: red
}