Jump to content
Invision Board France
Sign in to follow this  
LLaumgui

[Tutoriel] Ajout de boutons sous IPB 2.0

Recommended Posts

LLaumgui

Bonjours, comme vous l’aurez remarqué, IPB 2.x introduit la possibilité d’ajouter du bbCode directement via l’admin (ACP). Or, si les Geeks tapent le bbCode à la main, n’est pas Geek qui veut et avoir des boutons en plus pourrait se révéler utile.

 

Le but de ce tutorial est donc de vous apprendre à rajouter vos boutons pour les bbCodes de type : [tag]{content}[/tag] (Utilisant la méthode simpletag()) ainsi que les tags plus complexes de type [tag={option}]{content}[/tag]

 

 

I. Ajouter le bouton :

 

Ca se passe dans votre ACP :

Skins & Templates / Skin Manager / Votre skin / Edit Root Skin Template HTML / Post Screen / postbox_buttons

 

Observons le code d’un bouton déjà existant, le bouton souligner (U) dans notre exemple :

<input type="button" accesskey="u" value=" U " onclick="simpletag('U')" class="codebuttons" name="U" style="text-decoration: underline;" onmouseover="hstat('under')" />

 

Explications :

  • Accesskey : Raccourcis clavier : Alt + Accesskey.
  • Value : Texte affiché dans le bouton. Mise en page de ce texte dans style="text-decoration: XXX;".
  • Name : C'est le nom de l’entré <input /> dans le formulaire (<form>).
  • Onmouseover : Aide affichée lors du survole du bouton. Si vous renseignez cette option pensez à lire les remarques, Mais sachez que Matt les a pas mis pour HTML et SQL....
  • onclick="simpletag('X')" : Méthode JavaScript qui affiche le tag (Voir chapitre suivant).

Prenons maintenant l’exemple du tag CENTER dont nous voulons ajouter un bouton. Pour ça, rien de plus simple, ajoutez simplement en dessous du bouton vu précédement :

<input type="button" accesskey="c" value=" CENTER " onclick="simpletag('CENTER')" class="codebuttons" name="CENTER" onmouseover="hstat('center')" />

 

Remarques :

  1. Pour les messages privés, pensez aussi à éditer : "Skins & Templates / Skin Manager / Votre skin / Edit Root Skin Template HTML / Post Screen / pm_postbox_buttons".
  2. Les boutons HTML et SQL sont mis en commentaire, pour les afficher, décommentez les. Pour le boutons liste il est caché (type="hidden"), pour l'afficher remplacez par type="button".
  3. Pour ceux qui veulent ajouter l'aide au survole du bouton, et qui ont donc rajouté onmouseover="hstat('center')" dans la balise <input /> : Pensez à donner une valeur à center dans : "Skins & Templates / Skin Manager / Votre skin / Edit Root Skin Template HTML / Post Screen / get_javascript" :
    var help_center          = "Center le texte";

    Pour les puristes qui ne veulent pas hardcoder, sachez que le fichier langue correspondant est lang_post.php.

 

 

II. Mettre le tag en fonction :

 

A ce niveau, vous avez un super bouton centrer, mais qui ne marche pas... Normal, il n’est pas activé et la méthode simpletag('') plante.

Pour activer le bouton, rien de plus simple, ouvrez le fichier : jscripts / ipb_bbcode.js.

Ajoutez y simplement votre tag en dessous de :

var HTML_open = 0;

Ce qui donnerais dans notre exemple (CENTER) :

var CENTER_open = 0;

 

 

 

III. Tag plus complexes :

 

Maintenant que la méthode simpletag() n'a plus de secret pour vous on va passer à des chose plus complexe, c'est à dire les tags avec option : [tag={option}]{content}[/tag].

Nous allons donc créer un bouton pour le tag fieldset :

<fieldset><legend><strong>{option}</strong></legend>{content}</fieldset>

[fieldset={option}]{content}[/fieldset]

 

Si vous avez bien suivie la première partie, vous avez le bouton suivant :

<input type="button" accesskey="f" value=" FIELDSET " onclick="tag_fieldset()" class="codebuttons" name="FIELDSET" style="text-decoration: none;" onmouseover="hstat('FIELDSET')" />

 

Comme vous le voyez, nous n'utilisons plus simpletag() mais tag_fielset() qu'il reste donc à définir dans ipb_bbcode.js...

Pour cela appuyez vous sur le code de tag_html() par exemple que je vous mets et commente si dessous :

function tag_url()
{
   var FoundErrors = '';

// Première fenêtre où l'on demande de rentrer l'url. text_enter_url est une variable du fichier langue.
   var enterURL   = prompt(text_enter_url, "http://");

   // Deuxième fenêtre où l'on demande de rentrer le nom du lien.
var enterTITLE = prompt(text_enter_url_name, "My Webpage");

// Si erreur trouvée :
   if (!enterURL) {
       FoundErrors += " " + error_no_url;
   }
   if (!enterTITLE) {
       FoundErrors += " " + error_no_title;
   }

   if (FoundErrors) {
       alert("Error!"+FoundErrors);
       return;
   }

// Tout est bon !!! Enjoy ;)
doInsert("[URL="+enterURL+"]"+enterTITLE+"[/URL]", "", false);
}

 

Ce qui nous donne au finale pour notre fieldset :

function tag_fieldset()
{
   var FoundErrors = '';
   var enterTITLE   = prompt( 'Titre', "Titre");
   var enterCONTENT = prompt( 'Contenu', "Contenu du cadre");

   if (!enterTITLE) {
       FoundErrors += " " + 'Veuillez rentrer un titre';
   }
   if (!enterCONTENT) {
       FoundErrors += " " + 'Veuillez rentrer un contenu';
   }

   if (FoundErrors) {
       alert("Error!"+FoundErrors);
       return;
   }

doInsert("[fieldset="+enterTITLE+"]"+enterCONTENT+"[/fieldset]", "", false);
}

 

Remarque : Là encore j'ai hardcodé, mais libre à vous d'utiliser les fichiers langue ;)

 

 

Liens utiles :CodeBB : Soumission et partage.

BBCodes Persos: Le Tag [pop].

La base de connaissances Invision Power Board.

Reprise de ce tutorial chez moi en présentation tutorial.

Edited by LLaumgui

Share this post


Link to post
Share on other sites
thewiseoldman

Merci LLaumgui je le laisse là le temps que tu le complètes avant de le mettre dans la base elle même.

 

Il ne manquerai pas la correspondance htstat ?

Edited by thewiseoldman

Share this post


Link to post
Share on other sites
LLaumgui

C'est ce que je dit, pour SQL et HTML, Matt lui même la met pas... Donc j'ai pas mis, mais bon, c'est vrai qu'on peu la mettre... Je vais regarder.

 

[EDIT]Rajouté MP et l'aide ;)[/EDIT]

Edited by LLaumgui

Share this post


Link to post
Share on other sites
LLaumgui

Ayé Wise, j'ai fini...

 

J'ai pris l'exemple de ton tag FIELDSET ;).

 

Bon, sur ce je vais l'appliquer sur ma board de production maintenant que ça marche en local ;)

Share this post


Link to post
Share on other sites
thewiseoldman

Ok merci bien pour cette contribution, on en redemande ;)

Share this post


Link to post
Share on other sites
Gladiator57

Hello ,

 

Excellent le tuto , tout parait simple cependant ca passe pas chez moi ;) ; j'ai fais exactement tout ce qui concernait le bouton "Center" cependant rien à faire le bouton ne s'affiche chez moi.

Pour test j'ai modifié simplement le bouton "List" pour le rendre visible comme expliqué (CF:Pour le boutons liste il est caché (type="hidden"), pour l'afficher remplacez par type="button".) et là encore rien à faire le bouton ne s'affiche pas :P

 

J'ai un IPB 2.0 final.

 

 

Soucis règlé merci quand meme , un chtit prob de CHmod , ipb me disais que les modifs étaient faitent mais sans les avoir faitent jusque me vienne l'idée de vérifier ca ^_^

Edited by Gladiator57

Share this post


Link to post
Share on other sites
@po-style

bonjour a tous voila j ais suivi a la lettre le cour pour rajouter le bouton center et j ais reussi. je vous en remerci!

 

En revanche je n arrive pas a l activer: je ne trouve pas ou est ce fichier;

 

ouvrez le fichier : jscripts / ipb_bbcode.js.

Ajoutez y simplement votre tag en dessous de :CODEvar HTML_open = 0;

Ce qui donnerais dans notre exemple (CENTER) :

CODEvar CENTER_open = 0;

et je ne comprens pas tres bien ce que je dois faire

 

Merci a vous pour vos expliquation excellente !!

 

cordialement

Share this post


Link to post
Share on other sites
LLaumgui

Dans le dossier jscripts, le fichier : ipb_bbcode.js.

Share this post


Link to post
Share on other sites
@po-style

lol merci a toi pour ta reponse rapide mais il et ou le fichier jscripts,

c estait ca en faite ma question excuse si j ais mal formuler

Share this post


Link to post
Share on other sites
sebTDR125

jscripts n'est pas un fichier mais un répertoire. Il se trouve à la racine de votre forum IPB 2.0. Regardez à l'aide de votre logiciel FTP. Dans ce répertoire vous trouverez le fichier Javascript ipb_bbcode.js

Share this post


Link to post
Share on other sites
@po-style

merci a vous j ais trouver le repertoire jscript et je vois ipb_bbcode.js

mais maintant que dois je faire exactement , je suis desoler de vous embeter ave sa mais la je rame .

merci encore pour vos reponse rapide

Share this post


Link to post
Share on other sites
LLaumgui

C'est marqué, tu cherche et tu rajoute en dessous...

 

De plus ce tutorial n'est pas fait pour vous apprendre à rajouter le tag center, mais pour vous permettre de rajouter n'importe quel tag au travers de l'exemple du tag center :).

Share this post


Link to post
Share on other sites
@po-style

ok j ais chercher , j ais trouver jscript ensuite ipb_bbcode.js mais je fais comment pour le rajouter je n y arrive pas ??:):)

Pouver vous m aider et m expliquer clairement sil vous plait comme ca je n aiurais plus besion de creer moulte et moulte sujet... ;)

 

merci encore!

Share this post


Link to post
Share on other sites
LLaumgui

Désolais, je peux pas être plus clair, tu cherche le bout de code et tu mets le code en dessous...

Share this post


Link to post
Share on other sites
Samanta

Bonjour,

 

Je viens de faire tout ce qui est écrit ici. Je n'ai que la version 1.1.2 mais j'ai réussi à trouver le fichier ipb_bbcode.js (qui pour moi n'est dans un répertoire "jscripts" mais dans "HTML" et s'appelle ipbcode.js)

 

Oui mais voilà, le bouton est bien là mais il ne fonctionne pas. Alors je ne sais si c'est moi ou le fait que je n'ai pas la version 2 pour laquelle le tutoriel a été fait.

 

Je m'aperçois également, en consultant votre Aide BB code qu'en mettant des Tags d'alignement, je devrais pouvoir centrer le texte, mais a priori ça ne marche pas sur mon Forum (dans le PC Admin, je n'ai pas activé l'HTML dans les msg) Alors peut être que la version 1.1.2 ne peut-elle pas le faire ?

 

Merci pour aide !

Share this post


Link to post
Share on other sites
thewiseoldman

Bonjour,

 

Effectivement ce tutorial et notre aide BB code sont pour la 2.0.

Share this post


Link to post
Share on other sites
LLaumgui

C'est pour la 2.0, je pense pas que ça marche en 1.1.x

Share this post


Link to post
Share on other sites
Samanta

Bon je vais continuer à chercher. Il y a un mod pour la 1.2 sur IPBR-FR. Je vais l'essayer. Ceci dit je pourrais passer sur la 1.3. Mais comme j'ai installé un skin, j'ai un peu peur de faire des bêtises. Y-a-t-il un inconvénient d'upgrader une version skinnée ? Je comprend bien qu'il faudra que je change aussi le skin, mais qu'en est-il pour le reste du Forum ?

Share this post


Link to post
Share on other sites
Samanta

Pour ceux que ça peut intéresser j'ai trouvé un mod pour faire un bouton centrer pour la version 1.2 qui fonctionne avec la 1.1.2. SUR IPBR-FR, si ça peut rendre service à quelqu'un ;)

Share this post


Link to post
Share on other sites
Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.