Backgrounds différents dans les forums

[Sparadra]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Opera
Personnes concernées par le problème : Moi uniquement
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour à tous !

Je me tourne vers vous car malheureusement, je ne trouve pas de tutoriel concernant l’insertion de backgrounds différents dans les forums ( .forum ) des catégories >:

J'ai bien trouvé sur forumactif UN sujet de 2012 qui traite du problème ( https://forum.forumactif.com/t355238-image-differente-fond-forum ) mais cette solution ne fonctionne pas de mon côté : peut-être parce que j'ai déjà modifié mon index-box, ou parce que mes catégories ont été codées sur deux colonnes au lieu d'une ?

Voilà à quoi ressemble mes catégories :

Spoiler:

Je souhaiterais donc attribuer un background différent à chaque fois ( Image 1, Image 2 etc. ) mais peut-être est-ce simplement impossible ? Ou trop compliqué ? ;_;

Merci par avance pour votre aide ou vos conseils,  

Sparadra

[Invité]

Hello Sparadra,
hum c'est assez complexe et facile a realiser mais pour cela
il faudrait connaitre le contenu de ton template index_box:
Affichage/Templates/Général/index_box

Ensuite savoir le niveau de compression de tes catégories:
Affichage/Page d'acceuil/ Structure et hiérarchie/Niveau de compression de l'index

Et enfin la c.s.s associée    .

C'est bien pour les forums de chaque catégorie ?

a++

[Sparadra]

Bonsoir Milouze !

Voici l'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 class="cate_head">
<div class="titre_cate">{catrow.tablehead.L_FORUM}</div></div>
<div class="cate_body">
 <span style="display: block; height: 1px; clear: both;"></span>

 <!-- END tablehead -->
 <!-- BEGIN cathead -->

 <!-- END cathead -->
 <!-- BEGIN forumrow -->
 
<div class="forum_bloc">

  <div class="forum">
    
    <!-- titre du forum -->
    <div class="forumlink"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
    
    <!-- icone des messages -->
    <div class="forum_icone"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
    
    <!-- description -->
    <div class="forum_description">{catrow.forumrow.FORUM_DESC}</div>
    
    <!-- sous forum -->
    <div class="sous_forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
    
    <!-- stats -->
    <div class="forum_stats"><span class="stats1">{catrow.forumrow.TOPICS}</span><span class="stats2">{catrow.forumrow.POSTS}</span></div>
    
    <!-- dernier message -->
    <div class="dernier_mess">{catrow.forumrow.LAST_POST}</div>  
  
   </div>
  
</div>

 <!-- END forumrow -->
 <!-- BEGIN catfoot -->

 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->

<span style="display: block; height: 1px; clear: both;"></span>
</div>
<div class="cate_foot"></div>

<!-- END tablefoot --><!-- END catrow -->

Le CSS qui correspond à la partie .forum :  

Code:

* ------------ catégories en cours - WIP -------------- */

.forum_bloc
{
  width: 850px;
  margin: auto;
}

.forum
{
  width: 410px;
  float: left;
  height: 200px;
  margin: 5px;
  border-width:1px;
 border-style:solid;
 border-color: #5a7ba5;
  background: #000000;
}

Et le niveau de compression :  séparer les catégories sur l'index > Moyen √

C'est bien pour les forums que l'on aperçoit dans chaque catégories ( dès que l'on arrive sur la page d'accueil ! )

Merci pour ton temps,

Sparadra

[Invité]

Hello Sparadra,

alors si tous les forums sont visibles quelque soit le statut (modo admin,membre ou invité),
ce script suffira:

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher sur toutes les pages.


Déposes ceci:

Code:


$(function(){
$( ".cate_body ").find('div.forum').attr( "id", function(div) {
    return "M14_forum_" +div;
  })
  });



Penses à cliquer sur le bouton VALIDER


Ensuite le script va attribuer un id qu'il faudra personnaliser dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:

Code:


/*FORUM 1*/
#M14_forum_0
{
background:red;
}
/*FORUM 2*/
#M14_forum_1
{
background:green;
}


Penses à cliquer sur le bouton

Donc,
le premier forum recevra cet ID:

Code:

#M14_forum_0

le deuxième:

Code:

#M14_forum_1

le troisième:

Code:

#M14_forum_2

etc etc .
Dans le cas ou des forums soient masqués pour certaine catégorie de personnes,
il faudra agir différemment, c'est à dire qu'il faudra trouver le lien du forum de chaque catégorie.
Et lui attribuer un id comme ceci:

Code:


$(function(){
$('.cate_body').each(function(){
//FORUM 1
$(this).find('a[href="/f7-la-chatbox"]').closest('div.forum').attr('id','M14_forum_0');
//FORUM  2
$(this).find('a[href="/f11-mes-scripts-avec-toolbar"]').closest('div.forum').attr('id','M14_forum_1');

  });
  });


Cette méthode est plus fiable
Je t'explique le fonctionnement:
je recherche pour chaque forum son lien

Code:


$(this).find('a[href="/f7-la-chatbox"]').closest('div.forum').attr('id','M14_forum_0');


En l’occurrence pour mon premier lien:

Code:

/f7-la-chatbox

puis je remonte( .closest ) pour trouver la div du forum pour lui donner l'identifiant:

Code:

.attr('id','M14_forum_0');

La c.s.s ne change pas .

Si tu as de soucis de compréhension , n'hésites pas .

Et voilou .

a++

[Sparadra]

Salutation Milouze,

Ça fonctionne parfaitement ! Merci infiniment pour ton aide. Merci merci merci Q_Q

Bonne journée à toi,

Sparadra