Modèle:MiniCard

📚 Modèle:MiniCard

✏️ Documentation 🎨 CSS

Description

Le modèle MiniCard crée des boutons élégants et cliquables. Il est conçu pour créer des menus de navigation visuels et attractifs vers les pages internes du wiki ou vers des liens externes.

Il s'intègre parfaitement avec la skin Citizen (support natif du mode clair/sombre) et s'adapte automatiquement à la taille de l'écran grâce à son système de grille dynamique.

Caractéristiques

• Support automatique des liens internes ET externes.
• Image de fond avec effet de flou artistique et overlay (lisibilité garantie).
• Cartes sans image personnalisables avec les couleurs du thème (ex: progressive).
• Grille intelligente (JavaScript) s'adaptant à la largeur de l'écran.
• Animation fluide au survol.

Syntaxe

{{MiniCard
| link  = 
| text  = 
| image = 
| size  = 
| color = 
}}

Paramètres

Paramètre	Description	Requis	Exemple
link	Titre de la page wiki de destination OU URL complète (http://...)	Non (optionnel)	Accueil ou https://nefald.fr
text	Texte affiché sur le bouton	Oui (recommandé)	Page d'accueil
image	Nom du fichier image (sans Fichier:)	Non (optionnel)	Home.png
size	Taille de l'image (défaut: 250px)	Non (optionnel)	250px
color	Couleur d'accentuation (uniquement si pas d'image).	Non (optionnel)	progressive

Notes sur les paramètres

• link : Si le lien commence par http ou https, le modèle générera automatiquement un lien externe s'ouvrant dans un nouvel onglet, avec une petite icône ↗.
• text : Si vide, le contenu de "link" sera affiché comme texte.
• image : Si absent, un fond neutre (ou la couleur définie via color) sera appliqué.

Exemples d'utilisation

Carte avec image

{{MiniCard|link=Accueil|text=Page d'accueil|image=Chateau de Nefald Ouest.png}}

Carte sans image (Couleur thématique)

En utilisant color=progressive, la carte prendra la couleur d'accentuation de Nefald :

{{MiniCard|link=Faire un don|text=Soutenir le serveur|color=progressive}}

Carte avec Lien Externe

Le modèle détecte automatiquement les URLs :

{{MiniCard|link=https://discord.nefald.fr|text=Rejoindre le Discord|color=progressive}}

Couleurs thématiques

Le paramètre color permet d'appliquer une couleur de fond spécifique à la carte (fonctionne uniquement si aucune image n'est définie). Les couleurs utilisent les variables de thème de la skin Citizen (gérant nativement le mode clair/sombre) et la palette de Nefald.

{{MiniCard|link=Accueil|text=success|color=success}}
{{MiniCard|link=Accueil|text=danger|color=danger}}
{{MiniCard|link=Accueil|text=info|color=info}}
{{MiniCard|link=Accueil|text=warning|color=warning}}
{{MiniCard|link=Accueil|text=surface-0|color=surface-0}}
{{MiniCard|link=Accueil|text=surface-1|color=surface-1}}
{{MiniCard|link=Accueil|text=surface-2|color=surface-2}}
{{MiniCard|link=Accueil|text=surface-3|color=surface-3}}
{{MiniCard|link=Accueil|text=surface-4|color=surface-4}}

Rendu

Grille de cartes dynamique

Pour afficher plusieurs cartes côte à côte, englobez-les dans une <div class="minicard-grid"></div>. Le système calculera automatiquement le nombre de colonnes et la hauteur idéale en fonction de l'écran du visiteur !

<div class="minicard-grid">
{{MiniCard|link=Nefald|text=Nefald|image=Chateau de Nefald Ouest.png}}
{{MiniCard|link=Raplonas|text=Raplonas|image=Raplonas_1.png}}
{{MiniCard|link=Histoire|text=Histoire|image=Chateau de Nefald Ouest.png}}
{{MiniCard|link=https://nefald.fr|text=Site web}}
</div>

Bonnes pratiques

Choix des images

• Format : PNG (transparent) ou JPG
• Taille : 400×400px minimum pour un bon rendu du flou d'arrière-plan.
• Poids : < 200 Ko (optimiser les images pour le web).
• Style : Gardez une cohérence visuelle (ex: uniquement des icônes ou uniquement des paysages) dans une même grille.

Grilles et Mise en page

• Utilisez toujours <div class="minicard-grid"></div> dès que vous avez plus d'une carte. Cela supprime les marges parasites et active l'alignement intelligent.
• Évitez de mélanger des cartes "avec image" et "sans image" dans une même ligne, pour des raisons esthétiques.

Dépannage

Problème	Solution
L'image ne s'affiche pas	Vérifiez que le fichier existe sur le wiki et que son nom est correct (sensible à la casse).
Le lien externe ne marche pas	Assurez-vous d'avoir bien mis https:// au tout début du paramètre link=.
La grille s'affiche bizarrement (cartes écrasées)	Attendez une seconde : le script JavaScript peut mettre un instant à calculer l'espace au chargement. Vérifiez aussi que vous avez bien fermé la balise </div> de la grille.
La couleur progressive ne s'affiche pas	Assurez-vous que vous n'avez pas mis d'image en même temps (les couleurs ne s'appliquent qu'aux cartes sans image).

Voir aussi

• Modèle:Card - Pour des grandes cartes cliquables
• Modèle:Button - Pour des boutons textuels plus classiques
• Aide:Modèle - Guide général sur l'utilisation des modèles