修改CSS以自定义帮助中心

修改CSS以自定义帮助中心

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

但是,如果您是CSS的新手,需要了解一些事情。帮助中心的元素是给定的类和id。您可以在帮助中心主题的CSS部分设置特定类和id的样式。对于这个任务,您可以使用的最强大的工具是浏览器检查器,它将向您显示与帮助中心页面任何部分相关联的所有CSS。检查器将帮助您识别包含要更改的属性的选择器或原始样式。然后可以将这些选择器复制到CSS自定义框中,以添加自定义属性。

在本指南中,我们将共享您可以自定义的属性,并演示可以在帮助中心完成的CSS自定义。



如上图所示,我们的帮助中心页面代码以下面内容开头:

<portal data-reactroot class="html articleSubCategory signedIn zohodesk">
这是React组件的根元素,您可以在其中以清晰和安全的方式自定义帮助中心的外观和行为。它由三个不同的类属性组成,让我们看看下面的每一个:
  1. articleSubCategory: 此属性定义定制所应用到的页面,以便样式不会应用于其它任何地方。下表列出了在执行定制时应引用的其它属性。

    页面
    类名称
      主页
      home
      工单列表
      ticketList
      工单详情
      ticketDetail
      添加工单
      ticketForm
      知识库类别列表
      kbLanding
      知识库子类别
      article_subcategory
      文章列表
      articleList
      文章详情
      articleDetail
      社区类别
      communityLanding
      主题列表
      communityList
     主题详情
      communityDetail
      添加主题
      topicForm
     用户简档
      userProfile
     登录
      signin
     已登录
      signedIn
     注册
      signup
     忘记密码
      forgetPwd

  2. signedIn:此属性定义用户的身份验证状态。指定之后,将会为登录到帮助中心的用户显示该定制。在进行全局更改时,可以删除此属性。
  3. zohodesk:此属性引用类别的名称。指定后,将为访问特定知识库类别的用户显示该定制

CSS定制
示例
让我们看一个CSS定制脚本示例,该脚本删除页眉上的背景图像,并向“知识库子类别”页面添加背景色。

定制之前



定制之后



您可以使用如下CSS代码来自定义以上页面:

.articleSubCategory .Header__header{

background-image: none;

background-color: red

}



    • Related Articles

    • 使用HTML和CSS进行高级帮助中心定制

      您可以使用基础的颜色主题来定制帮助中心的外观。然而,由于不允许您按照自己的喜好重新构建页眉和页脚,它是有限制的。可以使用HTML和CSS(层叠样式表)来进行高级定制。精通网络Zoho Desk管理员可以直接使用帮助中心的HTML,根据您的需求定制网站的CSS。您的帮助中心甚至可以看起来像您公司网站的一个扩展。 ...
    • 自定义帮助中心主页

      使用简单的拖放方法,来自定义Zoho Desk中帮助中心内容的组织方式。您可以添加自定义的窗口小部件,显示或者隐藏页签并定制它们的外观,以正确的内容和在正确的地方吸引您的客户。 窗口小部件 窗口小部件是与帮助中心的不同页面相关联的附加组件。您可以使用Zoho Desk中提供的默认窗口小部件,也可以创建自己的自定义小部件。Zoho Desk内置的默认小部件如下: 公告 社区分类 知识库分类 模块 最热门话题 参与者 热门文章 热门话题 最近的文章 最近的话题 相关的文章 置顶帖子 杰出贡献者 ...
    • 帮助中心搜索引擎的优化

      您的帮助中心内容 (即文章和社区帖子) 应便于您的客户和搜索引擎理解。您可以轻松拥有一个包含伟大内容的完美帮助中心。Google等搜索引擎应该能够在搜索结果中抓取您的帮助中心及其内容。从搜索引擎中获得关注的一个简单方法就是使用 meta 标签。meta标签会告诉搜索引擎您的帮助中心是关于什么, 他们应该如何对待它。 作为管理员,您可以在Zoho Desk中为帮助中心提供meta属性。meta属性将包括标题,meta描述和meta关键字。 请注意,这些属性必须作为一个整体而包含在帮助中心内。 ...
    • 为帮助中心设置SAML单点登录

      安全断言置标语言 (SAML) 是一种用于在应用程序之间,特别是身份提供者(IdP)如OneLogin、Okta、PingIdentity和服务提供者(如Zoho Desk),来交换认证和授权数据的机制。您可以为终端用户配置基于SAML的单点登录(SSO),以便他们可以访问您的帮助中心,而不会被提示输入单独的登录凭证。 注意:  SAML单点登录不可用于免费版。 只有管理员角色的用户能够管理SAML设置。  SAML认证只会应用于终端用户账户,而非您客服人员的账户。 ...
    • 重命名帮助中心子域

      对于老牌公司来说,更名后重新开始并不罕见。事实上,有很多很好的理由。例如,名字不再代表他们的作为;这个品牌已经停滞不前;或用于商标和法律目的。通常,战略重塑品牌还包括从重命名Zoho Desk帮助中心的子域名开始的品牌身份更新。 但是,这也带来了以下问题: 如果终端用户访问旧域,会发生什么情况? 是否有可能将链接转到新域? 没有可能保留旧域名的SEO排名? 我们也有办法解决这个问题。引入主域和次域。这是一种新的方式,用户可以将他们的帮助中心从一个子域迁移到另一个子域,同时保留链接和排名。 ...