Sistema de chat

Detalhes da questão

Endereço do fórum: http://teste-kmz.forumeiros.com/forum
Versão do fórum: PunBB

Descrição

Olá Convidado,Gostaria de colocar um sistema de chat como o "chatbox" só que mais simples onde tenha uma caixa para escrever o texto e nada mais.e que o chat seja oculto com um icone para abrir quando clicado.seria possivel?

OBRIGADO PELA ANTENÇÃO!

Olá,

Nós podemos editar o chat padrão do Forumeiros para alcançar um resultado satisfatório, mas o senhor terá que nos dar um pouco mais de informações:

• Onde ficaria o ícone do chat?
  
• Onde o chat abriria após clicar no ícone?
  
• Como os nomes e mensagens devem ser mostrados no chat?
  
• O que acontece se o usuário clica no ícone do chat com o chat aberto?
  
• O ícone do chat aparecerá em todas as páginas ou apenas em específicas?

^-^

Olá Kyo Panda,


1- Gostaria que ficasse aqui;

https://imgur.com/UM121lx


2- Gostaria que abrisse aqui;

https://imgur.com/UM121lx;

3- Gostaria que o nome do usuario tivesse a mesma cor de seus grupos e quando passado o mouse por cima mostra umas estastisticas Como: "numero de posts" "idade" "e o sKype"

4- Não entendi essa pergunta

5- Não apenas na pagina principal.

6- Fiz um exemplo aqui:

Antes de clikar:

https://imgur.com/a/7gO6B

Depois de clikar:

https://imgur.com/a/D11xB



Quando a pessoa reiniciar a pagina o chat some,

Vá em Painel de controle Módulos HTML & JavaScript Gestão dos códigos JavaScripts Criar um novo JavaScript e adicione esse código com Investimento em No índice:

Código:

; (function ($) {
    'use strict';

    $(function () {
        $('<iframe>', {
            src: '/chatbox/index.forum?page=front',
            scrolling: 'yes',
            id: 'shekbar_chat'
        }).appendTo('#ShekBar .right');

        $('.shekbar_logo').on('click', function () {
            $('#shekbar_chat').toggleClass('shekbar_chat_open');
            return false;
        });
    });
}) (jQuery);

Se desejar que o chatbox apareça em todas as páginas, altere o Investimento para Todas as páginas.

Vá em Painel de controle Visualização Imagens e Cores Cores Folha de estilo CSS e adicione o seguinte código ao final da caixa de texto:

Código:

/** ShekBar Chatbox */

#shekbar_chat {
  position: absolute;
  bottom: 26px;
  right: 0;
  width: 300px;
  height: 300px;
  border: 10px #313131 solid;
  border-radius: 5px;
  margin: 10px;
  background: rgba(0, 0, 0, 0.8);
  z-index: 100;
  right: -300px;
  opacity: 0;
  transition: 250ms ease;
  transition-property: right, opacity;
}

#shekbar_chat.shekbar_chat_open {
  right: 0;
  opacity: 1;
}

body[bgcolor] {
  background: transparent;
}

#chatbox_members,
.chatbox-title,
#chatbox_messenger_form input,
#chatbox_messenger_form label,
#chatbox_messenger_form #divcolor,
#chatbox_messenger_form #divsmilies,
#chatbox_messenger_form #help-button,
#chatbox .date-and-time {
  display: none;
}

#chatbox_messenger_form {
  padding: 0;
  font-size: 0;
  margin: 0;
}

#chatbox_messenger_form #message {
  display: block;
  margin: 0;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
  float: none;
  width: 100%;
  outline: none;
  background: #292929;
  border: 1px #666 solid;
  border-radius: 3px;
  color: #fff !important;
  font-size: 12px;
  box-sizing: border-box;
}

#chatbox_messenger_form .right {
  float: none;
}

#chatbox_header.main-head {
  background: none;
  border-bottom: 1px #666 solid;
  padding: 0 10px;
}

.chatbox-options {
  float: none;
  text-align: right;
  margin: 0;
  line-height: 30px;
}

.chatbox-options a {
  text-decoration: none;
}

#chatbox {
  left: 0;
  color: #fff;
  padding: 10px 0;
  bottom: 40px;
}

#chatbox .msg span {
  color: #fff !important;
}

.chatbox_row_1,
.chatbox_row_2 {
  padding: 5px 10px;
  font-weight: normal;
  background: none;
}

.chatbox_row_2 {
  background: none;
}

#chatbox strong {
  font-weight: normal;
}

#chatbox_footer {
  border-top: 1px #666 solid;
}

/** End of ShekBar Chatbox */

---

Notas:

• Tive que manter o cabeçalho (Login, Arquivos | Sair) pois o usuário não conseguiria entrar no chat sem isso.
  
  
• Não foi possível fazer o hover no nome dos usuários, pois aparentemente não há como executar Javascript dentro do chat.

^-^

Ficou Pft irmão,tem como tirar só isso aquie?

https://imgur.com/a/mambk

Adicione ao CSS:

Código:

#onlinechat {
  display: none;
}

^-^

Obrigado Kyo panda,ficou pft *-*




Kyo panda posso te fazer uma pergunta aqui nesse topico?

Gostaria de me aprofundar mais nesse negocio de forum e codigos e tals,como aprendo?a forumeiros acede o suporte?eu poderia ajuda aqui tambem não sei,pode me informar?

Olá autor,

O senhor pode procurar diversos tutoriais (inclusive alguns aqui no fórum) e também vídeo aulas sobre as linguagens de programação para que possa aprender mais. Todos podem ajudar aqui, pois todo o trabalho é voluntário. Como a sua dúvida principal foi resolvida, estarei dando o tópico como finalizado.

Espero que entenda.
Até mais!

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas".