このトピックでは、管理コンソールのログイン ページの要素を変更する方法について説明します。

ログイン ページのロゴ

ロゴを変更するには、組織内の両方のテナント アプライアンスで stylesForCustomBranding.css ファイルを編集します。
$> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/horizonadmin/static/css/production/ stylesForCustomBranding.css 
次の例のように、コードの該当するセクションを編集します。
  • コメント /*! Remove this when the logo is required. */ を削除します。
  • 他のコメント行をコメント解除します。
  • 画像ファイルの URL を変更します。
/*! App Logo with text */
.login-wrapper .login .brand-logo {
      display: none;
      /*! Remove this when the logo is required. */
      background: url('../../static/images//EUC_HorizonLogin_bg.png') no-repeat;     
      width: 100px;
      height: 100px;
      margin: 0 auto 1rem auto;  }

次の図は、上記に示すようにコードが編集されたときのページの外観の例を示しています。

変更前 変更後
ブランディング前の [ログイン] ページの例 ブランディング後の [ログイン] ページの例

ログイン ページの背景

背景を変更するには、組織内の両方のテナント アプライアンスで stylesForCustomBranding.css ファイルを編集します。
$> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/horizonadmin/static/css/production/ stylesForCustomBranding.css 
次の例のように、コードの該当するセクションを編集して、コメントされたテキストをコメント解除し、画像ファイルの URL を変更します。
/*! Login Page Background changes */
.login-wrapper {
   background: url('../../images/FBG.jpg') no-repeat; };
}

次の図は、上記に示すようにコードが編集されたときのページの外観の例を示しています。

変更前 変更後
ブランディング前の [ログイン] ページの例 ブランディング後の [ログイン] ページの例

ログイン ボタン

ボタンを変更するには、組織内の両方のテナント アプライアンスで stylesForCustomBranding.css ファイルを編集します。
$> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/horizonadmin/static/css/production/ stylesForCustomBranding.css 
次の例のように、コードの該当するセクションを編集して、コメントされたコードの 2 行をコメント解除し、 border-colorbackground-color の色を変更します。
/*! login button */
.login-wrapper .login .login-group .btn {
       border-color: #00b315;
       background-color: #ff5733;

次の図は、上記に示すようにコードが編集されたときのページの外観の例を示しています。

変更前 変更後
ブランディング前の [ログイン] ページの例 ブランディング後の [ログイン] ページの例