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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Linpot le Lun 9 Juin 2014 - 15:03

Bonjour ! Hi 
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 ! Clin d\'oeil


Dernière édition par Linpot le Dim 15 Juin 2014 - 21:36, édité 1 fois

Linpot
Nouveau membre

Messages : 19
Inscrit(e) le : 09/06/2014

http://crazy-graph.forum-pro.in/
Linpot a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image de fond aux "x messages x sujets" et "dernier message"

Message par Linpot le Mer 11 Juin 2014 - 22:16

Up ?

Linpot
Nouveau membre

Messages : 19
Inscrit(e) le : 09/06/2014

http://crazy-graph.forum-pro.in/
Linpot a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image de fond aux "x messages x sujets" et "dernier message"

Message par [Nihil] le Jeu 12 Juin 2014 - 1:02

Hello Linpot Smile

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 Smile

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 !

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image de fond aux "x messages x sujets" et "dernier message"

Message par Linpot le Ven 13 Juin 2014 - 13:01

Merci beaucoup de m'aider Nihil Smile
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 -->

Linpot
Nouveau membre

Messages : 19
Inscrit(e) le : 09/06/2014

http://crazy-graph.forum-pro.in/
Linpot a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image de fond aux "x messages x sujets" et "dernier message"

Message par [Nihil] le Ven 13 Juin 2014 - 14:28

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 Smile.

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 Smile

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


Dernière édition par [Nihil] le Ven 13 Juin 2014 - 14:49, édité 1 fois

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image de fond aux "x messages x sujets" et "dernier message"

Message par AenigmA le Ven 13 Juin 2014 - 14:39

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

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image de fond aux "x messages x sujets" et "dernier message"

Message par [Nihil] le Ven 13 Juin 2014 - 14:44

@AenigmA a écrit: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.

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image de fond aux "x messages x sujets" et "dernier message"

Message par Linpot le Ven 13 Juin 2014 - 14:50

Merci beaucoup ! Ca marche Smile
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
Nouveau membre

Messages : 19
Inscrit(e) le : 09/06/2014

http://crazy-graph.forum-pro.in/
Linpot a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image de fond aux "x messages x sujets" et "dernier message"

Message par Linpot le Dim 15 Juin 2014 - 13:28

Je remonte.  :up: 

Linpot
Nouveau membre

Messages : 19
Inscrit(e) le : 09/06/2014

http://crazy-graph.forum-pro.in/
Linpot a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image de fond aux "x messages x sujets" et "dernier message"

Message par AenigmA le Dim 15 Juin 2014 - 13:44

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

Dans ton code tu mets left normal donc, mets center Smile

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

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image de fond aux "x messages x sujets" et "dernier message"

Message par Linpot le Dim 15 Juin 2014 - 20:29

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

Linpot
Nouveau membre

Messages : 19
Inscrit(e) le : 09/06/2014

http://crazy-graph.forum-pro.in/
Linpot a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum