Mettre une image de fond aux "x messages x sujets" et "dernier message"

[Linpot]

Bonjour !  
Je voudrais mettre une image de fond à ceci :



Comment faire ?

- version phpbb2
- je suis fondatrice
- j'ai modifié le template index_box
- CSS personnalisé
- chrome

Merci d'avance pour votre aide ! 

[Linpot]

Up ?

[[Nihil]]

Hello Linpot

Pour faire cela, tu vas devoir toucher au template index_box.
Il y a une balise td qui entoure les nouveaux messages ainsi que le dernier message, il faut lui rajouter une class.

Ensuite, dans le CSS, tu peux rajouter une image de fond avec la propriété background-image

Je t'ai fait une explication très rapide du fonctionnement, n'hésite pas à poster ton template modifié pour que l'on puisse t'aider !

[Linpot]

Merci beaucoup de m'aider Nihil
Alors voilà mon template index_box :

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><div style="width: 935px; height: 370px; background-image: url('http://image.noelshack.com/fichiers/2014/21/1400527892-categorie-haut.png');" class="secondarytitle"><div style="padding-top: 20px; padding-left: 15px;">{catrow.tablehead.L_FORUM}</div></div><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <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>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
                  </td>
      <td class="row3 over" align="center" valign="middle" whidth="100" height="50">
        <span class="gensmall"><div class="codage">{catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets
          <br> {catrow.forumrow.LAST_POST} </br></div> </span>
      </td>
   </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
</table><img src="http://image.noelshack.com/fichiers/2014/21/1400528465-categorie-bas.png" alt="" height="100" width="935" /><!-- END tablefoot --><!-- END catrow -->

[[Nihil]]

Code pour mettre le fond sur toute la cellule :

Alors, la partie gérant l'affichage des derniers messages est celle ci (ligne 59) :

Code:

<td class="row3 over" align="center" valign="middle" whidth="100" height="50">
    <span class="gensmall"><div class="codage">{catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets
    <br> {catrow.forumrow.LAST_POST} </br></div> </span>
</td>

La balise td a déjà 2 classes, row3 et over. Je vais lui rajouter une classe "dernier_message".

Code:

<td class="row3 over dernier_message" align="center" valign="middle" whidth="100" height="50">
    <span class="gensmall"><div class="codage">{catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets
    <br> {catrow.forumrow.LAST_POST} </br></div> </span>
</td>

C'est la seule modification à faire dans le template. Tu peux valider et publier le template normalement aucun changement n'est à constater .

Ensuite dans le CSS tu vas ajouter ceci :

Code:

.dernier_message {
    background-image: url(http://placekitten.com/250/350);
    background-repeat: no-repeat; /* pour eviter la répétition*/
}

Tu n'as plus qu'à remplacer http://placekitten.com/250/350 par le lien de ton image

Normalement tout fonctionne ! N'hésite pas si tu as une question ^^

[AenigmA]

Bonjour,
Peut être que la classe codage existante ferait aussi sans modif de template (à voir)

.codage {
   background-color: white;
   background-image: url("http://placekitten.com/250/350");
   background-repeat: no-repeat;
   color: black;
   height: 64px;
   text-align: left;
   width: 200px;
}

[[Nihil]]

Bonjour,
Peut être que la classe codage existante ferait aussi sans modif de template (à voir)

.codage {
   background-color: white;
   background-image: url("http://placekitten.com/250/350");
   background-repeat: no-repeat;
   color: black;
   height: 64px;
   text-align: left;
   width: 200px;
}

Salut AenigmA,
Malheureusement on ne peut pas l'utiliser, elle ne prend pas toute la hauteur de la cellule. Voici le genre de résultat qu'on aurait (là c'est vite fait sans prendre en compte tout ce que tu as rajouté en plus) :


A part si j'ai mal compris la question et que Linpot voulait mettre le fond non pas sur toute la cellule mais juste sur l'élément ^^. Si c'est le cas, c'est effectivement plus simple comme cela.

[Linpot]

Merci beaucoup ! Ca marche
Juste une chose, en surlignant avec le curseur la partie des messages et sujets, je me suis aperçu que les éléments n'étaient pas centrés.

Du coup, si je souhaite mettre une image de fond de ce genre :

Ca peut marcher quand même ? :/ Comment centrer le texte ?

[Linpot]

Je remonte.   

[AenigmA]

J'avais prévu avec le height 64px Nihil

Dans ton code tu mets left normal donc, mets center

.codage {
  background-color: white;
  background-image: url("http://placekitten.com/250/350");
  background-repeat: no-repeat;
  color: black;
  height: 64px;
  text-align: center;
  width: 200px;
}

[Linpot]

Merci ! Je n'y avait pas pensé
Résolu, du coup !