Personalizar con CSS

ArcGIS Instant Apps admite la personalización de hojas de estilo en cascada (CSS), lo que le permite realizar cambios personalizados en la apariencia de su aplicación web que pueden no estar disponibles en la configuración existente. Puede modificar diversos aspectos de la apariencia de la aplicación web, como el tamaño del texto y el color del indicador de enfoque.

Precaución:

Aunque la personalización CSS está disponible, se recomienda utilizar todas las configuraciones proporcionadas en Instant Apps para personalizar la apariencia de su aplicación web. No todas las clases CSS funcionarán para cambiar los elementos existentes.

Las plantillas de ArcGIS Instant Apps se crean utilizando Calcite Design System, que proporciona un conjunto de directrices de diseño y componentes reutilizables para crear interfaces intuitivas y coherentes. Puede personalizar el estilo de su aplicación sobrescribiendo las variables Calcite para cambiar la apariencia de la aplicación.

Utilizar la opción de personalización CSS

Una vez que haya terminado de configurar su aplicación web, puede empezar a personalizarla utilizando CSS.

Nota:

Algunas plantillas no admiten CSS personalizado. Consulte lamatriz de herramientas de la aplicación (PDF)para ver qué plantillas admiten CSS personalizado.

Para utilizar la opción de personalización CSS, siga estos pasos:

1. En el panel lateral, desactive el modo Rápido y, cuando aparezca el mensaje de confirmación, haga clic en Continuar.
2. Haga clic en Buscar configuración y busque CSS personalizado.

   Aparecerá la configuración de Tema y diseño.

3. Haga clic en Editar en la sección CSS personalizado.

   Aparecerá la ventana CSS personalizado.

4. Proporcione una clase CSS para anular los diferentes elementos de su aplicación.
5. Haga clic en Cerrar para aplicar el CSS personalizado.

   Ahora se muestran los cambios.

6. Haga clic en Publicar una vez que esté satisfecho con la personalización para implementar su aplicación personalizada.

Precaución:

Las actualizaciones de Instant Apps para la plantilla de origen pueden afectar a la CSS personalizada de las aplicaciones, por tanto, pruebe la aplicación después de cada lanzamiento del producto.

Clases CSS

Las secciones siguientes describen ejemplos de clases CSS que se pueden utilizar para aplicar un estilo y formato únicos a una aplicación.

Personalizar el tamaño de la fuente

Puede escribir una clase CSS que cambie el tamaño de la fuente del texto.

En la siguiente regla de anulación CSS, puede personalizar el tamaño de la fuente de un encabezado de la barra lateral en una plantilla de Instant Apps de barra lateral:

h3.esri-widget__heading {
  font-size: var(--calcite-font-size-0);
}

El texto del encabezado se muestra ahora con un tamaño de fuente 0, que es 1 rem o 16 píxeles.

Personalizar el color del indicador de enfoque

Puede escribir una clase CSS que cambie el color del indicador de enfoque para los elementos interactivos de su aplicación. Este aparece como un contorno que rodea el elemento seleccionado.

Para cambiar el color del indicador de enfoque, puede utilizar la siguiente clase CSS:

.calcite-mode-dark{
--calcite-color-focus:#FFFF00;
}

Esta clase cambia el color de enfoque de los elementos interactivos al valor hexadecimal #FFFF00 cuando se seleccionan, que aparece en amarillo.

Personalizar el color del indicador de enfoque puede crear más contraste con los colores del tema de su aplicación web, lo que aumenta la accesibilidad para los usuarios con discapacidad visual.