[3.0.x] Personnaliser les BBCodes Intermédiaire

[3.0.x] Personnaliser les BBCodes

- 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//Avec les crochets bien entendu
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.

    - Ajout de BBCodes Personnalisés
    - BBCodes en menu déroulant
    - BBCodes Images


» 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.


» 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.

Cherchez:
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',




» BBCodes en images

Télécharger le pack

Décompressez le dossier zip sur votre disque dur et placez le dossier éditor 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('{ROOT_PATH}images/editor/text_bold.png');" />
               <input type="button" class="buttonz" accesskey="i" name="addbbcode2" value="" style="background: url('{ROOT_PATH}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('{ROOT_PATH}images/editor/text_underline.png');" onclick="bbstyle(4)" title="{L_BBCODE_U_HELP}" />
               <!-- IF S_BBCODE_QUOTE -->
                  <input type="button" class="buttonz" accesskey="q" name="addbbcode6" value="" style="background: url('{ROOT_PATH}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('{ROOT_PATH}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('{ROOT_PATH}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('{ROOT_PATH}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('{ROOT_PATH}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('{ROOT_PATH}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('{ROOT_PATH}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('{ROOT_PATH}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('{ROOT_PATH}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;
        }
Dakin Quelia
Dieu des floodeurs
Dieu des floodeurs
 
Rédigé le: 07 Mar 2009 à 20:58
Articles: 7
Noter cet article: 123456 Votants: 1
Haut
Mots-clés: Personnaliser, les, BBCodes, 30x

Retourner vers Utilisation de phpBB


Développé par phpBB® Forum Software © phpBB Group
Traduit par phpBB-fr.com
phpBB SEO
cron