很多时候,您需要自定义特定的元素,如文章详细信息页面、添加工单表单、主题列表或任何在帮助中心主题上可见的内容。您可能还希望全局编辑(在整个帮助中心上)或仅针对特定类别进行编辑。在这些情况下,您需要使用级联样式表(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
}