Nome, titolo del browser, icona del browser e CSS

Nome visualizzato

Il nome e l'indirizzo della tua azienda, organizzazione o sistema possono essere configurati in ogni ambiente. Quando FoxIDs invia un SMS o un'email a un utente, il testo del messaggio viene personalizzato aggiungendo queste informazioni.

Il nome e l'indirizzo vengono configurati nelle impostazioni dell'ambiente in FoxIDs Control Client.

1. Seleziona Settings
2. Seleziona Environment
3. Compila nome e indirizzo
4. Fai clic su Update

Aggiungere titolo del browser, icona del browser e CSS

L'interfaccia utente di FoxIDs puo essere personalizzata per metodo di autenticazione login. Questo significa che un singolo ambiente FoxIDs puo supportare piu design di interfaccia utente con titoli del browser, icone del browser e CSS differenti.

Se non specifichi un metodo di autenticazione login come metodo consentito nella tua applicazione, verra usato il metodo di autenticazione login predefinito, insieme alla personalizzazione configurata su di esso.

FoxIDs usa Bootstrap 4.6 e Flexbox CSS.

Trova il metodo di autenticazione login in FoxIDs Control Client che vuoi configurare.

1. Seleziona la scheda Login UI
2. Aggiungi il testo Browser Title
3. Aggiungi Browser Icon URL da un sito esterno, formati immagine supportati: ico, png, gif, jpeg e webp Puoi anche incollare un data URI inline come data:image/png;base64,... per incorporare direttamente l'icona
4. Aggiungi il tuo CSS, se necessario trascina il campo per ingrandirlo
   Facoltativamente usa snippet CSS facendo clic sul link Generate CSS snippets
5. Fai clic su Update

Dopo l'aggiornamento, titolo, icona e CSS sono immediatamente attivi.

Esempi CSS

Cambia lo sfondo e aggiungi testo al logo.

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;
}

E possibile anche usare un'immagine di logo.

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

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

Puoi anche incorporare direttamente l'immagine del logo nel CSS con un data URI data: per evitare richieste esterne.

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

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

Aggiungi un'immagine di sfondo da un sito esterno.

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;
}

Cambia il colore di pulsanti e link, in questo esempio in 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);
}

Aggiungi informazioni al box di 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!'";
}

Mostra la sezione di selezione di dove effettuare il login (HRD) prima del box di 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;
}

Aggiungere HTML alla Login UI

Puoi modificare la pagina di login aggiungendo testo ed elementi HTML. Ci sono placeholder per i campi di input (username / password ecc.), pulsanti, link e scelte di autenticazione (HRD). Puoi posizionare elementi di testo e HTML tra i placeholder e cambiarne l'ordine.

Trova il metodo di autenticazione login in FoxIDs Control Client che vuoi configurare.

1. Seleziona la scheda Login UI
2. Seleziona Show advanced
3. Fai clic su Add element
4. Poi, ad esempio, fai clic su HTML element
5. Sposta l'elemento HTML con le frecce
6. Aggiungi, ad esempio, un link alla tua licenza
7. Fai clic su Update

La pagina di login ora include il tuo link alla licenza. Per personalizzare ulteriormente, puoi aggiungere una classe CSS all'elemento HTML e aggiungere la relativa classe CSS nel campo di input CSS.