Navn, nettlesertittel, nettleserikon og CSS

Visningsnavn

Navn og adresse for din bedrift, organisasjon eller system kan konfigureres i hvert miljø. Når FoxIDs sender en SMS eller e post til en bruker tilpasses SMS og e post teksten ved å legge til informasjonen.

Navn og adresse konfigureres i miljøinnstillingene i FoxIDs Control Client.

1. Velg Settings
2. Velg Environment
3. Fyll inn navn og adresse
4. Klikk Update

Legg til nettlesertittel, nettleserikon og CSS

FoxIDs brukergrensesnitt kan tilpasses per login autentiseringsmetode. Dette betyr at ett FoxIDs miljø kan støtte flere brukergrensesnitt design med forskjellige nettlesertitler, nettleserikoner og CSS.

Hvis du ikke spesifiserer en login autentiseringsmetode som tillatt autentiseringsmetode i applikasjonen din, brukes standard login autentiseringsmetoden og det som er tilpasset i den.

FoxIDs bruker Bootstrap 4.6 og Flexbox CSS.

Finn login autentiseringsmetoden i FoxIDs Control Client som du vil konfigurere.

1. Velg Login UI fanen
2. Legg til Browser Title teksten
3. Legg til Browser Icon URL fra et eksternt nettsted, støttede bildeformater: ico, png, gif, jpeg og webp Du kan også lime inn en inline data URI som data:image/png;base64,... for å bygge inn ikonet direkte
4. Legg til din CSS, hvis nødvendig dra feltet større
   Valgfritt bruk CSS snippets ved å klikke Generate CSS snippets lenken
5. Klikk Update

Etter oppdatering er tittel, ikon og CSS umiddelbart aktivt.

CSS eksempler

Endre bakgrunn og legg til logo tekst.

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

Det er også mulig å bruke et logo bilde.

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

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

Du kan også bygge inn logo bildet direkte i CSS med en data: URI for å unngå eksterne requests.

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

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

Legg til et bakgrunnsbilde fra et eksternt nettsted.

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

Endre knapp og lenke farge, i dette eksemplet CSS til grønt.

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

Legg til informasjon i login boksen.

div.page-content::before {
    font-weight: bold;
    font-style: italic;
    content: "Login med test user 'test1@foxids.com' eller 'test2@foxids.com' og passord 'TestAccess!'";
}

Vis velg hvor det skal logges inn (HRD) seksjonen før login boksen.

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

Legg til HTML i Login UI

Du kan endre login siden ved å legge til tekst og HTML elementer. Det finnes placeholders for input feltene (brukernavn / passord osv.), knapper, lenker og autentiseringsvalg (HRD). Du kan plassere tekst og HTML elementer mellom placeholders og endre rekkefølgen på placeholders.

Finn login autentiseringsmetoden i FoxIDs Control Client som du vil konfigurere.

1. Velg Login UI fanen
2. Velg Show advanced
3. Klikk Add element
4. Klikk deretter f.eks. HTML element
5. Flytt HTML elementet med pilene
6. Legg til f.eks. en lenke til lisensen din
7. Klikk Update

Login siden inkluderer nå lisens lenken din. For videre tilpasning kan du legge til en CSS class på HTML elementet og legge til en CSS class i CSS input feltet.