Icones de moderação da ModernBB

Detalhes da questão

Endereço do fórum: http://www.brasilplayultimate.com.br
Versão do fórum: PunBB

Descrição

Olá, esses são meus atuais icones do fórum: http://prnt.sc/f7duej
Gostaria de substitui-los por esses: http://prnt.sc/f7e380
Com o mesmo efeito hovers deles.
Seria possível ?

Precisaremos do template index_body.

o/

Código:

<div class="pun-crumbs">
  <p class="crumbs"><a href="{U_INDEX}"><span>{L_INDEX}</span></a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
  <!-- BEGIN tablehead -->
      <div class="main-content">
        <table cellspacing="0" class="table">
            <thead class="fa-custom-table-head">
              <tr class="main-head">
                  <th class="tcl">
              <div class="page-title">{catrow.tablehead.L_FORUM}</div>
            </th>
        <th class="col_c_stats">
            <i class="ion-android-list" data-tooltip="Tópicos"></i>
        </th>
                  <th class="col_c_stats">
              <i class="ion-android-chat" data-tooltip="Respostas"></i>
              </th>
                  <th class="tcr">
              <i class="ion-android-time" data-tooltip="{L_LASTPOST}"></i>
              <i class="ion-android-add-circle hidden" data-tooltip="Expandir"></i>
              <i class="ion-android-remove-circle" data-tooltip="Esconder"></i>
              </th>
              </tr>
            </thead>
            <tbody class="statused">
  <!-- END tablehead -->
 
  <!-- BEGIN forumrow -->
              <tr>
                  <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: -1px {catrow.forumrow.INC_LEVEL_LEFT};">
                    <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </span>
                    <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle" style="padding-left: 0px">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                    <br />
                    {catrow.forumrow.FORUM_DESC}
                    <!-- BEGIN switch_moderators_links -->
                    <br />
                    {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                    <!-- END switch_moderators_links -->
                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                    <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                  </td>
                  <td class="col_c_stats">{catrow.forumrow.TOPICS}</td>
              <td class="col_c_stats">{catrow.forumrow.POSTS}</td>
                  <td class="tcr">
                            <!-- BEGIN ads -->
                    <span class="AD_LastPA">
                                <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                                <span class="AD_LastInfos">
                                    <b><a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a></b><br />
                                    {catrow.forumrow.ads.DATE}<br />
                                    {catrow.forumrow.ads.LOCATION}
                                </span>
                    </span>
                            <!-- END ads -->
                            <!-- BEGIN avatar -->
                      <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                            <!-- END avatar -->
 
                    <span>
                    <!-- BEGIN switch_topic_title -->
                    <a href="{catrow.forumrow.U_LATEST_TOPIC}" class="my-tooltip" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                    <!-- END switch_topic_title -->
                    {catrow.forumrow.USER_LAST_POST}
                    </span>
                  </td>
              </tr>
  <!-- END forumrow -->
 
  <!-- BEGIN tablefoot -->
            </tbody>
        </table>
      </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 -->
<style>table > thead {display: none;}</style>

--------
Edit:

erro meu, os ícones seriam estes: http://prntscr.com/f7er0n
Teria como editar?

Na verdade, nem é necessário editar o HTML, basta criar um Javascript para poupar nosso trabalho.

Enfim, crie um novo JS com investimento em todas as páginas, contendo:

Código:

(function ($) {
  'use strict';

  var global = [
    // Multi citar. (Não é possível ser feito):
    {
      imgSrc: 'http://i.imgur.com/yzqmqu6.png',
      replace: '',
    },
    // Multi marcado. (Não é possível ser feito):
    {
      imgSrc: 'http://i.imgur.com/yzqmqu6.png',
      replace: '',
    },
    {
      imgSrc: 'https://i55.servimg.com/u/f55/17/96/03/52/citar10.png',
      replace: [
        '<span class="mod-btn">',
        '  <i class="fa fa-quote-left"></i>',
        '</span>',
      ].join('\n'),
    },
  ];

  var styles = [
    'span.mod-btn {',
    '  padding: 6px;',
    '  background-color: #2ea3f2;',
    '  color: #fff;',
    '  border-radius: 5px;',
    '  display: inline-block;',
    '  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);',
    '  transition: all ease 200ms;',
    '}',
    '',
    'span.mod-btn:hover {',
    '  background-color: #444;',
    '}',
  ].join('\n');

  $(function () {
    $.each(global, function (index, global) {
      $('img[src="' + global.imgSrc + '"]')
        .replaceWith(global.replace)
      ;
    });

    $('<style>', {
      type: 'text/css',
      text: styles,
    }).appendTo('head');
  });
}(jQuery));

Nessa parte do código acima, temos a configuração:

Código:

var global = [
  // Multi citar. (Não é possível ser feito):
  {
    imgSrc: 'http://i.imgur.com/yzqmqu6.png',
    replace: '',
  },
  // Multi marcado. (Não é possível ser feito):
  {
    imgSrc: 'http://i.imgur.com/yzqmqu6.png',
    replace: '',
  },
  {
    imgSrc: 'https://i55.servimg.com/u/f55/17/96/03/52/citar10.png',
    replace: [
      '<span class="mod-btn">',
      '  <i class="fa fa-quote-left"></i>',
      '</span>',
    ].join('\n'),
  },
];

Você pode editar o HTML da imagem que será recolocada.

o/

http://prntscr.com/f7eupk
Certo, perfeito, mas de qualquer modo creio que terá de editar.
Veja: http://prntscr.com/f7euyf gostaria de passar para esse topo, entende ?

A versão de seu fórum não ajuda muito para essa questão, veja:
-> http://prntscr.com/f7f6es

Os ícones foram feitos para ficarem em baixo, além do que, caso "jogássemos" os mesmos para a cabeça de postagem, teríamos que praticamente recriá-la, o que acabaria por gerar um enorme trabalho, assim como deu quando fizemos ela, lembra?
Veja à que me refiro:
-> http://prntscr.com/f7f6es

o/

Ok, acho que vou aguardar um tempo até o código sair, ok ?
Se não houver como fazer por favor me avise, se for demorar não há problema algum.

É possível, mas uma enorme quantidade de bugs poderiam aparecer.
Eu recomendo que deixe como está.
Não irei lhe ajudar nisto, sabendo na quantidade de bugs que poderão surgir. o/

Certo, e se fosse com essa parte? http://prnt.sc/f7duej
Daria a mesma coisa ?

No caso, basta você pegar a URL de cada imagem em questão, e definir o conteúdo a ser recolocado.
O código pode ser usado para qualquer imagem do fórum.

o/

Luiz~ escreveu:No caso, basta você pegar a URL de cada imagem em questão, e definir o conteúdo a ser recolocado.
O código pode ser usado para qualquer imagem do fórum.

o/

Acho que não entendeu, estou falando da possibilidade de passar eles para cima.

Passar para cima das postagens? (Colocá-los no posthead?)
Acho inviável também, visto que tais botões são para a moderação do tópico, e não para cada mensagem, entende?

o/

Certo, para finalizarmos de vez, veja:

Código:

(function ($) {
  'use strict';
 
  var global = [
    // Multi citar. (Não é possível ser feito):
    {
      imgSrc: 'http://i.imgur.com/yzqmqu6.png',
      replace: '',
    },
    // Multi marcado. (Não é possível ser feito):
    {
      imgSrc: 'http://i.imgur.com/yzqmqu6.png',
      replace: '',
    },
    {
            imgSrc: 'https://i55.servimg.com/u/f55/17/96/03/52/editar10.png',
      replace: [
        '<span class="mod-btn">',
        '  <i class="fa fa-pencil"></i>',
        '</span>',
        },
    {
      imgSrc: 'https://i55.servimg.com/u/f55/17/96/03/52/citar10.png',
      replace: [
        '<span class="mod-btn">',
        '  <i class="fa fa-quote-left"></i>',
        '</span>',
      ].join('\n'),
    },
  ];
 
  var styles = [
    'span.mod-btn {',
    '  padding: 6px;',
    '  background-color: #2ea3f2;',
    '  color: #fff;',
    '  border-radius: 5px;',
    '  display: inline-block;',
    '  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);',
    '  transition: all ease 200ms;',
    '}',
    '',
    'span.mod-btn:hover {',
    '  background-color: #444;',
    '}',
  ].join('\n');
 
  $(function () {
    $.each(global, function (index, global) {
      $('img[src="' + global.imgSrc + '"]')
        .replaceWith(global.replace)
      ;
    });
 
    $('<style>', {
      type: 'text/css',
      text: styles,
    }).appendTo('head');
  });
}(jQuery));

Fiz desta forma e não funcionou, algo de errado ?

Sim, você esqueceu de fechar a array.
Troque por:

Código:

(function ($) {
  'use strict';
 
  var global = [
    // Multi citar. (Não é possível ser feito):
    {
      imgSrc: 'http://i.imgur.com/yzqmqu6.png',
      replace: '',
    },
    // Multi marcado. (Não é possível ser feito):
    {
      imgSrc: 'http://i.imgur.com/yzqmqu6.png',
      replace: '',
    },
    {
            imgSrc: 'https://i55.servimg.com/u/f55/17/96/03/52/editar10.png',
      replace: [
        '<span class="mod-btn">',
        '  <i class="fa fa-pencil"></i>',
        '</span>',
        ].join('\n'),
        },
    {
      imgSrc: 'https://i55.servimg.com/u/f55/17/96/03/52/citar10.png',
      replace: [
        '<span class="mod-btn">',
        '  <i class="fa fa-quote-left"></i>',
        '</span>',
      ].join('\n'),
    },
  ];
 
  var styles = [
    'span.mod-btn {',
    '  padding: 6px;',
    '  background-color: #2ea3f2;',
    '  color: #fff;',
    '  border-radius: 5px;',
    '  display: inline-block;',
    '  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);',
    '  transition: all ease 200ms;',
    '}',
    '',
    'span.mod-btn:hover {',
    '  background-color: #444;',
    '}',
  ].join('\n');
 
  $(function () {
    $.each(global, function (index, global) {
      $('img[src="' + global.imgSrc + '"]')
        .replaceWith(global.replace)
      ;
    });
 
    $('<style>', {
      type: 'text/css',
      text: styles,
    }).appendTo('head');
  });
}(jQuery));

Tip:
Se você quiser deixar o replace sem utilizar uma array, basta usar:

Código:

replace: 'HTML AQUI',

o/

Código:

(function ($) {
  'use strict';
 
  var global = [
    // Multi citar. (Não é possível ser feito):
    {
      imgSrc: 'http://i.imgur.com/yzqmqu6.png',
      replace: '',
    },
    // Multi marcado. (Não é possível ser feito):
    {
      imgSrc: 'http://i.imgur.com/yzqmqu6.png',
      replace: '',
    },
    {
            imgSrc: 'https://i55.servimg.com/u/f55/17/96/03/52/editar10.png',
      replace: [
        '<span class="mod-btn">',
        '  <i class="fa fa-pencil"></i> Editar',
        '</span>',
        ].join('\n'),
        },
        },
            {
            imgSrc: 'https://i55.servimg.com/u/f55/17/96/03/52/exclui10.png',
      replace: [
        '<span class="mod-btn">',
        '  <i class="fa fa-trash"></i> Exluir',
        '</span>',
        ].join('\n'),
        },
    {
      imgSrc: 'https://i55.servimg.com/u/f55/17/96/03/52/citar10.png',
      replace: [
        '<span class="mod-btn">',
        '  <i class="fa fa-quote-left"></i> Citar',
        '</span>',
      ].join('\n'),
    },
  ];
 
  var styles = [
    'span.mod-btn {',
    '  padding: 6px;',
    '  background-color: #2ea3f2;',
    '  color: #fff;',
    '  border-radius: 5px;',
    '  display: inline-block;',
    '  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);',
    '  transition: all ease 200ms;',
    '}',
    '',
    'span.mod-btn:hover {',
    '  background-color: #444;',
    '}',
  ].join('\n');
 
  $(function () {
    $.each(global, function (index, global) {
      $('img[src="' + global.imgSrc + '"]')
        .replaceWith(global.replace)
      ;
    });
 
    $('<style>', {
      type: 'text/css',
      text: styles,
    }).appendTo('head');
  });
}(jQuery));

Ainda não entendi, pode me explicar melhor ?

Troque por:

Código:

(function ($) {
  'use strict';
 
  var global = [
    // Multi citar. (Não é possível ser feito):
    {
      imgSrc: 'http://i.imgur.com/yzqmqu6.png',
      replace: '',
    },
    // Multi marcado. (Não é possível ser feito):
    {
      imgSrc: 'http://i.imgur.com/yzqmqu6.png',
      replace: '',
    },
    {
            imgSrc: 'https://i55.servimg.com/u/f55/17/96/03/52/editar10.png',
      replace: [
        '<span class="mod-btn">',
        '  <i class="fa fa-pencil"></i> Editar',
        '</span>',
        ].join('\n'),
        },
            {
            imgSrc: 'https://i55.servimg.com/u/f55/17/96/03/52/exclui10.png',
      replace: [
        '<span class="mod-btn">',
        '  <i class="fa fa-trash"></i> Exluir',
        '</span>',
        ].join('\n'),
        },
    {
      imgSrc: 'https://i55.servimg.com/u/f55/17/96/03/52/citar10.png',
      replace: [
        '<span class="mod-btn">',
        '  <i class="fa fa-quote-left"></i> Citar',
        '</span>',
      ].join('\n'),
    },
  ];
 
  var styles = [
    'span.mod-btn {',
    '  padding: 6px;',
    '  background-color: #2ea3f2;',
    '  color: #fff;',
    '  border-radius: 5px;',
    '  display: inline-block;',
    '  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);',
    '  transition: all ease 200ms;',
    '}',
    '',
    'span.mod-btn:hover {',
    '  background-color: #444;',
    '}',
  ].join('\n');
 
  $(function () {
    $.each(global, function (index, global) {
      $('img[src="' + global.imgSrc + '"]')
        .replaceWith(global.replace)
      ;
    });
 
    $('<style>', {
      type: 'text/css',
      text: styles,
    }).appendTo('head');
  });
}(jQuery));

---

Cada grupo de substituição é composto por duas partes:

Código:

    {
      imgSrc: 'https://i55.servimg.com/u/f55/17/96/03/52/citar10.png',
      replace: [
        '<span class="mod-btn">',
        '  <i class="fa fa-quote-left"></i> Citar',
        '</span>',
      ].join('\n'),
    },

Ele começa com uma chave, e termina com uma, seguida duma vírgula, como pode-se notar no exemplo acima.
Se você quiser simplificar, o código acima é o mesmo de:

Código:

    {
      imgSrc: 'https://i55.servimg.com/u/f55/17/96/03/52/citar10.png',
      replace: '<span class="mod-btn"><i class="fa fa-quote-left"></i> Citar</span>',
    },

Nesse caso, só tiramos o array.
Fica mais fácil de entender para mim com o array, mas para você pode ser que não.

Use o jeito que preferir! o/

Aew, valeu. Obrigado.