Hiob le 8 mars 2026 à 14:36

2026-03-08T14:36:04Z

← Version précédente		Version du 8 mars 2026 à 14:36
Ligne 83 :		Ligne 83 :

	<syntaxhighlight lang="wikitext">		<syntaxhighlight lang="wikitext">
			<div class="minicard-grid">
			{{MiniCard\|link=Accueil\|text=default}}
	{{MiniCard\|link=Accueil\|text=success\|color=success}}		{{MiniCard\|link=Accueil\|text=success\|color=success}}
	{{MiniCard\|link=Accueil\|text=danger\|color=danger}}		{{MiniCard\|link=Accueil\|text=danger\|color=danger}}
Ligne 92 :		Ligne 94 :
	{{MiniCard\|link=Accueil\|text=surface-3\|color=surface-3}}		{{MiniCard\|link=Accueil\|text=surface-3\|color=surface-3}}
	{{MiniCard\|link=Accueil\|text=surface-4\|color=surface-4}}		{{MiniCard\|link=Accueil\|text=surface-4\|color=surface-4}}
			</div>
	</syntaxhighlight>		</syntaxhighlight>

	; Rendu :		; Rendu :
	<div class="minicard-grid">		<div class="minicard-grid">
			{{MiniCard\|link=Accueil\|text=default}}
	{{MiniCard\|link=Accueil\|text=success\|color=success}}		{{MiniCard\|link=Accueil\|text=success\|color=success}}
	{{MiniCard\|link=Accueil\|text=danger\|color=danger}}		{{MiniCard\|link=Accueil\|text=danger\|color=danger}}
Ligne 125 :		Ligne 129 :
	{{MiniCard\|link=https://nefald.fr\|text=Site web}}		{{MiniCard\|link=https://nefald.fr\|text=Site web}}
	</div>		</div>


			sinon les MiniCards se suivent verticalement :

			{{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}}

	== Bonnes pratiques ==		== Bonnes pratiques ==

Hiob : minicard grid

2026-03-08T14:32:57Z

minicard grid

← Version précédente		Version du 8 mars 2026 à 14:32
Ligne 95 :		Ligne 95 :

	; Rendu :		; Rendu :
			<div class="minicard-grid">
	{{MiniCard\|link=Accueil\|text=success\|color=success}}		{{MiniCard\|link=Accueil\|text=success\|color=success}}
	{{MiniCard\|link=Accueil\|text=danger\|color=danger}}		{{MiniCard\|link=Accueil\|text=danger\|color=danger}}
Ligne 104 :		Ligne 105 :
	{{MiniCard\|link=Accueil\|text=surface-3\|color=surface-3}}		{{MiniCard\|link=Accueil\|text=surface-3\|color=surface-3}}
	{{MiniCard\|link=Accueil\|text=surface-4\|color=surface-4}}		{{MiniCard\|link=Accueil\|text=surface-4\|color=surface-4}}
			</div>

	=== Grille de cartes dynamique ===		=== Grille de cartes dynamique ===

Hiob le 5 mars 2026 à 14:20

2026-03-05T14:20:47Z

Voir les modifications

Agrado : Retrait de la mention modèle:Tlx

2026-02-04T16:44:31Z

Retrait de la mention modèle:Tlx

← Version précédente		Version du 4 février 2026 à 16:44
Ligne 237 :		Ligne 237 :
	Si vous avez besoin de liens externes (Discord, réseaux sociaux, sites partenaires), utilisez plutôt :		Si vous avez besoin de liens externes (Discord, réseaux sociaux, sites partenaires), utilisez plutôt :
	* Des liens classiques avec icônes		* Des liens classiques avec icônes
	* Le modèle {{Tlx\|Bouton}} (si disponible)
	* Une liste à puces stylisée		* Une liste à puces stylisée

Hiob : image size

2025-11-14T20:52:34Z

image size

← Version précédente		Version du 14 novembre 2025 à 20:52
Ligne 17 :		Ligne 17 :
	\|text=		\|text=
	\|image=		\|image=
			\|size=
	}}		}}
	</syntaxhighlight>		</syntaxhighlight>
Ligne 35 :		Ligne 36 :
	\|-		\|-
	\| '''image'''		\| '''image'''
	\| Nom du fichier image (sans "Fichier:")		\| Nom du fichier image (sans ''Fichier:'')
	\| Non (optionnel)		\| Non (optionnel)
	\| <code>Home.png</code>		\| <code>Home.png</code>
			\|-
			\| '''size'''
			\| Taille de l'image (défaut: 250px)
			\| Non (optionnel)
			\| <code>250px</code>
	\|}		\|}

Hiob : Page créée avec «  == Description == 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 === * Image de fond avec effet de flou artistique * Overlay sombre pour améliorer la lisibilité du texte * Animation au survol (élévation et ombre portée) * Optimisé pour les liens internes (pages wiki) * Responsive... »

2025-11-13T14:40:21Z

Page créée avec «  == Description == 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 === * Image de fond avec effet de flou artistique * Overlay sombre pour améliorer la lisibilité du texte * Animation au survol (élévation et ombre portée) * Optimisé pour les liens internes (pages wiki) * Responsive... »

Nouvelle page

== Description ==
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 ===
* Image de fond avec effet de flou artistique
* Overlay sombre pour améliorer la lisibilité du texte
* Animation au survol (élévation et ombre portée)
* Optimisé pour les liens internes (pages wiki)
* Responsive (adapté aux mobiles)
* Possibilité d'utilisation sans image

== Syntaxe ==
<syntaxhighlight lang="wikitext">
{{MiniCard
|link=
|text=
|image=
}}
</syntaxhighlight>

== Paramètres ==
{| class="wikitable"
! Paramètre !! Description !! Requis !! Exemple
|-
| '''link'''
| Titre de la page wiki de destination
| Non (optionnel)
| <code>Accueil</code> ou <code>Guide du maraud</code>
|-
| '''text'''
| Texte affiché sur le bouton
| Oui (recommandé)
| <code>Page d'accueil</code>
|-
| '''image'''
| Nom du fichier image (sans "Fichier:")
| Non (optionnel)
| <code>Home.png</code>
|}

=== Notes sur les paramètres ===
* '''link''' : Si vide, la carte ne sera pas cliquable. Doit être un titre de page wiki valide.
* '''text''' : Si vide, le contenu de "link" sera affiché comme texte.
* '''image''' : Si absent, un fond gris dégradé par défaut sera appliqué.

== Exemples d'utilisation ==

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

=== Sans texte personnalisé ===
Le nom de la page sera utilisé comme texte :
<syntaxhighlight lang="wikitext">
{{MiniCard|link=Géographie|image=Map.png}}
</syntaxhighlight>
{{MiniCard|link=Géographie|image=Map.png}}

=== Sans image (fond gris) ===
<syntaxhighlight lang="wikitext">
{{MiniCard|link=Guide du maraud|text=Guide complet}}
</syntaxhighlight>
{{MiniCard|link=Guide du maraud|text=Guide complet}}

=== Sans lien (texte statique) ===
<syntaxhighlight lang="wikitext">
{{MiniCard|text=Information}}
</syntaxhighlight>
{{MiniCard|text=Information}}

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

<div class="minicard-grid">
{{MiniCard|link=Accueil|text=Accueil|image=Home.png}}
{{MiniCard|link=Géographie|text=Géographie|image=Map.png}}
{{MiniCard|link=Histoire|text=Histoire|image=Book.png}}
{{MiniCard|link=Communauté|text=Communauté|image=Users.png}}
</div>

== Cas d'usage ==

=== Navigation principale ===
Créer un menu visuel sur la page d'accueil :
<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>
</syntaxhighlight>

=== Menu de catégorie ===
Organiser les sous-pages d'une catégorie :
<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">
== Géographie ==
<div class="minicard-grid">
{{MiniCard|link=Continents|text=Continents|image=World.png}}
{{MiniCard|link=Villes|text=Villes|image=City.png}}
{{MiniCard|link=Monuments|text=Monuments|image=Monument.png}}
</div>

== 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>
</syntaxhighlight>

=== Navigation en pied de page ===
Ajouter des liens connexes en bas d'article :
<syntaxhighlight lang="wikitext">
== Voir aussi ==
<div class="minicard-grid">
{{MiniCard|link=Page connexe 1|image=Related1.png}}
{{MiniCard|link=Page connexe 2|image=Related2.png}}
{{MiniCard|link=Page connexe 3|image=Related3.png}}
</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 :'''
<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 :'''
<syntaxhighlight lang="css">
.minicard-grid {
gap: 16px; /* Espacement entre les cartes */
}
</syntaxhighlight>

== Bonnes pratiques ==

=== Choix des images ===
* '''Format''' : PNG (transparent) ou JPG
* '''Taille''' : 400×400px minimum pour un bon rendu flou
* '''Poids''' : < 200 Ko (optimiser avec des outils de compression)
* '''Contenu''' : Images avec bon contraste et sujet reconnaissable
* '''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 ==

* ❌ '''Ne supporte PAS les liens externes''' (https://, http://)
* ❌ 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
* Le modèle {{Tlx|Bouton}} (si disponible)
* Une liste à puces stylisée

== Dépannage ==

{| class="wikitable"
! Problème !! Solution
|-
| '''L'image ne s'affiche pas'''
| Vérifiez que le fichier existe et que le nom est correct (sensible à la casse)
|-
| '''Le lien ne fonctionne pas'''
| Assurez-vous que la page de destination existe
|-
| '''Le texte déborde du bouton'''
| Réduisez la longueur du texte ou modifiez le CSS
|-
| '''Les cartes ne s'alignent pas'''
| Utilisez `<div class="minicard-grid">` pour les regrouper
|-
| '''L'effet de flou est trop/pas assez fort'''
| Modifiez la valeur `blur()` dans le CSS
|}

== Voir aussi ==
* [[Modèle:Infobox]] - Pour créer des encadrés d'information
* [[Aide:Modèles]] - Guide général sur l'utilisation des modèles

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

Modèle:MiniCard/doc - Historique des versions

Hiob le 8 mars 2026 à 14:36

Hiob : minicard grid

Hiob le 5 mars 2026 à 14:20

Agrado : Retrait de la mention modèle:Tlx

Hiob : image size

Hiob : minicard grid

Agrado : Retrait de la mention modèle:Tlx

Hiob : image size