Pour comprendre la partie forum du templates Index-box

[L'ange noir]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://sangsmelesoriginels.forumactif.com

Description du problème

Bonjour les amis

Me revoilà avec une nouvelle question. J'ai étudié un tuto concernant le template Index-box, mais voilà, j'ai eu beau tenter de coder, quelque chose ne fonctionne pas dans ce que je fais. En fait, j'ai un doute sur la variable à utiliser.

Voici le code que j'ai d'origine et qui me donne la class à mettre sur mon CSS de façon à former la partie forum de mes catégories.

Code:

<!-- BEGIN forumrow -->

<div class="forum">
  <div class="icone_forum">
    <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
  </div>
  <div class="sous_forum" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
  <script type="text/javascript">
  jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br /> ')).removeAttr('id');
  </script>
  <div class="description">{catrow.forumrow.FORUM_DESC}</div>
  <div class="forum_titre"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
  <div class="last_message">{catrow.forumrow.LAST_POST}
   
  <!-- BEGIN avatar -->
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
  <!-- END avatar -->
  </div>
  <!-- Modifier le 31/05/17 pour cacher le nbr de messages et nbr de sujets-->
  <!--  <div class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</div> -->
</div>

  <!-- END forumrow -->

Voici le css qui correspond à cette partie :

Code:

.forum
{
  height: 150px;
  background: #e8e8e6; /* couleur de fond de forum */
  border: 1px solid #ffffff;
  margin-bottom: 10px;
}

Jusque là tout va bien. Je suis même fier d'avoir pu changer le titre de la catégorie . Voilà ce que ça donne :



Et voilà ce que j'ai codé pour diviser la grande bande du forum en deux :

Code:

<div class="forum">
  <div class="icone_forum">
    <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
  </div>
  <div class="sous_forum" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
  <script type="text/javascript">
  jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br /> ')).removeAttr('id');
  </script>
  <div class="description">{catrow.forumrow.FORUM_DESC}</div>
  <div class="forum_titre"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
  <div class="last_message">{catrow.forumrow.LAST_POST}
    <div class="forum2"> (VOUS VOYEZ LA, JE NE SAIS PAS QUELLE VARIABLE METTRE. JE LES AI TOUTES ESSAYEES SANS SUCCES)</div>

Voici mon css :

Code:

.forum2
{
  height: 150px;
  width: 110px;
  background: #e8e8e6; /* couleur de fond de forum */
  border: 1px solid #ffffff;
  margin-bottom: 10px;
}

Et pour finir l'affreux résultat que ça donne :



Merci pour votre aide

(j'ai suivi ce tuto, http://www.never-utopia.com/t45856-guide-du-template-index-box-categories-pour-phpbb2, mais je n'ai rien trouvé qui corresponde aux changements que je veux faire)

[lmc38510]

Hello "Ange"

lors de ta question -> < iCi > ton forum n'avais pas le problème actuel

Code:

    <div class="forum2"> (VOUS VOYEZ LA, JE NE SAIS PAS QUELLE VARIABLE METTRE. JE LES AI TOUTES ESSAYEES SANS SUCCES)</div>

Peux tu revenir sur cette ancienne configuration (du template) ... parce que là ... cela me semble bien compliqué

Et poser les questions à partir cette ancienne configuration

[L'ange noir]

Non, il n'avait pas le problème parce que j'avais tout remis comme avant. J'avais essayé ce code dans la journée sans succès.

Voilà le code qui ne fait apparaître aucun défaut :

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="TitreCategorie">{catrow.tablehead.L_FORUM}</div>

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

  <!-- END cathead -->
  <!-- BEGIN forumrow -->

<div class="forum">
  <div class="icone_forum">
    <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
  </div>
  <div class="sous_forum" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
  <script type="text/javascript">
  jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br /> ')).removeAttr('id');
  </script>
  <div class="description">{catrow.forumrow.FORUM_DESC}</div>
  <div class="forum_titre"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
  <div class="last_message">{catrow.forumrow.LAST_POST}
  <!-- BEGIN avatar -->
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
  <!-- END avatar -->
  </div>
  <!-- Modifier le 31/05/17 pour cacher le nbr de messages et nbr de sujets-->
  <!--  <div class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</div> -->
</div>

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

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


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

Mais en lisant les tuto, j'ai cru comprendre que pour modifier les forums, je dois mettre mes div sous la partie forumrow. C'est ce que j'ai fais. J'ai réussi à raccourcir la bande blanche du forum. Il ne me restait plus qu'à créer un nouveau bloc qui ce serait mis à côté. Mais on dirait que ce n'est pas si simple.^^

[L'ange noir]

Oh, je crois que j'ai compris... il faut que j'utilise la variable qui concerne les sujets postés qui apparaisse à gauche :

https://i.servimg.com/u/f58/19/29/53/44/sans_t11.png

Là où est écris : formulaire/rec

etc...

c'est ça ?

[L'ange noir]

Comme demandé, voici ce que je cherche à faire.



J'ai réussi à réduire le cadre central du forum, mais pas à le décaler au centre.
J'ai changé le titre de la catégorie et là tout va bien.
Je n'ai pas encore abordé la partie des liens au sous forum.
J'ai trouvé où changer le design du dernier message posté, mais je n'ai pas encore réussi à faire un cadre autour avec un effet de relief. Je travaille là-dessus mais mon code ne va pas. Je veux faire un bloc parce que le background ne me permet pas de placer le texte où je veux.

Ma question est donc, est ce qu'il est possible de faire un bloc ou pas ?

[lmc38510]

Comme tu as entre temps changé la disposition ... mais bon ... concernant "last_message" à droite

ajoute dans ton CSS:

Code:

/* Fond couleur plus important*/
.last_message {height: 152px;}

toujours sur "last_message"
modifie ton "margin-top: 50px" passe le à "margin-top: -1px"
modifie ta couleur "background: #fff" -> "background: #e8e8e6"

[Neptunia]

Bonjour ^^


Juste une petite parenthèse pour signaler que l'utilisation de la class forum présente un risque.

La version mobile moderne utilise cette class et du coup le css conçu pour la version web aurait un impact sur l'apparence de la version mobile.

[L'ange noir]

ok.

Qu'est ce qu'une version mobile ?

[Neptunia]

C'est la version affichée par défaut depuis une tablette ou un téléphone "intelligent"

[L'ange noir]

D'accord.

Je ne voudrais pas trop toucher cette partie. Mais sans autre solution, je ne vois pas comment faire. Alors si tu sais ce qu'il faut faire pour ne pas trop toucher la class forum, merci de me le dire et j'irai étudier les tuto à ce sujet.

[Neptunia]

Il n'y a pas de tuto dédié.

Le plus prudent est d'utiliser une autre class que forum.
On parle ici d'une class que vous avez vous-même créee. Il vous suffit de lui donner un autre nom.

[L'ange noir]

D'accord. Merci bien.

[L'ange noir]

Bonjour

lmc, en agrandissant la taille cela n'a rien changé.

J'ai trouvé les solutions par divers moyens et j'ai réussi à configurer le forum comme je le désirais. Merci à ceux qui ont pris le temps de lire ce topic et d'y répondre.