Personnaliser avec CSS

ArcGIS Instant Apps prend en charge la personnalisation CSS (Cascading Style Sheets), ce qui vous permet d’apporter à l’apparence de votre application Web des modifications personnalisées qui ne sont peut-être pas disponibles dans les paramètres de configuration existants. Vous pouvez modifier divers aspects de l’apparence de l’application Web, comme la taille du texte ou la couleur de l’indicateur de focus.

Attention :

Bien que la personnalisation CSS soit disponible, il est recommandé d’utiliser toutes les configurations fournies dans Instant Apps pour personnaliser l’apparence de votre application Web. Toutes les classes CSS ne fonctionnent pas pour la modification des éléments existants.

Les modèles ArcGIS Instant Apps sont créés à l’aide du système Calcite Design System, qui fournit un ensemble de conseils de conception et de composants réutilisables permettant de créer des interfaces intuitives et cohérentes. Vous pouvez personnaliser le style de votre application en remplaçant les variables Calcite de façon à modifier l’apparence de l’application.

Utiliser l’option de personnalisation CSS

Une fois l’application Web configurée, vous pouvez commencer à la personnaliser avec CSS.

Remarque :

Certains modèles ne prennent pas en charge le CSS personnalisé. reportez-vous aumatrice des outils d’application (PDF)pour voir quels modèles prennent en charge le CSS personnalisé.

Pour utiliser l’option de personnalisation CSS, procédez comme suit :

1. Dans le volet latéral, désactivez le mode Express, puis, lorsque l’invite de confirmation apparaît, cliquez sur Continue (Continuer).
2. Cliquez sur Search settings (Paramètres de recherche) et recherchez Custom CSS.

   Les paramètres Theme & Layout (Thème et mise en page) apparaissent.

3. Cliquez sur Edit (Mettre à jour) dans la section Custom CSS (CSS personnalisé).

   La fenêtre Custom CSS (CSS personnalisé) apparaît.

4. Renseignez une classe CSS pour remplacer les différents éléments de votre application.
5. Cliquez sur Close (Fermer) pour appliquer le CSS personnalisé.

   Vos modifications sont à présent affichées.

6. Une fois que votre personnalisation vous convient, cliquez sur Publish (Publier) pour déployer votre application personnalisée.

Attention :

Les mises à jour de Instant Apps concernant le modèle source peuvent impacter la feuille de style (CSS) personnalisée d’une application. Il est donc conseillé de tester l’application après chaque version de produit.

Classes CSS

Les sections ci-dessous fournissent des exemples de classes CSS qui peuvent être utilisées pour appliquer un style et une mise en page uniques à une application.

Personnaliser la taille de police

Vous pouvez créer une classe CSS qui modifie la taille de police du texte.

Dans la règle de remplacement CSS suivante, vous pouvez personnaliser la taille de police d’un en-tête de barre latérale dans un modèle Instant Apps Sidebar (Barre latérale) :

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

Le texte de l’en-tête s’affiche désormais en taille de police 0, ce qui correspond à 1 rem ou 16 pixels.

Personnaliser la couleur de l’indicateur de focus

Vous pouvez créer une classe CSS qui modifie la couleur de l’indicateur de focus pour les éléments interactifs de votre application. Cela correspond à un contour autour d’un élément sélectionné.

Pour modifier la couleur de l’indicateur de focus, vous pouvez utiliser la classe CSS suivante :

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

Cette classe modifie la couleur de focus des éléments interactifs en lui appliquant la valeur hexadécimale #FFFF00 lorsque les éléments sont sélectionnés, ce qui les fait apparaître en jaune.

La personnalisation de la couleur de l’indicateur de focus peut créer davantage de contraste avec les couleurs du thème de votre application Web, améliorant ainsi l’accessibilité pour les utilisateurs ayant une déficience visuelle.