Contents

Temas Relacionados

Personalizar los Elementos de la Página del Access Portal con CSS

Para personalizar los elementos de la página del Access Portal, puede descargar un archivo .CSS desde su Firebox. Después de editar el archivo, cárguelo a su Firebox para previsualizar y guardar los cambios.

En el archivo .CSS, puede especificar los ajustes de estos elementos de la página:

  • Enlaces
  • Botones
  • Cuadros de texto
  • Listas desplegables
  • Ventana de inicio de sesión
  • Página de aplicaciones

Para personalizar el título de la página, el encabezado, los logotipos de inicio de sesión y la imagen de fondo, consulte Personalizar las Imágenes del Access Portal.

Los pasos para personalizar los elementos de la página del Access Portal son diferentes en Fireware v12.1 y 12.1.1. Si su Firebox tiene Fireware v12.1 o v12.1.1, consulte Personalizar los Elementos de la Página del Access Portal con CSS en Fireware v12.1 y v12.1.1 en la Base de Consulta de WatchGuard.

Descargar el archivo .CSS

Debe usar la Fireware Web UI para descargar el archivo .CSS de su Firebox.

Para descargar el archivo .CSS, en la Fireware Web UI:Closed
  1. Seleccione Servicios de Suscripción > Access Portal.
  2. Seleccione la pestaña Personalización.

Captura de pantalla de la página Personalización

  1. Junto a la casilla de selección Archivo CSS Personalizado, haga clic en Descargar el archivo CSS de ejemplo.
    El archivo .CSS se abre en su explorador.
  2. Para editar el archivo .CSS, guárdelo en su computadora local. Para obtener información sobre los elementos que puede editar, consulte la sección Editar el Archivo CSS.

Para obtener información sobre los elementos que puede editar, consulte la siguiente sección de este tema.

Editar el archivo .CSS

Para editar el archivo .CSS que guardó de Firebox, ábralo en un editor de texto. Puede cambiar el estilo de los elementos en esta lista.

Elemento Ejemplo Código CSS
Enlace Captura de pantalla de un enlace de aplicación en el Access Portal

a {
   color: #36bed6; /* text color of links */
}

Botón — Secundario
 Captura de pantalla de un botón secundario (regular)

.btn {
   border: 1px solid #97dfeb; /* border of buttons (applies to all buttons)*/
   color: #36bed6; /* text color of buttons (applies only to secondary buttons)*/
}

Botón — Primario
 Captura de pantalla de un botón primario


.btn.primary { /* primary buttons emphasize the button the user should click (for example the login button) */
   background: #36bed6; /* background color of primary buttons */
   color: #ffffff; /* text color of primary buttons */
}

Botón — Flotante

 Captura de pantalla de un botón flotante .btn:hover { /* hovered buttons are buttons the user's mouse is over */
   background-color: #eaf6fa; /* background color of hovered buttons */
   color: #36bed6; /* text color of hovered buttons */
}
Botón — Activo

 Captura de pantalla de un botón activo .btn:active { /* active buttons are buttons the user is currently clicking on */
   background-color: #eaf6fa; /* background color of active buttons */
   color: #36bed6; /* text color of active buttons */
}
Botón — Enfoque
 Captura de pantalla de un botón de enfoque .btn:focus { /* focused buttons are buttons the user has either tabbed to or clicked on */
   background-color: #eaf6fa; /* background color of focused buttons */
   color: #36bed6; /* text color of focused buttons */
}
Cuadro de texto (ingreso) Captura de pantalla de un cuadro de texto input { /* used for text boxes like the username and passphrase on the login page */
   border: 1px solid #97dfeb; /* border of the input box */
}
Lista desplegable Captura de pantalla de una lista desplegable select { /* used for the drop down selection lists like the domain list on the login page */
   background-image: /* controls the colors of the arrow on the right side of the select */
     linear-gradient(55deg, transparent 55%, #36bed6 50%), /* left side of arrow */
    linear-gradient(125deg, #36bed6 50%, transparent 50%), /* right side of arrow */
     linear-gradient(to bottom, #36bed6, #36bed6), /* left border of arrow box */
     linear-gradient(to right, #eaf6fa, #eaf6fa); /* arrow box background */
   border: 1px solid #97dfeb; /* border of the select */
}
Ventana de inicio de sesión

Captura de pantalla de la página de inicio de sesión

#login-window > header {
   background: #b32317; /* background color behind the logo on the login page */
}
#login-window > header > .logo {
  height: 150px; /* logo height */
  width: 300px; /* logo width */
}
Página de aplicaciones Captura de pantalla de la página de aplicaciones #applications-page > header {
   background: #333333; /* background color of header bar at the top of the page */
}
#applications-page > header > .logo {
   background: #b32317; /* background color behind the logo in the header bar at the top of the page*/
}
#applications-page > #applications .tabs > .tab-bar > .tab {
   background: #36bed6; /* background color of the tabs */
   color: #ffffff; /* text color of the tabs */
}
#applications-page > #applications .tabs > .tab-bar > .tab.active {
   background: #ffffff; /* background color of the selected tab */
   color: #36bed6; /* text color of the selected tab */
}

Cargar el Archivo .CSS Editado

Después de editar el archivo .CSS, debe cargarlo en su Firebox.

Para cargar el archivo .CSS editado, en la Fireware Web UI:Closed
  1. Seleccione Servicios de Suscripción > Access Portal.
  2. Seleccione la pestaña Ajustes de Conexión del Usuario.
  3. En la sección Portal VPN, haga clic en Configurar.
  4. Seleccione la pestaña Personalización.
  5. Marque la casilla de selección Archivo CSS personalizado.
  6. Haga clic en Elegir Archivo y navegue al archivo .CSS editado.

Captura de pantalla de los ajustes del archivo CSS Personalizado

  1. Haga clic en Cargar.
    Aparece un mensaje de confirmación cuando se completa la carga del archivo.
  2. Haga clic en Vista Previa de la Página de Inicio de Sesión o en Vista Previa de la Página de la Aplicación para obtener una vista previa de los cambios.
    La página de vista previa se abre en una nueva ventana.
  3. Haga clic en Guardar.
Para cargar el archivo .CSS editado, en Policy Manager:Closed
  1. Seleccione Servicios de Suscripción > Access Portal.
  2. Seleccione la pestaña Ajustes de Conexión del Usuario.
  3. En la sección Portal VPN, haga clic en Configurar.
  4. Seleccione la pestaña Personalización.
  5. Seleccione Archivo CSS Personalizado.
  6. Haga clic en el botón Cargar Archivo CSS Personalizado.
  7. Navegue al archivo .CSS editado y haga clic en Aceptar.
    Aparece el cuadro de diálogo Cargar Archivo .CSS Personalizado.

Captura de pantalla del cuadro de diálogo Cargar Archivo CSS Personalizado

  1. Ingrese la dirección IP, el nombre de usuario y la contraseña de su Firebox.
  2. Haga clic en Aceptar.
    Aparece un cuadro de diálogo de confirmación.

Captura de pantalla del mensaje de confirmación de carga del archivo CSS personalizado

Ver también

Acerca del Access Portal

Personalizar el Diseño del Access Portal

Configurar el Access Portal

Danos tu Opinión  •   Obtener Soporte  •   Toda la Documentación del Producto  •   Búsqueda Técnica

© 2019 WatchGuard Technologies, Inc. Todos los derechos reservados. WatchGuard, el logotipo de WatchGuard, WatchGuard Dimension, Firebox, Core, Fireware y LiveSecurity son marcas comerciales registradas o marcas comerciales de WatchGuard Technologies en Estados Unidos y/o en otros países.