Couleur sur class via javascript pour nouveau message/annonce et note

[Cass']

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome, Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum :

Description du problème

Bonjour !
(décidément je suis beaucoup trop présente par ici en ce moment )

Je viens vers vous pour savoir s'il était possible, par javascript, d'avoir ce rendu quand un nouveau message arrive sur le forum, autant sur l'index (IMAGE 1) que dans les sujets (IMAGE 2) ?

Pour les notes/annonce, j'ai essayé de m'inspirer des tuto de coloration qu'on peut trouver sur forumactif mais ayant tellement changé la liste des sujets c'est assez compliqué, mais en gros, j'aimerais savoir s'il était possible de colorer cette partie d'une certaine couleur, quand on poste une annonce et d'une autre couleur quand on poste une note ? (IMAGE 3)

En vous remerciant par avance

[Cass']

Je me permets de up

[chattigre]

Bonjour @Cass',

Alors, techniquement, je dirais que c'est possible : Pour chaque catégorie / forum, faire une requête sur le lien, chercher dans le contenu de la page si il y a parmi les sujets avec l'icône "non lu" une note ou annonce, et changer la couleur si oui.

Par contre, ça me parait quand même très peu raisonnable : Une requête par sous-forum non lu à chaque affichage de la page...
Du coup, je ne sais pas si la charge en vaut vraiment le coup ?...

Bonne journée
Cordialement

[MlleAlys]

Bonjour,

Pour la première question sur les catégories, je ne sais pas si j'ai bien compris la question du coup, contrairement à Chattigre je me disais qu'en passant simplement par l'url de l'icone "nouveau message" pour appliquer la couleur à son parent ? Il faut bien sûr que cette url soit différente de celle de l'icone "pas de nouveau message" (même si l'icone apparente est la même).
Donc quelque chose de ce style (non testé, ya peut être une erreur, j'ai fait rapidement ^^") :

Code:

$(function(){
  $('img.meh[src="https://2img.net/i.imgur.com/9RpP7Du.png"]').closest('div.meuh').css('background-color', 'orange');
});

Et même idée pour les suivants, en général il y a des icones spécifiques lors de nouveaux messages, et aussi pour les notes et annonces ?

[Dellou]

Bonjour !
Je reprend le sujet car je suis co fonda de ce forum et Cass' est en plein déménagement, j'espère que ça va  

Merci Chattigre pour ton intérêt ! J'avoue ne pas comprendre pourquoi ça serait compliqué (encore une fois je ne m'y connais que trop peu en javascript c'est une vraie question!) si on arrive à donner une couleur a une class via javascript en fonction de note/annonce/annonce globale ça ne serait pas la même fonction...partout ? Pareil pour nouveau message ?

Merci beaucoup Alys!! Alors oui, pour nouveau message c'est presque ça, ça me donne ceci :
https://cdn.discordapp.com/attachments/410410920657944596/1135634408615989349/image.png

Ca met le fond en orange pour tout, sauf nouveau message??   Je ne sais pas comment inverser l'idée

Pour le reste, ça me semble surement compliqué d'avoir par exemple la bordure d'un avatar de nouveau message passer en jaune, je pense   je pense qu'il vaut mieux oublier l'idée...

Parcontre, n'est-il pas possible, pour la div gragra
https://cdn.discordapp.com/attachments/410410920657944596/1135635234516385812/image.png

de changer de couleur en fonction de note (vert)/annonce(rouge) ?

[MlleAlys]

Le code se base sur l'url de l'icone à colorer, vous devez remplacer l'url https://2img.net/i.imgur.com/9RpP7Du.png par celle correspondant à l'icone lorsqu'il y a un nouveau message.
Tentez pour gragra :

Code:

$(function(){
  $('img.bleh[src="URLICONE"]').closest('div.gragra').css('background-color', 'orange');
});

("trouver l'icone bleh qui a telle url puis trouver la plus proche gragra et lui mettre un fond orange")

[Dellou]

Alors j'ai essayé votre code avec 'meuh' plutot que gragra, en gros
meuh = le fond coloré orange dans l'index en rond
https://cdn.discordapp.com/attachments/410410920657944596/1135645336937971812/image.png
gragra = fond dans la liste des sujets dont on aimerait qu'elle change de couleur en fonction de note/annonce/nouveau message
https://cdn.discordapp.com/attachments/410410920657944596/1135635234516385812/image.png

J'ai donc essayé avec meuh et ça ne fonctionne pas J'ai bien changé l'image par l'image de nouveau message (blanc)

Code:

$(function(){
  $('img.bleh[src="https://i.imgur.com/NJunsjr.png"]').closest('div.meuh').css('background-color', 'orange');
});

Peut-être ai-je compris de travers! N'hésitez pas à me dire

[MlleAlys]

attention, il me semble que vous avez une icone qui de classe bleh dans un cas, et de class meh dans l'autre.
Dans le premier code pour meuh, c'est img.meh,
dans le deuxième code pour gragra, c'est img.bleh

(ps: de façon plus générale, les class avec des noms explicites ça permet souvent de s'y retrouver plus facilement )

[Dellou]

(ps: de façon plus générale, les class avec des noms explicites ça permet souvent de s'y retrouver plus facilement Wink )

Oui, j'avoue que j'ai pas été sérieuse sur ce coup là   Je note pour la prochaine fois!

Et oui, car "meuh" (dans l'index) possède par exemple le blackground gris (que je voudrais en orange) mais dans la liste des sujets, je ne voulais pas qu'il y ait cette même class, donc j'en ai fait une autre (bleh)!

[MlleAlys]

Vous devez modifier en conséquence cette classe dans le code js.

edit : je me suis trompée sur la structure de votre template, pourriez vous le partager ? Il va falloir y faire une petite modif pour ajouter un parent spécifique à un sujet.

[Dellou]

Oui bien sûr !

topics_list_box où se trouve bleh



index_box où se trouve meh

[MlleAlys]

Voici le template de la liste des sujets, j'ai corrigé quelques erreurs dans la structure (des balises li, dl.. et correction du "sticky"), j'espère qu'il n'y aura pas trop d'implications côté css (comme je n'ai pas toute la mise en forme, je n'ai pas le résultat final sur mon forum test, c'est difficile à dire si des choses ont bougé).
J'ai ajouté un bloc li de class="topic-line" qui englobe chaque sujet gragra+row .

Code:

<style>
  .lastpost-avatar {
  display: none;
}

.lastpost-avatar:after {
  display: none;
}

#notif_unread {
  pointer-events: none;
}

.lastpost span.teehee {
  float: none!important;
  position: absolute!important;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 5px solid #efefef;
  border-radius: 100%;
  overflow: hidden;
}

.teehee img {
  display: block;
  z-index: 1;
  position: relative;
  width: 60px;
  height: 79px;
  margin-top: -14px;
  margin-left: -9px;
  padding: 0;
  border: solid 5px #efefef;
  border-radius: 100%;
  background: #efefef;
}

ul.topics .row dt, ul.topics .row dd.dterm {
  background-repeat: no-repeat;
}

.row .pagination {
  margin-top: -6px;
  margin-left: 100px;
}

.forumbg {
  box-shadow: none!important;
}

.uwu {
  position: absolute;
  top: 90px;
  left: 85px;
}

.teehee {
  display: none;
}

.wahou1 {
  display: none!important;
}

.wahou2 {
  display: none!important;
}

ul.topiclist dd.dterm h2, ul.topiclist dt h2, .table-title, .table-title h2 {
  text-shadow: none!important;
}

.sub-header-path a + a:before {
  margin-top: 4px;
}

div.s_forum {
  margin-top: -10px;
  border: none!important;
  text-shadow: -1px 0 var(--color10) ,0 1px var(--color10) ,1px 0 var(--color10) ,0 -1px var(--color10);
  color: #414D5A!important;
  background: none!important;
}

ul.forums dl.icon dd.dterm > div {
  margin-top: 70px!important;
}

.lastpost-avatar {
  display: initial;
}

.lastpost-avatar img {
  display: block!important;
  z-index: 1!important;
  position: relative!important;
  width: 90px!important;
  height: 110px!important;
  margin-top: -60px!important;
  margin-left: -8px!important;
  padding: 10px!important;
  border-radius: 100%!important;
  transform: scale(2);
}

.topics .lastpost-avatar {
  position: relative!important;
  width: 50px!important;
  height: 50px!important;
  margin-top: 10px!important;
  margin-left: 9px!important;
  padding: 1px 18px 1px 0!important;
  border-radius: 100%!important;
  overflow: hidden!important;
}

.forumbg {
  background: none!important;
}

ul.topiclist li {
  margin-bottom: 15px;
  border: 1px solid var(--color7);
  border-radius: 0 0 5px 5px;
}

ul.topiclist.bg_none {
  padding: 10px!important;
  border-radius: 5px;
  background: var(--color1) !important;
}

.row2 {
  background-color: var(--color5) !important;
}

.row1 {
  background-color: var(--color5) !important;
}

.topics .row .lastpost {
;
  margin: 35px 10px;
  max-width: 300px;
}

.quoicoubeh {
  display: none;
}

.gragra {
  width: 100%;
  padding: 20px;
  border: 1px solid var(--color7);
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  background: var(--color4);
}

ul.topiclist dd {
  float: right;
  margin-right: 40px;
  font-size: 11px;
  inline-size: max-content;
}

.posts {
  position: absolute;
  left: 57%!important;
  width: max-content!important;
  margin-top: 2%;
  margin-left: 20px;
  padding: 3px!important;
  padding-left: 10px!important;
  border: 1px solid var(--color12);
  border-radius: 3px;
  text-transform: uppercase;
  font-family: Karla;
  font-size: 12px!important;
  font-weight: 500;
  letter-spacing: 1px;
  color: #2D4969;
  background: var(--color8);
}

a.topictitle {
  width: 100%;
  height: 35px;
  margin-top: 40px;
  margin-left: 120px;
  overflow: auto;
  text-align: justify;
  text-transform: uppercase;
  font-family: Karla;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  letter-spacing: 1.75px;
  color: var(--color3) !important;
}

.bleh {
  width: 17px;
  margin-top: 49px;
  margin-left: -285px;
}

span.topic-author {
  margin-left: 50px;
  text-shadow: -1px 0 var(--color10) ,0 1px var(--color10) ,1px 0 var(--color10) ,0 -1px var(--color10);
  text-transform: uppercase!important;
  font-family: Karla!important;
  font-size: 13px;
  font-weight: 800;
}

.meow {
  width: 70;
  height: 70;
  margin-top: -53px;
  margin-left: -9px;
  border: solid 1px var(--color11);
  border-radius: 100%;
  background: var(--color15);
}

h1.page-title {
  margin: 0;
  font-family: Karla,sans-serif;
  font-size: 3rem;
  font-weight: 800;
  word-break: break-word;
  color: #3e464c;
}

.sub-header-path a {
  text-transform: uppercase;
}

.forabg {
  box-shadow: none!important;
}

.topics {
  position: initial!important;
  left: initial!important;
}
</style>


<!-- 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 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 announcement">
  <ul class="topiclist topics bg_none">
    <!-- END table_sticky -->


    <li class="topic-line<!-- BEGIN line_sticky --> sticky-first" style="margin-top:5px;<!-- END line_sticky -->">

      <div class="gragra">
        <span class="topic-author">
          {topics_list_box.row.L_BY}&nbsp;{topics_list_box.row.TOPIC_AUTHOR}
          <div class="quoicoubeh">{topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}</div>
        </span>
      </div>


      <dl class="row {topics_list_box.row.ROW_ALT_CLASS}">
        <img class="bleh" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" />


        <dd class="dterm" title="{topics_list_box.row.L_TOPIC_FOLDER_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">
            <h3 class="topic-title hierarchy">
              <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
            </h3>
          </div>
          <!-- BEGIN avatar -->
          <div class="meow">
            <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
          </div>
          <!-- END avatar -->
          <!-- BEGIN switch_description -->
          <span class="topic-description">{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}</span>
          <!-- END switch_description -->
          {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" style="left: 700;margin-top: -20px!important;">
          {topics_list_box.row.REPLIES}
          <i class="ion-reply-all" style="background:initial!important;border:initial!important;margin-left: -7px;"></i>
          <dfn>
            {L_REPLIES}
          </dfn>
        </dd>


        <dd class="lastpost">
          <span class="lastpost-infos">
            DERNIER MESSAGE PAR {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 no-topics">
      <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 -->
<!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->


Et du coup le javascript ça devrait être quelque chose comme ça mais je n'arrive pas à faire passer le sélecteur avec le src sur mon forum test je ne sais pas pourquoi, je dois rater quelque chose...    :

Code:

$(function(){
  $('.topic-line img[src="URLICONE"]').closest('.topic-line').find('.gragra').css('background','orange');
});

Testez sur le votre en remplaçant URLICONE par l'url de l'icone d'un nouveau message, et si ça ne fonctionne pas non plus sur le votre, si quelqu'un de plus doué que moi en jquery passe par là...

[Dellou]

Merci beaucoup pour votre temps MlleAlys !!!

Malheureusement, toujours au même point
Ce que j'ai sur l'index/sous forums :
https://media.discordapp.net/attachments/410410920657944596/1136052867573239939/image.png
https://media.discordapp.net/attachments/410410920657944596/1136052921532944486/image.png

Ce que j'ai dans la liste des sujets :
https://cdn.discordapp.com/attachments/410410920657944596/1136052988868309012/image.png

Merci encore pour votre temps et vos corrections !!



Je remet ici, ce que je recherche à avoir quand il y a un nouveau message :
Dans l'index/sous forum :
https://i.imgur.com/SP8RYCd.png

Dans la liste des sujets (sans la bordure orange/jaune autour de l'avatar) quand il y a un nouveau message :
https://imgur.com/ePyosQv

Et s'il est possible d'accomplir ce genre de choses pour les annonces/notes :
https://imgur.com/k89QQ4S

[MlleAlys]

Pour le dernier point, il me semble que c'est la gestion du sticky :
- dans général > messages > configuration, véirifez l'option : Séparer les annonces et notes des autres sujets : par une ligne.
- dans le template, cherchez "sticky-first". Vous trouverez une marge de 5px. Augmentez la valeur comme vous le souhaitez. (Ou bien supprimez la marge du teplate pour la régler via css avec la class .sticky-first)


Pour la couleur des annonces et notes, ça devrait être possible avec exactement la même technique que les nouveaux messages, en se repérant à l'icone... Encore faudrait-il que le js fonctionne... ><" Je ne comprends pas pourquoi le tout premier faisait quand même un effet alors que pas les suivants... Désolée...

[Dellou]

Merci beaucoup !!! J'ai mis "tableau" est ça fonctionne très bien !!

Arf J'ai tellement aucune notion sur le javascript que je ne saurais donner la moindre réflexion pour faire avancer le problème

[Dellou]

up

[Dellou]

bop

[Cass']

Bonjour,

Merci à Dellou d'avoir repris le sujet durant mon absence !

En tout cas merci beaucoup MlleAlys et chattigre pour vos retours et votre aide sur le sujet, il est désormais résolu