在 Canvas 中,您可以使用主题编辑器来定制您的帐户。但是,如果您想应用主题编辑器目前不支持的其他品牌元素,您可以将自定义层叠样式表 (CSS) 和 JavaScript (JS) 文件上传到您的帐户。这些文件直接托管在 Canvas 中。应用于帐户的任何主题也会应用于所有子帐户,但您可以为单个子帐户上传 CSS/JS 文件。
主题编辑器支持桌面和移动端上传文件。标准 CSS/JS 文件应用于 Canvas 桌面应用程序中的 HTML 页面,包括移动设备的登录页面。移动端 CSS/JS 文件仅应用于 Canvas iOS 或 Android 应用以及使用 Canvas API 的第三方应用中显示的用户内容,但不应用于移动浏览器中显示的用户内容。
自定义 JavaScript 和 CSS 文件遵循与在主题编辑器中创建主题时相同的帐户和子帐户品牌继承规则。
在添加自定义 JavaScript 和 CSS 文件之前,您必须联系您的客户成功经理,为您的帐户及其所有子帐户启用自定义品牌功能。启用自定义品牌功能后,您即可在帐户及其所有子帐户中上传自定义 CSS 和 JS 文件。
自定义文件风险
如果您无法使用原生主题编辑器选项进行品牌定制,则必须意识到使用自定义文件的相关风险,这可能会导致辅助功能问题或与未来的 Canvas 更新发生冲突:
- 您应该对 JavaScript 和 CSS 有深入的了解,并且必须维护自己的代码。
- 自定义文件可能与 Canvas DOM 的未来更改(例如:元素类名或 HTML 结构)冲突,因此不受支持。Instructure 对您自定义覆盖文件所做的任何更改不承担任何责任。
- 您有责任审查网页内容无障碍指南,确保您的文件符合您所在司法管辖区可能要求的任何网页无障碍测试或其他合规标准。您有责任确保您的修改对屏幕阅读器、有文本对比度和颜色对比度需求的用户以及依赖高对比度样式作为用户功能设置的用户都可用。
- 在尝试自定义品牌时,务必在机构的测试环境或测试环境中确认品牌更改。
笔记:
- 教师免费账户无法使用主题编辑器。
- 如果您是子账户管理员,且在账户导航中看不到“主题”链接,则表示子账户尚未启用主题功能。如果看不到“CSS/JS 上传”选项卡,则表示子账户尚未启用文件上传功能。
00:07:如何将自定义 JavaScript 和 CSS 文件上传到帐户?
00:11:在全局导航中,单击“管理员”链接,然后单击帐户名称。
00:17:在帐户设置中,点击主题链接。
00:21:如果您之前创建并保存了主题,您可以随时编辑已保存的主题。已保存的主题会显示在“我的主题”部分。要打开已保存的主题,请将鼠标悬停在主题名称上,然后单击“在主题编辑器中打开”按钮。
00:37:或者点击“添加主题”按钮。您也可以基于已保存的模板创建主题。
00:43:要基于已保存的主题创建新主题,请点击“添加主题”按钮,然后从列表中选择已保存主题的名称。此选项可帮助您避免覆盖之前保存的主题。
00:56:在主题编辑器侧边栏中,点击“上传”选项卡。
01:00:要为 Canvas 桌面应用程序上传文件,请找到 CSS 文件或 JavaScript 文件标题。
01:08:要在 Canvas 移动应用和第三方应用中上传用户内容文件,请找到移动应用 CSS 文件或 JavaScript 文件标题。
01:18:找到你要上传的文件类型,点击“选择”按钮,然后在你的电脑上找到该文件。
01:26:如有需要,查找其他要上传的文件。
01:30:要预览您的主题,请点击“预览更改”按钮。
01:34:Canvas 将根据您上传的文件生成组件预览。
01:40:要管理您的文件,请再次单击“上传”选项卡。
01:44:要删除并上传新文件,请点击“删除”图标。您可以进行其他更改并上传修改后的文件。
01:52:要查看文件的代码,请点击“查看文件”链接。
01:55:由于文件直接存储在 Canvas 中,如果您需要下载该文件,请使用此链接。
02:02:如果您对模板更改感到满意,请点击“保存主题”按钮保存您的主题。
02:08:如果您修改了模板中的主题,主题编辑器会创建一个主题副本。模板无法直接编辑。在“主题名称”字段中,输入主题名称。单击“保存主题”按钮。
02:22:要将主题应用到您的帐户,请点击“应用主题”按钮。
02:27:要退出主题并返回主题页面,请点击“退出”按钮。您可以随时打开主题并将其应用到您的帐户。
02:36:本指南介绍了如何将自定义 JavaScript 和 CSS 文件上传到帐户。
开户
在全局导航中,点击管理员链接[1],然后点击帐户名称[2]。
开放主题
在“帐户导航”中,点击“主题”链接。
注意:如果已启用子账户主题,则每个子账户都会包含一个“主题”链接。要打开子账户的主题编辑器,请点击“子账户”链接找到并打开该子账户,然后点击该子账户的“主题”链接。
打开主题模板
如果您还没有 Canvas 主题,请使用模板创建新主题。您可以从默认 Canvas 模板、极简模板和州立大学模板中进行选择。如果您的客户成功经理已启用 K12 专属功能设置,K12 主题也会显示为模板。
要创建新主题,请将鼠标悬停在模板上,然后单击“在主题编辑器中打开”按钮 [1],或者单击“添加主题”按钮 [2],然后从列表中选择一个模板。
打开已保存的主题
如果您之前创建并保存了主题,您可以随时编辑已保存的主题。已保存的主题会显示在“我的主题”部分。要打开已保存的主题,请将鼠标悬停在主题名称上,然后单击“在主题编辑器中打开”按钮 [1]。
要基于已保存的主题创建新主题,请单击“添加主题”按钮 [2],然后从列表中选择已保存主题的名称 [3]。此选项可帮助您避免覆盖先前保存的主题。
打开上传选项卡
在主题编辑器侧边栏中,单击“上传”选项卡。
上传自定义文件
要上传 Canvas 桌面应用程序的文件,请找到 CSS 文件/JavaScript 文件标题 [1]。要上传 Canvas 移动应用程序和第三方应用程序中的用户内容文件,请找到移动应用程序 CSS 文件/JavaScript 文件标题 [2]。
找到你要上传的文件类型,然后点击“选择”按钮[3],再找到你电脑上的文件。
如有需要,请查找其他要上传的文件。
预览主题
要预览您的主题,请点击“预览更改”按钮。
Canvas 将根据您上传的文件生成组件预览。
管理文件
要管理您的文件,请再次单击“上传”选项卡[1]。
要删除并上传新文件,请点击“删除”图标 [2]。您可以进行其他更改并上传修改后的文件。
要查看文件的代码,请点击“查看文件”链接[3]。由于文件直接存储在 Canvas 中,如果您需要下载文件,请使用此链接。
保存主题
如果您对模板更改感到满意,请点击“保存主题”按钮保存您的主题。
创建主题名称
如果您修改了基于模板的主题,主题编辑器会创建该主题的副本。模板无法直接编辑。在“主题名称”字段 [1] 中,输入主题名称。单击“保存主题”按钮 [2]。
注意:如果您编辑了之前保存的主题,保存主题会覆盖主题的先前版本,并使用相同的主题名称。
应用主题
要将主题应用到您的帐户,请点击“应用主题”按钮[1]。
要退出主题并返回主题页面,请点击“退出”按钮 [2]。您可以随时打开主题并将其应用到您的帐户。
注意:如果您的帐户允许子帐户自定义主题,您所做的任何更改也会应用到所有关联的子帐户。Canvas 会显示您的主题编辑器更新状态;每个子帐户的更新完成后,该子帐户将从进度窗口中消失。所有子帐户更新完成后,主题编辑器将重定向回“主题”页面。