[TUTORIAL] Limitar o número de imagens na assinatura

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

[TUTORIAL] Limitar o número de imagens na assinatura Empty [TUTORIAL] Limitar o número de imagens na assinatura

Mensagem por Roger123 em 14.07.19 15:34

Limitar o número de imagens na assinatura
Com este tutorial aprenderemos a especificar um limite de imagens em assinaturas.

Limitar o número de imagens na assinatura


Tutoriais, dicas & astúcias

Resultado após a aplicação dos passos abaixo

(carregue na imagem para aumentar)
[TUTORIAL] Limitar o número de imagens na assinatura 0Rl272Z

Instalação do código JavaScript

As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.
Painel de Controle Seta Módulos Seta HTML e Javascript Seta Gestão dos códigos Javascript Seta Criar um novo javascript
[TUTORIAL] Limitar o número de imagens na assinatura Javaac10
[TUTORIAL] Limitar o número de imagens na assinatura 110111Seta Habilitar o gerenciamento dos códigos Javascript - Permite ativar os scripts personalizados criados pelo administrador no fórum. Este recurso não tem qualquer impacto nos scripts nativos do fórum.
[TUTORIAL] Limitar o número de imagens na assinatura 110210Seta Tìtulo - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.
[TUTORIAL] Limitar o número de imagens na assinatura 110310Seta Investimento - Define o local em específico que este script será executado. Você pode investir o script para vários locais no fórum (Todas as páginas) ou pode definir para certos locais disponíveis na tela de investimento. Neste caso, em todas as páginas.
[TUTORIAL] Limitar o número de imagens na assinatura 110410Seta Código Javascript - Espaço destinado a receber o script que será ativado pelo administrador. Antes de aplicar o script ao fórum, é importante revisá-lo para ter certeza de seu funcionamento.
Código:
// ZONA EDITABLE
const NUM_MAX_IMAGENES = 3;
const TEXTO_ERROR = 'Você ultrapassou o limite delimitado de imagens nas assimaturas. Limite:';
// FIN ZONA EDITABLE
 
if (encontrarParametroGET('mode') === 'editprofile' && encontrarParametroGET('page_profil') === 'signature') {
  document.addEventListener('DOMContentLoaded', function() {
    document.getElementsByName('submit')[0].addEventListener('click', function(e) {
      var textoFirma = $('#text_editor_textarea').sceditor('instance').val();
      if (numeroImagenes(textoFirma) > NUM_MAX_IMAGENES) {
        e.preventDefault();
        if (!document.getElementById('error_max_images')) {
          var divError = document.createElement('div');
          divError.id = 'error_max_images';
          divError.innerHTML = TEXTO_ERROR + ' <strong>' + NUM_MAX_IMAGENES + '</strong>';
          var post = document.getElementById('message-box') ? document.getElementById('message-box') : document.getElementsByClassName('sceditor-container')[0];
          post.prepend(divError);
        }
      }
    });
  });
}
 
function encontrarParametroGET(nombreParametro) {
    var resultado = null,
        tmp = [];
    var items = location.search.substr(1).split('&');
    for (var index = 0; index < items.length; index++) {
        tmp = items[index].split('=');
        if (tmp[0] === nombreParametro) resultado = decodeURIComponent(tmp[1]);
    }
    return resultado;
}
 
function numeroImagenes(texto) {
  return texto.split('[img]').length-1;
}
Aqui você só precisa de editar as constantes NUM_MAX_IMAGENES com o número de imagens permitidas e TEXTO_ERROR com texto que aparecerá na mensagem de erro (não deve colocar o número de imagens permitidos porque o script faz isso automaticamente).

Instalação do código CSS

CSS na verdade significa "Cascading Style Sheets", sua principal função é personalizar um determinado conteúdo exibido, em um determinado lugar na página. Cada versão de fórum (phpbb2. phpbb3, punbb e invision) possuem uma classe diferente, e nessas classes podem ser adicionadas as “propriedades”. Caso queira conhecer alguns tipos de classes, poderá consultar mais informações no seguinte: Elaborar um código CSS
Painel de controle Seta Visualização Seta Imagens e Cores Seta Cores Seta Folha de estilo CSS
[TUTORIAL] Limitar o número de imagens na assinatura Stylea10
[TUTORIAL] Limitar o número de imagens na assinatura 110111Seta Salvar CSS- Salva todo o CSS em arquivo TXT em seu computador. Em outras palavras, permite criar um backup de seu CSS personalizado.
[TUTORIAL] Limitar o número de imagens na assinatura 110210Seta Forçar CSS base do fórum - Força o CSS padrão da versão de seu fórum, ignorando o CSS personalizado. Caso queira verificar o CSS base d fórum, basta clicar no link "Ver CSS base do fórum".
[TUTORIAL] Limitar o número de imagens na assinatura 110310Seta Desativar o CSS base - Desativa o CSS base da versão de seu fórum, e permite que somente o CSS personalizado do fórum opere em todo o fórum.
[TUTORIAL] Limitar o número de imagens na assinatura 110410Seta Melhorar CSS - Com essa função ativa, a capacidade de carregamento da página é aumentada, facilitando a navegação nas páginas de seu fórum. Mas é importante lembrar que, para que a função funcione normalmente como prometida, você terá que adicionar o código correto na folha de estilo.
Código:
#error_max_images {
  border: 1px solid #630b0b;
  background-color: #ff0000b3;
  padding: 4px;
  border-radius: 3px;
  color: white;
  width: 79%;
}
Podemos aplicar as regras CSS que queremos ao identificador error_max_images para personalizar o estilo da mensagem de erro.
Roger123

Roger123
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 30/06/2018
Mensagens : 1405
Pontos Ativos : 1696

Ver perfil do usuário https://todosostemas.forumeiros.com

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


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