Mettre une image à gauche dans la catégorie

[Landartts]

Bien le bonjour.
Depuis quelques temps déjà je recherche une façon de mettre une image à gauche dans la catégorie. Pour être plus clair voici une image qui expliquera mieux que moi. :3


Je voudrais que l'image soit dans l'encadré mais je ne sais pas comment faire. Je sais que l'encadré est normalement là pour les images Nouveaux messages, Aucun message, etc. mais y a t-il un moyen de le mettre à l'intérieur? Merci d'avance aux personnes qui prendrons le temps de me répondre.

[Invité]

Bonjour,

De quel encadré parlez-vous ? Il vous suffirait de passer par la description du sous-forum et d'y ajouter :

Code:

<img src="URL_DE_L'IMAGE" alt="" style="border:1px solid black;" />

J'ai appliqué une bordure unifiée de 1 pixel noire à l'image, mais vous pouvez le modifier à votre guise.

Cordialement.

[Landartts]

Bonjour, (déjà merci de vous être proposé) je ne parle pas de comment mettre l'image en dessous du titre mais à côté. En fait ce petit encadré qui sert pour l'image Old, New, Lock, etc. et bien je me demandais si ont peut y mettre une autre image, mais différente selon la catégorie. Voici un petit aperçu de ce à quoi je pense:

Picture:

Donc là il y a l'image Old en haut à gauche et en arrière-plan il y a l'image avec le livre. Et moi, c'est sa qui m'intéresse, pouvoir mettre l'image en arrière-plan avec l'autre image Old, New ou Lock au premier plan. Mais je n'ai trouvée encore aucun code qui parle de cela. Voyez-vous, maintenant, de quoi je veux parler? ^^

[Neptunia]

Bonjour ^^

Pourrions nous avoir le lien du forum concerné avec au minimum une section visible sur l'index en tant qu'invité ?

[Landartts]

Bonsoir, oui bien sur http://antaragaming.fra.co/ . J'ai juste fais un changement au niveau de la catégorie mais tout reste normal sinon. ^^

EDIT: Je vais changer bientôt changer (rétrécir) les images Old, New, Lock des catégories pour pouvoir (si vous ou quelqu'un d'autre arriviez à m'aider) les mettre.

[Neptunia]

EDIT: Je vais changer bientôt changer (rétrécir) les images Old, New, Lock des catégories pour pouvoir (si vous ou quelqu'un d'autre arriviez à m'aider) les mettre.

Idéalement il faudra faire ces images New Old et Lock de la même taille que celles qui seront ajoutées ultérieurement et avec un fond transparent.
Si cette taille pose problème au niveau de la légende de bas de page, nous sommes en phpBB2 donc on pourra changer cela via template.

Je vais me pencher sur la demande en cours de nuit maintenant que j'ai le niveau de compression de l'index et la confirmation d'un forum phpBB2.

Par contre si j'arrive à quelque chose, ça ne sera qu'une base de départ. Mais j'ai une piste et je pense démontrer que c'est tout à fait réalisable.

Si quelqu'un d'autre a une solution déjà prête, qu'il ne se gêne pas. Ma méthode ne sera pas très orthodoxe.

[Landartts]

Merci de votre aide.
Veillant tard comme hier soir, vous pourrez me contacter par MP à tout moment si vous avez une question.

Cordialement,

[Neptunia]

Alors comme promis me suis penché sur la demande.

Ma base de départ :
Coloriser les cellules sur l’index lorsqu’un nouveau message est posté

Première difficulté rencontrée, la cellule qui comporte l'image de statut new/no new/lock a pour class row1, la même que celle employée entre autre dans la cellule regroupant nom de sous-forum, description et lien vers les sous-forums.
On va donc attribuer un class supplémentaire à cette cellule pour pouvoir la cibler
Dans le template index_box j'ai donc remplacé

Code:

<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>

par

Code:

<td class="{catrow.forumrow.INC_CLASS} under" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>

J'ai rajouté un class under par opposition au over de la cellule suivante.

Ensuite et c'est surtout là que ma technique reste à affiner, on va glisser une image vide dans la description de la section

Code:

<img src="http://i.imgur.com/8rIc6zD.gif" />

J'ai besoin de cette image juste pour avoir un lien qui soit unique à cette section.

Côté javascript :

$(function() {
$('img[src="https://i.imgur.com/8rIc6zD.gif"]').closest('tr').addClass('imgcateg01');
});

Il faudra autant de lignes vertes qu'il y aura d'images à configurer.

Pour finir le CSS

Code:

tr.imgcateg01 td.row1.under {
background:url("http://www.hebergeur.com/image.png") no-repeat;
}

Problèmes rencontrés :
1/ Comme les liens des sous-forums sont inclus dans chaque section, si ces derniers doivent eux même avoir leur propre image, et bien l'attribut "alt" des liens (infobulle montrant la description au survol du lien) déclenchera le système.
Bref ma technique fonctionnera lorsqu'il n'y aura dans la cellule qu'une seule image déclencheur. Si les sous-forums n'ont pas cette image vide dans leur description y aura pas de souci. Idéalement faudrait déclencher l'ajout de class a la cellule souhaitée via la recherche de texte, mais je ne sais le faire que depuis une image

2/ Dans l'exemple indiqué j'ai choisi un png transparent en guise d'image de section, et curieusement ce fond s'est transformé en fond coloré sans que je ne comprenne pourquoi. Une image au format jpeg devrait éviter ce souci.

---

Mais à mes yeux l'essentiel est là, j'ai pu démontrer que la chose est possible sans manœuvre fastidieuse.
L'image de catégorie s'affiche à l'endroit désiré en arrière-plan et l'image de statut old/new s'affiche correctement en avant plan.

[Landartts]

Bonsoir, déjà merci tu temps accordé pour mon appel à l'aide.
J'ai mis le code mais j'ai l'impression que rien n'a changé... J'ai regardée le rendu sous Firefox ainsi que sur Chrome mais aucun changement... A moins qu'il faut mettre une image? Ou alors il n'y a pas de rendu pour l'instant. Je ne sais pas vraiment, moi qui ne suis pas vraiment douée en codage. x)
Bref, cela est-il normal que ça ne marche pas pour l'instant?

[Neptunia]

L'image de catégorie il faut la mettre dans le code css à la place de :
- http://www.hebergeur.com/image.png

Et cette image doit avoir les mêmes dimensions que l'image de statut new/old/lock (du moins avec les codes que j'ai fourni)
Et surtout l'image de statut new/old doit avoir un fond transparent, donc surtout pas de jpg qui va recouvrir toute la cellule sans laisser apparaitre l'image de catégorie.

[Landartts]

Bonjour, désoler de l'absence, j'ai quelques soucis avec internet ces derniers temps.
Merci de votre aide, je pense que le problème est donc résolu puisque sur mon forum test tout marche parfaitement. Au revoir et bonne journée.