3.4. テーマの作成

手順

1. テーマの <THEME TYPE>/resources/css ディレクトリーにファイルを作成します。

2. それを theme.properties の styles プロパティーに追加します。

   たとえば、styles.css を mytheme に追加するには、以下の内容を含む themes/mytheme/login/resources/css/styles.css を作成します。

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

   Copy to Clipboard Toggle word wrap

3. themes/mytheme/login/theme.properties を編集し、以下を追加します。

   styles=css/styles.css

   Copy to Clipboard Toggle word wrap

4. 変更を確認するには、レルムのログインページを開きます。

   適用されるスタイルは、カスタムのスタイルシートからのものだけであることに注目してください。

5. 親テーマのスタイルを含めるには、そのテーマのスタイルを読み込みます。themes/mytheme/login/theme.properties を編集し、styles を次のように変更します。

   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

   Copy to Clipboard Toggle word wrap
   注記

   親スタイルシートのスタイルをオーバーライドするには、スタイルシートが最後にリストされていることを確認してください。

手順

1. テーマの <THEME TYPE>/resources/js ディレクトリーにファイルを作成します。

2. ファイルを theme.properties の scripts プロパティーに追加します。

   たとえば、script.js を mytheme に追加するには、以下の内容で themes/mytheme/login/resources/js/script.js を作成します。

   alert('Hello');

   Copy to Clipboard Toggle word wrap

   次に、themes/mytheme/login/theme.properties を編集し、以下を追加します。

   scripts=js/script.js

   Copy to Clipboard Toggle word wrap

手順

1. テーマのディレクトリーに <THEME TYPE>/messages/messages_<LOCALE>.properties ファイルを作成します。

2. このファイルを <THEME TYPE>/theme.properties の locales プロパティーに追加します。言語をユーザーが利用できるようにするには、レルムの login、account および email テーマがその言語をサポートしていなければならないため、これらのテーマタイプに言語を追加する必要があります。

   たとえば、mytheme テーマにノルウェー語の翻訳を追加するには、以下の内容で themes/mytheme/login/messages/messages_no.properties ファイルを作成します。

   usernameOrEmail=Brukernavn
   password=Passord

   Copy to Clipboard Toggle word wrap

   メッセージの翻訳を省略すると、英語が使用されます。

3. themes/mytheme/login/theme.properties を編集し、以下を追加します。

   locales=en,no

   Copy to Clipboard Toggle word wrap
4. account と email のテーマタイプにも同じものを追加します。そのためには、themes/mytheme/account/messages/messages_no.properties および themes/mytheme/email/messages/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

   Copy to Clipboard Toggle word wrap

   デフォルトでは、メッセージプロパティーファイルは ISO-8859-1 を使用してエンコードする必要があります。特別なヘッダーを使用してエンコーディングを指定することもできます。たとえば、UTF-8 エンコーディングを使用するには、次のコマンドを実行します。

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

   Copy to Clipboard Toggle word wrap

手順

1. ログイン theme.properties ファイル (themes/mytheme/login/theme.properties など) の中で、キーパターン kcLogoIdP-<alias> でアイコンクラスを定義します。

2. myProvider というエイリアスを持つ Identity プロバイダーの場合は、カスタムテーマの theme.properties ファイルに行を追加できます。以下に例を示します。

   kcLogoIdP-myProvider = fa fa-lock

   Copy to Clipboard Toggle word wrap

手順

1. テンプレートをベーステーマから独自のテーマにコピーします。

2. 必要な変更を適用します。

   たとえば、mytheme テーマのカスタムログインフォームを作成するには、themes/base/login/login.ftl を themes/mytheme/login にコピーし、エディターで開きます。

   最初の行 (<#import …​>) の後に、<h1>HELLO WORLD!</h1> を以下のように追加します。

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

   Copy to Clipboard Toggle word wrap
3. 変更したテンプレートをバックアップします。Red Hat build of Keycloak の新しいバージョンにアップグレードする場合は、必要に応じて元のテンプレートに変更を適用できるようにカスタムテンプレートを更新する必要がある可能性があります。