Le blog francophone consacré
aux technologies Esri

Conseils & Astuces ArcGIS Online - N°16

N° 16 - Modifier l'aspect de votre page d'accueil à l'aide de styles CSS

Dans les articles précédents, nous avons vu comment personnaliser différentes parties de la page d'accueil d'un portail ArcGIS Online. Il est possible d'aller plus loin encore en modifiant l'apparence de certains élément  de cette page en redéfinissant les styles CSS par défaut. Vous allez, par exemple, pourvoir modifier l'emplacement, la couleur ou la taille de certain éléments de votre page comme le titre du portail, la bannière, les éléments de la galerie, la description du portail ou encore la barre de menus ou le pied de page. On notera tout de même que ce type de personnalisation n'est pas documenté ni supporté. Le fait d'écraser des styles existants peut engendrer des modifications dans le comportement de la page. En cas de soucis, il est très simple de revenir à la configuration par défaut de la page d'accueil via l'interface d'administration d'ArcGIS Online.

Quelques styles simples à modifier

Dans l'exemple ci-dessous, nous avons réalisé une page d'accueil à l'aide de l'interface de personnalisation standard d'ArcGIS Online. A l'aide de quelques instructions CSS, nous allons pouvoir redéfinir le style de certains éléments de cette page d'accueil.


Vous pouvez créer un fichier texte et saisir les instructions CSS figurant ci-dessous dans un éditeur de texte (si ce dernier reconnait la syntaxe CSS ce sera un plus). Pour vous éviter de saisir toutes ces lignes, vous pouvez récupérer le fichier à partir de ce lien.




Une fois ce fichier CSS rédigé, pensez à le sauvegarder pour pouvoir y revenir et le faire évoluer. Copiez ces instructions puis collez-les dans la zone de code HTML de la "Bannière" au niveau de la rubrique "Page d'accueil" l'interface de configuration d'ArcGIS Online:


Cliquez ensuite sur le bouton "Enregistrer" pour valider vos modifications. La page d'accueil de notre portail ressemble désormais à ceci.


Modifier le titre du portail

Vous aurez remarqué que nous n'avons pas modifié le style du titre du portail "Portail de démonstration". Ce dernier est un élément que l'administrateur manipule interactivement dans l'interface d'administration et il n'est pas géré par un style CSS. Pour modifier son apparence, vous devez le modifier directement dans la zone de code HTML de la bannière.



Dans notre exemple, nous allons modifier la couleur et l'alignement à gauche du titre. Ceci se fait en modifiant le code HTML de la bannière de la manière suivante:

  1. Ajouter les informations d'alignement de l'élément pour le décaler de 50 pixels vers la gauche
  2. Modifier la couleur de l'élément

Cliquez ensuite sur le bouton "Enregistrer" pour valider vos modifications. La page d'accueil de notre portail ressemble désormais à ceci.




Personnaliser d'autres éléments de la page d'accueil

Comme l'indiquent les commentaires du fichier CSS que vous avez rédigé, les classes CSS utilisées redéfinissent la couleur des texte ou du fond des différentes zones de la page d'accueil. Cette liste n'est pas complète, vous pourrez la compléter en inspectant les éléments de la page et en notant leur classe CSS pour pouvoir les redéfinir. Je vous recommande pour cela d'utiliser les outils du navigateur Chrome qui permettant non seulement d'inspecter le style de chaque élément de la page mais aussi de les modifier interactivement pour valider vos instructions CSS.

Accéder à l'inspecteur d'élément avec le navigateur Chrome

Consulter et modifier interactivement les classes de style CSS
des éléments d'une page

Bonne route sur ArcGIS Online !

Pour retrouver l'ensemble des Conseils & Astuces ArcGIS Online, cliquez sur ce lien

Partager cet article:

Rejoindre la discussion

    Les commentaires à propos de cet article:

2 comments :

Cédric a dit…

Bonjour Gaëtan,

Pour info le lien permettant de télécharger le code css pour éviter de tout saisir est mort.


Bonne journée.

Gaëtan Lavenu a dit…

Bonjour,

Effectivement, l'article est un peu ancien !
J'ai mis à jour le lien, ça devrait être ok désormais.