3.4. 创建主题

流程

1. 在 < THEME TYPE>/resources/css 目录中创建一个文件。

2. 将此文件添加到 theme.properties 中的 styles 属性中。

   例如，要将 风格.cs 添加到 mytheme 中，请使用以下内容创建 themes/mytheme/login/resources/css/styles.css ：

   .login-pf body {
       background: DimGrey none;
   }

3. 编辑 它们/mytheme/login/theme.properties 并添加：

   styles=css/styles.css

4. 要查看更改，请打开您的域的登录页面。

   您将注意到应用的唯一样式是来自您的自定义风格表。

5. 为了包括来自父主题的样式，请从该主题加载 样式。编辑 themes/mytheme/login/theme.properties 并更改 样式 以：

   styles=web_modules/@fontawesome/fontawesome-free/css/icons/all.css web_modules/@patternfly/react-core/dist/styles/base.css web_modules/@patternfly/react-core/dist/styles/app.css node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css css/login.css css/styles.css

   注意

   要从父风格表中覆盖样式，请确保您的风格表已列出最后。

流程

1. 在 < THEME TYPE>/resources/js 目录中创建一个文件。

2. 将此文件添加到 theme.properties 中的 scripts 属性中。

   例如，要将 script.js 添加到 mytheme 中，请使用以下内容创建 themes/mytheme/login/resources/js/script.js ：

   alert('Hello');

   然后编辑它们 /mytheme/login/theme.properties 并添加：

   scripts=js/script.js

流程

1. 在主题的目录中创建文件 <THEME TYPE>/messages/messages_<LOCALE>.properties。

2. 将此文件添加到 < THEME TYPE>/theme.properties 中的 locales 属性。要使语言提供给用户 登录、帐户和 电子邮件，主题必须支持该语言，因此您需要为这些主题类型添加您的语言。

   例如：要将 Norwegian 转换添加到 mytheme theme create file themes/mytheme/login/messages/messages_no.properties 中以下内容：

   usernameOrEmail=Brukernavn
   password=Passord

   如果省略了消息的翻译，将使用英语。

3. 编辑 它们/mytheme/login/theme.properties 并添加：

   locales=en,no

4. 为 帐户 添加相同的 电子邮件 类型。要执行此操作，请创建它们 /mytheme/account/messages/messages_no.properties 和 themes/mytheme/email/messages_no.properties。这些文件为空将导致使用英语消息。
5. 将 themes/mytheme/login/theme.properties 复制到 themes/mytheme/account/theme.properties 以及 themes/mytheme/email/theme.properties。

6. 为语言选择器添加翻译。这是通过向英语翻译添加消息来完成的。要执行此操作，请将以下内容添加到 themes/mytheme/account/messages/messages_en.properties 和 themes/mytheme/login/messages/messages_en.properties:

   locale_no=Norsk

   默认情况下，消息属性文件应使用 ISO-8859-1 进行编码。也可以使用特殊标头指定编码。例如，使用 UTF-8 编码：

   # encoding: UTF-8
   usernameOrEmail=....

流程

1. 在 login theme.properties 文件中定义图标类（例如 themes/mytheme/login/theme.properties）使用键模式 kcLogoIdP-<alias& gt;。

2. 对于带有别名 myProvider 的身份提供程序，您可以在自定义主题的 me.properties 文件中添加一行。例如：

   kcLogoIdP-myProvider = fa fa-lock

流程

1. 将模板从基础主题复制到您自己的主题。

2. 应用您需要的修改。

   例如，要为 mytheme theme 创建自定义登录表单，请将 themes/base/login/login.ftl 复制到他们 es/mytheme/login，并在编辑器中打开它。

   第一行(<#import …​>)后，添加 <h1>HELLO WORLD!</h1& gt;，如下所示：

   <#import "template.ftl" as layout>
   <h1>HELLO WORLD!</h1>
   ...

3. 备份修改后的模板。当升级到新版本的 Red Hat Single Sign-On 时，您可能需要更新自定义模板，以对原始模板应用更改（如果适用）。