[phpBB 3.2.x] Divers BBCodes

[Dakin Quelia]

» Divers BBCodes

Voici une liste des BBCodes qui n'entrent pas dans les autres catégories.

• BBCode Copyright
• BBCode Guillemets
• BBCode Icône
• BBCode Spoiler
• BBCode Version

/!\ Attention : comme indiqué par l'attribut du sujet, ces BBCodes sont destinés pour phpBB 3.2.x (bien que certains BBCodes peuvent fonctionner sur les anciennes versions).

Dernière mise à jour le 07/09/2018

[Dakin Quelia]

» BBCode Copyright

Ce BBCode vous permet de mettre un copyright dans votre message.

Utilisation du BBCode :

Code : Tout sélectionner

[copyright]{SIMPLETEXT}[/copyright]

Code HTML de remplacement :

Code : Tout sélectionner

© 2018 {SIMPLETEXT}

Ligne d’aide :

Code : Tout sélectionner

Copyright : [copyright]Votre copyright[/copyright]

[Dakin Quelia]

» BBCode Guillemets

Ce BBCode vous permet de mettre des guillemets français sur une partie spécifique du texte.

Utilisation du BBCode :

Code : Tout sélectionner

[guil]{TEXT}[/guil]

Code HTML de remplacement :

Code : Tout sélectionner

« {TEXT} »

Ligne d’aide :

Code : Tout sélectionner

Mot entre guillemets : [guil]votre mot[/guil]

[Dakin Quelia]

» BBCode Version

Ce BBCode vous permet d'intégrer un badge dans votre message.

Utilisation du BBCode :

Code : Tout sélectionner

[version={SIMPLETEXT1}]{SIMPLETEXT2}[/version]

Code HTML de remplacement :

Code : Tout sélectionner

<img src="https://img.shields.io/badge/{SIMPLETEXT2}-{SIMPLETEXT1}-blue.svg" alt="{SIMPLETEXT1}" />

Ligne d’aide :

Code : Tout sélectionner

Version : [version=v1.0.0]Votre texte[/version]

[Dakin Quelia]

» BBCode Icône

Ce BBCode vous permet d'intégrer des icônes Fontawesome dans vos messages.

Pour connaître le nom des icônes, je vous invite à consulter ce lien.

Utilisation du BBCode :

Code : Tout sélectionner

[ico={IDENTIFIER}]{SIMPLETEXT}[/ico]

Code HTML de remplacement :

Code : Tout sélectionner

<i class="icon fa-{IDENTIFIER} fa-fw" aria-hidden="true"></i>
<span>{SIMPLETEXT}</span>

Ligne d’aide :

Code : Tout sélectionner

Icône : [ico=Icône]Votre texte[/ico]

Exemple :

Code : Tout sélectionner

[ico=book]Mon livre[/ico]

[Dakin Quelia]

» BBCode Spoiler

A l'aide de cette documentation, vous allez créer un BBCode Spoiler pour votre forum.

» 1. Ajout des classes CSS

Tout d'abord, nous allons modifier le fichier « bbcodes.css » que vous avez au préalable créé à l'aide de cette documentation (si ce n'est pas le cas, je vous invite à le faire dès maintenant).

Cherchez :

Code : Tout sélectionner

/* Fichier Style des BBCodes
--------------------------------------------------- */

Après, ajoutez :

Code : Tout sélectionner

/* Spoiler
--------------------------------------------- */
.spoiler {
	margin-left: 50px;
	margin-right: 50px;
	margin-top: 10px;
	background: #FFF;
	border: 1px solid #C5CFDA;
	overflow: hidden;
	color: #536482;	
}

.spoiler p.title {
	text-transform: uppercase;
	border-bottom: 1px solid #C5CFDA;
	margin-bottom: 0;
	padding: 5px 0px 5px 10px;
	font-size: 0.9em !important;
	font-weight: bold;
	display: block;
}

.spoiler div {
	padding: 10px;
	font-size: 0.9em !important;
}

.spoiler div ul{
	padding: 0;
	list-style: none;
}

.spoiler div ul li {
	padding-left: 1.3em;
	padding-bottom: 5px;
}

.spoiler div ul li ul li {
	font-size: 0.9em !important;
}

.spoiler div ul li:before {
	font-family: "FontAwesome";
	display: inline-block;
	margin-left: -1.3em;
	padding-right: 5px;
}

.spoiler div ul li:first-child {
	padding-top: 5px;
}

» 2. Ajout de la fonction Javascript

Ensuite, nous allons modifier le fichier « style/{VOTRE_STYLE}/template/forum_fn.js ». C'est ici que nous allons placer notre fonction.

Cherchez :

Code : Tout sélectionner

/**
* Run onload functions
*/
jQuery(function($) {

Avant, ajoutez :

Code : Tout sélectionner

/**
*	Display Spoiler
*/
function display_spoiler()
{
	phpbb.toggleDisplay('spoiler');
	e = document.getElementById('spoiler');
									
	if (e.style.display == 'block')
	{
		$('#ShowHide').html('<i class="icon fa-minus fa-fw" aria-hidden="true"></i>');
	}
	else
	{
		$('#ShowHide').html('<i class="icon fa-plus fa-fw" aria-hidden="true"></i>');
	}
}

» 3. Vider le cache

Il ne vous reste plus qu'à vider le cache pour que vos modifications soient prises en compte. Rien de plus facile : rendez-vous dans le panneau d'administration puis vous cliquez sur l'onglet « Général ». Une fois sur la page, vous cliquez sur le bouton « Exécuter maintenant » en face de « Purger le cache ».

» 4. Résultat

Voici ce que cela donne :

Masqué :

Affiché :