+- 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 && element.title == lang.no_new_posts)) return;b) Remplacez par :
Code :
if(element.src.match("off.png") || element.src.match("offlock.png") || (element.title && 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