Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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

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

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

Message par Melodiam Sam 12 Mai 2018 - 21:26

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:
Code qui se répète (affichage des sujets) modernBB Wus3yx

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

Description du problème

Bonsoir ! Smile

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


Dernière édition par Melodiam le Dim 13 Mai 2018 - 18:34, édité 1 fois
Melodiam

Melodiam
****

Messages : 332
Inscrit(e) le : 16/04/2012

Voir le profil de l'utilisateur http://funkytown-bakemono.forumactif.com
Melodiam a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code qui se répète (affichage des sujets) modernBB

Message par w00tw00t Dim 13 Mai 2018 - 13:47

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
w00tw00t

w00tw00t
***

Messages : 118
Inscrit(e) le : 09/05/2018

Voir le profil de l'utilisateur http://forum.forumactif.org
w00tw00t a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code qui se répète (affichage des sujets) modernBB

Message par Melodiam Dim 13 Mai 2018 - 14:44

Bonjour Woot ! Smile

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 ! ^^
Melodiam

Melodiam
****

Messages : 332
Inscrit(e) le : 16/04/2012

Voir le profil de l'utilisateur http://funkytown-bakemono.forumactif.com
Melodiam a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code qui se répète (affichage des sujets) modernBB

Message par w00tw00t Dim 13 Mai 2018 - 17:14

Bonjour Melodiam,

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

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

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
w00tw00t

w00tw00t
***

Messages : 118
Inscrit(e) le : 09/05/2018

Voir le profil de l'utilisateur http://forum.forumactif.org
w00tw00t a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code qui se répète (affichage des sujets) modernBB

Message par Melodiam Dim 13 Mai 2018 - 18:33

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 !!!!!!! Very Happy
Melodiam

Melodiam
****

Messages : 332
Inscrit(e) le : 16/04/2012

Voir le profil de l'utilisateur http://funkytown-bakemono.forumactif.com
Melodiam 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