Compartilhe
Ver o tópico anteriorIr em baixoVer o tópico seguinte
avatar
Membro
Mensagens : 548
Pontos : 688
Ver perfil do usuário

[TUTORIAL] Avatar do usuário ao lado da caixa de resposta rápida

em Seg 23 Set - 23:07





Avatar do membro ao lado da caixa de resposta rápida



Através deste tutorial, você vai aprender a colocar o avatar do usuário ao lado da resposta rápida, se estiver ativado.

- Conhecendo o código
Teremos de selecionar um dos códigos JavaScript, abaixo de acordo com a sua versão.

PhpBB2

Code: --------------------------------------------------------------------------------------------Selecionar conteúdo
1
2
3
4
5
6
7
8
9
      jQuery(document).ready(function() {
        $('#quick_reply').before('<div id="av_quickreply"></div>');
          if(typeof(_userdata)!="undefined") {
            $('#av_quickreply').html(_userdata['avatar']);
          }
          else {
            $('#av_quickreply').load('/profile?mode=editprofile&page_profil=avatars #register .forumline .row1 img');
          }
        });
PhpBB3

Code: --------------------------------------------------------------------------------------------Selecionar conteúdo
1
2
3
4
5
6
7
8
9
      jQuery(document).ready(function() {
        $('#textarea_content #text_editor_textarea').before('<div id="av_quickreply"></div>');
          if(typeof(_userdata)!="undefined") {
            $('#av_quickreply').html(_userdata['avatar']);
          }
          else {
            $('#av_quickreply').load('/profile?mode=editprofile&page_profil=avatars .ucp-main #ucp fieldset dl dd img');
          }
        });

PunBB

Code: --------------------------------------------------------------------------------------------Selecionar conteúdo
1
2
3
4
5
6
7
8
9
      jQuery(document).ready(function() {
        $('#quick_reply').before('<div id="av_quickreply"></div>');
          if(typeof(_userdata)!="undefined") {
            $('#av_quickreply').html(_userdata['avatar']);
          }
          else {
            $('#av_quickreply').load('/profile?mode=editprofile&page_profil=avatars fieldset.frm-set dl dd img');
          }
        });

Invision

Code: --------------------------------------------------------------------------------------------Selecionar conteúdo
1
2
3
4
5
6
7
8
9
      jQuery(document).ready(function() {
        $('#qpost .qreply').before('<div id="av_quickreply"></div>');
          if(typeof(_userdata)!="undefined") {
            $('#av_quickreply').html(_userdata['avatar']);
          }
          else {
            $('#av_quickreply').load('/profile?mode=editprofile&page_profil=avatars .box-content img');
          }
        });


- Inserindo código JavaScript:
Para isto você terá de ter um pouco de conhecimento com a folha de estilos JavaScript, aceda a:
Painel de Controle >> Módulos >> HTML & JAVASCRIPT >> Gestão dos Códigos JavaScript


ArrowTítulo - Correspondente ao nome da página JavaScript/jQuery que será criada.

Arrow Localização - São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. Pode ser na galeria, nos fóruns ou sub-fóruns. Vamos ver algumas opções:
No índice: O código será aplicado ao índice do fórum.
No portal : O código será aplicado ao Portal do fórum.
Nos sub-fóruns (Fóruns) : O código será aplicado nos Fóruns e Sub-fóruns.
Sobre os temas : O código será aplicado aos tópicos do fórum. (Marque esta opção)
Na galeria : O código será aplicado na sua Galeria de imagens.
Em todas as páginas : O código será aplicado em todas as páginas do fórum.

Arrow Código JavaScript - Campo destinado para receber os códigos JavaScript e jQuery.

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

- Conhecendo o código CSS
Teremos de selecionar um dos códigos CSS abaixo, de acordo com a sua versão.

PhpBB2

Code: --------------------------------------------------------------------------------------------Selecionar conteúdo
1
2
3
4
5
6
7
8
9
          #av_quickreply img{
          position: relative;
          top: 35px;
          left: 15px;
        }
         
      #av_quickreply {
          float: left;
        }
PhpBB3

Code: --------------------------------------------------------------------------------------------Selecionar conteúdo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
           #quick_reply #av_quickreply{
          display: table-cell;
          width: 200px;
        }
         
      #quick_reply #textarea_content{
          width: 800px !important;
          display: table;
        }
         
      #quick_reply #text_editor_controls{
          position: relative;
          left: 100px;
        }

PunBB

Code: --------------------------------------------------------------------------------------------Selecionar conteúdo
1
2
3
4
5
6
7
8
9
             #av_quickreply img {
            left: 15px;
            position: relative;
            top: 35px;
        }
         
      #av_quickreply {
            float: left;
        }

Invision

Code: --------------------------------------------------------------------------------------------Selecionar conteúdo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
          #qpost{
          max-height: 300px !important;
        }
         
      #av_quickreply img{
          position: relative;
          top: 35px;
          left: 15px;
        }
         
      .qreply{
          bottom: 150px;
          position: relative;
          margin-tot: 0px;
          margin-right: 20px;
        }

- Aplicando CSS:
Para isto você terá de ter um pouco de conhecimento com a folha de estilos CSS, aceda a:
Painel de Controle >> Visualização >> Imagens e Cores >> Cores >> Folha de Estilo CSS



seta E aplique o código trabalhado no passo anterior, como este da versão PhpBB3:
Code: --------------------------------------------------------------------------------------------Selecionar conteúdo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
       #quick_reply #av_quickreply{
          display: table-cell;
          width: 200px;
        }
         
      #quick_reply #textarea_content{
          width: 800px !important;
          display: table;
        }
         
      #quick_reply #text_editor_controls{
          position: relative;
          left: 100px;
        }

- Resultado final:








© Suporte Design e iChees



Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Avatar do usuário ao lado da caixa de resposta rápida
Ver o tópico anteriorVoltar ao TopoVer o tópico seguinte
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum