Code qui se répète (affichage des sujets) modernBB

[Melodiam]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://wtf-wonderland.forumactif.com/

Description du problème

Bonsoir !

Je rencontre un souci avec le code de mon template topic list box, que j'ai modifié à même le template donc...

Le style que j'ai ajouté au titre de la catégorie déployant les forums se répète sur les forums eux mêmes (cf. la capture d'écran ou directement le forum)...

Je ne sais pas comment faire pour que le code cesse de se répéter, j'ai peur de m'y perdre et de tout casser.

Mon code :

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}()
 {
 alert('MAIN');

 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}()
 {
 alert('ALL');

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

 <div class="forumbg announcement">
 <ul class="topiclist topics" style="background: url(https://image.noelshack.com/fichiers/2018/19/5/1526036406-fond-couleurs-sujets.png)">
 <li class="header">
 <dl class="icon">
 <dt>
 <!-- BEGIN multi_selection -->
 <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" />
 <!-- END multi_selection -->
 
 </dt>
 <dd class="posts"><i class="ion-android-chat" data-tooltip="{topics_list_box.row.L_REPLIES}"></i></dd>
 <dd class="views"><i class="ion-eye" data-tooltip="{topics_list_box.row.L_VIEWS}"></i></dd>
 <dd class="lastpost"><i class="ion-android-time" data-tooltip="{topics_list_box.row.L_LASTPOST}"></i></dd>
 </dl>
 </li>
 </ul>
 <ul class="topiclist topics bg_none">
<!-- END header_table -->

<!-- BEGIN header_row -->
 <strong>{topics_list_box.row.L_TITLE}
 </strong>
<!-- END header_row -->

<!-- BEGIN topic -->

 <!-- BEGIN table_sticky -->
 </ul>
 </div>
 <div class="forumbg">
 <ul class="topiclist topics">
 <li class="header">
 <dl class="icon">
 <!--<dd class="dterm">-->
 <dd class="dterm">
 <!-- BEGIN multi_selection -->
 <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" />
 <!-- END multi_selection -->
 {topics_list_box.row.topic.table_sticky.L_TITLE}
 </dd>
 <dd class="posts"><i class="ion-android-chat" data-tooltip="{topics_list_box.row.topic.table_sticky.L_REPLIES}"></i></dd>
 <dd class="views"><i class="ion-eye" data-tooltip="{topics_list_box.row.topic.table_sticky.L_VIEWS}"></i></dd>
 <dd class="lastpost"><i class="ion-android-time" data-tooltip="{topics_list_box.row.topic.table_sticky.L_LASTPOST}"></i></dd>
 </dl>
 </li>
 </ul>
 <ul class="topiclist topics bg_none">
 <!-- END table_sticky -->

 <li class="row {topics_list_box.row.ROW_ALT_CLASS}"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >
 <dl class="iconn" style="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');">
 <dd class="dterm" title="{topicrow.TOPIC_FOLDER_IMG_ALT}" {topics_list_box.row.ICON}>
 <!-- BEGIN single_selection -->
 <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
 <!-- END single_selection -->
 <div class="topic-title-container">
 {topics_list_box.row.NEWEST_POST_IMG}
 {topics_list_box.row.PARTICIPATE_POST_IMG}
 {topics_list_box.row.TOPIC_TYPE}
 <h2 class="topic-title hierarchy">
 <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="topic-description">
 {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
 </span>
 <!-- END switch_description -->
 <span class="topic-author" style="margin-left: -60px; position: relative; float: left; margin-top: -75px">
<table><tr><td><div style="margin-right: 10px; font-size: 25px; color: white;">✎<td><div style="font-family: economica; font-style: italic; letter-spacing: 1px; color: white; font-size: 14px;">CE SUJET EST L'OEUVRE DE — </div> </div><td><div style="text-transform: uppercase; background: white; padding: 2px; font-size: 10px; text-align: center; min-width: 100px; letter-spacing: 2px;">{topics_list_box.row.TOPIC_AUTHOR}</div></td></tr></table>
</span>
 {topics_list_box.row.GOTO_PAGE_NEW}
 <!-- BEGIN nav_tree -->
 {topics_list_box.row.TOPIC_NAV_TREE_NEW}
 <!-- END nav_tree -->
 </dd>
 <dd class="posts">{topics_list_box.row.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
 <dd class="views">{topics_list_box.row.VIEWS} <dfn>{L_VIEWS}</dfn></dd>
 <dd class="lastpost">
<!-- BEGIN avatar -->
 <span class="lastpost-avatar" style="display: none">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
 <!-- END avatar -->
<span>
 {topics_list_box.row.LAST_POST_AUTHOR}&nbsp;<dfn>{L_LASTPOST}</dfn> {topics_list_box.row.LAST_POST_IMG}<br />{topics_list_box.row.LAST_POST_TIME}
 </span>
 </dd>
 <!-- BEGIN multi_selection -->
 <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} />
 <!-- END multi_selection -->
 </dl>
 </li>
<!-- END topic -->
<!-- BEGIN no_topics -->
<li class="row row1">
 <dl>
 <dt><strong>{topics_list_box.row.L_NO_TOPICS}</strong></dt>
 </dl>
</li>
<!-- END no_topics -->

<!-- BEGIN bottom -->
</ul>
</div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

Sauriez-vous ce qui cloche ?

Merci !

[w00tw00t]

Bonjour Melodiam,

Après une lecture rapide, je dirais que cette partie du code (au moins) pose problème :

Code:

<span class="topic-author" style="margin-left: -60px; position: relative; float: left; margin-top: -75px">
<table><tr><td><div style="margin-right: 10px; font-size: 25px; color: white;">✎<td><div style="font-family: economica; font-style: italic; letter-spacing: 1px; color: white; font-size: 14px;">CE SUJET EST L'OEUVRE DE — </div> </div><td><div style="text-transform: uppercase; background: white; padding: 2px; font-size: 10px; text-align: center; min-width: 100px; letter-spacing: 2px;">{topics_list_box.row.TOPIC_AUTHOR}</div></td></tr></table>
</span>

Ce codage est assez curieux car il se base sur des marges négatives, et il existe une non-correspondance entre les balises fermantes et ouvrantes, notamment pour "td" et "div". Le plus simple est peut être de restaurer la version d'origine. Auquel cas vous pouvez remplacer le code précédent par celui-ci :

Code:

<span class="topic-author">
      &nbsp;{topics_list_box.row.L_BY}&nbsp;{topics_list_box.row.TOPIC_AUTHOR}
</span>

Vous pouvez aussi au besoin décrire quel était votre besoin de base (au travers d'un schéma) pour que l'on investigue ensemble une solution plus professionnelle.

Vous souhaitant une bonne journée,

Cordialement,
w00tw00t

[Melodiam]

Bonjour Woot !

Alors je comprends que les balises ne correspondent pas...
Il me faut donc mieux créer une class ?

Le code d'origine ne me plaît pas ou du moins je souhaite le personnaliser pour que le rendu soit comme ceci :
https://2img.net/image.noelshack.com/fichiers/2018/19/7/1526215291-capture-d-ecran-2018-05-13-a-2-40-08-pm.png

Donc le fond de titre du sujet a cette image : https://2img.net/image.noelshack.com/fichiers/2018/19/5/1526036406-fond-couleurs-sujets.png

Le pseudo de l'auteur est dans le petit encadré blanc, sur la même ligne que le titre du topic/sujet ;

Je réussi à avoir ce rendu mais le code n'est pas professionnel comme vous le dites et je suppose que c'est pour cela qu'il bug... J'aimerais avoir le même rendu sans bug, sans que le titre de "Ce sujet est l'oeuvre etc." ne se répète lorsque je poste plusieurs sujet à la suite (cela me le fait en l'occurence lorsque c'est un post-it ou une annonce).

Je ne sais pas si je suis assez claire ? ahah
Désolée!

En tous cas merci !!!

EDIT : je me rends compte que je me suis mal exprimée, que je n'ai pas assez développé ; chaque nouveau sujet a comme titre ce fond coloré avec le "Ce sujet est l'oeuvre etc."
J'aimerais que chaque sujet posté ait pour titre ce bloc de couleur donc que cela donne ce rendu : https://2img.net/h/oi68.tinypic.com/1rsmz8.png


Encore merci ! ^^

[w00tw00t]

Bonjour Melodiam,

Compte tenu des instructions données, je vous propose la base de travail suivante, ce qui devrait simplifier vos modifications.

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}()
 {
 alert('MAIN');

 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}()
 {
 alert('ALL');

 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>

        <div>
            <!-- BEGIN multi_selection -->
            <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" />
            <!-- END multi_selection -->
        </div>

 <!-- END multi_selection -->
<!-- END header_table -->

<div class="forumbg announcement">

    <ul class="topiclist topics" style="display:none; background: url(https://image.noelshack.com/fichiers/2018/19/5/1526036406-fond-couleurs-sujets.png)">
        <li class="header">
            <dl class="icon">
                <dt>
                    <span style="font-family: economica; font-style: italic; letter-spacing: 1px; color: white; font-size: 14px;">
                        <i class="ion-android-arrow-forward" data-tooltip="Sujet" style="font-size: 14px;"></i>&nbsp;
                        CE SUJET EST L'OEUVRE DE -
                    </span>&nbsp;
                    <span style="text-transform: uppercase; background: white; padding: 2px; font-size: 10px; text-align: center; min-width: 100px; letter-spacing: 2px;">
                      {topics_list_box.row.TOPIC_AUTHOR}
                    </span>
                </dt>
                <dd class="posts"><i class="ion-android-chat" data-tooltip="Réponses"></i></dd>
                <dd class="views"><i class="ion-eye" data-tooltip="Vues"></i></dd>
                <dd class="lastpost"><i class="ion-android-time" data-tooltip="Dernier message"></i></dd>
            </dl>
        </li>
    </ul>

    <ul class="topiclist topics bg_none">

        <!-- BEGIN header_row -->
        <strong>{topics_list_box.row.L_TITLE}</strong>
        <!-- END header_row -->

        <!-- BEGIN topic -->

        <li class="row {topics_list_box.row.ROW_ALT_CLASS}"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >
        <dl class="icon" style="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');">
            <dd class="dterm" title="{topicrow.TOPIC_FOLDER_IMG_ALT}" {topics_list_box.row.ICON}>
                <!-- BEGIN single_selection -->
                <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
                <!-- END single_selection -->
                <div class="topic-title-container">
                    {topics_list_box.row.NEWEST_POST_IMG}
                    {topics_list_box.row.PARTICIPATE_POST_IMG}
                    {topics_list_box.row.TOPIC_TYPE}
                    <h2 class="topic-title hierarchy">
                        <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">
                            {topics_list_box.row.TOPIC_TITLE}
                        </a>
                    </h2>
                </div>
                <span class="topic-description">
                <!-- BEGIN switch_description -->
                        {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
                <!-- END switch_description -->
                </span>
                <span class="topic-author">
                    &nbsp;{topics_list_box.row.L_BY}&nbsp;{topics_list_box.row.TOPIC_AUTHOR}
                </span>
                <span class="topic-more">
                {topics_list_box.row.GOTO_PAGE_NEW}
                <!-- BEGIN nav_tree -->
                {topics_list_box.row.TOPIC_NAV_TREE_NEW}
                <!-- END nav_tree -->
                </span>
            </dd>
            <dd class="posts">{topics_list_box.row.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
            <dd class="views">{topics_list_box.row.VIEWS} <dfn>{L_VIEWS}</dfn></dd>
            <dd class="lastpost">
                <!-- BEGIN avatar -->
                <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
                <!-- END avatar -->

                <span>
                    {topics_list_box.row.LAST_POST_AUTHOR}&nbsp;<dfn>{L_LASTPOST}</dfn> {topics_list_box.row.LAST_POST_IMG}<br />{topics_list_box.row.LAST_POST_TIME}
                </span>
            </dd>
            <!-- BEGIN multi_selection -->
            <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} />
            <!-- END multi_selection -->
        </dl>
        </li>
        <!-- END topic -->
        <!-- BEGIN no_topics -->
        <li class="row row1">
            <dl>
                <dt><strong>{topics_list_box.row.L_NO_TOPICS}</strong></dt>
            </dl>
        </li>
        <!-- END no_topics -->

    </ul>
</div>

<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

<script type="text/javascript">
    $(function() {
        $('.topiclist.topics').each(function(){
            const $this = $(this);
            if( $this.parent().find('.row .lastpost').length > 0 ){
                $this.css('display','block');
            }
        });
    });
</script>

Vous pouvez notamment adapter la marge de chaque bloc avec la propriété "margin-bottom" et le sélecteur ".forumbg".

Il est à noter qu'il existe comme dans votre code initial du code CSS dans certains attributs "style". Je vous recommande lorsque vous aurez terminé votre refonte des catégories de les placer plutôt dans votre feuille de style en créant des classes.

Je reste à votre disposition pour plus de détails,

Cordialement,
w00tw00t

[Melodiam]

Je viens d'installer le code en y apportant de très légères retouches ! Cela fonctionne parfaitement je n'aurais pas mieux espéré !!!

Je vais créer des class dans ma page css oui, ce sera bien plus facile de les retoucher si besoin est dans le futur ainsi !

Merci beaucoup pour votre temps, vos conseils et surtout votre aide !
Bonne soirée à vous Woot !!!!!!!