MyBB.support, le portail francophone de MyBB
Remplacer les icônes d'état .GIF (on/off/offlock) par des .PNG - Version imprimable

+- MyBB.support, le portail francophone de MyBB (https://mybb.fr)
+-- Forum : MyBB.fr (https://mybb.fr/forum-1.html)
+--- Forum : Tutoriels (https://mybb.fr/forum-19.html)
+--- Sujet : Remplacer les icônes d'état .GIF (on/off/offlock) par des .PNG (/thread-5997.html)



Remplacer les icônes d'état .GIF (on/off/offlock) par des .PNG - spyto - 09-10-2012

Vous avez envie de remplacer les icônes .gif par des icônes .png de meilleure qualité ?

Tout d'abord, il faut savoir que ces icônes d'état sont au nombre de 3 et se trouvent dans le dossier /images de votre thème, ce sont :
- on.gif pour "Ce forum contient de nouveaux messages"
- off.gif pour "Ce forum ne contient pas de nouveaux messages"
- offlock.gif pour "Ce forum est fermé"

Une fois que vous avez créé les icônes .png de remplacement :

1. Upload des nouvelles icônes
Uploadez les icônes png dans le dossier images de votre thème.
IMPORTANT : Conserver les mêmes noms (on.png, off.png et offlock.png)

2. Modifications du template 'index'.
Admin > Templates & Style > Templates > Développer votre set de templates > Page Index Templates > index

a) Recherchez :
Code :
<dl class="forum_legend smalltext">
        <dt><img src="{$theme['imgdir']}/on.gif" alt="{$lang->new_posts}" title="{$lang->new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
        <dd>{$lang->new_posts}</dd>

        <dt><img src="{$theme['imgdir']}/off.gif" alt="{$lang->no_new_posts}" title="{$lang->no_new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
        <dd>{$lang->no_new_posts}</dd>

        <dt><img src="{$theme['imgdir']}/offlock.gif" alt="{$lang->forum_locked}" title="{$lang->forum_locked}" style="vertical-align: middle;" /></dt>
        <dd>{$lang->forum_locked}</dd>
</dl>

b) Remplacez par :
Code :
<dl class="forum_legend smalltext">
        <dt><img src="{$theme['imgdir']}/on.png" alt="{$lang->new_posts}" title="{$lang->new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
        <dd>{$lang->new_posts}</dd>

        <dt><img src="{$theme['imgdir']}/off.png" alt="{$lang->no_new_posts}" title="{$lang->no_new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
        <dd>{$lang->no_new_posts}</dd>

        <dt><img src="{$theme['imgdir']}/offlock.png" alt="{$lang->forum_locked}" title="{$lang->forum_locked}" style="vertical-align: middle;" /></dt>
        <dd>{$lang->forum_locked}</dd>
</dl>

c) Enregistrez

3. Modifications du template 'forumbit_depth2_cat'
Admin > Templates & Style > Templates > Développer votre set de templates > Forum Bit Templates > forumbit_depth2_cat

a) Recherchez :
Code :
<img id="mark_read_{$forum['fid']}" class="ajax_mark_read" title="{$lightbulb['altonoff']}" src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" />

b) Remplacez par :
Code :
<img id="mark_read_{$forum['fid']}" class="ajax_mark_read" title="{$lightbulb['altonoff']}" src="{$theme['imgdir']}/{$lightbulb['folder']}.png" alt="{$lightbulb['altonoff']}" />

c) Enregistrez

4. Modifications du template 'forumbit_depth2_forum'
Admin > Templates & Style > Templates > Développer votre set de templates > Forum Bit Templates > forumbit_depth2_forum

a) Recherchez :
Code :
<img id="mark_read_{$forum['fid']}" class="ajax_mark_read" title="{$lightbulb['altonoff']}" src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" />

b) Remplacez par :
Code :
<img id="mark_read_{$forum['fid']}" class="ajax_mark_read" title="{$lightbulb['altonoff']}" src="{$theme['imgdir']}/{$lightbulb['folder']}.png" alt="{$lightbulb['altonoff']}" />

c) Enregistrez

5. Modifications du fichier /jscripts/general.js
Ouvrez /jscripts/general.js dans votre éditeur de texte (pas dans le Bloc-notes de Windows !!!). Utilisez un vrai éditeur de texte genre Notepad++

a) Recherchez :
Code :
if(element.src.match("off.gif") || element.src.match("offlock.gif") || (element.title &amp;&amp; element.title == lang.no_new_posts)) return;

b) Remplacez par :
Code :
if(element.src.match("off.png") || element.src.match("offlock.png") || (element.title &amp;&amp; element.title == lang.no_new_posts)) return;

c) Recherchez :
Code :
$('mark_read_'+fid).src = $('mark_read_'+fid).src.replace("on.gif", "off.gif");

d) Remplacez par :
Code :
$('mark_read_'+fid).src = $('mark_read_'+fid).src.replace("on.png", "off.png");

e) Enregistrez et uploadez pour remplacer le fichier dans /jscripts/general.js

Voilà, c'est terminé. Et si vous ne savez pas quel éditeur de texte utiliser, je vous conseille Notepad++ ou Hapedit


 Utilitaire de traduction fourni par Regentronique