Boas-vindas ao Power Pixel

Junte-se a comunidade! Crie o seu próprio conteúdo, e faça amizades.EntrarCriar uma conta

[Tutorial] ChatBox estilo IPB

+105
COMUNIDADE
mak!
djtaylonb
shadowic
Iron Man
Js
mito2
Becker
SaN
Smoker_TridenT
taxynha
leean77
Stark'
GlowHPS
zMacro
NeverSay
Krounds
Necr0
analulupo
Ivanaruto
RPG_RAZERX
odzGFX
SneakMen
Leanjucas
S1L3NC3
Franco
Wu4ll
DooGy00
r.KLGaming
virus
Nac
HardDrik
arcanjj
WinaTickets
yaTTo
thugx123
Dub.
binho
b3mon
p0wer
RonaldoWynnek
Tonight
gurila666
Atzu
Suspeito_Phoenix
pain.Castiel
Faeel
deaneo8
lasperpen
diethnicos
CMPunk
B.I.G.
hector225
Shadowz
Semvida
Zero
ZéPaulo
System
Noumi
Loko-poko
tdias72
Victor_VerTeXs
DigoDzerjinsky
Redline
VitorNobre
Deywes
Deh
mRaAy
Obey
oliveeirandre
Kyon
maskrosedevils
while1
Becker_xxx
ChuckSwaG
xbctkun
zNiinja
terabin
PlanetMonster
_umbrella
Harleen
lucasyori
rafusqui
Eduardo'
@Brunno
Tech-Downloads
Desadikta
Diapt
Micul`Wji
Danielmoraes105
DeeW.
matonskie23
Gustavo_25478
lucas_sousa
duuuwh
Dark-Avenger
[K]oke
Kincy
Fire
Nike09
Anderson Santana
djblah
xcjonathancx
Zeek
Cepheus
109 participantes

Início :: Forumeiros :: Dicas e tutoriais[Tutorial] ChatBox estilo IPB

Cepheus Cepheus  • Qua 20 Abr 2016 - 16:58

[Tutorial] ChatBox estilo IPB Empty [Tutorial] ChatBox estilo IPB Qua 20 Abr 2016 - 16:58

Reputação da mensagem: 100% (53 votos)
[Tutorial] ChatBox estilo IPB


Antes de começar certifique de que sua skin não seja modificada, caso seja você precisará tirar qualquer CSS relacionada ao chatbox, se tiverem duvidas em relação a isso crie um tópico com sua folha de estilo para poder obter suporte.

Para uma melhor experiência recomendo usar o JS feito pelo nosso amigo JScript, Auto Logon in Chat Box! 

Após isso vá em Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta folha de estilo CSS

[guest]
Código:
@font-face {
  font-family: 'Play';
  font-style: normal;
  font-weight: 400;
  src: local('Play'), local('Play-Regular'), url(https://fonts.gstatic.com/s/play/v7/ZNo-5SxCwH1CXgZ-n3bt2g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

body[bgcolor] {
  background: #fff;
}

.chatbox_row_1.clearfix.shout-0 span span[style="color:undefined"] {
  font-size: 0px;
}

.chatbox-options li a span#chatbox_option_co:before {
  content: "Para visualizar as mensagens clique em login.";
  text-align: center;
  margin-top: 125px;
  background: #FFFFFF!important;
  width: 100%;
  height: 80px;
  right: 0;
  position: absolute;
  z-index: 1;
  display: block;
  border-top: 1px solid #ebebeb;
  font-size: 14px!important;
  color: #000;
}

.chatbox-options li a span#chatbox_option_co:after {
  content: " Você está desconectado!";
  margin-top: 180px;
  background: #ccc!important;
  width: 100%;
  padding: 10px 0;
  right: 0;
  position: absolute;
  z-index: 1;
  text-align: center;
  display: block;
  border-top: 1px solid #ebebeb;
  font-size: 20px!important;
  color: #000;
}

#chatbox .user strong span, body #chatbox .msg, #chatbox .date-and-time, #chatbox_header.main-head {
  font-family: Play,Arial,Helvetica,sans-serif!important;
  font-size: 14px!important;
}

#chatbox .date-and-time {
  float: right;
  color: #cacaca;
  font-size: 11px;
}

#chatbox .date-and-time img {
  opacity: 0.5;
}

#chatbox .date-and-time img:hover {
  opacity: 1.0;
}

#chatbox_header.main-head {
  background: #3d648a;
  padding: 0;
  margin: 0;
  list-style: none;
  position: inherit;
  height: 40px;
  display: block;
}

#chatbox_header.main-head:after {
  content: "Divulgação, flood, spam ou atitudes desrespeitosas não são toleradas neste Chat.";
  background: #ebebeb;
  color: #111111;
  margin-top: 40px;
  display: block;
  padding: 10px;
  position: absolute;
  width: 100%;
}

.chatbox-title {
  font-size: 14px;
  color: #fff;
  padding: 10px 10px 0 10px;
}

.chatbox-title, .chatbox-title a.chat-title {
  color: #fff;
  font-weight: 300;
  text-decoration: none;
}

#chatbox_members, #chatbox {
  top: 80px;
}

.chatbox-options {
  background: rgba(0,0,0,0.5);
  opacity: 0.6;
  color: #fff;
  padding: 5px;
}

#chatbox_members {
  display: none;
}

#chatbox {
  left: 0;
}

.chatbox_row_1, .chatbox_row_2 {
  background-color: #fff;
  position: relative;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #ebebeb;
  padding: 7px;
}

#chatbox > p {
  border-bottom: 1px solid #ebebeb!important;
}

body #chatbox .user strong {
  font-size: 0px;
  margin-left: 4px;
}

body #chatbox .user strong span {
  font-size: 12px;
  font-weight: 300;
}

body #chatbox .msg {
  display: block;
  line-height: 1.5em;
  margin-top: -7px!important;
}

#chatbox_footer .right:first-child {
  width: 100% !important;
  float: right;
}

.pun .main-content.chatbox {
  border: 0px solid #ebebeb;
}

#chatbox_footer .right:nth-child(2) {
  float: right;
  margin-top: -42px;
  z-index: 999;
}

#chatbox_messenger_form label[for="message"] {
  display: none;
}

input#message.post {
  width: 90% !important;
  margin-top: 2px;
  height: 12px;
  padding: 8px 10px 8px 8px !important;
  border: none !important;
  background: transparent;
  outline: none;
}

input#message.post {
  background: url(https://i.imgur.com/5zppq7r.png) no-repeat!important;
}

input#message.post:focus {
  background: transparent!important;
}

#divcolor,  #help-button, .format-message + label {
  display: none!important;
}

.right  #submit_button {
  position: absolute;
  right: 0;
  margin-right: 10px;
}

.right #submit_button {
  height: 30px!important;
  background: #1abc9c;
  color: #ffffff !important;
  cursor: pointer;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  padding: 5px 15px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.1);
  -webkit-transition: 0.1s all linear;
  -moz-transition: 0.1s all linear;
  -ms-transition: 0.1s all linear;
  -o-transition: 0.1s all linear;
  transition: 0.1s all linear;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  border-width: 0px!important;
}

#divsmilies {
  width: 24px!important;
  height: 24px!important;
  background: url(https://i.imgur.com/Ku7QNJd.png) no-repeat;
  border: 0px!important;
/* position:absolute; */
  margin-right: 80px;
  margin-top: 15px;
}

#divsmilies>img {
  display: none;
}

#divsmilies:hover:before {
  content: "Emoticons";
  background: #2a2a2a;
  line-height: 26px;
  font-size: 12px;
  color: #fff;
  position: absolute;
  padding: 0 8px;
  pointer-events: none;
  border-radius: 2px;
  position: absolute;
  margin-top: -30px;
  margin-left: -35px;
}

#chatbox_footer {
  height: auto !important;
  background-color: #fff!important;
  border-top: 0px dashed #ccc;
}

body #chatbox .cb-avatar {
  border-width: 0!important;
}

#chatbox .cb-avatar,  #chatbox .cb-avatar img {
  background: none repeat scroll 0 0 #fff!important;
  border: 0px solid #d5d5d5!important;
  border-width: 0!important;
  box-shadow: none!important;
  float: left;
  margin-right: 4px!important;
  padding: 1px!important;
  vertical-align: middle!important;
  width: 34px!important;
  height: 34px!important;
}
[/guest]

Resultado
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Autor: Cepheus
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]


Última edição por Cepheus em Qui 21 Abr 2016 - 11:02, editado 2 vez(es)

Zeek Zeek  • Qua 20 Abr 2016 - 18:17

xcjonathancx xcjonathancx  • Qua 20 Abr 2016 - 19:09

[Tutorial] ChatBox estilo IPB Empty Re: [Tutorial] ChatBox estilo IPB Qua 20 Abr 2016 - 19:09

Achei belíssimo vou usar muito obrigado!

djblah djblah  • Qua 20 Abr 2016 - 19:48

Anderson Santana Anderson Santana  • Qua 20 Abr 2016 - 21:07

Nike09 Nike09  • Qui 21 Abr 2016 - 10:52

Cepheus Cepheus  • Qui 21 Abr 2016 - 11:07

[Tutorial] ChatBox estilo IPB Empty Re: [Tutorial] ChatBox estilo IPB Qui 21 Abr 2016 - 11:07

Olá pessoal eu fiz uma alteração no css, quem estiver usando e queira fazer a alteração basta substituir o css antigo do chatbox pelo novo que está no tutorial.

Até!

Fire Fire  • Dom 24 Abr 2016 - 0:15

Kincy Kincy  • Dom 24 Abr 2016 - 3:37

[Tutorial] ChatBox estilo IPB Empty Re: [Tutorial] ChatBox estilo IPB Dom 24 Abr 2016 - 3:37

Era o que eu estava procurando, perfeito!
Só uma dúvida, em qual lugar eu altero para que a caixa da mensagem seja maior pois está acontecendo isso: [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Para ver o botão "Enviar" e a caixa de mensagem se faz necessário esticar essa caixa do chatbox, porém tem membro que é desatento e não vai saber fazer isso. Obrigado.

Cepheus Cepheus  • Dom 24 Abr 2016 - 10:03

[Tutorial] ChatBox estilo IPB Empty Re: [Tutorial] ChatBox estilo IPB Dom 24 Abr 2016 - 10:03

Kincy escreveu:Era o que eu estava procurando, perfeito!
Só uma dúvida, em qual lugar eu altero para que a caixa da mensagem seja maior pois está acontecendo isso: [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Para ver o botão "Enviar" e a caixa de mensagem se faz necessário esticar essa caixa do chatbox, porém tem membro que é desatento e não vai saber fazer isso. Obrigado.

Como disse no tópico qualquer entrada anterior de css pode interferir na aparência  do chatbox, pois ele foi feito para versão padrão punbb,
Vou pedir por gentileza que crie um tópico para poder prestar suporte.

Até!

[K]oke [K]oke  • Dom 24 Abr 2016 - 13:36

[Tutorial] ChatBox estilo IPB Empty Re: [Tutorial] ChatBox estilo IPB Dom 24 Abr 2016 - 13:36

Muito Atraente, irei utiliza!

Dark-Avenger Dark-Avenger  • Dom 24 Abr 2016 - 21:56

duuuwh duuuwh  • Seg 25 Abr 2016 - 9:43

lucas_sousa lucas_sousa  • Seg 25 Abr 2016 - 21:34

Gustavo_25478 Gustavo_25478  • Ter 26 Abr 2016 - 14:00

[Tutorial] ChatBox estilo IPB Empty Re: [Tutorial] ChatBox estilo IPB Ter 26 Abr 2016 - 14:00

Cepheus sempre agradando a todos ótimos conteúdos que posta

matonskie23 matonskie23  • Qua 27 Abr 2016 - 20:13

DeeW. DeeW.  • Qui 28 Abr 2016 - 21:42

[Tutorial] ChatBox estilo IPB Empty Re: [Tutorial] ChatBox estilo IPB Qui 28 Abr 2016 - 21:42

Caramba, ficou num visual lindo, parabéns.

Danielmoraes105 Danielmoraes105  • Sáb 30 Abr 2016 - 13:46

[Tutorial] ChatBox estilo IPB Empty Re: [Tutorial] ChatBox estilo IPB Sáb 30 Abr 2016 - 13:46

Gostei parabéns ai mt obrigado Very Happy

Micul`Wji Micul`Wji  • Ter 3 maio 2016 - 12:08

[Tutorial] ChatBox estilo IPB Empty Re: [Tutorial] ChatBox estilo IPB Ter 3 maio 2016 - 12:08

very good thank you very much is awsome

Diapt Diapt  • Ter 3 maio 2016 - 18:37

Desadikta Desadikta  • Qua 4 maio 2016 - 16:37

Tech-Downloads Tech-Downloads  • Seg 16 maio 2016 - 9:06

@Brunno @Brunno  • Seg 16 maio 2016 - 10:18

[Tutorial] ChatBox estilo IPB Empty Gostei Do Tutorial Seg 16 maio 2016 - 10:18

Vlw pelo tutorial <3 

Eduardo' Eduardo'  • Ter 17 maio 2016 - 15:22

rafusqui rafusqui  • Ter 17 maio 2016 - 15:23

Conteúdo patrocinado  • 

[Tutorial] ChatBox estilo IPB Empty Re: [Tutorial] ChatBox estilo IPB

Início :: Forumeiros :: Dicas e tutoriais:: [Tutorial] ChatBox estilo IPB
Permissões neste sub-fórum
Não podes responder a tópicos