[phpBB 3.0.x] Personnaliser les BBCodes

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

[phpBB 3.0.x] Personnaliser les BBCodes

Message par Dakin Quelia »

» BBCodes personnalisés en bouton

Voici un petit tutoriel rapide pour utiliser les BBCodes personnalisés en bouton comme ceux par défaut. Ainsi, on peut choisir lesquels afficher ou non. Par ailleurs, vous pouvez mettre une condition autour du BBCode afin qu'il puisse être vu que par les modérateurs, par exemple (confer Article). Enfin, vous pouvez personnaliser le bouton et ajouter une icône.

Pour l'une ou l'autre raison, vous souhaiteriez modifier l'apparence des BBCodes mais vous ne connaissez pas l'id des BBCodes par défaut. Cette ID est à mettre dans la fonction onclick="bbstyle()".

Je vous donne la liste des principaux BBCodes (inclus par défaut).

Code : Tout sélectionner

-1 = [*]
0  = [b]
2  = [i]
4  = [u]
6  = [quote]
8  = [code]
10 = [b][list]
12 = [list=]
14 = [img]
16 = [url] / [url=]
18 = [flash=]
20 = [size=]
22 = [email] ??
Exemple: pour le BBCode url, on mettra onclick="bbstyle(16)".

/!\ Avant toute modification, faites une sauvegarde de vos fichiers au préalable.

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

Ajout des BBCodes

Message par Dakin Quelia »

» Ajout des BBCodes (posting_buttons.html)

Ouvrez le fichier styles/{VOTRE_THEME}/template/posting_buttons.html.

Cherchez:

Code : Tout sélectionner

,'[size=]','[/size]'
Après, ajoutez:

Code : Tout sélectionner

,'[center]','[/center]'
Cherchez:

Code : Tout sélectionner

d: '{LA_BBCODE_D_HELP}'
Remplacez par:

Code : Tout sélectionner

d: '{LA_BBCODE_D_HELP}',
ct: '{LA_BBCODE_CT_HELP}'
Ensuite, il faut créer un bouton pour ça.

Cherchez:

Code : Tout sélectionner

<!-- BEGIN custom_tags -->
		<input type="button" class="button2" name="addbbcode{custom_tags.BBCODE_ID}" value="{custom_tags.BBCODE_TAG}" onclick="bbstyle({custom_tags.BBCODE_ID})" title="{custom_tags.BBCODE_HELPLINE}" />
	<!-- END custom_tags -->
Avant, ajoutez:

Code : Tout sélectionner

<input type="button" class="button2" accesskey="ct" name="addbbcode22" value="Centrer" style="font-weight:bold; width: 40px" onclick="bbstyle(22)" title="{L_BBCODE_CT_HELP}" />
Ouvrez le fichier language/fr/posting.php.

Cherchez:

Code : Tout sélectionner

'BBCODE_D_HELP'                => 'Flash: [flash=largeur,hauteur]http://flash_url[/flash]',                  
Après, ajoutez:

Code : Tout sélectionner

'BBCODE_CT_HELP'                => 'Centrer: [center]texte[/center]',                
Notes: Tous les BBCodes créés après size porteront un ID + 2. Par exemple, dans notre cas, la balise Center aura l'id 22, la suivante aura la 24 etc. Vous devez avoir créé le BBCode dans le panneau d'administration pour que ce dernier fonctionne.

Retour au sommaire

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

BBCodes personnalisés en menu déroulant

Message par Dakin Quelia »

» BBCodes personnalisés en menu déroulant

Ouvrez le fichier styles/{VOTRETHEME}/template/posting_buttons.html.

Cherchez:

Code : Tout sélectionner

<!-- BEGIN custom_tags -->
		<input type="button" class="button2" name="addbbcode{custom_tags.BBCODE_ID}" value="{custom_tags.BBCODE_TAG}" onclick="bbstyle({custom_tags.BBCODE_ID})" title="{custom_tags.BBCODE_HELPLINE}" />
	<!-- END custom_tags -->
Remplacez par:

Code : Tout sélectionner

	<select name="addbbcode_custom" onchange="bbstyle(this.form.addbbcode_custom.options[this.form.addbbcode_custom.selectedIndex].value*1);this.form.addbbcode_custom.selectedIndex = 0;">
		<option value="0" selected="selected">{L_CUSTOM_BBCODES}</option>
		<!-- BEGIN custom_tags -->
		<option value="{custom_tags.BBCODE_ID}" title="{custom_tags.BBCODE_HELPLINE}">{custom_tags.BBCODE_TAG}</option>
		<!-- END custom_tags -->   
	</select>
Ouvrez le fichier language/fr/common.php.

Cherche:

Code : Tout sélectionner

'ATTACHED_IMAGE_NOT_IMAGE'		=> 'Le fichier image que vous essayez de joindre n’est pas valide.',
Après, ajoutez:

Code : Tout sélectionner

'CUSTOM_BBCODES'					=> 'BBCodes Personnalisés',

Retour au sommaire

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

BBCodes en images

Message par Dakin Quelia »

» BBCodes en images

Télécharger le pack

Décompressez le dossier zip sur votre disque dur et placez le dossier "editor" dans le dossier images de votre forum.

/!\: Ce pack d'image provient de : FAMFAMFAM SILK

Par respect pour le travail de l'auteur, il vous est demandé de rajouter un copyright indiquant l'origine des boutons.

Vous pouvez le faire en ouvrant styles/{VOTRE_THEME}/template/overall_footer.html

Cherchez:

Code : Tout sélectionner

<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
Aprés ajoutez:

Code : Tout sélectionner

<br/>Posting Buttons from <a href="http://www.famfamfam.com">FAMFAMFAM.COM</a>
Puis pour la mise en place des boutons, ouvrez le fichier template styles/{VOTRE_THEME}/template/posting_buttons.html

Cherchez:

Code : Tout sélectionner

if (e.style.display == 'block')
{
    document.getElementById('bbpalette').value = '{LA_FONT_COLOR_HIDE}';
}
else
{
    document.getElementById('bbpalette').value = '{LA_FONT_COLOR}';
}
Remplacez par:

Code : Tout sélectionner

if (e.style.display == 'block')
{
    document.getElementById('bbpalette').value = '';
}
else
{
    document.getElementById('bbpalette').value = '';
}
Cherchez:

Code : Tout sélectionner

    <input type="button" class="button2" accesskey="b" name="addbbcode0" value=" B " style="font-weight:bold; width: 30px" onclick="bbstyle(0)" title="{L_BBCODE_B_HELP}" />
       <input type="button" class="button2" accesskey="i" name="addbbcode2" value=" i " style="font-style:italic; width: 30px" onclick="bbstyle(2)" title="{L_BBCODE_I_HELP}" />
       <input type="button" class="button2" accesskey="u" name="addbbcode4" value=" u " style="text-decoration: underline; width: 30px" onclick="bbstyle(4)" title="{L_BBCODE_U_HELP}" />
       <!-- IF S_BBCODE_QUOTE -->
          <input type="button" class="button2" accesskey="q" name="addbbcode6" value="Quote" style="width: 50px" onclick="bbstyle(6)" title="{L_BBCODE_Q_HELP}" />
       <!-- ENDIF -->
       <input type="button" class="button2" accesskey="c" name="addbbcode8" value="Code" style="width: 40px" onclick="bbstyle(8)" title="{L_BBCODE_C_HELP}" />
       <input type="button" class="button2" accesskey="l" name="addbbcode10" value="List" style="width: 40px" onclick="bbstyle(10)" title="{L_BBCODE_L_HELP}" />
       <input type="button" class="button2" accesskey="o" name="addbbcode12" value="List=" style="width: 40px" onclick="bbstyle(12)" title="{L_BBCODE_O_HELP}" />
       <input type="button" class="button2" accesskey="t" name="addlitsitem" value="[*]" style="width: 40px" onclick="bbstyle(-1)" title="{L_BBCODE_LISTITEM_HELP}" />
       <!-- IF S_BBCODE_IMG -->
          <input type="button" class="button2" accesskey="p" name="addbbcode14" value="Img" style="width: 40px" onclick="bbstyle(14)" title="{L_BBCODE_P_HELP}" />
       <!-- ENDIF -->
       <!-- IF S_LINKS_ALLOWED -->
          <input type="button" class="button2" accesskey="w" name="addbbcode16" value="URL" style="text-decoration: underline; width: 40px" onclick="bbstyle(16)" title="{L_BBCODE_W_HELP}" />
       <!-- ENDIF -->
       <!-- IF S_BBCODE_FLASH -->
          <input type="button" class="button2" accesskey="d" name="addbbcode18" value="Flash" onclick="bbstyle(18)" title="{L_BBCODE_D_HELP}" />
       <!-- ENDIF -->
       <select name="addbbcode20" onchange="bbfontstyle('[size=' + this.form.addbbcode20.options[this.form.addbbcode20.selectedIndex].value + ']', '[/size]');this.form.addbbcode20.selectedIndex = 2;" title="{L_BBCODE_F_HELP}">
          <option value="50">{L_FONT_TINY}</option>
          <option value="85">{L_FONT_SMALL}</option>
          <option value="100" selected="selected">{L_FONT_NORMAL}</option>
          <option value="150">{L_FONT_LARGE}</option>
          <option value="200">{L_FONT_HUGE}</option>
       </select>
       <input type="button" class="button2" name="bbpalette" id="bbpalette" value="{L_FONT_COLOR}" onclick="change_palette();" title="{L_BBCODE_S_HELP}" />
Remplacez par:

Code : Tout sélectionner

    <input type="button" class="buttonz" accesskey="b" name="addbbcode0" value="" onclick="bbstyle(0)" title="{L_BBCODE_B_HELP}" style="background: url('./images/editor/text_bold.png');" />
       <input type="button" class="buttonz" accesskey="i" name="addbbcode2" value="" style="background: url('./images/editor/text_italic.png');" onclick="bbstyle(2)" title="{L_BBCODE_I_HELP}" />
       <input type="button" class="buttonz" accesskey="u" name="addbbcode4" value="" style="background: url('./images/editor/text_underline.png');" onclick="bbstyle(4)" title="{L_BBCODE_U_HELP}" />
       <input type="button" class="buttonz" accesskey="h" name="addbbcode22" value="" style="background: url('./images/editor/hr.png');" onclick="bbstyle(22)" title="{L_BBCODE_HR_HELP}" />
       <!-- IF S_BBCODE_QUOTE -->
          <input type="button" class="buttonz" accesskey="q" name="addbbcode6" value="" style="background: url('./images/editor/comment.png');" onclick="bbstyle(6)" title="{L_BBCODE_Q_HELP}" />
       <!-- ENDIF -->
       <input type="button" class="buttonz" accesskey="c" name="addbbcode8" value="" style="background: url('./images/editor/page_white_code.png');" onclick="bbstyle(8)" title="{L_BBCODE_C_HELP}" />
       <input type="button" class="buttonz" accesskey="l" name="addbbcode10" value="" style="background: url('./images/editor/text_list_bullets.png');" onclick="bbstyle(10)" title="{L_BBCODE_L_HELP}" />
       <input type="button" class="buttonz" accesskey="o" name="addbbcode12" value="" style="background: url('./images/editor/text_list_numbers.png');" onclick="bbstyle(12)" title="{L_BBCODE_O_HELP}" />
       <input type="button" class="buttonz" accesskey="t" name="addlitsitem" value="" style="background: url('./images/editor/bullet_black.png');" onclick="bbstyle(-1)" title="{L_BBCODE_LISTITEM_HELP}" />
       
       <!-- IF S_BBCODE_IMG -->
          <input type="button" class="buttonz" accesskey="p" name="addbbcode14" value="" style="background: url('./images/editor/image.png');" onclick="bbstyle(14)" title="{L_BBCODE_P_HELP}" />
       <!-- ENDIF -->
       <!-- IF S_LINKS_ALLOWED -->
          <input type="button" class="buttonz" accesskey="w" name="addbbcode16" value="" style="background: url('./images/editor/world_link.png');" onclick="bbstyle(16)" title="{L_BBCODE_W_HELP}" />
       <!-- ENDIF -->
       <!-- IF S_BBCODE_FLASH -->
          <input type="button" class="buttonz" accesskey="d" name="addbbcode18" value="" style="background: url('./images/editor/page_white_flash.png');" onclick="bbstyle(18)" title="{L_BBCODE_D_HELP}" />
       <!-- ENDIF -->
       <input type="button" class="buttonz" name="bbpalette" id="bbpalette" value="" style="background: url('./images/editor/color_wheel.png');" onclick="change_palette();" title="{L_BBCODE_S_HELP}" />
       
       <select name="addbbcode20" onchange="bbfontstyle('[size=' + this.form.addbbcode20.options[this.form.addbbcode20.selectedIndex].value + ']', '[/size]');this.form.addbbcode20.selectedIndex = 2;" title="{L_BBCODE_F_HELP}">
          <option value="50">{L_FONT_TINY}</option>
          <option value="85">{L_FONT_SMALL}</option>
          <option value="100" selected="selected">{L_FONT_NORMAL}</option>
          <option value="150">{L_FONT_LARGE}</option>
          <option value="200">{L_FONT_HUGE}</option>
       </select>
Ouvrez le fichier styles/{VOTRE_THEME}/theme/buttons.css.

A la fin du fichier, ajoutez une nouvelle ligne

Code : Tout sélectionner

 .buttonz {
        width: 22px !important;
        height: 22px !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        margin: 6px 0px !important;
        border: 1px solid #979797 !important;
        }
        .buttonz:hover {
        background-color: #ffffdf !important;
        border: 1px solid #BC2A4D !important;
        }
Retour au sommaire

Verrouillé

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité