pas d'image de nouveau message.

[truthuntold]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 08/07/22
Lien du forum : https://thetruthuntold.forumactif.com/

Description du problème

Bonjour à tous, déjà merci d'avoir cliqué sur ma demande.

Voilà, nous avons changé le design de notre forum hier mais nous rencontrons un léger soucis. Les notifications ne s'affichent plus, ce point n'est pas dérangeant mais la possibilité de voir si il y a un nouveau message dans les catégories l'est un peu plus. on ne sait pas du tout si quelqu'un à posté... ou alors il faut une bonne mémoire

ma demande est la suivante, on aimerait savoir si l'un d'entre vous pourrait nous expliquer comment modifier le template pour retirer le "XX
MESSAGES" dans le petit carré (le deuxième) et mettre une image à la place..

ps : je précise que ce code nous appartiens, nous l'avons acheté à une codeuse .. mais la communication est assez compliqué car elle parle espagnol.

template index_box:

css:

merci à vous pour votre temps, bonne journée.

[Oka.mi]

Bonjour et bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : L'importance de garder secret l'email de fondation, Sécurité : ce qu'il ne faut pas faire, Liste des questions et réponses fréquentes, Liste des trucs et astuces, La fonction rechercher N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

Ligne 27 de votre template, vous avez

Code:

<div class="smd-postsf">{catrow.forumrow.POSTS}<span>{L_POSTS}</span></div> 

C'est le bloc des messages mentionné. Vous pouvez remplacer cette ligne par

Code:

<div class="smd-icon"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" /></div> 

Et indiquer dans le css

Code:

.smd-icon {
   margin-left:7px;
}

.smd-icon img {
  height: 20px;
  width: 20px;
}

Tout en supprimant le passage sur .smd-postsf qui n'existe plus et dont vous n'avez plus besoin.

Ceci répond à votre demande de remplacer le "XX MESSAGES" par l'image des catégories / forums mais vous avez aussi la possibilité d'ajouter un troisième carré pour avoir plutôt un rendu comme ça :


Pour cela, l'idée reste la même, c'est juste qu'on ne fait qu'ajouter un élément et qu'on ne remplace pas la ligne 27 :


On adapte le css en ajoutant une marge droite au bloc messages (qu'on garde dans ce cas de figure) afin que le bloc ajouté à droite ne se colle pas à lui, ce qui donne en reprenant le code déjà présent :

Code:

.smd-postsf {
   color:var(--color-2);
   margin-left:7px;
        margin-right: 7px;
}

On ajoute ceci qu'on retrouve plus haut dans la solution à la demande initiale et qui sert à redimensionner l'image à une hauteur permettant de rester dans les dimensions des autres blocs.

Code:

.smd-icon img {
  height: 20px;
  width: 20px;
}

Puisque vos blocs ont un padding de 8px au-dessus, 8px en-dessous, et que la hauteur totale de ces blocs font 36px à chaque fois, ça veut dire que l'image ne doit pas dépasser 36-8-8=20px si on ne veut pas créer de décalage (ou alors il faudra adapter les autres blocs).

Ensuite on modifie le bloc gris à droite pour adapter ses dimensions suite à l'ajout de ce troisième bloc. On change son width de 278px en 208px car le bloc ajouté a 63px de largeur et qu'il y a un margin-right de 7px sur le .smd-postsf, ce qui fait une différence de 70px. L'autre ligne à modifier est le margin-left qui passe de 141px à 211px.
Ce qui donne :

Code:

.smd-sflast {
   background:var(--ac-box-3);
   display:flex;
   flex-wrap:wrap;
   align-items:center;
   align-content:center;
   flex-direction:row-reverse;
   font-family:var(--a-sb);
   font-size:0;
   height:16px;
   letter-spacing:1px;
   line-height:100%;
   outline:var(--ac-border);
   padding:10px;
   text-align:right;
   text-transform:uppercase;
   width:208px;
   position:absolute;
   margin-top:-36px;
   margin-left:211px;
}

Voilà qui devrait vous donner quelques pistes de modifications.

Pour ce qui est du problème des notifications, il faudrait ouvrir un sujet à part car la cause semble indépendante du template et du css que j'ai pu tester.

[truthuntold]

Ohhhh, merci beaucoup cela fonctionne et c'est parfait