por Convidado 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) Instalação do código JavaScriptAs 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 Módulos HTML e Javascript Gestão dos códigos Javascript Criar um novo javascript |
| 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. |
| Tìtulo - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum. |
| 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. |
| 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 CSSCSS 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 Visualização Imagens e Cores Cores Folha de estilo CSS |
| Salvar CSS- Salva todo o CSS em arquivo TXT em seu computador. Em outras palavras, permite criar um backup de seu CSS personalizado. |
| 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". |
| 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. |
| 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.
|
|