Name, Browser Titel, Browser Icon und CSS

Anzeigename

Name und Adresse für dein Unternehmen, deine Organisation oder dein System können pro Environment konfiguriert werden. Wenn FoxIDs eine SMS oder E Mail an einen Benutzer sendet, wird der SMS und E Mail Text durch Hinzufügen der Informationen angepasst.

Name und Adresse werden in den Environment Einstellungen im FoxIDs Control Client konfiguriert.

1. Wähle Settings
2. Wähle Environment
3. Trage Name und Adresse ein
4. Klicke Update

Browser Titel, Browser Icon und CSS hinzufügen

Die FoxIDs Benutzeroberfläche kann pro Login Authentifizierungsmethode angepasst werden. Das bedeutet, dass ein einzelnes FoxIDs Environment mehrere Benutzeroberflächen Designs mit unterschiedlichen Browser Titeln, Browser Icons und CSS unterstützen kann.

Wenn du keine Login Authentifizierungsmethode als zulässige Authentifizierungsmethode in deiner Anwendung angibst, wird die Standard Login Authentifizierungsmethode verwendet und auch das, was darin angepasst ist.

FoxIDs verwendet Bootstrap 4.6 und Flexbox CSS.

Finde die Login Authentifizierungsmethode im FoxIDs Control Client, die du konfigurieren möchtest.

1. Wähle die Registerkarte Login UI
2. Füge den Browser Title Text hinzu
3. Füge die Browser Icon URL von einer externen Seite hinzu, unterstützte Bildformate: ico, png, gif, jpeg und webp Du kannst auch eine inline data URI wie data:image/png;base64,... einfügen, um das Icon direkt einzubetten
4. Füge dein CSS hinzu, wenn nötig ziehe das Feld größer
   Optional CSS Snippets verwenden durch Klicken auf den Generate CSS snippets Link
5. Klicke Update

Nach dem Update sind Titel, Icon und CSS sofort aktiv.

CSS Beispiele

Hintergrund ändern und Logo Text hinzufügen.

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

Es ist auch möglich, ein Logo Bild zu verwenden.

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

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

Du kannst das Logo Bild auch direkt in CSS mit einer data: URI einbetten, um externe Requests zu vermeiden.

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

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

Hintergrundbild von einer externen Seite hinzufügen.

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

Button und Link Farbe ändern, in diesem Beispiel CSS zu 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);
}

Informationen zur Login Box hinzufügen.

div.page-content::before {
    font-weight: bold;
    font-style: italic;
    content: "Login mit Test Benutzer 'test1@foxids.com' oder 'test2@foxids.com' und Passwort 'TestAccess!'";
}

Den Abschnitt zur Auswahl der Anmeldung (HRD) vor der Login Box anzeigen.

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

HTML zur Login UI hinzufügen

Du kannst die Login Seite ändern, indem du Text und HTML Elemente hinzufügst. Es gibt Platzhalter für die Eingabefelder (Benutzername / Passwort usw.), Buttons, Links und Authentifizierungsauswahl (HRD). Du kannst Text und HTML Elemente zwischen den Platzhaltern platzieren und die Reihenfolge der Platzhalter ändern.

Finde die Login Authentifizierungsmethode im FoxIDs Control Client, die du konfigurieren möchtest.

1. Wähle die Registerkarte Login UI
2. Wähle Show advanced
3. Klicke Add element
4. Dann z.B. HTML element
5. Bewege das HTML Element mit den Pfeilen
6. Füge z.B. einen Link zu deiner Lizenz hinzu
7. Klicke Update

Die Login Seite enthält nun deinen Lizenz Link. Zur weiteren Anpassung kannst du eine CSS Klasse am HTML Element hinzufügen und eine CSS Klasse im CSS Eingabefeld hinzufügen.