Il s'agit d'une fiche de liens, qui peut accueillir vos listings de RPGs à venir / en cours / terminés. Bref, comme vous voulez.
Si jamais vous voulez que cette fiche soit adaptée pour autre chose, n'hésitez pas à demander !
Le CSS est un CSS externe à la fiche, à intégrer dans votre fiche CSS. Je la propose personnellement à mes membres dans des "codes en vrac". Ainsi la fiche s'adapte automatiquement aux couleurs de mon forum lorsque je change de thème, ce qui permet aux membres d'avoir leur fiche qui s'harmonise automatiquement.
Si vous souhaitez que j'intègre le CSS directement dans la fiche, parce que vous n'êtes pas Administrateur sur le forum où vous souhaitez l'utiliser, vous pouvez demander aussi ! Je ne le propose pas pour le moment car je n'en ai pas l'utilité, mais ça ne me dérange pas de proposer le code avec le CSS intégré.
◈ Rendu du 1er message ◈
◈ Rendu du 2ème message ◈
A savoir sur la fiche
◈ Le crédit ne doit évidemment pas être enlevé.
◈ La largeur est de 400px.
◈ Vous pouvez modifier : les couleurs, les images et le style d'écriture.
◈ Si vous avez un problème, n'hésitez pas à poster
ici !
Le code
Le 1er Message
- Code:
-
<center><div class="LEtitre">Pseudo</div><br/><table align="center"><tr><td width=200px><div class="LEimage"><img src="http://s4.e-monsite.com/2011/08/01/10/200x320-Nina-Dobrev-2.jpg" class="LEimage2" /></div></td><td class="LEcontenu"><p class="LEtexte"><span class="infos">A savoir</span> XXX
<span class="infos">A savoir</span> XXX
<span class="infos">A savoir</span> XXX
<span class="infos">A savoir</span> XXX
<span class="infos">A savoir</span> XXX</p></td></tr><tr><td class="LEcontenu"><p class="LEtexte"><span class="infos">Je recherche</span> XXX
<span class="infos">Je recherche</span> XXX
<span class="infos">Je recherche</span> XXX
<span class="infos">Je recherche</span> XXX
<span class="infos">Je recherche</span> XXX</p></td><td width=200px><div class="LEimage"><img src="http://68.media.tumblr.com/2d1b586240bc44d48130249d679386a4/tumblr_oa7shiBet31rzzugno1_250.png" class="LEimage2" /></div></td></tr><tr><td width=200px><div class="LEimage"><img src="https://www.resizup.com/images/2017/06/19/fvdc.png" class="LEimage2" /></div></td><td class="LEcontenu"><p class="LEtexte"><span class="infos">Mes RPGs en cours</span>
XXX</p></td></tr><tr><td class="LEcontenu"><p class="LEtexte"><span class="infos"><span class="infos">Mes RPGs terminés</span>
XXX</p></td><td width=200px><div class="LEimage"><img src="http://images2.fanpop.com/image/photos/11700000/Nina-Dobrev-nina-dobrev-11786834-200-320.jpg" class="LEimage2" /></div></td></tr></table>
<div style="font-size:8px;">Loukoum sur <a href="https://tourmaline.forumactif.com/" target="_blank">Tourmaline</a></div></center>
Le 2ème message
- Code:
-
<center><div class="LEtitre">Titre</div><br/><table align="center"><tr><td width=200px><div class="LEimage"><img src="https://2img.net/image.noelshack.com/fichiers/2014/17/1398450171-nd7.png" class="LEimage2" /></div></td><td class="LEcontenu"><p class="LEtexte"><span class="infos">Notre lien</span>
XXX</p></td></tr><tr><td class="LEcontenu"><p class="LEtexte"><span class="infos">Notre lien</span>
XXX</p></td><td width=200px><div class="LEimage"><img src="https://2img.net/image.noelshack.com/fichiers/2012/51/1356115202-noel-nina-dobrev2.png" class="LEimage2" /></div></td></tr></table>
<div style="font-size:8px;">Loukoum sur <a href="https://tourmaline.forumactif.com/" target="_blank">Tourmaline</a></div></center>
Et dès que vous souhaitez rajouter des personnes, voici le code de ligne du tableau à rajouter juste avant le /table ; ceci rajoute deux lignes : une avec l'image à gauche et une avec l'image à droite.
- Code:
-
<tr><td width=200px><div class="LEimage"><img src="https://2img.net/image.noelshack.com/fichiers/2014/17/1398450171-nd7.png" class="LEimage2" /></div></td><td class="LEcontenu"><p class="LEtexte"><span class="infos">Notre lien</span>
XXX</p></td></tr><tr><td class="LEcontenu"><p class="LEtexte"><span class="infos">Notre lien</span>
XXX</p></td><td width=200px><div class="LEimage"><img src="https://2img.net/image.noelshack.com/fichiers/2012/51/1356115202-noel-nina-dobrev2.png" class="LEimage2" /></div></td></tr>
Et voici le CSS à glisser dans votre fiche CSS
- Code:
-
/*---------------------------------------------------------------------*/
/*---------------------------Fiche de liens---------------------------*/
/*---------------------Loukoum sur Tourmaline---------------------*/
/*---------------------------------------------------------------------*/
.LEtitre{
width:400px;
background-color:#532724;
color:#fbefcd;
font-size:30px;
border:10px double #fbefcd;
padding:10px;
}
.LEimage {
width:200px;
height:200px;
padding:0;
position:relative;
overflow:hidden;
}
.LEimage2 {
width:200px;
z-index:1;
position:relative;
}
.LEcontenu{
width:200px;
height:200px;
background-color: #532724;
background-image: url("https://www.transparenttextures.com/patterns/xv.png");
}
.LEtexte{
height:170px;
color:#fbefcd;
overflow:auto;
text-align:justify;
padding:0px 10px 0px 10px;
}
Accueil
