Como coloco xat na lateral esquerda?

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

Resolvido Como coloco xat na lateral esquerda?

Mensagem por Lud_. em 27/12/12, 12:15 pm

Qual é minha questão:
Gostaria de saber como fasso para colocar um xat na lateral esqueda do meu forum.

Obrigado.

Endereço do meu fórum:
http://saw-nwd.forumeiros.com

Versão do fórum:
PHPBB3
avatar

Lud_.
Nível 8

Masculino
Inscrito dia : 20/07/2012
Mensagens : 147
Pontos Ativos : 241

Ver perfil do usuário http://nvgames.forumeiros.com

Resolvido Re: Como coloco xat na lateral esquerda?

Mensagem por BrunoH. em 27/12/12, 12:18 pm

Olá!
Leia o conteúdo do Spoiler:
Spoiler:


Chat Box retrátil externo

Muitas vezes, desejamos poder fazer algo dinâmico, simples, elegante e prático. Neste tutorial, aplicaremos esses conceitos ao Chat Box externo, ou seja, que não é o padrão da Forumeiros, que ficará em uma lateral do fórum, trazendo assim, maior comodidade no ato da navegação.

--> Tutoriais, dicas e astúcias <--
Chat Box retrátil externo


- Conhecendo e modificando o código:

<div style="overflow: visible; position: fixed; bottom: 30px; height: 350px; right: 0px; z-index:1000;"><iframe src="/chatbox" id="chatboxpop" scrolling="yes" style="height: 350px; float: right; overflow-x: visible; overflow-y: visible; display: none; width:700px" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();" style="margin-top: 10px; cursor :pointer; float:left"><img src="http://i34.servimg.com/u/f34/16/04/51/75/open10.png" id="chatboxopen" style="display: inline; "><img src="http://i34.servimg.com/u/f34/16/04/51/75/close10.png" id="chatboxclose" style="cursor: pointer; display: none; "></div></div>

Vermelho > O campo define se a imagem de abertura fica fixa na lateral do fórum ou se ela acompanha o chatbox em seu distender. Em 'right', a imagem acompanhará o chat e, em 'left', a imagem fica fixa na tela e o chat box se estende a sua esquerda.
Laranja > O campo define o tamanho em qual a largura do chat irá distender.
Azul > O valor deste campo define em quanto tempo o chat se abrirá por total. A cada 1000 = 1 segundo. Se o valor for 0, não há deslize e ele abre imediatamente.
Em Negrito: > Imagem que, quando acionada, irá fechar o chatbox.
Em Itálico: > Imagem que, quando acionada, irá fechar o chatbox.
Marrom: > ID da página HTML que conterá o chatbox.

Criando e aplicando o chatbox:

Para prosseguir com a aplicação da chatbox externa, você deverá criar uma seguindo:Chatbox externa


- Criar uma página HTML para sustentar o código:

Para que possamos adicionar o código, teremos de criar uma página HTML, que será onde o script ficará. Para isso é necessário aceder à:
Painel de controle -> Módulos -> HTML -> Gestão das páginas HTML

(carregue na imagem para aumentar)
Seta Título - Pode colocar o título que quiser para a página, não irá afetar em nada.
Seta Você deseja utilizar o início e o final da página do seu fórum ? - Esta terá de ser obrigatóriamente não. Caso marque-a, o código não irá funcionar adequadamente.
Seta Usar esta página como página inicial? - Esta também deverá estar marcada como não.
Seta Código HTML - Coloque aqui o código que trabalhamos no item anterior.
Após criada a página, deverá salvar e carregar novamente em "Gestão das páginas HTML", onde iremos recuperar o endereço da página criada, para usarmos no próximo ponto.

(carregue na imagem para aumentar)

Terá de encontrar a página HTML que criou e copiar o endereço da mesma. Em vermelho na imagem abaixo está o que deve copiar da página que criou! Por padrão esta será a primeira da lista (isso se for a última a ser criada e se não alterou a ordem de exibição). Com a URL copiada deverá analisar a parte após a barra, por exemplo, /h1- e substituir o /chatbox do código, por esse trecho da URL da página HTML

(carregue na imagem para aumentar)

- Aplicação do código:

Para utilizarmos o chat box retrátil, utilizaremos um widget personalizado. Para isso, aceda à:

Painel de controle (Avançado) >> Módulos >> Portal & Widgets >> Gestão dos widgets (fórum/portal) >> Novo widget personalizado


Seta Nome do widget: - Será o nome dado ao widget para localização e controle deste pelo Painel de Controle.
Seta Utilizar um table type: - Nesta opção, deverá ser marcado o "Não".
Seta Título do widget: - Nesta opção, não será necessário preenchimento, resultado da marcação do "Não" anteriormente.
Seta Fonte do widget: - Neste campo, deve ser inserido o código mostrado no passo 1.
Seta Salvar: - Para que o widget apareça corretamente, este box deve ser acionado, após as devidas modificações.

Feito isso, basta que o widget seja arrastado para uma coluna no módulo correspondente para que o chat seja aplicado.

  • Resultado:





© Fórum dos Fóruns


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Chat Box retrátil externo

Até mais.
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Como coloco xat na lateral esquerda?

Mensagem por Lud_. em 29/12/12, 12:31 pm

avatar

Lud_.
Nível 8

Masculino
Inscrito dia : 20/07/2012
Mensagens : 147
Pontos Ativos : 241

Ver perfil do usuário http://nvgames.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