[TUTORIAL] Avatar do usuário 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.

1º - 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');
          }
        });

2º - 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

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

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.

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

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.

3º - 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;
        }

4° - 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



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;
        }


5° - 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