このトピックでは、管理コンソールのログイン ページの要素を変更する方法について説明します。
ログイン ページのロゴ
ロゴを変更するには、組織内の両方のテナント アプライアンスで
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-color
と
background-color
の色を変更します。
/*! login button */ .login-wrapper .login .login-group .btn { border-color: #00b315; background-color: #ff5733;
次の図は、上記に示すようにコードが編集されたときのページの外観の例を示しています。
変更前 | 変更後 |
---|---|