Notificação de novas mensagens

Detalhes da questão

Endereço do fórum: http://suportedesign.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Olá!

Eu queria algo como este exemplo que fiz:


Era colocar algo parecido como uma seta a sair das categorias que têm novas mensagens a dizer "Novo" e em verde, mas apenas nas categorias no inicio do fórum.

Olá.

Podemos fazer isso, mas é mais fácil fazer isso com uma imagem. Peço que pesquise uma imagem e cole aqui.

Também precisaremos do seu index_box.

Obrigado.

Aqui esta, pode testar com qualquer uma:

Código:

 
<div class="main">
<!-- BEGIN catrow -->
  <!-- BEGIN tablehead -->
      <div class="fa-catrow">
        <div class="fa-catrow-title">
            <div class="page-title">{catrow.tablehead.L_FORUM}</div>
        </div>
  <!-- END tablehead -->
 
  <!-- BEGIN forumrow -->
        <div class="fa-forumrow">
            <div class="fa-forumrow-main">
              <h{catrow.forumrow.LEVEL} class="hierarchy fa-forumrow-title">
                  <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">
                    {catrow.forumrow.FORUM_NAME}
                  </a>
              </h{catrow.forumrow.LEVEL}>
              <div class="fa-forumrow-description">
                  {catrow.forumrow.FORUM_DESC}
              </div>
              <div class="fa-forumrow-meta">
                  <div class="fa-forumrow-topics">{catrow.forumrow.TOPICS} Tópicos</div>
                  <div class="fa-forumrow-posts">{catrow.forumrow.POSTS} Mensagens</div>
              </div>
            </div>
            <div class="fa-forumrow-image">
            </div>
            <div class="fa-forumrow-recent">
              <!-- BEGIN avatar -->
              <span class="lastpost-avatar fa-forumrow-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
              <!-- END avatar -->
              <!-- BEGIN switch_topic_title -->
              <div class="fa-forumrow-recent-topic">
                  <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a>
              </div>
              <!-- END switch_topic_title -->
              <div class="fa-forumrow-recent-meta">
                  {catrow.forumrow.USER_LAST_POST}
              </div>
            </div>
        </div>
  <!-- END forumrow -->
 
  <!-- BEGIN tablefoot -->
        <script>
            (function($) {
              'use strict';
             
              $('.fa-forumrow').each(function() {
                  var $this = $(this);
                 
                  var $image = $this.find('.fa-forumrow-description > img[style]:first-child');
                 
                  if (!$image.length) {
                    return;
                  }
                 
                  $this.find('.fa-forumrow-image').css('background-image', 'url(' + $image.attr('src') + ')');
                 
                  $image.remove();
              });
            })(jQuery);
        </script>
      </div>
  <!-- END tablefoot -->
<!-- END catrow -->
</div>
 
<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
  <ul>
      <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
      <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
      <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
  </ul>
  <!-- BEGIN switch_delete_cookies -->
  <p class="right">
      <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
  </p>
  <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->

Troque por este para que possamos prosseguir com os estilos:

Código:

<div class="main">
<!-- BEGIN catrow -->
  <!-- BEGIN tablehead -->
      <div class="fa-catrow">
        <div class="fa-catrow-title">
            <div class="page-title">{catrow.tablehead.L_FORUM}</div>
        </div>
  <!-- END tablehead -->
 
  <!-- BEGIN forumrow -->
        <div class="fa-forumrow" data-icon="{catrow.forumrow.FORUM_FOLDER_IMG}">
            <div class="fa-forumrow-main">
              <h{catrow.forumrow.LEVEL} class="hierarchy fa-forumrow-title">
                  <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">
                    {catrow.forumrow.FORUM_NAME}
                  </a>
              </h{catrow.forumrow.LEVEL}>
              <div class="fa-forumrow-description">
                  {catrow.forumrow.FORUM_DESC}
              </div>
              <div class="fa-forumrow-meta">
                  <div class="fa-forumrow-topics">{catrow.forumrow.TOPICS} Tópicos</div>
                  <div class="fa-forumrow-posts">{catrow.forumrow.POSTS} Mensagens</div>
              </div>
            </div>
            <div class="fa-forumrow-image">
            </div>
            <div class="fa-forumrow-recent">
              <!-- BEGIN avatar -->
              <span class="lastpost-avatar fa-forumrow-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
              <!-- END avatar -->
              <!-- BEGIN switch_topic_title -->
              <div class="fa-forumrow-recent-topic">
                  <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a>
              </div>
              <!-- END switch_topic_title -->
              <div class="fa-forumrow-recent-meta">
                  {catrow.forumrow.USER_LAST_POST}
              </div>
            </div>
        </div>
  <!-- END forumrow -->
 
  <!-- BEGIN tablefoot -->
        <script>
            (function($) {
              'use strict';
             
              $('.fa-forumrow').each(function() {
                  var $this = $(this);
                 
                  var $image = $this.find('.fa-forumrow-description > img[style]:first-child');
                 
                  if (!$image.length) {
                    return;
                  }
                 
                  $this.find('.fa-forumrow-image').css('background-image', 'url(' + $image.attr('src') + ')');
                 
                  $image.remove();
              });
            })(jQuery);
        </script>
      </div>
  <!-- END tablefoot -->
<!-- END catrow -->
</div>
 
<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
  <ul>
      <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
      <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
      <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
  </ul>
  <!-- BEGIN switch_delete_cookies -->
  <p class="right">
      <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
  </p>
  <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->

Poste qualquer mensagem em um tópico visível aos membros também.

Colocado e criei um tópico em Anuncios e Atualizações

Eu não consegui fazer pois não tinha a imagem daquele ícone.
Mas deixei uma bolinha verde como sinalização.

Adicione em sua Folha de Estilos:

Código:

.fa-forumrow {
  position: relative;
}

.fa-forumrow[data-icon="https://2img.net/i/fa/modernbb/forum_read.png"]::before {
  content: "";
  position: absolute;
  right: 15px;
  top: 15px;
  background-color: #75a545;
  width: 12px;
  height: 12px;
  border-radius: 20px;
}

o/

Ela aparece mas depois ver o tópico ela continua lá.

Configure a sua página da gestão das imagens por:

E altere o CSS por:

Código:

.fa-forumrow {
  position: relative;
}
 
.fa-forumrow[data-icon="new"]::before {
  content: "";
  position: absolute;
  right: 15px;
  top: 15px;
  background-color: #75a545;
  width: 12px;
  height: 12px;
  border-radius: 20px;
}

Fiz como pediu mas agora não aparece.

Poste uma nova mensagem em qualquer subfórum por gentileza? o/

Aqui: http://suportedesign.forumeiros.com/t2328-teste-icone-de-novas-mensagens