Nome, título do browser, ícone do browser e CSS

Nome de apresentação

O nome e o endereço da sua empresa, organização ou sistema podem ser configurados em cada ambiente. Quando o FoxIDs envia um SMS ou email a um utilizador, o texto do SMS e do email é personalizado com essa informação.

O nome e o endereço são configurados nas definições do ambiente no FoxIDs Control Client.

1. Selecione Settings
2. Selecione Environment
3. Preencha o nome e o endereço
4. Clique em Update

Adicionar título do browser, ícone do browser e CSS

A interface de utilizador do FoxIDs pode ser personalizada por método de autenticação de login. Isto significa que um único ambiente FoxIDs pode suportar vários designs de interface de utilizador com diferentes títulos de browser, ícones de browser e CSS.

Se não especificar um método de autenticação de login como método permitido na sua aplicação, o método de autenticação de login predefinido é usado, assim como a personalização configurada nele.

O FoxIDs usa Bootstrap 4.6 e Flexbox CSS.

Encontre o método de autenticação de login no FoxIDs Control Client que quer configurar.

1. Selecione o separador Login UI
2. Adicione o texto Browser Title
3. Adicione o Browser Icon URL a partir de um site externo, formatos de imagem suportados: ico, png, gif, jpeg e webp Também pode colar um data URI inline, como data:image/png;base64,..., para incorporar o ícone diretamente
4. Adicione o seu CSS, se necessário arraste o campo para o tornar maior
   Opcionalmente, use snippets CSS clicando na ligação Generate CSS snippets
5. Clique em Update

Depois da atualização, o título, o ícone e o CSS ficam ativos imediatamente.

Exemplos de CSS

Alterar o fundo e adicionar texto de logótipo.

body {
    background: #ddddc0;
}

.brand-content-text {
    visibility: hidden;
}

.brand-content-text::before {
    color: #6ad54a;
    content: "Test logo";
    visibility: visible;
    display: block;
    font-size: 4rem;
    font-weight: 400;
    line-height: 1.6;
}

Também é possível usar uma imagem de logótipo.

.brand-content-text {
    display: none;
}

.brand-content-icon::before {
    content:url('https://some-external-site.com/logo.png');
}

Também pode incorporar a imagem do logótipo diretamente no CSS com um data: URI para evitar pedidos externos.

.brand-content-text {
    display: none;
}

.brand-content-icon::before {
    content:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9FHSMNcAAAAASUVORK5CYII=');
}

Adicionar uma imagem de fundo de um site externo.

body {
    background: #FFF;
    background: url(https://some-external-site.com/image.png);
    background-position: no-repeat center center fixed;
    background-color: inherit;
    background-repeat: no-repeat;
    background-size:cover;
}

Alterar a cor de botões e links, neste exemplo CSS para verde.

label {
    color: #a4c700 !important;
}

.input:focus {
    outline: none !important;
    border:1px solid #a4c700;
    box-shadow: 0 0 10px #a4c700;
}

.btn-link, .btn-link:hover, a, a:hover {
    color: #a4c700;
}

.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #afc44f;
    border-color: #afc44f;
}

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:active {
    background-color: #a4c700;
    border-color: #a4c700;
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    background-color: #7c9600;
    border-color: #7c9600;
}

.btn-link:not(:disabled):not(.disabled):active, .btn-link:not(:disabled):not(.disabled).active, .show>.btn-link.dropdown-toggle {
    color: #a4c700;
}

.btn:focus, .form-control:focus {
    border-color: #a4c700;
    box-shadow: 0 0 0 .2rem rgba(64,78,0,.25);
}

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(64,78,0,.25);
}

Adicionar informação à caixa de login.

div.page-content::before {
    font-weight: bold;
    font-style: italic;
    content: "Login with test user 'test1@foxids.com' or 'test2@foxids.com' and password 'TestAccess!'";
}

Mostrar a secção de seleção de onde fazer login (HRD) antes da caixa de login.

.col-md.page-content {
  display: flex;
  flex-direction: column;
}

.col-md.page-content form {
  order: 2;
}

.col-md.page-content #form-filter {
  order: 1;
}

#form-filter {
  display: flex;
  flex-direction: column;
}

#form-filter .info-message-filter {
  display: none;
}

#form-filter .dividing-line {
  order: 999;
}

Adicionar HTML à Login UI

Pode alterar a página de login adicionando texto e elementos HTML. Existem placeholders para os campos de entrada (username / password etc.), botões, links e escolhas de autenticação (HRD). Pode colocar os elementos de texto e HTML entre os placeholders e alterar a ordem desses placeholders.

Encontre o método de autenticação de login no FoxIDs Control Client que quer configurar.

1. Selecione o separador Login UI
2. Selecione Show advanced
3. Clique em Add element
4. Depois, por exemplo, clique em HTML element
5. Mova o elemento HTML com as setas
6. Adicione, por exemplo, uma ligação para a sua licença
7. Clique em Update

A página de login inclui agora a sua ligação de licença. Para personalizar ainda mais, pode adicionar uma classe CSS no elemento HTML e adicionar a respetiva classe CSS no campo de entrada CSS.