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.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» Sistema de notificação
Hoje à(s) 01:25 pm por Marcelo22m2

» Perfil de usuário no tópicos
Hoje à(s) 01:24 pm por Harleen

» Contador de tópicos/mensagens no Sub-Fórum/Fórum
Hoje à(s) 12:54 pm por Kyo Panda

» Edição do cabeçalho no Modernbb
Hoje à(s) 12:41 pm por Harleen

» O tópico ou mensagem que você está procurando não existe
Hoje à(s) 12:26 pm por paulim78

» Efeito hover perfil
Hoje à(s) 09:26 am por Kyo Panda

» Ajuda com o HTML
Hoje à(s) 03:39 am por Taxy_InSaniTy

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Harleen
 
Luiz
 
Marcelo22m2
 
Kyo Panda
 
paulim78
 
APOllO
 
Shek
 
Lincoln
 
>.< T-T =3
 
b@nzé
 

Quem está conectado
300 usuários online :: 9 usuários cadastrados, Nenhum Invisível e 291 Visitantes :: 2 Motores de busca

'Dante, APOllO, Appoloz, Connor R., Harleen, Kyo Panda, Marcelo22m2, paulim78, Shek

[ Ver toda a lista ]


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

[TUTORIAL] Emoticons pessoais no fórum

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

[TUTORIAL] Emoticons pessoais no fórum

Mensagem por Cream em 18/10/16, 09:15 am



Emoticons pessoais no fórum

Introdução

Muitas vezes não gostamos dos emoticons disponibilizados por certos fóruns. Este tutorial resolverá o problema, pois ele ensinará como permitir que os membros adicionem e usem os seus próprios emoticons pessoais.


-->Tutoriais, dicas e astúcias <--




Emoticons pessoais


- Criando novo campo do perfil
Primeiramente você deverá criar um novo campo de perfil. Para gerir os perfis deverá aceder a:
Painel de Controle -> Usuários & Grupos -> Usuários -> Perfis

(carregue na imagem para aumentar)
Seta Criar um campo personalizado - Para criar um novo perfil personalizado, deverá carregar no link.

- Definir os valores do novo campo:
Agora devemos compor o nosso campo, veja abaixo como proceder para configurá-la:


Seta Tipo - O que pretendemos no momento é criar uma zona de texto, sendo assim terá de selecionar o campo "zona de texto".
Seta Nome - Aqui você deve definir um nome para a sua nova função. Ex. Emoticons pessoais.
Seta Descrição - Aqui você deve definir uma descrição para o campo, ela será mostrada no perfil do membro.
Seta URL do ícone - Deixe este campo em branco.
Seta Obrigatório o preenchimento? - Aqui você deve definir este campo como "não" pois assim ele não irá ser mostrado no formulário de cadastro.
Seta Visualização - Marque apenas no "Perfil".
Seta Tipo de visualização - Defina que o campo será exibido como "Texto".
Seta Quem pode modificar o valor do seu conteúdo - Aqui você deve definir quem pode modificar este campo, o recomendável é que seja definido para que o próprio usuário possa modificar o campo.
Seta Exibir este campo para visitantes tendo ao menos o status - Defina o nível mínimo que o usuário precisa ter para que o mesmo possa visualizar este campo.
Seta Separador - Escolha o modo como este campo será separado dos outros. Ele poderá ser separado por uma barra, por uma quebra de linha ou pulando uma linha. Lembrando que neste caso você deve escolher "Quebra de linha".
Seta Conteúdo padrão- Deverá preencher este campo com o código que será passado logo abaixo.
SetaLargura máxima - Deverá definir um número máximo de caracteres, que o moderador terá à disposição, assim que colocar um conteúdo no campo de perfil.

Conteúdo padrão:
Código:
[table class="fa_personal_emoticons"][tr][td][/td][/tr][/table]

Após as modificações, salve o campo, volte à editá-lo e no campo "Zona de texto" clique em "Substituir conteúdo". Confirme!


- Adicionando o script no fórum
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 :seta2: Modulos :seta2: HTML & JavaScript :seta2: "Aba" Gestão dos códigos JavaScripts
Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
Seta Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos em todas as paginas.
Seta Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
Seta Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

Código a ser utilizado:
Código:
$(function() {
        'DEVELOPED BY ANGE TUTEUR';
        'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
        'ORIGIN : http://fmdesign.forumotion.com/t1012-user-generated-emoticons#21094';
        if (!window.localStorage) return;
        window.fa_pemoticons_config = {
        hide_field : false, // hide/show field on profile
        position : 'top', // position of personal emoticons ; top or bottom
        // language settings
        lang : {
        title : 'Emoticons pessoais',
        desc : 'Você pode abaixo gerenciar seus emoticons pessoais. Estes emoticons serão exibidos no editor uma vez que você atualizar seu perfil.',
        update : 'Atualizar',
        upload : 'Enviar',
        cancel : 'Cancelar',
        add : 'Adicionar mais',
        delete : 'Deletar',
        up : 'Subir',
        down : 'Descer'
        }
        };
        // load handler for iframes
        // adds custom emoticons once the frame is loaded
        window.fa_pemoticons_load = function() {
        var insertEmoticon = function () {
        $('#text_editor_textarea').sceditor('instance').insert('[img]' + this.src + '[/img] ');
        },
        injectEmoticons = function (emotes, body) {
        if (fa_pemoticons_config.position.toLowerCase() == 'top') {
        body.insertBefore(emotes, body.firstChild.nextSibling);
        } else {
        body.appendChild(emotes);
        }
        },
        body = $(this).contents().find('body')[0],
        div = $('<div id="fa_personal_emoticon_list" />')[0];
        if (body) {
        if (localStorage['fa_pemoticons_u' + _userdata.user_id]) {
        div.innerHTML = localStorage['fa_pemoticons_u' + _userdata.user_id];
        for (var a = div.getElementsByTagName('IMG'), i = 0, j = a.length; i < j; i++) {
        a[i].onclick = insertEmoticon;
        }
        injectEmoticons(div, body);
        } else {
        $.get('/u' + _userdata.user_id, function(d) {
        var emoticons = $('.fa_personal_emoticons img', d),
        i = 0,
        j = emoticons.length;
        if (j) {
        for (; i < j; i++) {
        emoticons[i].onclick = insertEmoticon;
        div.appendChild(emoticons[i]);
        div.appendChild(document.createTextNode('\u00A0'));
        }
        }
        localStorage['fa_pemoticons_u' + _userdata.user_id] = div.innerHTML;
        injectEmoticons(div, body);
        });
        }
        }
        };
        // add load handlers for each iframe
        $(function() {
        var button = $('.sceditor-button-emoticon')[0];
        if (button) {
        button.onclick = function() {
        document.getElementById('quickEmojInternal').onload = fa_pemoticons_load;
        this.onclick = null;
        };
        }
        $('iframe[src^="/smilies"]').load(fa_pemoticons_load);
        });
        // hide field in profile
        if (fa_pemoticons_config.hide_field) {
        $('.fa_personal_emoticons').closest('[id^="field_id"]').hide();
        }
        // editing of profile field
        if (/\/profile|\/u\d+/.test(window.location.href)) {
        for (var a = document.getElementsByTagName('TEXTAREA'), i = 0, j = a.length; i < j; i++) {
        if (/class="fa_personal_emoticons"/.test(a[i].value) && /profile_field/.test(a[i].id)) {
        // define global object
        window.fa_pemoticons = {
        // add new input to pemoticons_box
        add : function (value) {
        $('#pemoticons_box', fa_pemoticons.popup).append(
        '<div class="pemoticon_row">'+
        '<img class="pemoticon_preview" src="' + ( value ? value : 'http://illiweb.com/fa/empty.gif' ) + '" />'+
        '<input class="pemoticon_value inputbox" type="text" value="' + ( value ? value : '' ) + '" oninput="fa_pemoticons.preview(this)" />'+
        '<a class="pemoticons_action pemoticons_plus" href="#" onclick="fa_pemoticons.add(); return false;" title="' + fa_pemoticons_config.lang.add + '">+</a>'+
        '<a class="pemoticons_action pemoticons_minus" href="#" onclick="fa_pemoticons.remove(this); return false;" title="' + fa_pemoticons_config.lang.delete + '">-</a>'+
        '<a class="pemoticons_action pemoticons_up" href="#" onclick="fa_pemoticons.moveUp(this); return false;" title="' + fa_pemoticons_config.lang.up + '">▲</a>'+
        '<a class="pemoticons_action pemoticons_down" href="#" onclick="fa_pemoticons.moveDown(this); return false;" title="' + fa_pemoticons_config.lang.down + '">▼</a>'+
        '</div>'
        ).scrollTop(9999);
        },
        // remove input from pemoticons_box
        remove : function (that) {
        that.parentNode.parentNode.removeChild(that.parentNode);
        },
        // move the emoticon up in the list
        moveUp : function (that) {
        var prev = that.parentNode.previousSibling;
        if (prev) {
        prev.parentNode.insertBefore(that.parentNode, prev);
        }
        },
        // move the emoticon down in the list
        moveDown : function (that) {
        var next = that.parentNode.nextSibling,
        nextNext;
        if (next) {
        nextNext = next.nextSibling;
        if (nextNext) {
        next.parentNode.insertBefore(that.parentNode, nextNext);
        } else {
        next.parentNode.appendChild(that.parentNode);
        }
        }
        },
        // update the emoticon preview
        preview : function (that) {
        that.previousSibling.src = that.value ? that.value : 'http://illiweb.com/fa/empty.gif';
        },
        // update textarea with new value
        update : function () {
        var emoticons = $('.pemoticon_value', fa_pemoticons.popup),
        newVal = '[table class="fa_personal_emoticons"][tr][td]',
        i = 0,
        j = emoticons.length;
        for (; i < j; i++) {
        if (emoticons[i].value) {
        newVal += '[img]' + emoticons[i].value + '[/img]';
        }
        }
        fa_pemoticons.textarea.value = newVal + '[/td][/tr][/table]';
        fa_pemoticons.cancel();
        localStorage.removeItem('fa_pemoticons_u' + _userdata.user_id); // clear emoticon cache
        },
        // remove popup
        cancel : function () {
        document.body.style.overflow = '';
        document.body.removeChild(fa_pemoticons.popup);
        fa_pemoticons.popup = null;
        },
        // open servimg upload
        upload : function () {
        var win = window.open('http://www.servimg.com/', '_blank', 'width=620,height=300');
        $.get('/privmsg?mode=post', function(d) {
        var email = d.match(/var servImgAccount = '(.*?)';/i),
        id = d.match(/var servImgId = '(.*?)';/i),
        f = d.match(/var servImgF = '(.*?)';/i);
        if (email && id && f && email[1] && id[1] && f[1]) {
        win.location.href = 'http://www.servimg.com/multiupload.php?&mode=fae&account=' + email[1] + '&id=' + id[1] + '&f=' + f[1];
        }
        });
        },
        popup : null,
        textarea : null
        };
        // assign handler to textarea to show popup
        a[i].onfocus = function() {
        this.blur();
        if (fa_pemoticons.popup) {
        fa_pemoticons.cancel();
        }
        var popup = $(
        '<div id="pemoticons_overlay">'+
        '<div id="pemoticons_modal">'+
        '<h1>' + fa_pemoticons_config.lang.title + '</h1>'+
        '<p>' + fa_pemoticons_config.lang.desc + '</p>'+
        '<div id="pemoticons_box"></div>'+
        '<div style="text-align:center;">'+
        '<input type="button" class="button1" value="' + fa_pemoticons_config.lang.update + '" onclick="fa_pemoticons.update();" />'+
        '&nbsp;'+
        '<input type="button" class="button1" value="' + fa_pemoticons_config.lang.upload + '" onclick="fa_pemoticons.upload();" />'+
        '&nbsp;'+
        '<input type="button" class="button1" value="' + fa_pemoticons_config.lang.cancel + '" onclick="fa_pemoticons.cancel();" />'+
        '</div>'+
        '</div>'+
        '</div>'
        )[0],
        emoticons = this.value.match(/\[img\].*?\[\/img\]/gmi),
        i = 0,
        j = emoticons ? emoticons.length : 0;
        fa_pemoticons.popup = popup;
        fa_pemoticons.textarea = this;
        if (j) {
        for (; i < j; i++) {
        fa_pemoticons.add(emoticons[i].replace(/^\[img\]|\[\/img\]$/ig, ''));
        }
        } else {
        fa_pemoticons.add();
        }
        document.body.style.overflow = 'hidden';
        document.body.appendChild(popup);
        };
        // add modal styles to the document
        $('head').append(
        '<style type="text/css">'+
        '#pemoticons_overlay { font-family:arial; background:rgba(0, 0, 0, 0.5); position:fixed; top:0; right:0; bottom:0; left:0; z-index:99999; }'+
        '#pemoticons_modal { background:#EEE; width:290px; height:300px; border:1px solid #CCC; position:absolute; top:50%; margin-top:-150px; left:50%; margin-left:-145px; overflow:auto; }'+
        '#pemoticons_box { height:150px; text-align:center; margin:3px; overflow:auto; }'+
        '#pemoticons_modal p { font-size:12px; margin:0; }'+
        '#pemoticons_modal h1 { font-size:24px; margin:0; }'+
        '#pemoticons_modal h1, #pemoticons_modal p, #pemoticons_modal div { padding:3px; }'+
        'a.pemoticons_action { background:#69C; font-size:20px; color:#FFF; text-align:center; text-decoration:none; display:inline-block; height:16px; width:16px; line-height:16px; vertical-align:middle; margin:1px; border-radius:100%; }'+
        'a.pemoticons_up, a.pemoticons_down { font-size:10px; }'+
        'a.pemoticons_down { line-height:18px; }'+
        'a.pemoticons_minus { line-height:13px; }'+
        'a.pemoticons_action:hover { opacity:0.7 }'+
        'img.pemoticon_preview { width:20px; max-height:30px; vertical-align:middle; }'+
        'input.pemoticon_value { margin:0 3px; width:130px; }'+
        '</style>'
        );
        break;
        }
        }
        }
        });

- Gerenciar a ferramenta


(Para visualizar a ferramenta você deve ir no seu perfil e clicar para modificar o campo)

Seta Adicionar Neste campo você deve colocar o link dos seu emoticons, podendo alterná-los ou adicionar quantos quiser com os botões auxiliares à direita.
Seta Atualizar Assim que adicionado os emoticons no campo 1, você só precisa atualizar e salvar o campo.
Seta Enviar Aqui você pode dar upload na sua imagem através do servidor de hospedagem do fórum.
Seta Cancelar Caso deseje cancelar o processo, é só clicar neste botão.

- Resultado






© Fórum dos Fóruns & Ange Tuteur


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Emoticons pessoais no fórum
avatar

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11637

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