Périple Modèles CSS

Modèles CSS de parcours personnalisables pour le style d'itinéraires et d'étapes

Un modèle CSS de parcours intègre la couche visuelle d'une mise en page de voyage : style des cartes, règles d'espacement et échelle typographique adaptée aux noms de lieux allongés. Des classes d'état y sont généralement incluses pour que l'étape actuelle se distingue des douze précédentes. Les cartes de destination et les étapes du circuit partagent les mêmes classes, conférant à un voyage de deux semaines une identité visuelle homogène.

Cartes, badges et étiquettes de date sont déjà stylisés

C'est sur les blocs répétés que le style manuel devient laborieux. Dix cartes de destination doivent s'accorder sur les marges intérieures, le rayon des bordures et les proportions des images, ce qu'un modèle résout définitivement.

Le style qu'un modèle de parcours peut prendre en charge :

• des classes partagées pour les cartes d'itinéraire et les blocs d'étapes
• des espacements garantissant la lisibilité d'un programme quotidien dense
• le style des badges par l'arrière-plan, la bordure et la graisse de texte
• des étiquettes de date alignées sur la même échelle typographique que les titres

De nombreux modèles ajoutent des classes d'état supplémentaires pour signaler une étape franchie ou la halte en cours. Vérifiez si la démonstration les intègre, car des cartes ayant le même poids visuel sont plus lentes à parcourir.

Quand une règle personnalisée surpasse une modification globale

Le style partagé cesse d'être utile dès qu'un élément déroge à la règle. Un départ complet constitue une exception au sein d'une série uniforme de cartes, et modifier la classe partagée affecterait chaque carte.

La solution courante consiste à superposer une seconde classe à la classe de base, afin que la carte conserve ses règles globales tout en bénéficiant d'une surcharge ciblée pour la couleur ou la graisse.

Nicepage propose Custom CSS Code précisément à cette fin. La documentation Custom CSS explique comment rédiger et appliquer une règle à un seul élément. Les couleurs, les polices et les espacements requièrent rarement cette manipulation, car les contrôles visuels y ont déjà accès ; un marqueur signalant l'étape du jour en a en revanche besoin.

Les écrans étroits modifient l'espace disponible

Ouvrez une démo sur un mobile et accédez directement à l'itinéraire. Les noms de destination longs passent à la ligne en premier, et la date adjacente perd son alignement. Des règles de points d'arrêt y remédient en réduisant la taille du texte dans la colonne du planning, en resserrant les espacements et en imposant une limite de largeur à la carte elle-même. Les sections en grille gèrent la réduction des colonnes, tandis que des surcharges ciblées s'occupent des cartes aux libellés étendus.

Trois vérifications suffisent pour l'essentiel. Le style des états vient en premier, car une démo standard l'omet fréquemment. Insérez ensuite votre nom de lieu le plus long dans une carte pour observer les retours à la ligne. Reste enfin la gestion des surcharges : jusqu'où les réglages visuels suffisent-ils avant d'avoir recours à une règle personnalisée.