Navn, browser titel, browser ikon og CSS

Visningsnavn

Navn og adresse for din virksomhed, organisation eller system kan konfigureres på hvert miljø. Når FoxIDs sender en SMS eller email til en bruger tilpasses SMS og email teksten ved at tilføje informationen.

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

1. Vælg Settings
2. Vælg Environment
3. Udfyld navn og adresse
4. Klik Update

Tilføj browser titel, browser ikon og CSS

FoxIDs brugergrænseflade kan tilpasses pr. login autentificeringsmetode. Det betyder at ét FoxIDs miljø kan understøtte flere brugergrænseflade designs med forskellige browser titler, browser ikoner og CSS.

Hvis du ikke angiver en login autentificeringsmetode som en tilladt autentificeringsmetode i din applikation, bruges standard login autentificeringsmetoden og det som er tilpasset i den.

FoxIDs bruger Bootstrap 4.6 og Flexbox CSS.

Find den login autentificeringsmetode i FoxIDs Control Client som du vil konfigurere.

1. Vælg fanen Login UI
2. Tilføj Browser Title teksten
3. Tilføj Browser Icon URL fra et eksternt site, understøttede billedformater: ico, png, gif, jpeg og webp Du kan også indsætte en inline data URI såsom data:image/png;base64,... for at indlejre ikonet direkte
4. Tilføj din CSS, hvis nødvendigt træk feltet større
   Valgfrit kan du bruge CSS snippets ved at klikke Generate CSS snippets linket
5. Klik Update

Efter opdatering er titel, ikon og CSS straks aktiv.

CSS eksempler

Skift baggrund og tilføj 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å muligt at bruge et logo billede.

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

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

Du kan også indlejre logo billedet direkte i CSS med en data: URI for at undgå eksterne requests.

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

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

Tilføj et baggrundsbillede fra et eksternt site.

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

Skift knap og link farve, i dette eksempel CSS til grøn.

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

Tilføj information til 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 password 'TestAccess!'";
}

Vis vælg hvor der skal logges ind (HRD) sektionen 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;
}

Tilføj HTML til Login UI

Du kan ændre login siden ved at tilføje tekst og HTML elementer. Der er placeholders til input felterne (brugernavn / adgangskode osv.), knapper, links og autentificeringsvalg (HRD). Du kan placere tekst og HTML elementer mellem placeholders og ændre rækkefølgen på placeholders.

Find den login autentificeringsmetode i FoxIDs Control Client som du vil konfigurere.

1. Vælg fanen Login UI
2. Vælg Show advanced
3. Klik Add element
4. Klik derefter f.eks. HTML element
5. Flyt HTML elementet med pilene
6. Tilføj f.eks. et link til din licens
7. Klik Update

Login siden inkluderer nu dit licens link. For yderligere tilpasning kan du tilføje en CSS class på HTML elementet og tilføje en CSS class i CSS input feltet.