Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
Luiz
 
7kgmlcdkv
 
iScroll
 
Matt Shultz
 
Harleen
 
Ketholy123
 
T1ag0
 
zHugh
 
PlayWillian
 
ranzatti
 

Quem está conectado
277 usuários online :: 3 usuários cadastrados, Nenhum Invisível e 274 Visitantes :: 2 Motores de busca

7kgmlcdkv, soldado, uvmyyvpew

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Como mudar os ícones de tópicos por HTML

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Como mudar os ícones de tópicos por HTML

Mensagem por Luiz em 07/11/16, 03:37 pm

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
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5091
Pontos Ativos : 5909

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Como mudar os ícones de tópicos por HTML

Mensagem por Kyo Panda em 07/11/16, 03:59 pm

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.

^-^



Bem-vindo ao Fórum dos Fóruns!
Leia as Regras do Fórum dos Fóruns. Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4490
Pontos Ativos : 5785

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Como mudar os ícones de tópicos por HTML

Mensagem por Luiz em 07/11/16, 04:03 pm

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


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5091
Pontos Ativos : 5909

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Como mudar os ícones de tópicos por HTML

Mensagem por Kyo Panda em 07/11/16, 04:18 pm

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?


Bem-vindo ao Fórum dos Fóruns!
Leia as Regras do Fórum dos Fóruns. Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4490
Pontos Ativos : 5785

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Como mudar os ícones de tópicos por HTML

Mensagem por Luiz em 07/11/16, 04:26 pm

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

Daria muito trabalho isso aqui, certo?


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5091
Pontos Ativos : 5909

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Como mudar os ícones de tópicos por HTML

Mensagem por Kyo Panda em 07/11/16, 10:29 pm

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

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4490
Pontos Ativos : 5785

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Como mudar os ícones de tópicos por HTML

Mensagem por Luiz em 09/11/16, 05:23 pm

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


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5091
Pontos Ativos : 5909

Ver perfil do usuário https://github.com/lffg/
  • 0

Resolvido Re: Como mudar os ícones de tópicos por HTML

Mensagem por Kyo Panda em 09/11/16, 11:56 pm

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

^-^
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4490
Pontos Ativos : 5785

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Como mudar os ícones de tópicos por HTML

Mensagem por Luiz em 10/11/16, 07:28 am

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
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5091
Pontos Ativos : 5909

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Como mudar os ícones de tópicos por HTML

Mensagem por Kyo Panda em 10/11/16, 04:04 pm

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


Bem-vindo ao Fórum dos Fóruns!
Leia as Regras do Fórum dos Fóruns. Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4490
Pontos Ativos : 5785

Ver perfil do usuário http://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum