[PHPBB3] Remplacer les backgrounds image natifs par des images

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?




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:



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_box

Rechercher 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_box
Rechercher 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 style

Ajouter 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


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 style

Ajouter 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




Puis ce script:


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.

Cocher sur l'index et sur les sous-forums


Dé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'index


Il 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 pages

Largeur 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;}

Bonjour Phil !

Est-ce que cette astuce répondrait à la question que je t'avais posée dans un autre sujet, ici :
 => https://www.milouze14.com/t32795-phpbb3-faire-clignoter-les-images-des-nouveaux-messages  ?

Roza a écrit:

Par contre pour les nouveaux messages dans les sujets ou dans les rubriques ... ce qui clignote, c'est la mini-icône  "Voir le dernier message le plus récent" et elle est si petite qu'on la voit à peine.
Je voudrais que ce soit l'image que j'ai choisie pour signaler les nouveaux messages (qui apparaît dans la colonne de gauche), qui clignote, pas cette mini-icône quasi invisible.

Si oui, c'est génial !!

Coucou Roza,
vi, j'avais anticipé ta demande .

Re...
Mais c'est SUPER, ça !

Je m'y colle dès que j'ai une minute.
Je te dirai le résultat.

Bonne soirée et @+

Re..

Souci ... donc direction l'entraide, demain.

Bonne nuit !

Coucou Roza,
je serais absent jusqu'à Samedi soir.

Bonjour Phil !

Pas de souci. J'attendrai ton retour.
Ca me laissera le temps de tout bien revérifier dans les modifs que j'ai faites.

@+.

Coucou Roza,
tu peux poster ton sujet .

A demain chère amie.

Coucou Phil !

Merci à toi.
Je fais ça dans la journée.

Bon dimanche !