[Tutorial] ChatBox estilo IPB

Página 2 de 5 •   1, 2, 3, 4, 5  

Cepheus  • Qua 20 Abr 2016 - 16:58

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

Reputação da mensagem: 100% (53 votos)

Relembrando a primeira mensagem :

[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 Visualização Imagens e Cores Cores 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)

Reputação da mensagem: 100% (53 votos)

lucasyori  • Qua 18 maio 2016 - 6:18

Harleen  • Qui 19 maio 2016 - 18:26

_umbrella  • Qua 25 maio 2016 - 3:53

PlanetMonster  • Qua 1 Jun 2016 - 11:31

terabin  • Sex 3 Jun 2016 - 13:36

zNiinja  • Seg 6 Jun 2016 - 19:17

xbctkun  • Qua 8 Jun 2016 - 14:39

xbctkun  • Qua 8 Jun 2016 - 14:41

ChuckSwaG  • Dom 12 Jun 2016 - 22:09

Becker_xxx  • Seg 13 Jun 2016 - 19:30

while1  • Ter 14 Jun 2016 - 19:51

maskrosedevils  • Qua 15 Jun 2016 - 9:54

Kyon  • Dom 19 Jun 2016 - 18:42

oliveeirandre  • Qui 23 Jun 2016 - 20:19

Obey  • Dom 26 Jun 2016 - 23:09

mRaAy  • Seg 27 Jun 2016 - 5:40

Deh  • Qua 29 Jun 2016 - 12:57

Re: [Tutorial] ChatBox estilo IPB Qua 29 Jun 2016 - 12:57

Gracias !!!!

Deywes  • Ter 5 Jul 2016 - 21:38

VitorNobre  • Sex 8 Jul 2016 - 18:24

Redline  • Ter 12 Jul 2016 - 15:18

DigoDzerjinsky  • Sex 15 Jul 2016 - 2:16

Victor_VerTeXs  • Sex 15 Jul 2016 - 11:04

tdias72  • Sex 15 Jul 2016 - 11:46

Loko-poko  • Dom 17 Jul 2016 - 18:16

Noumi  • Seg 18 Jul 2016 - 17:11

Conteúdo patrocinado  • 

Página 2 de 5 •   1, 2, 3, 4, 5