Como mudar os ícones de tópicos por HTML

Detalhes da questão

Endereço do fórum: oficialrhc.forumeiros.com
Versão do fórum: PhpBB3

Descrição

Olá, pessoas.

Gostaria de saber como editar os ícones de tópicos por HTML.
*Quando me refiro aos ícones de tópicos são como, por exemplo aqui no FDF, "Resolvido", "Em Curso", dentre outros.

Assim, gostaria de alterar a imagem, tanto nas mensagens quanto nos tópicos por HTML.

Obrigado desde já.

Olá,

Esses ícones podem ser alterados pelo painel administrativo do fórum, pelas orientações desse tópico.

Mas se o desejo é mudar diretamente o HTML, você estaria procurando pelo template topics_list_box:

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}() {
         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}() {
         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="main-head">
      <!-- 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 -->
      <h1 class="page-title">{topics_list_box.row.L_TITLE} [{topics_list_box.row.COUNT_TOTAL_TOPICS}]</h1>
   </div>
   <div class="main-content">
   <table cellspacing="0" class="table">
      <thead>
         <tr>
            <th class="tcl">{L_TOPICS}</th>
            <th class="tc2">{topics_list_box.row.L_REPLIES}</th>
            <th class="tc3">{topics_list_box.row.L_VIEWS}</th>
            <th class="tcr">{topics_list_box.row.L_LASTPOST}</th>
         </tr>
      </thead>
      <tbody class="statused">
<!-- END header_table -->

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

<!-- BEGIN topic -->
   <!-- BEGIN table_sticky -->
      </tbody>
   </table>
   </div>

   <div class="main-head">
      <!-- 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 -->
      <h2>{topics_list_box.row.topic.table_sticky.L_TITLE} [{topics_list_box.row.topic.table_sticky.COUNT_TOTAL_TOPICS}]</h2>
   </div>
   <div class="main-content">
   <table cellspacing="0" class="table">
      <thead>
         <tr>
            <th class="tcl">{L_TOPICS}</th>
            <th class="tc2">{topics_list_box.row.topic.table_sticky.L_REPLIES}</th>
            <th class="tc3">{topics_list_box.row.topic.table_sticky.L_VIEWS}</th>
            <th class="tcr">{topics_list_box.row.topic.table_sticky.L_LASTPOST}</th>
         </tr>
      </thead>
      <tbody class="statused">
   <!-- END table_sticky -->
      <tr>
         <td class="tcl tdtopics <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
            <span class="status">
               <img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
            </span>
            <!-- BEGIN single_selection -->
            <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />&nbsp;
            <!-- END single_selection -->
            {topics_list_box.row.ICON}&nbsp;
            {topics_list_box.row.NEWEST_POST_IMG}
            {topics_list_box.row.PARTICIPATE_POST_IMG}&nbsp;
            {topics_list_box.row.TOPIC_TYPE}&nbsp;
            <h2 class="topic-title"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2>&nbsp;
            {topics_list_box.row.GOTO_OPEN} {topics_list_box.row.GOTO_PAGE_NEW} {topics_list_box.row.GOTO_CLOSE}&nbsp;
            {topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR}
            <!-- BEGIN switch_description -->
            <br />
            &nbsp;{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
            <!-- END switch_description -->
         </td>
         <td class="tc2 <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">{topics_list_box.row.REPLIES}</td>
         <td class="tc3 <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">{topics_list_box.row.VIEWS}</td>
         <td class="tcr <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
                <!-- BEGIN avatar -->
                <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
                <!-- END avatar -->

                {topics_list_box.row.LAST_POST_TIME} {topics_list_box.row.L_BY} {topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}
            </td>
         <!-- BEGIN multi_selection -->
         <td><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} /></td>
         <!-- END multi_selection -->
      </tr>
<!-- END topic -->
<!-- BEGIN no_topics -->
<tr>
   <td class="tcl" colspan="4"><strong>{topics_list_box.row.L_NO_TOPICS}</strong></td>
</tr>
<!-- END no_topics -->

<!-- BEGIN bottom -->
      </tbody>
   </table>
   </div>
   <div class="main-foot clearfix">
      <!-- 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 -->
      <p class="h2">{L_TOPICS} [{topics_list_box.row.bottom.COUNT_TOTAL_TOPICS}]</p>
      <p class="options">
         <a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a>&nbsp;{S_WATCH_FORUM}&nbsp;<a href="#top">{L_BACK_TO_TOP}</a>
      </p>
   </div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

Mais especificamente por:

Código:

{topics_list_box.row.ICON}

Que controla o ícone definido no painel administrativo.

A partir daí é controle total do que será exibido.

^-^

Entendi.

Mas quando você vai selecionar uma imagem, para defini-la como o ícone daquele tópico (quando vai responder uma mensagem), aparece as imagens.

Quero trocá-las por, por exemplo:

IMPORTANTE: Um texto com fonte branca, padding de 5px, etc etc etc.
E vários outros.

Aí eles substituiriam as imagens...

Deu pra entender? :s

Isso passa um pouco das possibilidades do HTML, pois não há como fazer uma condicional quanto ao ícone do tópico. Mas poderíamos fazer algumas alterações por Javascript. O senhor tem algum exemplo de ícone de tópico que gostaria de trocar por um HTML?

Seria mais conveniente eu pedir lá nas criações gráficas. e.e

Daria muito trabalho isso aqui, certo?

Para falar a verdade, não.

Um exemplo, seria:

• Criamos um ícone com o nome Forumonster.
  
• O código seria:
  

  Código:

  ; (function ($) {
    'use strict';

    $(function () {
        $('img[alt="Forumonster"]').replaceWith('<div class="forumonster">Conteúdo</div>');
    });
}) (jQuery);

  
  Ele trocaria as imagens pelo HTML <div class="forumonster">Conteúdo</div> e daí é alterar a gosto.

Olá.
Desculpe a demora. ^-^

Bom, funcionou 50%...
Nas mensagens, o conteúdo foi substutuido, entretanto, nos tópicos (que são a parte mais importante), não.
Ainda continuou. Creio por que é uma imagem de fundo (background-image).
Tem solução?

Ah, eu mudei o fórum. Novo: drmpolicia.forumeiros.com   

Até mais.

Quando existem 2 modos diferentes, nós ficamos com duas soluções: Ou adequamos o Javascript para tratar os dois casos, ou alteramos o HTML para que o Javascript precise tratar apenas de um.

Vamos "sofisticar" o primeiro código:

Código:

; (function ($) {
    'use strict';

    var icons;

    icons = [{
        name: 'Notícia',
        url: 'https://i97.servimg.com/u/f97/19/07/85/16/wc5ik610.png?notc',
        content: '<div class="icon icon-noticia">Conteúdo do ícone de notícia.</div>'
    }, {
        name: 'Ícone 2',
        url: 'https://example.com/icone-2.png',
        content: '<div class="icon icon-icone-2">Conteúdo do ícone 2.</div>'
    }, {
        name: 'Ícone N',
        url: 'https://example.com/icone-n.png',
        content: '<div class="icon icon-icone-n">Conteúdo do ícone N.</div>'
    }];
 
    $(function () {
        $.each(icons, function () {
            // Ícones como imagem
            $('img[alt="' + this.name + '"]').replaceWith(this.content);

            // Ícones como background
            $('.dterm[style="background-image: url(' + this.url + ');"]')
                .attr('style', '')
                .prepend(this.content);
        });
    });
}) (jQuery);

No código acima, nessa parte:

Código:

icons = [{
    name: 'Notícia',
    url: 'https://i97.servimg.com/u/f97/19/07/85/16/wc5ik610.png?notc',
    content: '<div class="icon icon-noticia">Conteúdo do ícone de notícia.</div>'
}, {
    name: 'Ícone 2',
    url: 'https://example.com/icone-2.png',
    content: '<div class="icon icon-icone-2">Conteúdo do ícone 2.</div>'
}, {
    name: 'Ícone N',
    url: 'https://example.com/icone-n.png',
    content: '<div class="icon icon-icone-n">Conteúdo do ícone N.</div>'
}];

Você define os ícones com o nome e URL iguais aos definidos no painel e o conteúdo com os quais eles serão trocados.

Código:

$.each(icons, function () {
    // Ícones como imagem
    $('img[alt="' + this.name + '"]').replaceWith(this.content);

    // Ícones como background
    $('.dterm[style="background-image: url(' + this.url + ');"]')
        .attr('style', '')
        .prepend(this.content);
});

E essa parte do código acima fará o trabalho de tratar os dois casos do ícone (por background e por tag).

^-^

Ei, é para substituir o código acima pelo antigo?
Ou é para adicionar depois do antigo (após a última linha do antigo).

Obrigado desde já. ^-^

---

EDIT:
Aeeeeee funcionouu  
Panda, você é demais, parabéns!