Images fonds de titres différentes par catégorie

[khouss]

Rappel du premier message :

Bonjour,

J'ai utilisé la fonction rechercher, les archives et je n'ai pas trouvé de réponse à mon souhait de mise en page du forum. Désolé si le sujet a déjà été traité.   

Mon forum est composé de 4 catégories. Dans chaque catégorie on trouve bien sûr un ensemble de forum et sous forum.

J'ai placé une image de fond dans les titres des catégories.
Cette image est la même pour l'ensemble des catégories du forum et on la retrouve dans les titres des forums et titres des sous forum.

Ce que je souhaite :
Avoir une image de fond des titres différente par catégorie, et que cette image de la catégorie se retrouve dans les titres des forums et sous forum associés.

Par exemple :
Image de fond de titre 1 pour
Fond titre Catégorie 1
Fond titre Forum  1
Fond titre Forum 1.1

Image de fond de titre 2 pour
Fond titre Catégorie 2
Fond titre Forum 2
Fond titre sous forum 2
Fond titre Forum 2.2
Fond titre sous forum 2.2
Fond titre sous forum 2.2

etc, pour les catégories 3 et catégories 4.

 :thanks:  beaucoup pour vos réponses à venir,

[khouss]

ça roule, je vois avec lui comment on fait, etc, et reviens sur le post dès qu'on aura échangé sur le sujet

bonne fin d'après midi Stéfou

[stefou]

Demande lui un copier collé du "topics_list_box"

[khouss]

je lui demande de ce pas (ça se trouve à quel endroit ?), merci Stefou

[khouss]

Pas simple de se joindre en ce moment, d'où mon retour un peu tardif sur le post; ça devrait le faire cette semaine...

[khouss]

La nuit porte conseil; au sujet de la "répétition" je souhaite que l'image de fond de titre de la catégorie soit reportée :
- seulement dans le titre de la colonne "sujet" des forums
- seulement dans le titre de la colonne "message" des sujets

Peut-on réaliser cette sélection ? Quels sont les codes ?

Merci par avance,

Pour cela ont va ajouter quelques "class" dans le template "topics_list_box"
Tu n'est pas le fondateur? As tu accès au template ?

... et voilà le copier/coller de "topic_list_box"

Code:

<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
   var all_checked = true;
   for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
      }
   }
   document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
   for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
      }
   }
}
</script>
<!-- END multi_selection -->

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap">&nbsp;{topics_list_box.row.L_TITLE}&nbsp;</th>
      <th align="center" nowrap="nowrap" width="80">&nbsp;{topics_list_box.row.L_REPLIES}&nbsp;</th>
      <th align="center" nowrap="nowrap" width="100">&nbsp;{topics_list_box.row.L_AUTHOR}&nbsp;</th>
      <th align="center" nowrap="nowrap" width="50">&nbsp;{topics_list_box.row.L_VIEWS}&nbsp;</th>
      <th align="center" nowrap="nowrap" width="150">&nbsp;{topics_list_box.row.L_LASTPOST}&nbsp;</th>
      <!-- BEGIN multi_selection -->
      <th align="center" nowrap="nowrap" width="20"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></th>
   <!-- END multi_selection -->
   </tr>
   <!-- BEGIN pagination -->
   <tr>
      <td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
   </tr>
   <!-- END pagination -->
   <!-- END header_table --><!-- BEGIN header_row -->
   <tr>
      <td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall">&nbsp;<b>{topics_list_box.row.L_TITLE}</b></span></td>
   </tr>
<!-- END header_row -->

<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
   <tr>
      <!-- BEGIN single_selection -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
      <!-- END single_selection -->
      <td class="{topics_list_box.row.ROW_FOLDER_CLASS}" align="center" valign="middle" width="20"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></td>
      <!-- BEGIN icon -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
      <!-- END icon -->
      <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
         <div class="topictitle">
            {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
            <h2 class="topic-title">
               <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
            </h2>
         </div>

         <!-- BEGIN switch_description -->
         <span class="genmed">
            <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
         </span>
         <!-- END switch_description -->
         <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>&nbsp;
         <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
      </td>

      <td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.REPLIES}</span></td>
      <td class="row3" align="center" valign="middle"><span class="name"><strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span></td>
      <td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.VIEWS}</span></td>
      <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->

            <span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span>
        </td>
<!-- BEGIN multi_selection -->
      <td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
   <!-- END multi_selection -->
   </tr>
   <!-- END topic --><!-- BEGIN no_topics -->
   <tr>
      <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
   </tr>
   <!-- END no_topics --><!-- BEGIN bottom -->
   <tr>
      <td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td>&nbsp;<span class="gensmall">{PAGINATION}</span></td>
               <td align="right"><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</td>
            </tr>
         </table>
      </td>
   </tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

[stefou]

Bonjour,

Voilà le "topic_list_box" modifier, remplacer le votre par celui-ci.

Code:

    <!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
    <script type="text/javascript">
    function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
      var all_checked = true;
      for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
          if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
            all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
          }
      }
      document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
    }
    function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
      for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
          if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
            document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
          }
      }
    }
    </script>
    <!-- END multi_selection -->

    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr>
      <th class="sujet" colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap">&nbsp;{topics_list_box.row.L_TITLE}&nbsp;</th>
      <th class="reponses" align="center" nowrap="nowrap" width="80">&nbsp;{topics_list_box.row.L_REPLIES}&nbsp;</th>
      <th class="auteur" align="center" nowrap="nowrap" width="100">&nbsp;{topics_list_box.row.L_AUTHOR}&nbsp;</th>
      <th class="vues" align="center" nowrap="nowrap" width="50">&nbsp;{topics_list_box.row.L_VIEWS}&nbsp;</th>
      <th class="dernier_message" align="center" nowrap="nowrap" width="150">&nbsp;{topics_list_box.row.L_LASTPOST}&nbsp;</th>
          <!-- BEGIN multi_selection -->
          <th align="center" nowrap="nowrap" width="20"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></th>
      <!-- END multi_selection -->
      </tr>
      <!-- BEGIN pagination -->
      <tr>
          <td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
      </tr>
      <!-- END pagination -->
      <!-- END header_table --><!-- BEGIN header_row -->
      <tr>
          <td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall">&nbsp;<b>{topics_list_box.row.L_TITLE}</b></span></td>
      </tr>
    <!-- END header_row -->

    <!-- BEGIN topic -->
    {topics_list_box.row.END_TABLE_STICKY}
      <tr>
          <!-- BEGIN single_selection -->
          <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
          <!-- END single_selection -->
          <td class="{topics_list_box.row.ROW_FOLDER_CLASS}" align="center" valign="middle" width="20"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></td>
          <!-- BEGIN icon -->
          <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
          <!-- END icon -->
          <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
            <div class="topictitle">
                {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
                <h2 class="topic-title">
                  <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
                </h2>
            </div>

            <!-- BEGIN switch_description -->
            <span class="genmed">
                <br />
                {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
            </span>
            <!-- END switch_description -->
            <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>&nbsp;
            <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
          </td>

          <td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.REPLIES}</span></td>
          <td class="row3" align="center" valign="middle"><span class="name"><strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span></td>
          <td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.VIEWS}</span></td>
          <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap">
                <!-- BEGIN avatar -->
                <div style="width: 200px;"></div>
                <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
                <!-- END avatar -->

                <span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span>
            </td>
    <!-- BEGIN multi_selection -->
          <td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
      <!-- END multi_selection -->
      </tr>
      <!-- END topic --><!-- BEGIN no_topics -->
      <tr>
          <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
      </tr>
      <!-- END no_topics --><!-- BEGIN bottom -->
      <tr>
          <td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td>&nbsp;<span class="gensmall">{PAGINATION}</span></td>
                  <td align="right"><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</td>
                </tr>
            </table>
          </td>
      </tr>
    <!-- END bottom --><!-- BEGIN footer_table -->
    </table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

Sauvegarder et pas oublier de le publier avec la touche   

Prévenez moi quand c'est fait   

[khouss]

Bonsoir Stéfou, j'ai copier / coller, enregistré et publié et... rien ne se passe, aucun changement

Heeeeelp

[stefou]

C'est normal, on a pas fini   

La nuit porte conseil; au sujet de la "répétition" je souhaite que l'image de fond de titre de la catégorie soit reportée :
- seulement dans le titre de la colonne "sujet" des forums
- seulement dans le titre de la colonne "message" des sujets

Peut-on réaliser cette sélection ? Quels sont les codes ?

Merci par avance,

Voilà, pour terminer et avoir le rendu voulu,
(Pas très catholique mon code mais il fonctionne)
Mettre dans feuille de style css

Code:

.reponses.reponses, .auteur.auteur, .vues.vues{background-image:none!important;}

[khouss]

Merci Stefou, ça fonctionne presque. Pour résumer le rendu :
Partie Catégorie : ok

Partie Forum (ex : "le bistro") :
- reponses, auteur, vues, ok
Reste "derniers messages" à mettre en gris

Partie Sous Forum (ex : "concours photos") :
ça ne fonctionne pas

Partie sujet (ex : "évolution du forum") :
ça ne fonctionne pas, "auteur" n'est pas en gris

En tout cas on est sur la bonne voie...

[stefou]

Je n'y ai pas accès...

[stefou]

Bon, on vas faire un peu le ménage dans le css
Je te prépare un css un peu plus propre...

[stefou]

Voilà,

Retirer les modifications apportées depuis le début dans la feuille de style css
Si je ne me trompe pas il a ceci à retirer

Code:

th.bar-cat1{background-image: url(http://i39.servimg.com/u/f39/12/58/30/26/bantit17.jpg)!important;}
th.bar-cat2{background-image: url(http://i39.servimg.com/u/f39/12/58/30/26/test14.jpg)!important;}
th.bar-cat3{background-image: url(http://i39.servimg.com/u/f39/12/58/30/26/test410.jpg)!important;}
th.bar-cat4{background-image: url(http://i39.servimg.com/u/f39/12/58/30/26/test210.jpg)!important;}
.reponses.reponses, .auteur.auteur, .vues.vues{background-image:none!important;}

Et mettre ceci à la place.

Code:

/*mise en place des images de barres de catégories*/
th.secondarytitle.bar-cat1, th.sujet.bar-cat1, th.dernier_message.bar-cat1, th.thRight.bar-cat1, th.bar-cat1:nth-child(4){background-image: url(http://i39.servimg.com/u/f39/12/58/30/26/bantit17.jpg)!important;}
th.secondarytitle.bar-cat2, th.sujet.bar-cat2, th.dernier_message.bar-cat2, th.thRight.bar-cat2, th.bar-cat2:nth-child(4){background-image: url(http://i39.servimg.com/u/f39/12/58/30/26/test14.jpg)!important;}
th.secondarytitle.bar-cat3, th.sujet.bar-cat3, th.dernier_message.bar-cat3, th.thRight.bar-cat3, th.bar-cat3:nth-child(4){background-image: url(http://i39.servimg.com/u/f39/12/58/30/26/test410.jpg)!important;}
th.secondarytitle.bar-cat4, th.sujet.bar-cat4, th.dernier_message.bar-cat4, th.thRight.bar-cat4, th.bar-cat4:nth-child(4){background-image: url(http://i39.servimg.com/u/f39/12/58/30/26/test210.jpg)!important;}
/*suppression images de barres catégories superflues*/
th.bar-cat1.vues,th.bar-cat2.vues, th.bar-cat3.vues, th.bar-cat4.vues{background-image:none!important;}
/*fin*/

Avec ce code je pense que tout sera bon.
Pour la case dernier message de la page d’accueil, il n'y a pas d'image, comme vous n'en parlez pas, je n'en ai pas mis. (mais c'est possible)

[khouss]

A un détail près, c'est tout bon (ça me va; ça marque une différence entre forum et sous-forum et c'est plutôt bien),

un grand merci pour ta patience et ton aide Stéfou !

Petite question subsidiaire : dois-je conserver la modif de Template ?

Excellente soirée à toi

[khouss]

Pfff... connexion ce matin sur mon forum et boulette... j'ai modifié l'integralité du css hier soir et du coup j'ai effacé le code que j'avais trouvé ici et qui permet d'arrondir tous les cadres du forum tout en gardant les angles droits des tableaux...

  

[stefou]

Bonjour,
Pour le template, ainsi que le css, il toujours conseillé de garder des sauvegardes sur le pc avant chaque modif ainsi que la dernière version modifier.
C'est pas le 1er qui perd de longues heures et qui par fausse manœuvre ce retrouve avec le forum basique.

Peux tu poster une image avec des croix ou tu souhaites les arrondis?

[khouss]

Effectivement, j'ai lu cette recommandation sur le forum... du coup, je vais déjà effectuer une recherche sur mon PC, au cas où j'ai eu ce réflexe au moment de la lecture...

[khouss]

Après de longues recherches sur le forum, j'ai enfin retrouvé le code perdu /

Code:

.forumline {-moz-border-radius: 19px;
-webkit-border-radius: 19px;
border-radius: 19px;
padding: 7px;
}

Du coup je peux arrêter d'abuser de ton aide Stéfou
... et encore merci

  

[stefou]

Ok super,
Ne pas oublier de mettre le sujet en résolu.