Detalhes da questão

Endereço do fórum: http://pokemonillium.forumeiros.com/
Versão do fórum: phpBB3

Descrição:

Olá,

Gostaria de saber como posso adicionar dois botões a áreas específicas de meu fórum, sendo "Em curso" e "Resolvido", de modo que estes são termos que estarão sendo utilizados inicialmente, em um futuro talvez eu os substitua.

Por sua vez, se possível, desejo que estes estejam disponíveis unicamente aos membros específicos de determinados grupos, sendo os grupos de gerenciamento de meu fórum.

Junto a esta dúvida, gostaria também que tópicos resolvidos fossem destacados, assim como os do FDF, estes que carregam consigo um background esverdeado.

Cordialmente,

O senhor precisará ir à página de criação de um novo tópico, depois apertar F12.
Após isso, clique na aba console.

Feito isso, execute o comando:

Código:

$('[name="post_icon"]').each(function () {
   var $label = $(this).parent('label');
   var $img   = $label.find('span > img');

   console.log(`${$img.attr('alt')} | ID: ${$(this).val()}`);
});

E copie o código retornado aqui.

-> http://prntscr.com/gu9haf

o/

Pelo que eu pude entender, antes de fazer isso eu já devo ter os prefixos de resolvido e em curso já criados, para que ele possa me retornar o valor, correto?

Sim, isso é para que possamos descobrir o ID de cada um deles com precisão.
O script já está feito.

Só faltam os ID's mesmo. :v

Código:

undefined | ID: 0
Em Curso | ID: 1
Resolvido | ID: 2

Estes valores

Crie um novo JavaScript investido nos tópicos com:

Código:

/*globals jQuery, FA*/
/**
 * Alterar o ícone do tópico com AJAX.
 *
 * @author Luiz
 * @version {alpha} 1.0
 * @licence MIT
 */

(function ($) {
  'use strict';

  var config = [
    { name: 'Em Curso', id  : 1, background: '#ecb942' },
    { name: 'Resolvido', id  : 2, background: '#8b5' },
  ];

  window.FA = window.FA || {};
  FA.Topic = FA.Topic || {};

  var MarkIcon;
  FA.Topic.MarkIcon = MarkIcon = function (config) {
    var self = this;

    self.userConfig = config;
    self.defaults = { name: undefined, id: undefined, background: undefined };
    self.config = $.extend({}, self.defaults, self.userConfig);

    $.each(self.config, function (key, value) {
      if (key === undefined) {
        throw new Error ('Não foi especificado um: ' + key + ' para o script de botões.');
      }
    });
  };

  MarkIcon.prototype.init = function () {
    var self = this;

    var $post = $('.post:first');
    var $link = $post.find('a[href$="mode=editpost"]');

    if (!$link.length) {
      return;
    }

    self.messageLink = $link.attr('href');

    self.button = $('<button>', {
      'class'  : 'fa-mark-icon-button',
      'data-id': self.config.id,
      'text'  : self.config.name
    });

    $(self.button)
      .css('background-color', self.config.background)
      .on('click', function (event) {
        event.preventDefault();

        self.runAjax();
      })
      .insertBefore($post)
    ;
  };

  MarkIcon.prototype.runAjax = function () {
    var self = this;

    self.changeText('<i class="fa fa-refresh fa-spin"></i> Marcando...');

    $.get(self.messageLink)
      .done(function (context) {
        var $form = $('form[action="/post"]', context);

        $form.find('input[name="post_icon"]').val(self.config.id);
        $form.find('input[name="edit_reason"]').remove();

        var encode = document.charset.toLowerCase() === 'utf-8'
          ? window.encodeURIComponent
          : window.escape
        ;

        var data = {
          subject          : $form.find('[name="subject"]').val(),
          post_icon        : self.config.id,
          message          : $form.find('[name="message"]').val(),
          mode              : $form.find('[name="mode"]').val(),
          p                : $form.find('[name="p"]').val(),
          modif_topic_title : $form.find('[name="modif_topic_title"]').val(),
          topictype        : $form.find('[name="topictype"]').val(),
          poll_title        : $form.find('[name="poll_title"]').val(),
          poll_option_text  : $form.find('[name="poll_option_text"]').val(),
          poll_length      : $form.find('[name="poll_length"]').val(),
          poll_multiple    : $form.find('[name="poll_multiple"]').val(),
          poll_cancel_vote  : $form.find('[name="poll_cancel_vote"]').val(),
          'auth[]'          : $form.find('[name="auth[]"]').val(),
          post              : 1
        };

        var encoded = $.map(data, function (value, key) {
          return key + '=' + encode(value);
        }).join('&');

        $.post(self.messageLink, encoded)
          .done(function () {
            self.changeText('<i class="fa fa-check"></i> Marcado!');
          })
          .fail(function () {
            alert([
              '[#2] Houve um erro ao marcar o tópico como "' + self.config.name + '".',
              'Por favor, contate o suporte técnico.'
            ].join('\n'));
          })
        ;
      })
      .fail(function () {
        alert([
          '[#1] Houve um erro ao marcar o tópico como "' + self.config.name + '".',
          'Por favor, contate o suporte técnico.'
        ].join('\n'));
      })
    ;
  };

  MarkIcon.prototype.changeText = function (text) {
    var self = this;

    $(self.button)
      .html(text)
    ;
  };

  $(function () {
    $.each(config, function () {
      var self = this;

      (new FA.Topic.MarkIcon(self)).init();
    });
  });
}(jQuery));

o/

Olá, o código resultou perfeitamente

Porém a marcação acabou tornando-se repetitiva, poderia me auxiliar quanto a isso?
http://pokemonillium.forumeiros.com/f28-regiao-off exemplo de como ficou

Spoiler:

---

Precisaremos do template topiclist_box para que possamos corrigir. o/

Tenho ciência que não é, mas eu realmente não consigo arrumar isso com o Css.

Aqui está

Código:

<!-- 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">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
         <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>
            </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>
         <span class="corners-bottom"><span></span></span></div>
      </div>
      <div class="forumbg">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
         <li class="header">
            <dl class="icon">
               <!--<dd class="dterm">-->
               <dd class="listtopic" style="padding-left:0;">
                  <!-- 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" style="padding-left:45px;">{topics_list_box.row.topic.table_sticky.L_REPLIES}</dd>
               <!-- <dd class="authors">{topics_list_box.row.L_AUTHOR}</dd> -->
               <dd class="views">{topics_list_box.row.topic.table_sticky.L_VIEWS}</dd>
               <dd class="ultimosass"><span>{topics_list_box.row.topic.table_sticky.L_LASTPOST}</span></dd>
            </dl>
         </li>
      </ul>
      <ul class="topiclist topics bg_none">
   <!-- END table_sticky -->

      <li class="rowtpc {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="listtopic" 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 -->
               {topics_list_box.row.NEWEST_POST_IMG}
               {topics_list_box.row.PARTICIPATE_POST_IMG}&nbsp;
               {topics_list_box.row.TOPIC_TYPE}
               <div class="topic-title-container"><h2 class="topic-title hierarchy"><a class="titulotpc" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2></div>
               <!-- BEGIN switch_description -->
               <br />
               {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
               <!-- END switch_description -->
               <br />
               {topics_list_box.row.GOTO_PAGE_NEW}
               <span class="span-tab">{topics_list_box.row.L_BY} <strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span>
               <!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE_NEW}<!-- END nav_tree -->
            </dd>
            <dd class="ultimosass">

                    <!-- BEGIN avatar -->
                    <span class="ultimosass-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
                    <div style="float:left;">
                    <!-- END avatar -->

               <dfn>{L_LASTPOST}</dfn>
               {topics_list_box.row.LAST_POST_TIME}{topics_list_box.row.LAST_POST_IMG}

                    <!-- BEGIN avatar -->
                    </div>
                    <!-- END avatar -->
            </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>
   <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

Adicione em sua CSS:

Código:

.fa-topiclist-row {
  background-repeat: no-repeat;
  background-position: 99% center;
}

E troque o template por:

Código:

<!-- 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">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
        <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>
            </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>
        <span class="corners-bottom"><span></span></span></div>
      </div>
      <div class="forumbg">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
        <li class="header">
            <dl class="icon">
              <!--<dd class="dterm">-->
              <dd class="listtopic" style="padding-left:0;">
                  <!-- 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" style="padding-left:45px;">{topics_list_box.row.topic.table_sticky.L_REPLIES}</dd>
              <!-- <dd class="authors">{topics_list_box.row.L_AUTHOR}</dd> -->
              <dd class="views">{topics_list_box.row.topic.table_sticky.L_VIEWS}</dd>
              <dd class="ultimosass"><span>{topics_list_box.row.topic.table_sticky.L_LASTPOST}</span></dd>
            </dl>
        </li>
      </ul>
      <ul class="topiclist topics bg_none">
  <!-- END table_sticky -->

      <li class="fa-topiclist-row rowtpc {topics_list_box.row.ROW_ALT_CLASS}" {topics_list_box.row.ICON}>
        <dl class="icon" style="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');">
            <dd class="listtopic" title="{topicrow.TOPIC_FOLDER_IMG_ALT}">
              <!-- 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 -->
              {topics_list_box.row.NEWEST_POST_IMG}
              {topics_list_box.row.PARTICIPATE_POST_IMG}&nbsp;
              {topics_list_box.row.TOPIC_TYPE}
              <div class="topic-title-container"><h2 class="topic-title hierarchy"><a class="titulotpc" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2></div>
              <!-- BEGIN switch_description -->
              <br />
              {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
              <!-- END switch_description -->
              <br />
              {topics_list_box.row.GOTO_PAGE_NEW}
              <span class="span-tab">{topics_list_box.row.L_BY} <strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span>
              <!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE_NEW}<!-- END nav_tree -->
            </dd>
            <dd class="ultimosass">

                    <!-- BEGIN avatar -->
                    <span class="ultimosass-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
                    <div style="float:left;">
                    <!-- END avatar -->

              <dfn>{L_LASTPOST}</dfn>
              {topics_list_box.row.LAST_POST_TIME}{topics_list_box.row.LAST_POST_IMG}

                    <!-- BEGIN avatar -->
                    </div>
                    <!-- END avatar -->
            </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>
  <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

o/

Olá, de fato o ícone ficou bem melhor! Mas surgiu um efeito um pouco estranho, acredito que uma interação com o efeito hover dos tópicos.

Coloque o mouse sobre o campo que você vai entender o que quero dizer. http://pokemonillium.forumeiros.com/f28-regiao-off


@EDIT
O fundo esverdeado do botão resolvido também não esta a funcionar. Talvez devido ao template personalizado que o fórum possui?

Na sua Folha de Estilos, procure por:

Código:

li.rowtpc:hover {

Remova todo os estilos deste grupo:

Código:

li.rowtpc:hover {
  transition: 0.8s;
  background: linear-gradient(to right, #47868d , #dadada);
  background: linear-gradient(to right, rgba(70,133,140,0.6), rgba(0, 0, 0, 0));
}

Para os backgrounds, peço que o senhor crie um novo tópico para manter a organização. o/

o/

Certo.

Caso eu deseje futuramente adicionar um terceiro botão além de resolvido e em curso, há algo específico a se acrescentar ao JS, ou terei que fazer uma nova solicitação?

No código JS há este array de configuração:

Código:

var config = [
  { name: 'Em Curso', id  : 1, background: '#ecb942' },
  { name: 'Resolvido', id  : 2, background: '#8b5' },
];

Basta mudar aí.

Obrigado, resolvido

O topico referente ao background se encontra aqui https://ajuda.forumeiros.com/t110286-background-de-resolvido-e-em-curso