[TUTORIAL] ChatBox estilo IPB

Neste tutorial irá ensinar como colocar o chatbox em estilo ipb para forumeiros





1º - Reconheça o código

Código:


#chatbox_footer {
background:rgba(51, 51, 51, 0.91);
border:1px solid #292929;
border-bottom-width:4px;
padding:4px
}

#chatbox.msg span {
color: #FFF !important
}

#chatbox_footer .right {
float:left
}

#chatbox_messenger_form .right {
font-size:0;
margin-left:8px
}

.chatbox_row_1, .chatbox_row_2 {
  background: #414141
}


input#message.post {
background-color:#242424;
height:30px;
outline:0;
width:425px;
border: 1px solid #666;
color: #fff
}

#submit_button {
-moz-border-radius:3px;
-moz-box-shadow:inset 0 1px 0 0 #5c5c5c, 0 2px 3px rgba(0,0,0,0.2);
-webkit-border-radius:3px;
-webkit-box-shadow:inset 0 1px 0 0 #5c5c5c, 0 2px 3px rgba(0,0,0,0.2);
background:#212121 url(http://i.imgur.com/IoFhTvG.png) repeat-x top;
border-color:#212121;
border-radius:3px;
box-shadow:inset 0 1px 0 0 #5c5c5c, 0 2px 3px rgba(0,0,0,0.2);
color:#fff;
height:30px;
margin-left:15px;
padding:0 15px
}

.fontbutton {
-moz-box-shadow:inset 0 1px 0 0 #575757, 0 2px 3px rgba(0,0,0,0.2);
-webkit-box-shadow:inset 0 1px 0 0 #575757, 0 2px 3px rgba(0,0,0,0.2);
background:#414141;
border-color:#343435;
box-shadow:inset 0 1px 0 0 #575757, 0 2px 3px rgba(0,0,0,0.2)
}

.chatbox-options li, .chatbox-options li a, .chatbox-options li label {
  color: #fff !important
}
  
#divsmilies img + img {
visibility:visible!important
}

.chatbox-title, .chatbox-title a.chat-title {
color: rgba(234, 238, 255, 0.9) !important
}

#chatbox_header.main-head {
background: rgba(0, 0, 0, 0.81);
padding: 0.6em;
border-radius: 5px
}

#chatbox_messenger_form div.right img {
visibility:hidden
}

#simple-wrap {
background:#fff
}

#divbold,#divcolor,#divitalic,#divsmilies,#divstrike,#divunderline {
background-position:center;
background-repeat:no-repeat
}

#divbold {
background-image:url(http://cdn2.iconfinder.com/data/icons/oxygen/16x16/actions/format-text-bold.png)
}


#divitalic {
background-image:url(http://cdn2.iconfinder.com/data/icons/oxygen/16x16/actions/format-text-italic.png)
}

#divunderline {
background-image:url(http://cdn2.iconfinder.com/data/icons/oxygen/16x16/actions/format-text-underline.png)
}

#divstrike {
background-image:url(http://cdn1.iconfinder.com/data/icons/bnw/16x16/actions/text_strike.png)
}

#divcolor {
background-image:url(http://2img.net/i/fa/wysiwyg/color_swatch.png)
}

#divsmilies {
background-image:url(http://i26.servimg.com/u/f26/12/56/56/12/emotic10.png)
}

#chatbox span[title]{
float:right!important;
  color: #fff
}

#chatbox .user {
color: #fff !important;
}
  
#chatbox {
-moz-box-shadow:2px 0 4px rgba(0,0,0,0.1);
-webkit-box-shadow:2px 0 4px rgba(0,0,0,0.1);
background: rgba(10, 10, 10, 0.77) !important;
border: 1px solid rgba(227, 227, 227, 0.29) !important; /*outra borda:border:1px solid #e3e3e3;*/
bottom:55px;
box-shadow:2px 0 4px rgba(0,0,0,0.1);
left:0;
width: 100%;
right:190px;
top:40px;
padding: 7px 2px 6px !important;

}

#chatbox .msg span {
  color: white !important
}

#chatbox_members {
display: none
}

#chatbox p span[style="color:green;"], #chatbox p span[style="color:red;"] {
background: transparent;
padding: 4px 0 4px;
border: 1px solid rgba(204, 204, 204, 0.02);
border-radius: 8px
}

/*display none*/
#chatbox_option_with_archives, #chatbox_option_autorefresh, #chatbox_option_without_archives {
display: none
}

/*Mensagem quando off*/
#chatbox p.chatbox_row_1.clearfix:first-child span[style="font-style:italic"]:last-child:before {
margin-left:7px;
padding-left:22px;
content:'Entre pra conversar.';
font-size:15px;
   color: #fff !important
}

#chatbox p.clearfix[class^="chatbox_row_1"] span[style="font-style:italic"] {
font-size:15px;
font-style:normal!important;
background-color:#EDEFF4
}

#chatbox p.chatbox_row_1.clearfix:first-child span[style="font-style:italic"]:last-child {
font-size:0px
}

#chatbox p.chatbox_row_1.clearfix:first-child span[title]:first-child {
visibility:hidden
}

2º - Colocação do CCS:
Primeiro iremos aceder ao Painel de controle Visualização Imagens e Cores Cores Folha de estilo CSS:
Coloque o código acima.


3º - Resultado:

---

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: ChatBox estilo IPB