Namn, webbläsartitel, webbläsarikon och CSS

Visningsnamn

Namn och adress för ditt företag, organisation eller system kan konfigureras per miljö. När FoxIDs skickar ett SMS eller e-post till en användare anpassas SMS och e-post texten genom att lägga till informationen.

Namn och adress konfigureras i miljöinställningarna i FoxIDs Control Client.

1. Välj Settings
2. Välj Environment
3. Fyll i namn och adress
4. Klicka Update

Lägg till webbläsartitel, webbläsarikon och CSS

FoxIDs användargränssnitt kan anpassas per inloggningsautentiseringsmetod. Detta innebär att en FoxIDs miljö kan stödja flera användargränssnitt med olika webbläsartitlar, webbläsarikoner och CSS.

Om du inte anger en inloggningsautentiseringsmetod som tillåten autentiseringsmetod i din applikation används standard inloggningsautentiseringsmetoden och det som är anpassat i den.

FoxIDs använder Bootstrap 4.6 och Flexbox CSS.

Hitta den inloggningsautentiseringsmetod i FoxIDs Control Client som du vill konfigurera.

1. Välj fliken Login UI
2. Lägg till Browser Title texten
3. Lägg till Browser Icon URL från en extern webbplats, stödda bildformat: ico, png, gif, jpeg och webp Du kan också klistra in en inline data URI som data:image/png;base64,... för att bädda in ikonen direkt
4. Lägg till din CSS, dra vid behov fältet större
   Valfritt använd CSS snippets genom att klicka på länken Generate CSS snippets
5. Klicka Update

Efter uppdatering är titel, ikon och CSS omedelbart aktiva.

CSS exempel

Ändra bakgrund och lägg till logotext.

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 är också möjligt att använda en logobild.

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

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

Du kan också bädda in logobilden direkt i CSS med en data: URI för att undvika externa requests.

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

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

Lägg till en bakgrundsbild från en extern webbplats.

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

Ändra knapp- och länkfärg, i detta exempel CSS till 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);
}

Lägg till information i inloggningsrutan.

div.page-content::before {
    font-weight: bold;
    font-style: italic;
    content: "Logga in med testanvändare 'test1@foxids.com' eller 'test2@foxids.com' och lösenord 'TestAccess!'";
}

Visa välj var det ska loggas in (HRD) sektionen före inloggningsrutan.

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

Lägg till HTML i Login UI

Du kan ändra inloggningssidan genom att lägga till text och HTML element. Det finns placeholders för inmatningsfälten (användarnamn / lösenord osv.), knappar, länkar och autentiseringsval (HRD). Du kan placera text och HTML element mellan placeholders och ändra ordningen på placeholders.

Hitta den inloggningsautentiseringsmetod i FoxIDs Control Client som du vill konfigurera.

1. Välj fliken Login UI
2. Välj Show advanced
3. Klicka Add element
4. Klicka sedan t.ex. HTML element
5. Flytta HTML elementet med pilarna
6. Lägg till t.ex. en länk till din licens
7. Klicka Update

Inloggningssidan innehåller nu din licenslänk. För vidare anpassning kan du lägga till en CSS class på HTML elementet och lägga till en CSS class i CSS input fältet.