Le blog francophone consacré
aux technologies Esri

Conseils & Astuces ArcGIS Online - N°14

N° 14 - Définir un arrière-plan pour votre page d'accueil avec des styles CSS

Dans l'article précédent, nous avons vu comment améliorer le look-and-feel de la page d'accueil de votre portail ArcGIS en utilisant une image d'arrière-plan. Il existe une autre possibilité de personnaliser l'arrière-plan sans faire appel à une image. En effet, vous pouvez introduire des instructions de style en CSS pour générer cet arrière-plan. Même si ils sont limités à des trames simples (linéaires ou radiales), l'avantage des styles CSS est à la fois qu'ils sont plus légers à charger qu'une image et surtout plus souple à faire évoluer.

Pour pouvoir modifier le style CSS de l'arrière-plan de votre page d'accueil, le principe va consister à écraser le style CSS par défaut de cette dernière en utilisant le point d'entrée à la page proposé à travers le paramétrage de la bannière. Puisque celle-ci permet l'introduction de code HTML, vous allez pouvoir y ajouter des instructions CSS pour modifier le style de la bannière mais également de l'ensemble de la page d'accueil.

Si nécessaire, enlever l'image d'arrière-plan

Pour pouvoir utiliser les styles CSS pour votre arrière-plan, vous devez tout d'abord vérifier qu'aucune image n'est définie pour l'arrière-plan de votre page. Pour cela, vous vérifierai l'option dans la rubrique "Page d'accueil" de l'interface de paramétrage de votre portail.


Depuis la version 3 de CSS, 2 valeurs-fonctions ont été introduites pour créer des dégradés linéaires et radiaux pour les arrière-plans des pages HTML. Ces dernières s'utilisent en lieu et place de la propriété  CSS "background-image" (en raccourci "background"). Vous allez donc pouvoir redéfinir le style de la zone "body" de la page d'accueil de votre portail en utilisant ce type de propriété CSS3.

Définir une couleur unie

Pour définir une couleur unie, il vous suffira de définir cette couleur et rédiger (dans un fichier texte pour l'instant) les instructions suivantes:

Vous noterez que l'on redéfinit les propriétés de la classe "html" pour indiquer l'application de la couleur sur l'ensemble de la page et non pas uniquement sur la zone de contenu de la page d'accueil. On redéfinit le style "body.esri.calciteBackground" qui est celui utilisé par défaut lorsqu'aucune image d'arrière-plan est définie. Vous noterez également l'utilisation de l'instruction "!important" permettant de s'assurer que l'on écrase bien les propriétés du style CSS par défaut de la page d'accueil quelle que soit l'ordre d'interprétation des instructions CSS dans la page.

Nous verrons un peu plus loin comment ajouter ces instructions à votre portail...

Définir un dégradé de couleurs

Un petit inconvénient des instructions "linear-gradient" et "radial-gradient" de CSS3 est que vous devez les définir des syntaxes différentes selon les types de navigateurs (firefox, chrome, ie, ...). Ainsi, pour vous simplifier la tâche, je vous recommande donc d'utiliser des sites web très pratiques comme celui-ci pour générer les instructions de style CSS de manière interactive.

Vous définirez ainsi les couleurs de départ, de fin et les couleurs intermédiaires de votre dégradé puis vous indiquerez son orientation (verticale, horizontale, diagonale, radiale, ...).

Une fois le dégradé définis, vous n'aurez alors qu'à copier les instructions CSS déjà rédigées pour les différents types de navigateurs.


Une fois les instructions CSS copiées, vous allez créer un fichier texte (que vous pourrez garder pour de futures évolutions) avec n'importe quel éditeur de texte. 
  1. Ajoutez ensuite la partie 1 (comme indiquée ci-dessous), 
  2. Collez les instructions CSS décrivant le dégradé,
  3. Ajoutez la partie 2 (comme indiquée ci-dessous). 
Vous noterez que dans les instructions issues du copier/coller, vous devrez ajouter la propriété "!important" à la fin de chaque ligne.



Ajouter votre style CSS dans votre portail ArcGIS Online

Que vous ajoutiez une couleur unie ou un dégradé, vous devez maintenant ouvrir l'interface de configuration de votre portail ArcGIS Online à la rubrique "Page d'accueil". 

Dans la zone "Bannière" vous devez voir apparaitre l'image de bannière, basculer sur l'option "Conception personnalisée" puis cliqué sur le bouton "Afficher la source HTML".

Copiez les instructions CSS de votre fichier texte puis collez les juste avant les instructions HTML déjà existantes pour que l'application d'un style CSS pour votre arrière-plan n'écrase les instructions HTML définissant le contenu de votre bannière.
Pour terminer, clique sur le bouton "Enregistrer" pour valider vos modifications.

Désormais, lorsque vous affichez la page d'accueil de votre portail, cette dernière doit contenir votre nouvel arrière-plan.




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:

3 comments :

Unknown a dit…

Bonjour. Je suis l administrateur du portail de cette communauté de communes.
Faute de temps je ne vais malheureusement pas souvent sur le blog, mais je jetterai un œil plus avisé pour pouvoir faire évoluer le portail sur le plan esthétique et technique.
Merci en tout cas pour les exemples.

Cordialement
Fx Hallé

Anselme a dit…

Merci pour toutes cette documentation, mais j'ai une préoccupation, est ce que c'est possible d'ajouter une seconde barre de recherche sur la page d’accueil ???

Gaëtan Lavenu a dit…

Bonjour,

La page d'accueil est personnalisable avec du code HTML, vous devriez donc pouvoir implémenter une zone de recherche. Il faut construire votre formulaire de telle sorte qu'il envoie des requêtes http de ce type:

https://mon_organisation.maps.arcgis.com/home/search.html?q=CADASTRE&start=1&sortOrder=true&sortField=relevance

Ici l'utilisateur à recherché la chaîne CADASTRE via le formulaire HTML dont vous trouverez le code ici:
https://esrifrance.maps.arcgis.com/sharing/rest/content/items/17f4caa8a9d7413da39f762500e59eff/data