| Forum Vue d'ensemble > Aide (Support) |  |
Bonjour à tous,
j'aimerais avoir de petites vignettes sur ma page d'accueil comme j'en ai sur mes pages de catégories (exemple ). Comment faire ? Je suis nul en code...
Mystic badger (discussion) janvier 27, 2013 à 15:31 (UTC)
Bonjour.
Il est assez compliqué de mettre des cases exactement comme celles des catégories, mais il existe un moyen assez simple qui ressemble beaucoup (voir sur le Wiki Castle).
Pour cela créez le modèle Vignette et collez ce code :
<includeonly>{| style="background:#FF0000; border:1px solid #FF0000;-moz-border-radius:5px;"
|- align="center"
|<div style="position:relative; height: 90px; width: 100px;">
<div style="position: absolute; top: 77px; left: 0px; width: 100px; overflow: hidden; line-height: 12px; z-index: 4; text-align: right;"><table cellspacing="0" cellpadding="1" style="background:#FF0000;-moz-border-radius-topleft:8px;"
align="right"><tr><td> [[{{{nomarticle}}}|<font color=#000000 size="1">'''{{{nom}}}'''</font>]]</td></tr></table></div>
<div style="position: absolute; top: 0px; left: 0px; height: 90px; width: 100px; overflow: hidden">
<div style="position: absolute; top: 0px; left: 0px; z-index: 2">[[Fichier:{{{image}}}|100px|{{{nomarticle}}}|link={{{nomarticle}}}]]</div>
</div></div>
|}</includeonly>
En suite, vous appelez le modèle comme ceci
{{Vignette
|nomarticle = nom de l'article vers lequel lie l'image
|image = L'image, juste le nom avec l'extension
|nom = le nom dans l'encart
}}
Pour modifier la couleur de l'encart rouge et de la bordure, il fut modifier les #FF0000 en d'autres code de votre choix, pour modifier la couleur de l'écriture, éditez #000000.
Bonne chance =)
Maxime Corbin Discussion janvier 27, 2013 à 17:47 (UTC)
- Ou alors si tu regardes le code source de la page donnée, la première vignette avec une image a le code suivant :
<div class="category-gallery-item category-gallery-item-image"> <a title="La maison Rubépiel" href="/wiki/La_maison_Rub%C3%A9piel"> <img width="130" height="115" alt="La maison Rubépiel" src="http://images3.wikia.nocookie.net/__cb61950/scalythrone/fr/images/thumb/a/ad/Dragon-slayer_wide.jpg/130px-377%2C2187%2C0%2C1600-Dragon-slayer_wide.jpg"> <span class="details">La maison Rubépiel</span> </a> </div>
- Ce qui fait que tu peux créer le modèle suivant :
<div class="category-gallery-item category-gallery-item-image">
[[Fichier:{{{image}}}|130px|link={{{lien}}}]]
<span class="details">[[{{{lien}}}|{{{texte}}}]]</span>
</div>
- —Wyz janvier 27, 2013 à 20:25 (UTC)
- Cela ne fonctionne pas =/
- J'ai fait le test sur Mon bac à sable sur ZeldaWiki, et juste l'image s'affiche avec le lien à coté.
- Maxime Corbin Discussion janvier 28, 2013 à 16:09 (UTC)
- Arf, c'est ça quand on ne teste pas... Je pensais que le CSS est chargé pour tout le wiki, mais en fait il y a un CSS spécial chargé pour les catégories. Pour me faire pardonner voici un modèle que j'utilise pour faire cela : w:c:fr.onceuponatime:Modèle:ImagePortail (même si il est un peu différent au niveau de l'apparence). —Wyz janvier 28, 2013 à 19:11 (UTC)