Este tópico descreve como modificar elementos da página de login do console administrativo.
Logotipo da página de login
Para modificar o logotipo, edite o arquivo
stylesForCustomBranding.css em ambos os dispositivos de tenant na organização:
$> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/horizonadmin/static/css/production/ stylesForCustomBranding.css
Edite a seção adequada do código para que ele fique semelhante ao exemplo a seguir.
- Exclua o comentário
/*! Remove this when the logo is required. */. - Descomente as outras linhas comentadas.
- Altere a URL para o arquivo de imagem.
/*! 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; }
As imagens a seguir mostram um exemplo da aparência da página após o código ter sido editado, como mostrado acima.
| ANTES | DEPOIS |
|---|---|
 |
 |
Plano de fundo da página de login
Para modificar o plano de fundo, edite o arquivo
stylesForCustomBranding.css em ambos os dispositivos de tenant na organização:
$> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/horizonadmin/static/css/production/ stylesForCustomBranding.css
Edite a seção apropriada do código para que seja semelhante ao exemplo a seguir, descomentando o texto comentado e alterando a URL para o arquivo de imagem.
/*! Login Page Background changes */
.login-wrapper {
background: url('../../images/FBG.jpg') no-repeat; };
}
As imagens a seguir mostram um exemplo da aparência da página após o código ter sido editado, como mostrado acima.
| ANTES | DEPOIS |
|---|---|
 |
 |
Botão Login
Para modificar o botão, edite o arquivo stylesForCustomBranding.css em ambos os dispositivos de tenant na organização:
$> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/horizonadmin/static/css/production/ stylesForCustomBranding.css
Edite a seção apropriada do código para que seja semelhante ao exemplo a seguir, descomentando as duas linhas de código comentado e alterando as cores para
border-color e
background-color.
/*! login button */
.login-wrapper .login .login-group .btn {
border-color: #00b315;
background-color: #ff5733;
As imagens a seguir mostram um exemplo da aparência da página após o código ter sido editado, como mostrado acima.
| ANTES | DEPOIS |
|---|---|
 |
 |
