Basculer la recherche
Basculer le menu
60
1,9 k
12
5,6 k
Nefald
Changer de menu des préférences
Basculer le menu personnel
Non connecté(e)
Votre adresse IP sera visible au public si vous faites des modifications.

« Modèle:MiniCard/doc » : différence entre les versions

De Nefald
Autres actions
Navigation interactive dans l’historique
← Modification précédente
VisuelWikicode
Agrado (discussion | contributions)
editor
696 modifications
m Retrait de la mention modèle:Tlx
Hiob (discussion | contributions)
owner
4 047 modifications
mAucun résumé des modifications
 
(2 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
== 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.


== Description ==
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.
Le modèle '''MiniCard''' crée des boutons élégants et cliquables avec une image de fond floue. Il est conçu pour créer des menus de navigation visuels et attractifs vers les pages internes du wiki.


=== Caractéristiques ===
=== Caractéristiques ===
* Image de fond avec effet de flou artistique
* Support automatique des liens internes ET externes.
* Overlay sombre pour améliorer la lisibilité du texte
* Image de fond avec effet de flou artistique et overlay (lisibilité garantie).
* Animation au survol (élévation et ombre portée)
* Cartes sans image personnalisables avec les couleurs du thème (ex: progressive).
* Optimisé pour les liens internes (pages wiki)
* Grille intelligente (JavaScript) s'adaptant à la largeur de l'écran.
* Responsive (adapté aux mobiles)
* Animation fluide au survol.
* Possibilité d'utilisation sans image


== Syntaxe ==
== Syntaxe ==
<syntaxhighlight lang="wikitext">
<syntaxhighlight lang="wikitext">
{{MiniCard
{{MiniCard
|link=
| link =  
|text=
| text =  
|image=
| image =  
|size=
| size =
| color =  
}}
}}
</syntaxhighlight>
</syntaxhighlight>
Ligne 26 : Ligne 27 :
|-
|-
| '''link'''  
| '''link'''  
| Titre de la page wiki de destination
| Titre de la page wiki de destination OU URL complète (http://...)
| Non (optionnel)
| Non (optionnel)
| <code>Accueil</code> ou <code>Guide du maraud</code>
| <code>Accueil</code> ou <code>https://nefald.fr</code>
|-
|-
| '''text'''  
| '''text'''  
Ligne 44 : Ligne 45 :
| Non (optionnel)
| Non (optionnel)
| <code>250px</code>
| <code>250px</code>
|-
| '''color'''
| Couleur d'accentuation (uniquement si pas d'image).
| Non (optionnel)
| <code>progressive</code>
|}
|}


=== Notes sur les paramètres ===
=== Notes sur les paramètres ===
* '''link''' : Si vide, la carte ne sera pas cliquable. Doit être un titre de page wiki valide.
* '''link''' : Si le lien commence par <code>http</code> ou <code>https</code>, 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.
* '''text''' : Si vide, le contenu de "link" sera affiché comme texte.
* '''image''' : Si absent, un fond gris dégradé par défaut sera appliqué.
* '''image''' : Si absent, un fond neutre (ou la couleur définie via <code>color</code>) sera appliqué.


== Exemples d'utilisation ==
== Exemples d'utilisation ==


=== Carte basique avec image ===
=== Carte avec image ===
<syntaxhighlight lang="wikitext">
<syntaxhighlight lang="wikitext">
{{MiniCard|link=Accueil|text=Page d'accueil|image=Home.png}}
{{MiniCard|link=Accueil|text=Page d'accueil|image=Chateau de Nefald Ouest.png}}
</syntaxhighlight>
</syntaxhighlight>
{{MiniCard|link=Accueil|text=Page d'accueil|image=Home.png}}
{{MiniCard|link=Accueil|text=Page d'accueil|image=Chateau de Nefald Ouest.png}}


=== Sans texte personnalisé ===
=== Carte sans image (Couleur thématique) ===
Le nom de la page sera utilisé comme texte :
En utilisant <code>color=progressive</code>, la carte prendra la couleur d'accentuation de Nefald :
<syntaxhighlight lang="wikitext">
<syntaxhighlight lang="wikitext">
{{MiniCard|link=Géographie|image=Map.png}}
{{MiniCard|link=Faire un don|text=Soutenir le serveur|color=progressive}}
</syntaxhighlight>
</syntaxhighlight>
{{MiniCard|link=Géographie|image=Map.png}}
{{MiniCard|link=Faire un don|text=Soutenir le serveur|color=progressive}}


=== Sans image (fond gris) ===
=== Carte avec Lien Externe ===
Le modèle détecte automatiquement les URLs :
<syntaxhighlight lang="wikitext">
<syntaxhighlight lang="wikitext">
{{MiniCard|link=Guide du maraud|text=Guide complet}}
{{MiniCard|link=https://discord.nefald.fr|text=Rejoindre le Discord|color=progressive}}
</syntaxhighlight>
</syntaxhighlight>
{{MiniCard|link=Guide du maraud|text=Guide complet}}
{{MiniCard|link=https://discord.nefald.fr|text=Rejoindre le Discord|color=progressive}}


=== Sans lien (texte statique) ===
=== Couleurs thématiques ===
<syntaxhighlight lang="wikitext">
Le paramètre <code>color</code> 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|text=Information}}
</syntaxhighlight>
{{MiniCard|text=Information}}


=== Grille de cartes ===
Pour afficher plusieurs cartes côte à côte avec espacement automatique :
<syntaxhighlight lang="wikitext">
<syntaxhighlight lang="wikitext">
<div class="minicard-grid">
<div class="minicard-grid">
{{MiniCard|link=Accueil|text=Accueil|image=Home.png}}
{{MiniCard|link=Accueil|text=default}}
{{MiniCard|link=Géographie|text=Géographie|image=Map.png}}
{{MiniCard|link=Accueil|text=success|color=success}}
{{MiniCard|link=Histoire|text=Histoire|image=Book.png}}
{{MiniCard|link=Accueil|text=danger|color=danger}}
{{MiniCard|link=Communauté|text=Communauté|image=Users.png}}
{{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}}
</div>
</div>
</syntaxhighlight>
</syntaxhighlight>


; Rendu :
<div class="minicard-grid">
<div class="minicard-grid">
{{MiniCard|link=Accueil|text=Accueil|image=Home.png}}
{{MiniCard|link=Accueil|text=default}}
{{MiniCard|link=Géographie|text=Géographie|image=Map.png}}
{{MiniCard|link=Accueil|text=success|color=success}}
{{MiniCard|link=Histoire|text=Histoire|image=Book.png}}
{{MiniCard|link=Accueil|text=danger|color=danger}}
{{MiniCard|link=Communauté|text=Communauté|image=Users.png}}
{{MiniCard|link=Accueil|text=info|color=info}}
</div>
{{MiniCard|link=Accueil|text=warning|color=warning}}
 
{{MiniCard|link=Accueil|text=surface-0|color=surface-0}}
== Cas d'usage ==
{{MiniCard|link=Accueil|text=surface-1|color=surface-1}}
 
{{MiniCard|link=Accueil|text=surface-2|color=surface-2}}
=== Navigation principale ===
{{MiniCard|link=Accueil|text=surface-3|color=surface-3}}
Créer un menu visuel sur la page d'accueil :
{{MiniCard|link=Accueil|text=surface-4|color=surface-4}}
<syntaxhighlight lang="wikitext">
<div class="minicard-grid">
{{MiniCard|link=Accueil|text=Accueil|image=Home.png}}
{{MiniCard|link=Règles|text=Règles|image=Rules.png}}
{{MiniCard|link=Actualités|text=Actualités|image=News.png}}
{{MiniCard|link=Aide|text=Aide|image=Help.png}}
</div>
</div>
</syntaxhighlight>


=== Menu de catégorie ===
=== Grille de cartes dynamique ===
Organiser les sous-pages d'une catégorie :
Pour afficher plusieurs cartes côte à côte, englobez-les dans une <code><nowiki><div class="minicard-grid"></div></nowiki></code>. Le système calculera automatiquement le nombre de colonnes et la hauteur idéale en fonction de l'écran du visiteur !
<syntaxhighlight lang="wikitext">
== Transports ==
<div class="minicard-grid">
{{MiniCard|link=Transport:Train|text=Train|image=Train.png}}
{{MiniCard|link=Transport:Bateau|text=Bateau|image=Boat.png}}
{{MiniCard|link=Transport:Avion|text=Avion|image=Plane.png}}
{{MiniCard|link=Transport:Voiture|text=Voiture|image=Car.png}}
</div>
</syntaxhighlight>


=== Portail thématique ===
Créer des portails avec sections organisées :
<syntaxhighlight lang="wikitext">
<syntaxhighlight lang="wikitext">
== Géographie ==
<div class="minicard-grid">
<div class="minicard-grid">
{{MiniCard|link=Continents|text=Continents|image=World.png}}
{{MiniCard|link=Nefald|text=Nefald|image=Chateau de Nefald Ouest.png}}
{{MiniCard|link=Villes|text=Villes|image=City.png}}
{{MiniCard|link=Raplonas|text=Raplonas|image=Raplonas_1.png}}
{{MiniCard|link=Monuments|text=Monuments|image=Monument.png}}
{{MiniCard|link=Histoire|text=Histoire|image=Chateau de Nefald Ouest.png}}
</div>
{{MiniCard|link=https://nefald.fr|text=Site web}}
 
== Histoire ==
<div class="minicard-grid">
{{MiniCard|link=Chronologie|text=Chronologie|image=Timeline.png}}
{{MiniCard|link=Événements|text=Événements|image=Event.png}}
{{MiniCard|link=Personnages|text=Personnages|image=Person.png}}
</div>
</div>
</syntaxhighlight>
</syntaxhighlight>


=== Navigation en pied de page ===
Ajouter des liens connexes en bas d'article :
<syntaxhighlight lang="wikitext">
== Voir aussi ==
<div class="minicard-grid">
<div class="minicard-grid">
{{MiniCard|link=Page connexe 1|image=Related1.png}}
{{MiniCard|link=Nefald|text=Nefald|image=Chateau de Nefald Ouest.png}}
{{MiniCard|link=Page connexe 2|image=Related2.png}}
{{MiniCard|link=Raplonas|text=Raplonas|image=Raplonas_1.png}}
{{MiniCard|link=Page connexe 3|image=Related3.png}}
{{MiniCard|link=Histoire|text=Histoire|image=Chateau de Nefald Ouest.png}}
{{MiniCard|link=https://nefald.fr|text=Site web}}
</div>
</div>
</syntaxhighlight>
== Personnalisation ==
=== Modifier l'apparence ===
Pour personnaliser le style global, éditez [[Modèle:MiniCard/styles.css]].
==== Exemples de modifications courantes ====
'''Changer la taille des boutons :'''
<syntaxhighlight lang="css">
.minicard {
    min-width: 180px;  /* Largeur minimale */
    height: 60px;      /* Hauteur fixe */
    padding: 0 25px;  /* Espacement interne */
}
</syntaxhighlight>


'''Modifier l'intensité du flou :'''
<syntaxhighlight lang="css">
.minicard-background img {
    filter: blur(8px) brightness(0.3);  /* Flou plus fort, plus sombre */
}
</syntaxhighlight>
'''Changer la couleur de fond par défaut (sans image) :'''
<syntaxhighlight lang="css">
.minicard--no-image {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
</syntaxhighlight>


'''Modifier l'effet de survol :'''
sinon les MiniCards se suivent verticalement :  
<syntaxhighlight lang="css">
a:hover .minicard,
.minicard:hover {
    transform: translateY(-4px) scale(1.02);  /* Plus d'élévation */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}
</syntaxhighlight>


'''Ajuster l'espacement dans la grille :'''
{{MiniCard|link=Nefald|text=Nefald|image=Chateau de Nefald Ouest.png}}
<syntaxhighlight lang="css">
{{MiniCard|link=Raplonas|text=Raplonas|image=Raplonas_1.png}}
.minicard-grid {
{{MiniCard|link=Histoire|text=Histoire|image=Chateau de Nefald Ouest.png}}
    gap: 16px;  /* Espacement entre les cartes */
{{MiniCard|link=https://nefald.fr|text=Site web}}
}
</syntaxhighlight>


== Bonnes pratiques ==
== Bonnes pratiques ==
Ligne 200 : Ligne 142 :
=== Choix des images ===
=== Choix des images ===
* '''Format''' : PNG (transparent) ou JPG
* '''Format''' : PNG (transparent) ou JPG
* '''Taille''' : 400×400px minimum pour un bon rendu flou
* '''Taille''' : 400×400px minimum pour un bon rendu du flou d'arrière-plan.
* '''Poids''' : < 200 Ko (optimiser avec des outils de compression)
* '''Poids''' : < 200 Ko (optimiser les images pour le web).
* '''Contenu''' : Images avec bon contraste et sujet reconnaissable
* '''Style''' : Gardez une cohérence visuelle (ex: uniquement des icônes ou uniquement des paysages) dans une même grille.
* '''Style''' : Cohérence visuelle entre toutes les images d'une même section
 
=== Rédaction du texte ===
* **Court et descriptif** : 10-20 caractères idéalement
* **Clair** : éviter les abréviations obscures
* **Action** : privilégier des verbes ("Découvrir", "Explorer") ou des noms clairs
* **Cohérence** : même niveau de formalité sur toutes les cartes
 
=== Accessibilité ===
* Toujours fournir un texte via le paramètre '''text'''
* Utiliser des images avec bon contraste
* Éviter les textes trop longs qui débordent
* Tester sur mobile (responsive automatique)
 
=== Performance ===
* Limiter à 8-12 cartes maximum par section
* Optimiser les images avant upload (compression, redimensionnement)
* Regrouper les cartes dans des `<div class="minicard-grid">` pour un meilleur rendu
 
=== Organisation ===
* Regrouper par thématique avec des titres de section
* Ordre logique (alphabétique, chronologique, ou par importance)
* Éviter de mélanger cartes avec/sans images dans une même grille


== Limitations ==
=== Grilles et Mise en page ===
 
* Utilisez toujours <code><nowiki><div class="minicard-grid"></div></nowiki></code> dès que vous avez plus d'une carte. Cela supprime les marges parasites et active l'alignement intelligent.
* ❌ '''Ne supporte PAS les liens externes''' (https://, http://)
* Évitez de mélanger des cartes "avec image" et "sans image" dans une même ligne, pour des raisons esthétiques.
* ❌ Les liens interwiki ne fonctionnent pas
* ❌ Les ancres (#section) peuvent causer des problèmes d'affichage
* ✅ Fonctionne uniquement avec les pages internes du wiki
 
=== Pour les liens externes ===
Si vous avez besoin de liens externes (Discord, réseaux sociaux, sites partenaires), utilisez plutôt :
* Des liens classiques avec icônes
* Une liste à puces stylisée


== Dépannage ==
== Dépannage ==
Ligne 245 : Ligne 156 :
|-
|-
| '''L'image ne s'affiche pas'''
| '''L'image ne s'affiche pas'''
| Vérifiez que le fichier existe et que le nom est correct (sensible à la casse)
| Vérifiez que le fichier existe sur le wiki et que son nom est correct (sensible à la casse).
|-
|-
| '''Le lien ne fonctionne pas'''
| '''Le lien externe ne marche pas'''
| Assurez-vous que la page de destination existe
| Assurez-vous d'avoir bien mis <code>https://</code> au tout début du paramètre <code>link=</code>.
|-
|-
| '''Le texte déborde du bouton'''
| '''La grille s'affiche bizarrement (cartes écrasées)'''
| Réduisez la longueur du texte ou modifiez le CSS
| 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 <code>&lt;/div&gt;</code> de la grille.
|-
|-
| '''Les cartes ne s'alignent pas'''
| '''La couleur progressive ne s'affiche pas'''
| Utilisez `<div class="minicard-grid">` pour les regrouper
| Assurez-vous que vous n'avez pas mis d'image en même temps (les couleurs ne s'appliquent qu'aux cartes sans image).
|-
| '''L'effet de flou est trop/pas assez fort'''
| Modifiez la valeur `blur()` dans le CSS
|}
|}


== Voir aussi ==
== Voir aussi ==
* [[Modèle:Infobox]] - Pour créer des encadrés d'information
* [[Modèle:Card]] - Pour des grandes cartes cliquables
* [[Aide:Modèles]] - Guide général sur l'utilisation des modèles
* [[Modèle:Button]] - Pour des boutons textuels plus classiques
 
* [[Aide:Modèle]] - Guide général sur l'utilisation des modèles


<noinclude>[[Catégorie:Documentation de modèle]]</noinclude>
<noinclude>[[Catégorie:Documentation de modèle]]</noinclude>

Dernière version du 8 mars 2026 à 14:36

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}}
Fichier:Chateau de Nefald Ouest.png
Page d'accueil


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}}
Soutenir le serveur


Carte avec Lien Externe

Le modèle détecte automatiquement les URLs : 

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


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. 

<div class="minicard-grid">
{{MiniCard|link=Accueil|text=default}}
{{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}}
</div>
Rendu
default
success
danger
info
warning
surface-0
surface-1
surface-2
surface-3
surface-4

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>
Fichier:Chateau de Nefald Ouest.png
Nefald
Fichier:Raplonas 1.png
Raplonas
Fichier:Chateau de Nefald Ouest.png
Histoire
Site web


sinon les MiniCards se suivent verticalement :

Fichier:Chateau de Nefald Ouest.png
Nefald
Fichier:Raplonas 1.png
Raplonas
Fichier:Chateau de Nefald Ouest.png
Histoire
Site web


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

Récupérée de "https://wiki.nefald.fr/index.php?title=Modèle:MiniCard/doc&oldid=5657"
Les témoins (''cookies'') nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de témoins.