Après mettre cassé la tête, pas bien longtemps, je le reconnais, c'est allé assez vite pour cette fois-ci, je viens vous proposer en LS une nouvelle petite fiche tout en HTML cette fois-ci. Pour la petite info, je m'en sers pour faire mes actualisations de publicités/partenariat, mais cette fiche peut tout aussi bien être utilisé pour une fiche de présentation de votre forum si vous ne souhaitez pas user d'une publicité en iframe. :)
Voici un aperçus de la fiche : Fiche de publicité. (screen).
Un petit merci fera apparaître le code
- Code:
<div style="background-image: url(URL DE VOTRE FOND EN IMAGE);width:550px;margin:auto;border-top:10px solid #000423;border-bottom:10px solid #000423;border-right:2px solid #000423;border-left:2px solid #000423;"><a href="URL DE VOTRE FORUM"><img src="URL DE VOTRE IMAGE DE PRESENTATION" /></a>
<div style="color:#000423 ;font-size: 20px; padding-left :15px; ; padding: 4px; margin: auto;"><b>Quêtes et Concours :</b></div>
<div style="text-align: justify;padding:5px;">Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti.Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti.</div>
<div style="color:#000423 ;font-size: 20px; padding-left :15px; ; padding: 4px; margin: auto;"><b>Les Prédéfinis ou Scénarios disponibles :</b></div>
<div style="text-align: justify;padding:5px;color:#000423 ;font-size: 12px;">Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti.Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti.</div>
<div style="color:#000423 ;font-size: 20px; padding-left :15px; ; padding: 4px; margin: auto;"><b>Nouveautés du Background :</b></div>
<div style="text-align: justify;padding:5px;color:#000423 ;font-size: 12px;">Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti.Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti.</div>
<div style="color:#000423 ;font-size: 20px; padding-left :15px; ; padding: 4px; margin: auto;"><b>Nouveautés du Forum en lui-même :</b></div>
<div style="text-align: justify;padding:5px;color:#000423 ;font-size: 12px;">Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti.Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti.</div>
<table style="margin:auto;">
<tr><td><span style="font-weight:700;font-size:20px;font-family:Times New Roman;color:#000423;padding-left:5px">Informations Techniques :</span> <div style="display:block;width:255px;height:90px;font-size:11px;overflow:auto;margin:auto;color:#000523;padding:2px;text-align:left">INFORMATIONS TECHNIQUES SUR VOTRE RPG </div></td><td><div style="display:block;width:255px;height:90px;font-size:11px;overflow:auto;margin:auto;color:#000523;padding:2px;text-align:left">INFORMATIONS TECHNIQUES SUR VOTRE RPG</div></td></tr></table>
<a href="URL DE VOTRE FORUM"><img src="URL DE VOTRE IMAGE DE PARTENARIAT DELA TAILLE VOULUE" /></a>
(c)Codage par Rozenbrez sur [url=http://www.never-utopia.com/]Never Utopia[/url].</div>
Maintenant que vous avez le code je vais vous expliquer comment la personnaliser, ces explications sont pour les personnes ayant du mal à s'y retrouver dans le charabia du codage. :)
Le fond de votre fiche (background):
- Code:
background-image: url(URL DE VOTRE FOND EN IMAGE);
- Code:
background-color:#VOTRE COULEUR;
La taille de votre fiche (width et height) :
Pour changer la taille de votre fiche il faut modifier les nombres suivant :
- width:550px; (c'est la largeur de votre fiche.)
- Je n'ai pas mis définit de hauteur propre, ainsi la fiche s'adapte seule à la hauteur par rapport aux informations que vous mettrez dedans.
Les bordures de votre fiche (border) :
- border-top:10px solid #000423; (c'est la bordure du haut.)
- border-bottom:10px solid #000423; (c'est la bordure du bas.)
- border-right:2px solid #000423; (c'est la bordure de droite.)
- border-left:2px solid #000423; (c'est la bordure de gauche.)
- XXpx correspond à la taille de votre bordure, plus le chiffre est grand et plus votre bordure sera grande.
- Solid est le style de bordure désiré. Vous pouvez très bien en changer avec les propriétés suivantes :
- dotted (pointillé)
- dashed (tirets)
- solid (solide)
- double (double)
- groove (rainurée)
- ridge (relief)
- inset (relief intérieur)
- outset (relief extérieur)
- #000423 est la couleur que vous donnez à votre bordure.
L'image de présentation :
Votre image de présentation doit présenter votre forum (logique!) et peut-être la bannière redimensionnée.
- Code:
<a href="URL DE VOTRE FORUM"><img src="URL DE VOTRE IMAGE DE PRESENTATION" /></a>
Pour ma part j'ai fait une image en 550 pixels de largeur sur 300 pixels de hauteur. Sachant que mon image, c'est parfaitement bien adapter à la fiche sans aucun ajout de code pour la redimensionner. Donc à vous d'adapter la largeur de votre image par rapport à la largeur choisie de la fiche.
Voilà, je pense qu'avec ces informations basiques et les informations complémentaires dans le code en lui-même, vous arriverez à vous y retrouver pour finir la personnalisation. :)
Bise les enfants et à la prochaine fois.