Hello les ami(e)s,
alors c'est quoi encore ce truc!!
La version PHPBB3 par défaut est basée sur des icones ayant un background image, ce qui rend impossible de personnaliser la partie concernée:
Est-ce plus clair ainsi les ami(e)s?
![[PHPBB3] Remplacer les backgrounds image natifs par des images 135](https://i.servimg.com/u/f20/20/11/87/27/135.jpg)
Cette astuce va vous permettre de créer une cellule et insérer la variable qui gère les icones du forum:
Ce qui donnera ceci:
![[PHPBB3] Remplacer les backgrounds image natifs par des images 215](https://i.servimg.com/u/f20/20/11/87/27/215.jpg)
Donc ceci sera valable sur l'index et les sous forums.
A la fin de l'astuce je vous donnerais une option pour faire clignoter les icônes lors de nouveau messages.
Un script pour ajouter une class et la css qui fera l'animation.
Bref, on va donc faire des modifications dans 2 templates:
Dans le template index_box:
Affichage/
Templates/
Général/
index_boxRechercher ceci:
- Code:
-
<dd class="dterm">
Juste avant déposer ceci:
- Code:
-
<dd class="M14_folder_img">
<div align="center" valign="middle"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}"/> </div>
</dd>
Rechercher ceci:
- Code:
-
<dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
Supprimer et remplacer par:
- Code:
-
<dl class="icon">
Rechercher ceci:
- Code:
-
<div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
Remplacer par:
- Code:
-
<div class="M14_margin" style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
Penser a enregistrer puis à valider en cliquant respectivement sur
puis
Dans le template topics_list_box:
Affichage/
Templates/
Général/
topics_list_boxRechercher ceci:
- Code:
-
<dl class="icon" style="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');">
Supprimer et remplacer par:
- Code:
-
<dl class="icon"> <dd class="M14_folder_img">
<div align="center" valign="middle"><img src="{topics_list_box.row.TOPIC_FOLDER_IMG}"/> </div>
</dd>
Penser a enregistrer puis à valider en cliquant respectivement sur
puis
Voilou pour les templates.
Un peu de style:
Dans la feuille de style:
Affichage/
Images et Couleurs/
Couleurs/
Feuille de styleAjouter ceci:
- Code:
-
ul.topiclist.forums dd.dterm
{
width:55%!important;
padding-left:15px!important;
}
dd.M14_folder_img{width:5%;height:auto;}
Penser a cliquer sur le bouton ![[PHPBB3] Remplacer les backgrounds image natifs par des images Sans_t10](https://i.servimg.com/u/f87/11/26/21/37/sans_t10.png)
Optionnel:
Si vous souhaitez faire clignoter l'icône en cas de nouveaux messages.
Dans la feuille de style:
Affichage/
Images et Couleurs/
Couleurs/
Feuille de styleAjouter ceci:
- Code:
-
.M14_blink {
/*on anime toute les 1 seconde*/
animation-duration: 1s;
animation-name: clignote;
animation-iteration-count: infinite;
transition: none;
}
@keyframes clignote {
0% { opacity:1; }
40% {opacity:0; }
100% { opacity:1; }}
Penser a cliquer sur le bouton ![[PHPBB3] Remplacer les backgrounds image natifs par des images Sans_t10](https://i.servimg.com/u/f87/11/26/21/37/sans_t10.png)
Puis ce script:
Modules/
HTML&JAVASCRIPT/
Gestion des codes Javascript/
Créer un nouveau JavascriptMettre un titre explicite.
Cocher sur l'index et sur les sous-forumsDéposer ceci:
- Code:
-
$(function(){
$('img[class="sprite-icon_topic_newest"]').each(function(){
$(this).closest('dl').find('dd.M14_folder_img img').addClass('M14_blink ');
});});
Penser a cliquer sur le bouton
Afin de personnaliser les sous forums car ces derniers seront affichés comme les autres et si toutefois vous avez dans votre P.A coché le niveau de compression à "Aucun" quelque soit le mode.
Affichage/
Page d'acceuil/
Structure et hiérarchie/
Niveau de compression de l'indexIl y aura un décalage effectif sur les sous forums.
Ensuite suivant la marge donnée dans ton PA:
Général/
Configuration/
Structure des pagesLargeur de la cellule image catégorie/forum :
La valeur par défaut est de 45px, si tu la même valeur, le style ci dessous sera correcte.
Vous pouvez ajuster en réduisant la marge avec ce style:
- Code:
-
/*LES FORUMS*/
div.M14_margin[style*="margin : 0 0px 0 45px;"]{margin-left:5px!important;}
/*LES SOUS FORUMS*/
div.M14_margin[style*="margin : 0 0px 0 90px;"]{margin-left:45px!important;}
Si toutefois elle est différente il faut aussi modifier cette dernière.
Exemple avec 80px
On la retrouve sur la première ligne et pour la deuxième( sous forums), on multiplie par 2
Tu peux ajuster en réduisant la marge avec ce style:
- Code:
-
/*LES FORUMS*/
div.M14_margin[style*="margin : 0 0px 0 80px;"]{margin-left:5px!important;}
/*LES SOUS FORUMS*/
div.M14_margin[style*="margin : 0 0px 0 160px;"]{margin-left:45px!important;}