Aller au contenu
Invision Board France

[Tutoriel] Ajout de boutons sous IPB 2.0


LLaumgui

Messages recommandés

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.

Modifié par LLaumgui
Lien vers le commentaire
Partager sur d’autres sites

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 ?

Modifié par thewiseoldman
Lien vers le commentaire
Partager sur d’autres sites

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]

Modifié par LLaumgui
Lien vers le commentaire
Partager sur d’autres sites

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 ;)

Lien vers le commentaire
Partager sur d’autres sites

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 ^_^

Modifié par Gladiator57
Lien vers le commentaire
Partager sur d’autres sites

  • 3 semaines après...

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

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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 :).

Lien vers le commentaire
Partager sur d’autres sites

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!

Lien vers le commentaire
Partager sur d’autres sites

  • 2 mois après...

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 !

Lien vers le commentaire
Partager sur d’autres sites

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 ?

Lien vers le commentaire
Partager sur d’autres sites

×
×
  • Créer...

Information importante

En utilisant ce site, vous êtes d’accords avec nos Conditions d’utilisation. Nous avons placé des cookies sur votre appareil pour aider à améliorer ce site. Vous pouvez choisir d’ajuster vos paramètres de cookies, sinon nous supposerons que vous êtes d’accord pour continuer.