Como mudar os ícones de tópicos por HTML

2 participantes

Ir para baixo

Tópico resolvido Como mudar os ícones de tópicos por HTML

Mensagem por Luiz 07.11.16 17:37

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á. Contente
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como mudar os ícones de tópicos por HTML

Mensagem por Kyo Panda 07.11.16 17:59

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.

^-^

Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como mudar os ícones de tópicos por HTML

Mensagem por Luiz 07.11.16 18:03

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
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como mudar os ícones de tópicos por HTML

Mensagem por Kyo Panda 07.11.16 18:18

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?
Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como mudar os ícones de tópicos por HTML

Mensagem por Luiz 07.11.16 18:26

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

Daria muito trabalho isso aqui, certo?
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como mudar os ícones de tópicos por HTML

Mensagem por Kyo Panda 08.11.16 0:29

Para falar a verdade, não. Muito feliz

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.
Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como mudar os ícones de tópicos por HTML

Mensagem por Luiz 09.11.16 19:23

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. Feliz
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como mudar os ícones de tópicos por HTML

Mensagem por Kyo Panda 10.11.16 1:56

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).

^-^
Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como mudar os ícones de tópicos por HTML

Mensagem por Luiz 10.11.16 9:28

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 Muito feliz  Rindo
Panda, você é demais, parabéns! Feliz aniversário
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como mudar os ícones de tópicos por HTML

Mensagem por Kyo Panda 10.11.16 18:04

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos