Avec un peu d’imagination, on peut créer à peu près n’importe quel BBCode pour phpBB3. Nous verrons ici comment, avec un peu de CSS et une image, créer un BBCode “bloc note”
Tout d’abord, ouvrez votre client ftp (filezilla, ftpexpert,…) et uploadez l’image de fond qui servira pour ce BBCode dans le répertoire images du forum.
Ensuite, rendez-vous dans le panneau d’administration et créez un nouveau BBCode :
Pour l’exemple, j’ai utilisé une image de 300,400 avec un contour transparent. Les valeurs sont adaptées à cette image mais peuvent être adaptée sans problème en fonction de votre image. La police choisie est facultative, elle peut être modifiée ou supprimée.
Utilisation du BBCode :
[note]{TEXT}[/note]
Code HTML de remplacement :
<div style="position: relative; width:300px; height:400px; border:none; background: url('/images/bloc.png') no-repeat top left;">
<p style="position: absolute; top:40px; left:40px; width: 225px; height:300px; font-family:Comic Sans MS; font-size:12px; text-align:justify; overflow:auto;">{TEXT}</p>
</div>
Ligne d’aide :
[note]votre texte[/note]
Exemples :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam laoreet volutpat mi sit amet commodo. Nunc blandit aliquet vestibulum. Aenean ullamcorper malesuada tincidunt. Nullam lectus risus, porta quis hendrerit quis, tempus vel tortor. Etiam ut nulla est, id venenatis ipsum. Quisque tempor dolor non nulla bibendum ac ornare libero facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque in mi tellus, nec ultrices turpis. Aenean mi nisi, gravida et rhoncus ut, placerat vitae augue. In tincidunt imperdiet risus, at laoreet ligula sodales in. Praesent scelerisque magna sed ante convallis iaculis. Pellentesque ultrices, ante a consequat pulvinar, metus ante egestas quam, vel malesuada justo massa at dui. Curabitur aliquam pulvinar odio. Curabitur vulputate pulvinar lectus, eu hendrerit odio gravida et.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam laoreet volutpat mi sit amet commodo. Nunc blandit aliquet vestibulum. Aenean ullamcorper malesuada tincidunt. Nullam lectus risus, porta quis hendrerit quis, tempus vel tortor. Etiam ut nulla est, id venenatis ipsum.
Tutoriel par Clix! ©2010 – DO NOT RIP.
| Suivant > |
|---|
