Affichage de images en fond de rangée

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

Résolu Affichage de images en fond de rangée

Message par kitelnewbba le Ven 1 Mar 2013 - 8:03

Bonjour à vous, j'aurais un petit problème concernant les images des tables rangés 1/2/3, j'aimerais qu'elles n'apparaissent que sur l'index comme ci-dessous :



Mais non dans les sujets, car c'est très dérangeant pour nos utilisateurs que quand ils postent une image, ça se met sous fond blanc.
(l'histoire de mettre une transparence à chaques images serait trop long à faire sachant qu'on a + 1000 images) (résultat ci-dessous):



A ce moment là je voudrais garder le fond blanc.
Laisser les images de fond de rangée que pour l'index.

Je vous passe quand même le CSS qui m'a permis à ce résultat :
Code:

                td.row1{ background: url("http://www.zunny.fr/web-gallery/v2/images/bg3.png");}
                td.row2{ background: url("http://img15.hostingpics.net/pics/523292clair.png");}
                td.row3{ background: url("http://img15.hostingpics.net/pics/123514sombre.png");}
       

Merci d'avance! Affirmatif


Dernière édition par kitelnewbba le Lun 4 Mar 2013 - 17:59, édité 1 fois

kitelnewbba
****

Masculin
Messages : 314
Inscrit(e) le : 19/09/2012

http://www.habbstyle.com
kitelnewbba a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Affichage de images en fond de rangée

Message par Matriochka le Ven 1 Mar 2013 - 9:59

Bonjour,

As-tu modifié le template index_box ?

Il faut ajouter un id à chaque cellule que tu veux modifier sur l’index et ensuite, dans ton CSS, utiliser cet id au lieu de la class row1 / 2 / 3 que tu as actuellement.

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Affichage de images en fond de rangée

Message par kitelnewbba le Ven 1 Mar 2013 - 10:25

Je n'ai pas modifié la template index_box.
Je vous la donne :
Code:
  <table id="index_links" 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 --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      <th nowrap="nowrap" width="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
   </tr>
   <!-- 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"> </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">
            <div class="centrage_titre"><span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span></div>
         </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" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</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="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->


Je n'ai pas compris lorsque vous parlez d'ID. re-merci !

kitelnewbba
****

Masculin
Messages : 314
Inscrit(e) le : 19/09/2012

http://www.habbstyle.com
kitelnewbba a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Affichage de images en fond de rangée

Message par Matriochka le Ven 1 Mar 2013 - 10:30

Pas de souci, je vais t’expliquer.

Donc, voici les cellules que l’on veut modifier :

La cellule qui comprend la description, le nom du forum, etc. :
Code:
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
        <h{catrow.forumrow.LEVEL} class="hierarchy">
            <div class="centrage_titre"><span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span></div>
        </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>

La cellule qui comprend le nombre de sujets :
Code:
<td class="row3" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>

La cellule qui comprend le nombre de messages :
Code:
<td class="row2" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>

Et enfin, la cellule qui comprend le dernier message posté :
Code:
<td class="row3 over" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>

Donc, là, ce qu’on va faire, c’est ajouter un attribut spécial aux cellules qui contiennent le fond clair, et un autre aux cellules qui contiennent le fond foncé.

Est-ce que tu me suis jusqu’ici ?

Si ça va, je t’aide ensuite à donner les attributs aux cellules dans ton template Wink

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Affichage de images en fond de rangée

Message par kitelnewbba le Ven 1 Mar 2013 - 18:20

J'ai parfaitement compris oui Very Happy Je vous suis jusqu’à là.

kitelnewbba
****

Masculin
Messages : 314
Inscrit(e) le : 19/09/2012

http://www.habbstyle.com
kitelnewbba a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Affichage de images en fond de rangée

Message par kitelnewbba le Sam 2 Mar 2013 - 14:26

Petit UP de passage x)

kitelnewbba
****

Masculin
Messages : 314
Inscrit(e) le : 19/09/2012

http://www.habbstyle.com
kitelnewbba a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Affichage de images en fond de rangée

Message par Matriochka le Sam 2 Mar 2013 - 14:32

Bien, donc maintenant, on va ajoute les attributs spéciaux.

Donc pour la cellule de description, on passe de ce que je t’ai donné plus haut à :
Code:
<td id="row_light" class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
        <h{catrow.forumrow.LEVEL} class="hierarchy">
            <div class="centrage_titre"><span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span></div>
        </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>

Pour la cellule des messages :
Code:
<td id="row_light" class="row2" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>

Explications => j’appelle les deux cellules row_light en référence à l’image qu’on va leur appliquer


Enfin, pour les deux cellules restantes, donc celle des sujets :
Code:
<td id="row_dark" class="row3" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>

Et celle des derniers messages :
Code:
<td id="row_dark" class="row3 over" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>

Explications => Donc là, même chose, j’appelle mes deux cellules row_dark en référence à l’image sombre qu’on va leur appliquer par la suite.

Une fois que tu as donné les attributs spéciaux, on passera au CSS Smile N’hésite pas si tu rencontres un souci.

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Affichage de images en fond de rangée

Message par kitelnewbba le Sam 2 Mar 2013 - 14:35

Très, très bien, je vais essayer tout ces codes, je vous en dis des nouvelles ultérieurement!

EDIT : Template modifiée! Nous pouvons continuer Razz

kitelnewbba
****

Masculin
Messages : 314
Inscrit(e) le : 19/09/2012

http://www.habbstyle.com
kitelnewbba a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Affichage de images en fond de rangée

Message par kitelnewbba le Dim 3 Mar 2013 - 11:05

UP de présence.

kitelnewbba
****

Masculin
Messages : 314
Inscrit(e) le : 19/09/2012

http://www.habbstyle.com
kitelnewbba a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Affichage de images en fond de rangée

Message par Matriochka le Dim 3 Mar 2013 - 11:12

Parfait Smile Reste plus que le CSS dans ce cas. Retire les lignes que tu avais plus haut :
Code:
 td.row1{ background: url("http://www.zunny.fr/web-gallery/v2/images/bg3.png");}
                td.row2{ background: url("http://img15.hostingpics.net/pics/523292clair.png");}
                td.row3{ background: url("http://img15.hostingpics.net/pics/123514sombre.png");}

Et remplace-les par :
Code:
#row_light {
background: url("http://img15.hostingpics.net/pics/523292clair.png");}
Code:
#row_dark {
background: url("http://img15.hostingpics.net/pics/123514sombre.png");}

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Affichage de images en fond de rangée

Message par kitelnewbba le Dim 3 Mar 2013 - 14:04

Bonjour j'ai testé tous vos codes, et ça marche parfaitement!

Mais le problème cette barre : j'aimerais quelle soit du même fond que le fond des catégories sur l'index. Merci bien pour vos réponses!

kitelnewbba
****

Masculin
Messages : 314
Inscrit(e) le : 19/09/2012

http://www.habbstyle.com
kitelnewbba a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Affichage de images en fond de rangée

Message par kitelnewbba le Lun 4 Mar 2013 - 12:36

UP! ^^

kitelnewbba
****

Masculin
Messages : 314
Inscrit(e) le : 19/09/2012

http://www.habbstyle.com
kitelnewbba a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Affichage de images en fond de rangée

Message par Matriochka le Lun 4 Mar 2013 - 12:39

Ah, bien vu, j’avais oublié cette cellule. Elle est ici dans ton template :
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}" />

Si tu veux qu’elle apparaisse avec le fond clair, ajoute-lui l’id row_light :
Code:
      <td id="row_light" 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}" />

Sinon, c’est l’id row_dark pour l’image sombre :
Code:
      <td id="row_dark" 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}" />

Voilà, ça devrait être bon Smile

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Affichage de images en fond de rangée

Message par kitelnewbba le Lun 4 Mar 2013 - 17:58

Parfait! Je vous remercie de m'avoir aidé tout le long de ce petit problème ! Razz

kitelnewbba
****

Masculin
Messages : 314
Inscrit(e) le : 19/09/2012

http://www.habbstyle.com
kitelnewbba 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