[phpBB 3.0.x] BBCodes de mise en forme

Toutes les documentations phpBB seront ici.
Avatar du membre
Dakin Quelia
Webmaster
Webmaster
Messages : 565
Enregistré le : ven. 27 nov. 2009 05:47
Localisation : Belgique
Contact :

[phpBB 3.0.x] BBCodes de mise en forme

Message par Dakin Quelia »

» BBCodes de mise en forme

Dans cette documentation, nous allons lister tous les BBCodes qui sont liés à la mise en forme de votre message.
Dernière mise à jour le 22/05/2012

Avatar du membre
Dakin Quelia
Webmaster
Webmaster
Messages : 565
Enregistré le : ven. 27 nov. 2009 05:47
Localisation : Belgique
Contact :

BBCode Tableau

Message par Dakin Quelia »

» BBCode Tableau

Dans cette documentation, nous allons vous expliquer comment faire un BBCode tableau. Ce BBCode peut sembler complexe mais une fois que vous aurez lu cette documentation, vous comprendrez vite le fonctionnement. Il est, toutefois, recommandé d'avoir quelques connaissances en CSS.

» Balise Table

Nous commençons par créer une balise table pour former le tableau.

Utilisation du BBCode

Code : Tout sélectionner

[table={TEXT}]{TEXT2}[/table]
Code HTML de remplacement

Code : Tout sélectionner

<table cellspacing="0" width="100%" style="{TEXT}">{TEXT2}</table>
Ligne d'aide

Code : Tout sélectionner

Tableau: [table=options css]Balise ou Texte[/table]
» Balise TR

Dans cette étape, nous allons vous expliquer comment créer la balise qui vous permettra d'ajouter une ligne dans un tableau.

Utilisation du BBCode

Code : Tout sélectionner

[tr]{TEXT}[/tr]
Code HTML de remplacement

Code : Tout sélectionner

<tr>{TEXT}</tr>
Ligne d'aide

Code : Tout sélectionner

Ajouter une ligne: [tr]Autre balise ou texte[/tr]
» Balise TD

Dans cette partie, nous allons créer une balise TD qui vous permettra d'ajouter une colonne à un tableau.

Utilisation du BBCode

Code : Tout sélectionner

[td={TEXT}]{TEXT2}[/td]
Code HTML de remplacement

Code : Tout sélectionner

<td style="{TEXT}">{TEXT2}</td>
Ligne d'aide

Code : Tout sélectionner

Ajouter une colonne: [td=options css]Autre balise ou Texte[/td]
» Exemple

Voici un exemple.

Code : Tout sélectionner

[table=border: 1px solid #007295; width: 400px;][tr][td=width: 400px; background-color: #F7F7F7; text-align: center;][size=85][color=#1675BC][b]Forumactif vous offre un nom de domaine gratuit[/b][/color][/size][/td][/tr][/table][table=border-left: 1px solid #007295; border-right: 1px solid #007295; border-bottom: 1px solid #007295; width: 400px;][tr][td=width: 400px; padding-left: 5px; background-color: #F7F7F7; font-size: 0.9em; text-align: justify; padding: 5px;]Lorsque vous voulez indiquer (sur un site Internet, sur un forum, dans un email, via msn, icq... bref partout) l'adresse de votre forum, d'un sujet, d'un message, vérifiez bien que la partie de l'adresse contenant 'sid=582c4678011cbd97139689c8' n'est jamais indiqué.[/td][/tr][/table]
Ce qui donne:

Avatar du membre
Dakin Quelia
Webmaster
Webmaster
Messages : 565
Enregistré le : ven. 27 nov. 2009 05:47
Localisation : Belgique
Contact :

BBCode Image Position

Message par Dakin Quelia »

» BBCode Image Position

Dans cette documentation, nous allons vous expliquer comment créer un BBCode pour aligner des images dans un texte.

Utilisation du BBCode

Code : Tout sélectionner

[imagepos={TEXT},{NUMBER},{NUMBER2}]{URL}[/imagepos]
Code HTML de remplacement

Code : Tout sélectionner

<img src="{URL}" alt="{URL}" style="float:{TEXT}; padding-left: {NUMBER}px;  padding-right: {NUMBER2}px;" />
Ligne d'aide

Code : Tout sélectionner

Aligner image: [imagepos={TEXT},{NUMBER},{NUMBER2}]{URL}[/imagepos]

Avatar du membre
Dakin Quelia
Webmaster
Webmaster
Messages : 565
Enregistré le : ven. 27 nov. 2009 05:47
Localisation : Belgique
Contact :

BBCode Miniature

Message par Dakin Quelia »

» BBCode Miniature

Ce BBCode peut être très pratique lorsque vous avez des images de grandes tailles à introduire dans votre message.

» Version 1

Cette version comporte une information vous indiquant de cliquer dessus. Toutefois, vous ne pouvez pas aligner une miniature l'une à côté de l'autre.

Utilisation du BBCode

Code : Tout sélectionner

[Miniature]{TEXT}[/Miniature]
Code HTML de remplacement

Code : Tout sélectionner

<div style="text-align:center;"><a href="{TEXT}"  onclick="window.open(this.href);return false;"><img src="{TEXT}" style="border: solid 1px #000000; width: 200px; heigh: 120px;" alt="Image" /></a>
<br /><span style="color: #000000; font-size: 10px;">Cliquez sur la miniature</span></div>
Ligne d'aide

Code : Tout sélectionner

Miniature: [Miniature]Lien de l'image[/Miniature]
» Version 2

Cette version vous permet d'aligner les captures l'une à côté de l'autre.

Utilisation du BBCode

Code : Tout sélectionner

[Miniature2]{TEXT}[/Miniature2]
Code HTML de remplacement

Code : Tout sélectionner

<a href="{TEXT}"  onclick="window.open(this.href);return false;"><img src="{TEXT}" style="border: solid 1px #000000; width: 200px; heigh: 120px;" alt="Image" /></a>
Ligne d'aide

Code : Tout sélectionner

Miniature: [Miniature2]Lien de l'image[/Miniature2]

Avatar du membre
Dakin Quelia
Webmaster
Webmaster
Messages : 565
Enregistré le : ven. 27 nov. 2009 05:47
Localisation : Belgique
Contact :

BBCode Max URL

Message par Dakin Quelia »

» BBCode Max URL

Ce BBCode vous permet d'ouvrir plusieurs liens en un seul clic.

Utilisation BBCode:

Code : Tout sélectionner

[maxurl={TEXT}]{URL} {URL2}[/maxurl]
Code HTML de remplacement:

Code : Tout sélectionner

<a href="{URL}" onclick="window.open('{URL2}');">{TEXT}</a>
Ligne d'aide:

Code : Tout sélectionner

Plusieurs liens: [maxurl=Votre mot]Lien1 Lien2[/maxurl]

Avatar du membre
Dakin Quelia
Webmaster
Webmaster
Messages : 565
Enregistré le : ven. 27 nov. 2009 05:47
Localisation : Belgique
Contact :

BBCode Flottaison

Message par Dakin Quelia »

» BBCode Flottaison

Ce BBCode vous permet de faire flotter votre texte à droite ou à gauche.

Utilisation BBCode:

Code : Tout sélectionner

[float={TEXT}]{TEXT2}[/float]
Code HTML de remplacement:

Code : Tout sélectionner

<span style="float: {TEXT}">{TEXT2}</span>
Ligne d'aide:

Code : Tout sélectionner

Flottement: [float=left ou right]Votre texte ou contenu[/float]

Avatar du membre
Dakin Quelia
Webmaster
Webmaster
Messages : 565
Enregistré le : ven. 27 nov. 2009 05:47
Localisation : Belgique
Contact :

BBCode Redimensionnement de l'image

Message par Dakin Quelia »

» BBCode Redimensionnement de l'image

Ce BBCode vous permet d'avoir des miniatures automatiques des images.

Utilisation du BBCode:

Code : Tout sélectionner

[ResizePic={TEXT},{TEXT2}]{URL}[/ResizePic]
Code HTML de remplacement:

Code : Tout sélectionner

<a href="{URL}" class="livethumbnail"><img src="{URL}" width="240" height="159" largewidth="{TEXT}" largeheight="{TEXT2}" alt=""></a>

    <script type="text/javascript">

var links = document.getElementsByTagName('a');

for (var i = 0; i < links.length; i++)
	if (links[i].className == 'livethumbnail')
	{
		var img = links[i].getElementsByTagName('img')[0];		
		img.state = 'small';
		img.smallSrc = img.getAttribute('src');
		img.smallWidth = parseInt(img.getAttribute('width'));
		img.smallHeight = parseInt(img.getAttribute('height'));
		img.largeSrc = links[i].getAttribute('href');
		img.largeWidth = parseInt(img.getAttribute('largewidth'));
		img.largeHeight = parseInt(img.getAttribute('largeheight'));
		img.ratio = img.smallHeight / img.smallWidth;
		links[i].onclick = scale;
	}
	
function scale()
{
	var img = this.getElementsByTagName('img')[0];		
	img.src = img.smallSrc;

	// if we are scaling up, scale down everything else
	
	if (img.state == 'small')
	{
		var links = document.getElementsByTagName('a');
		
		for (var i = 0; i < links.length; i++)
			if ((links[i].className == 'livethumbnail') &&
					(links[i].getElementsByTagName('img')[0].state == 'large') && 
				  (links[i] != this))
				links[i].onclick();
	}
	
	if (! img.preloaded)
	{
		img.preloaded = new Image();
		img.preloaded.src = img.largeSrc;
	}

	var interval = window.setInterval(scaleStep, 10);
	return false;
	
	function scaleStep()
	{
		var step = 10;
		var width = parseInt(img.getAttribute('width'));
		var height = parseInt(img.getAttribute('height'));
		
		if (img.state == 'small')
		{
			width += step;
			height += Math.floor(step * img.ratio);
			
			img.setAttribute('width', width);
			img.setAttribute('height', height);
			
			if (width > img.largeWidth - step)
			{
				img.setAttribute('width', img.largeWidth);
				img.setAttribute('height', img.largeHeight);
				img.setAttribute('src', img.largeSrc);
				window.clearInterval(interval);
				img.state = 'large';
			}
		}
		else
		{
			width -= step;
			height -= Math.floor(step * img.ratio);

			img.setAttribute('width', width);
			img.setAttribute('height', height);
			
			if (width < img.smallWidth + step)
			{
				img.setAttribute('width', img.smallWidth);
				img.setAttribute('height', img.smallHeight);
				img.src = img.smallSrc;
				window.clearInterval(interval);
				img.state = 'small';
			}
		}
	}			
}

</script>
Ligne d'aide:

Code : Tout sélectionner

Redimensionnement: [ResizePic=Largeur,Hauteur]{URL}[/ResizePic]

Avatar du membre
Dakin Quelia
Webmaster
Webmaster
Messages : 565
Enregistré le : ven. 27 nov. 2009 05:47
Localisation : Belgique
Contact :

BBCode Alinéa

Message par Dakin Quelia »

» BBCode Alinéa

Ce BBCode vous permet de faire des alinéas dans votre texte.

Utilisation du BBCode:

Code : Tout sélectionner

[Alinea]{TEXT}[/Alinea]
Code HTML de remplacement:

Code : Tout sélectionner

<div style="text-indent:0.95cm;">{TEXT}</div>

Ligne d'aide:

Code : Tout sélectionner

Alinéa: [Alinea]Votre texte[/Alinea]

Avatar du membre
Dakin Quelia
Webmaster
Webmaster
Messages : 565
Enregistré le : ven. 27 nov. 2009 05:47
Localisation : Belgique
Contact :

BBCode Barré

Message par Dakin Quelia »

» BBCode Barré

Dans cette documentation, nous allons vous expliquer comment créer un BBCode pour barrer du texte.

Utilisation du BBCode

Code : Tout sélectionner

[Barre]{TEXT}[/Barre]
Code HTML de remplacement

Code : Tout sélectionner

<div style="text-decoration:line-through;">{TEXT}</div>
Ligne d'aide

Code : Tout sélectionner

Barré le texte: [Barre]Votre texte barré[/Barre]

Avatar du membre
Dakin Quelia
Webmaster
Webmaster
Messages : 565
Enregistré le : ven. 27 nov. 2009 05:47
Localisation : Belgique
Contact :

BBCode Miniature 2

Message par Dakin Quelia »

» BBCode Miniature 2

Ce BBCode vous permet d'intégrer une miniature dans votre message avec un effet scale.

Tout d'abord, téléchargez les fichiers. Il suffit de les placer dans le dossier de votre forum.
scale-js.zip
(1.2 Kio) Téléchargé 517 fois
» 1. Modification template

Ouvrez le fichier « styles/{VOTRE_THEME}/template/overall_footer.html ».

Cherchez:

Code : Tout sélectionner

</body>
Avant, ajoutez:

Code : Tout sélectionner

<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/scale.js"></script>
» 2. Création du BBCode

Utilisation du BBCode:

Code : Tout sélectionner

[Miniature2={SIMPLETEXT}]{TEXT}[/Miniature2]
Code HTML de remplacement:

Code : Tout sélectionner

<a href="{TEXT}" class="livethumbnail"><img src="{TEXT}" width="170" title="{SIMPLETEXT}" alt="{SIMPLETEXT}"></a>

Ligne d'aide:

Code : Tout sélectionner

Miniature avec scale: [Miniature2=Id de balise]Adresse de l'image[/Miniature2]
» 3. Rafraîchissement

N'oubliez pas de rafraîchir le template (onglet Styles) et de vider le cache (onglet Général).

Verrouillé

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 30 invités