Codigo tipo chat lateral mas para editar

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

Resolvido Codigo tipo chat lateral mas para editar

Mensagem por estica em Qui 19 Jan 2012 - 16:40

Qual é minha questão:
Boas pessoal.

Eu vi num forum uma tabela tipo o caht lateram mas em vez de conter o chat tinha butões e links.


E eu queria um codigo para eu meter no meu forum mas em vez de aparecer o chat lateral porque isso ja eu tenho, queria que aparece-se butões para com links feitos por mim.


Ja tentei editar o codigo do chat lateral e meter isso e em vez de aparecer no lado direito aparecer no lado esquerdo.

Ja concegui fazer com que aparece no lado esquerdo mas falta dezaparecer o chat e aparecer uma tabela para meter links com butões.

Ha o codigo é para colocar em:
Templete > geral > overall_header

Foi assim que coloquei o chat lateral e judo desse codigo do chat lateral quero meter outro com o que ja expliquei acima.


NOTA:
O butão para abrir e fechar a caixa não faz mal estar ao contrario porque eu faço um butão nofo no PS


Desde ja muito obrigado

Medidas que eu tomei para corrigir o problema:
Ja pesquizei e nada

Imagens do meu problema:


Endereço do meu fórum:
http://tugavicio.foruns.com.pt/

Versão do meu fórum:
avatar

estica
Nível 9

Masculino
Inscrito dia : 10/01/2012
Mensagens : 168
Pontos Ativos : 295

Ver perfil do usuário http://tugavicio.foruns.com.pt

Resolvido Re: Codigo tipo chat lateral mas para editar

Mensagem por Ace em Qui 19 Jan 2012 - 16:44

Olá,

Leia o conteúdo do spoiler abaixo:

Spoiler:


Chat Box Retrátil - Lateral

Muitas vezes, desejamos poder fazer algo dinâmico, simples, elegante e prático. Neste tutorial, aplicaremos esses conceitos ao Chat Box 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 - Lateral


Nº1 - 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.

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

Mude o Iframe para uma página personalizada que desejar ( /chatbox )

Até Mais!
avatar

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8880
Pontos Ativos : 11604

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

Resolvido Re: Codigo tipo chat lateral mas para editar

Mensagem por estica em Qui 19 Jan 2012 - 16:55

Mas isso é para editar o chat.

E o que voce me explicou é mudar o chat e aparecer uma pagina.


Mas não é isso que quero.


O que quero é que apareça uma caixa feita por mim.


Ja vi isso num forum do forumeiros
avatar

estica
Nível 9

Masculino
Inscrito dia : 10/01/2012
Mensagens : 168
Pontos Ativos : 295

Ver perfil do usuário http://tugavicio.foruns.com.pt

Resolvido Re: Codigo tipo chat lateral mas para editar

Mensagem por Ace em Qui 19 Jan 2012 - 17:12

Olá,

Poderia nos mandar um exemplo para que possamos tomar melhor conhecimento de vossa pretensão?

Até Mais!
avatar

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8880
Pontos Ativos : 11604

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

Resolvido Re: Codigo tipo chat lateral mas para editar

Mensagem por Seishi em Qui 19 Jan 2012 - 18:16

Você deseja algo do tipo deste fórum: http://darkside.forumclan.com/forum ?
avatar

Seishi
Nível 9

Masculino
Inscrito dia : 22/08/2010
Mensagens : 155
Pontos Ativos : 227

Ver perfil do usuário http://opiece-rpg.forumeiros.com

Resolvido Re: Codigo tipo chat lateral mas para editar

Mensagem por estica em Qui 19 Jan 2012 - 18:36

Sim é tipo isso


Esta aqui um bom exemplo neste forum

http://www.tutorialdopw.com/forum

O meu forum esta no formato PhpBB2
avatar

estica
Nível 9

Masculino
Inscrito dia : 10/01/2012
Mensagens : 168
Pontos Ativos : 295

Ver perfil do usuário http://tugavicio.foruns.com.pt

Resolvido Re: Codigo tipo chat lateral mas para editar

Mensagem por King Gz; em Qui 19 Jan 2012 - 22:53

Olá,

Neste caso, ele pegou o código fonte do site Pwdb, criou uma página html e criou um código Javascript apontando para a página. Mandei uma MP ao ZombieW, logo ele lhe passa o procedimento correto Piscada
avatar

King Gz;
Membro do Fórum

Masculino
Inscrito dia : 20/11/2011
Mensagens : 1827
Pontos Ativos : 2486

Ver perfil do usuário http://www.gamezerbrasil.com/

Resolvido Re: Codigo tipo chat lateral mas para editar

Mensagem por estica em Qui 19 Jan 2012 - 22:56

Desde ja muito obrigado ao pessoal que tenta ajudar.


avatar

estica
Nível 9

Masculino
Inscrito dia : 10/01/2012
Mensagens : 168
Pontos Ativos : 295

Ver perfil do usuário http://tugavicio.foruns.com.pt

Resolvido Re: Codigo tipo chat lateral mas para editar

Mensagem por Seishi em Qui 19 Jan 2012 - 23:35

Eu agraceria se ele pudesse postar aqui pois gostaria da mesma coisa Mostrando a lingua
avatar

Seishi
Nível 9

Masculino
Inscrito dia : 22/08/2010
Mensagens : 155
Pontos Ativos : 227

Ver perfil do usuário http://opiece-rpg.forumeiros.com

Resolvido Re: Codigo tipo chat lateral mas para editar

Mensagem por estica em Sex 20 Jan 2012 - 20:16

Ainda não arranjaram?
avatar

estica
Nível 9

Masculino
Inscrito dia : 10/01/2012
Mensagens : 168
Pontos Ativos : 295

Ver perfil do usuário http://tugavicio.foruns.com.pt

Resolvido Re: Codigo tipo chat lateral mas para editar

Mensagem por ZombieW em Sex 20 Jan 2012 - 21:40

Olá, irei pedir para o Desenvolvedor do meu fórum para passar por aqui e te ajudar com isso! '-'
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1272
Pontos Ativos : 1797

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Codigo tipo chat lateral mas para editar

Mensagem por estica em Sex 20 Jan 2012 - 22:05

Desde ja muito obrigado
avatar

estica
Nível 9

Masculino
Inscrito dia : 10/01/2012
Mensagens : 168
Pontos Ativos : 295

Ver perfil do usuário http://tugavicio.foruns.com.pt

Resolvido Re: Codigo tipo chat lateral mas para editar

Mensagem por DropLeet em Seg 23 Jan 2012 - 10:09

Olá, sou o Desenvolvedor de scripts do Tutorial do PW. Lamento minha demora pela resposta.

O código JS é esse:
Código:
// PWDB Retrátil by DropLeet
function chatoc(){jQuery('#chatboxpop').animate({width:'toggle'},1200);jQuery('#chatboxopen,#chatboxclose').toggle()};jQuery(document).ready(function(){jQuery('body').prepend('<div style="overflow:visible;position:fixed;bottom:30px;height:350px;right:0px;z-index:1000"><iframe src="http://tutorialdopw.forumbrasil.net/h1-pwdb" 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="chatoc()" style="margin-top:10px;cursor :pointer;float:left"><img src="http://i44.servimg.com/u/f44/15/04/49/64/pwdb_r10.png" id="chatboxopen" style="display:inline"><img src="http://i44.servimg.com/u/f44/15/04/49/64/pwdb_r11.png" id="chatboxclose" style="cursor:pointer;display:none"></div></div>')});
Modifique o Link correspondente a baliza iframe para a página em HTML contendo os botões que deseja. Lembrando que o código está configurado para efetuar o efeito Retrátil na direita e que os botões estão modificado para a direita.

Att.

Staff Tutorial do PW
avatar

DropLeet
Nível 9

Masculino
Inscrito dia : 24/08/2011
Mensagens : 196
Pontos Ativos : 285

Ver perfil do usuário http://tutorialdoca.com

Resolvido Re: Codigo tipo chat lateral mas para editar

Mensagem por estica em Seg 23 Jan 2012 - 16:18

Onde é para colocar esse codigo?


Eu queria um codigo que de para colocar em:
Templete > geral > overall_header
avatar

estica
Nível 9

Masculino
Inscrito dia : 10/01/2012
Mensagens : 168
Pontos Ativos : 295

Ver perfil do usuário http://tugavicio.foruns.com.pt

Resolvido Re: Codigo tipo chat lateral mas para editar

Mensagem por King Gz; em Seg 23 Jan 2012 - 19:19

Olá,

Você deseja colocar no template para não ter que usar os widgets certo? Neste caso não será preciso, este código deve ser adicionado na gestão dos códigos Javascripts.

Aceda à Painel de controle Seta Módulos Seta Html e javascript Seta Criar um novo código Javascript

// PWDB Retrátil by DropLeet
function chatoc(){jQuery('#chatboxpop').animate({width:'toggle'},1200);jQuery('#chatboxopen,#chatboxclose').toggle()};jQuery(document).ready(function(){jQuery('body').prepend('<div style="overflow:visible;position:fixed;bottom:30px;height:350px;right:0px;z-index:1000"><iframe src="http://tutorialdopw.forumbrasil.net/h1-pwdb" 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="chatoc()" style="margin-top:10px;cursor :pointer;float:left"><img src="http://i44.servimg.com/u/f44/15/04/49/64/pwdb_r10.png" id="chatboxopen" style="display:inline"><img src="http://i44.servimg.com/u/f44/15/04/49/64/pwdb_r11.png" id="chatboxclose" style="cursor:pointer;display:none"></div></div>')});

Substitua o "http://tutorialdopw.forumbrasil.net/h1-pwdb" pelo link da página que quiser que apareça
Substitua "http://i44.servimg.com/u/f44/15/04/49/64/pwdb_r10.png" e "http://i44.servimg.com/u/f44/15/04/49/64/pwdb_r11.png" pelo link da imagem que desejar {Open/Close}

Até mais Piscada
avatar

King Gz;
Membro do Fórum

Masculino
Inscrito dia : 20/11/2011
Mensagens : 1827
Pontos Ativos : 2486

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