Nombre, título del navegador, icono del navegador y CSS

Nombre para mostrar

El nombre y la dirección de tu empresa, organización o sistema se pueden configurar en cada entorno. Cuando FoxIDs envía un SMS o un email a un usuario, el texto del SMS y del email se personaliza agregando la información.

El nombre y la dirección se configuran en los ajustes del entorno en FoxIDs Control Client.

1. Selecciona Settings
2. Selecciona Environment
3. Rellena el nombre y la dirección
4. Haz clic en Update

Agregar título del navegador, icono del navegador y CSS

La interfaz de usuario de FoxIDs se puede personalizar por método de autenticación login. Esto significa que un único entorno de FoxIDs puede admitir múltiples diseños de interfaz de usuario con diferentes títulos de navegador, iconos de navegador y CSS.

Si no especificas un método de autenticación login como método permitido en tu aplicación, se utiliza el método de autenticación login predeterminado y también lo personalizado en él.

FoxIDs usa Bootstrap 4.6 y Flexbox CSS.

Encuentra el método de autenticación login en FoxIDs Control Client que deseas configurar.

1. Selecciona la pestaña Login UI
2. Agrega el texto Browser Title
3. Agrega la URL del icono del navegador desde un sitio externo, formatos soportados: ico, png, gif, jpeg y webp También puedes pegar un URI de datos inline como data:image/png;base64,... para incrustar el icono directamente
4. Agrega tu CSS, si es necesario agranda el campo arrastrando
   Opcionalmente usa fragmentos CSS haciendo clic en el enlace Generate CSS snippets
5. Haz clic en Update

Después de la actualización, el título, el icono y el CSS están activos de inmediato.

Ejemplos de CSS

Cambiar el fondo y añadir texto de 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;
}

También es posible usar una imagen de logo.

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

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

También puedes incrustar la imagen del logo directamente en el CSS con un URI data: para evitar solicitudes externas.

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

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

Agregar una imagen de fondo desde un sitio externo.

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

Cambiar el color de botones y enlaces, en este ejemplo el CSS a 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);
}

Agregar información a la caja de inicio de sesión.

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!'";
}

Mostrar la sección de selección de dónde iniciar sesión (HRD) antes de la caja de inicio de sesión.

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

Agregar HTML a la UI de login

Puedes cambiar la página de inicio de sesión agregando texto y elementos HTML. Hay placeholders para los campos de entrada (usuario / contraseña, etc.), botones, enlaces y opciones de autenticación (HRD). Puedes colocar el texto y los elementos HTML entre los placeholders y cambiar el orden de los placeholders.

Encuentra el método de autenticación login en FoxIDs Control Client que deseas configurar.

1. Selecciona la pestaña Login UI
2. Selecciona Show advanced
3. Haz clic en Add element
4. Luego, por ejemplo, haz clic en HTML element
5. Mueve el elemento HTML con las flechas
6. Agrega, por ejemplo, un enlace a tu licencia
7. Haz clic en Update

La página de inicio de sesión ahora incluye el enlace de tu licencia. Para personalizar más, puedes agregar una clase CSS en el elemento HTML y agregar una clase CSS en el campo de entrada CSS.