• Descrição:

Olá,

Estou a usar chatbox retráctil só que tem um problema vejam como ele ficou ao fazer login:



Ou seja está todo bugado seria possível dar um jeito?

Estou a testar neste fórum: http://testarnada.forumeiros.com/forum

• Informações:

Código:

<div style="overflow: visible; position: fixed; bottom: 30px; height: 350px; right: 0px; z-index:1000;">
   <iframe frameborder="0" marginheight="0" marginwidth="0" style="height: 350px; float: right; overflow-x: visible; overflow-y: visible; display: none; width:700px" scrolling="yes" id="chatboxpop" src="/chatbox">
   </iframe>
   <div style="margin-top: 10px; cursor :pointer; float:left" onclick="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();">
      <img style="display: inline; " id="chatboxopen" src="http://i34.servimg.com/u/f34/16/04/51/75/open10.png" /><img style="cursor: pointer; display: none; " id="chatboxclose" src="http://i34.servimg.com/u/f34/16/04/51/75/close10.png" />
   </div>
</div>

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: 0px; 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>

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: 0px; 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>

Código:

<div style="overflow: visible; position: fixed; bottom: 30px; height: 350px; right: 0px; z-index:1000;">
  <iframe frameborder="0" marginheight="0" marginwidth="0" style="height: 350px; float: right; overflow-x: visible; overflow-y: visible; display: none; width:700px" scrolling="yes" id="chatboxpop" src="/chatbox">
  </iframe>
  <div style="margin-top: 10px; cursor :pointer; float:left" onclick="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();">
      <img style="display: inline; " id="chatboxopen" src="http://i34.servimg.com/u/f34/16/04/51/75/open10.png" /><img style="cursor: pointer; display: none; " id="chatboxclose" src="http://i34.servimg.com/u/f34/16/04/51/75/close10.png" />
  </div>
</div>

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: 0px; 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>

Código:

body.chatbox {
   background-color: #fff;
   background-image: none;
   margin: 0;
   padding: 0
 }
 
#chatbox_header {height: 30px}
 
   #chatbox_header.main-head {
      background-color: #1f537b;
      color: #dedfdf;
      padding: 0 1.3em
    }
 
.chatbox-title,.chatbox-title a.chat-title {color: #dedfdf;text-decoration:none}
 
.chatbox-title {
   float: left;
   margin: 0;
   padding: 2px 5px 0;
   width: 15em
 }
 
.chatbox-options {
   float: right;
   font-size: 11px;
   list-style: none;
   margin: .7em .5em .5em
 }
 
   .chatbox-options li {display: inline}
 
   .chatbox-options li,.chatbox-options li a,.chatbox-options li label {color: #dedfdf}
 
#chatbox_members {
   border-right: 1px dashed #ccc;
   bottom: 30px;
   overflow: auto;
   position: absolute;
   top: 30px;
   width: 180px
 }
 
#chatbox_messenger_form {margin: 10px 0 0}
 
#chatbox_members .member-title {
   background-color: #f4f9fd;
   background-image: none;
   color: #00569c;
   font-family: Verdana,Arial,Helvetica,sans-serif;
   font-size: 12px;
   padding: .5em .25em;
   text-align: center
 }
 
#chatbox_members ul {list-style: none;margin:0 0 0 1em}
 
   #chatbox_members ul li {margin: .5em .5em .5em 0}
 
#chatbox {
   bottom: 30px;
   left: 181px;
   line-height: 10px;
   overflow: auto;
   position: absolute;
   right: 0;
   top: 30px
 }
 
   #chatbox p {line-height: 1.2em}
 
.chatbox_row_1 {background-color: #fbfbfb;padding:4px}
 
.chatbox_row_2 {background-color: #f4f4f4;padding:4px}
 
.chatbox_row_3 {background-color: #f4f9fd;padding:4px}
 
#chatbox .user {font-weight: 700}
 
.memberlist_row_1 {background-color: #fbfbfb}
 
#chatbox_footer {
   border-top: 1px dashed #ccc;
   bottom: 0;
   left: 0;
   position: absolute;
   right: 0
 }

Código:

/* Chatbox-------------------------------------------------*/
body.chatbox {
   background-image: none;
   }
.chatbox {
   background-color: #e5f1f9;
   }
#chatbox_header {
   height: 30px;
   background-color: #1675bc;
   }
.chatbox .forabg {
   margin: 0;
   border: none;
   padding: 0;
   margin: 0;
   background-color: #1675bc;
   }
.chatbox-title,.chatbox-title a.chat-title {
   color: #ffffff !important;
   }
.chatbox-title {
   float: left;
   margin: 0;
   padding: 2px 5px 0 5px;
   width: 15em;
   }
.chatbox-options {
   float: right;
   list-style: none;
   font-size: 11px;
   margin: 0.7em 0.5em 0.5em 0.5em;
   }
.chatbox-options li {
   display:inline;
   }
.chatbox-options li,.chatbox-options li a,.chatbox-options li label {
   color: #ffffff;
   }
#chatbox_members {
   position: absolute;
   top: 30px;
   bottom: 30px;
   width: 180px;
   overflow: auto;
   border-right: 1px solid ;
   }
#chatbox_members .member-title {
   text-align: center;
   padding: 0.5em 0.25em;
   background-image: none;
   font-size: 12px;
   background-color: #cadceb;
   color : #0372be;
   font-family: Verdana,Arial,Helvetica,sans-serif;
   }
#chatbox_members ul {
   list-style: none;
   margin: 0 0 0 1em;
   }
#chatbox_members ul li {
   margin: 0.5em 0.5em 0.5em 0;
   }
#chatbox {
   position: absolute;
   top: 30px;
   left: 181px;
   right: 0;
   bottom: 30px;
   overflow: auto;
   line-height: 10px;
   }
.chatbox_row_1 {
   padding: 4px;
   background-color: #e5f1f9;
   }
.chatbox_row_2 {
   padding: 4px;
   background-color: #dceaf5;
   }
.chatbox_row_3 {
   padding: 4px;
   background-color: #cadceb;
   }
.memberlist_row_1 {
   background-color: #e5f1f9;
   }
#chatbox_footer {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 5px;
   }
#chatbox_footer label {
   color: #ffffff;
   }
#message,#submit_button{
   border-width: 1px;
   }
.fontbutton {
   padding: 1px;
   cursor: pointer;
   text-align: left;
   }
.fontbutton_normal {
   background: #E1E1E2;
   }
.fontbutton_selected {
   background: #BBC7CE;
   border: 1px solid #22229C;
   }
.fontbutton_clicked {
   background: #959595;
   border: 1px solid #22229C;
   }
.fontbutton_hover {
   background: #E1E1E2;
   border: 1px solid #22229C;
   }
#chatbox_contextmenu {
   border: 2px solid black;
   background-color: #cadceb;
   }
#chatbox_contextmenu p {
   margin:0;
   padding: 1px 4px;
   font-family: verdana, arial, sans-serif;
   background: #e5f1f9;
   border-bottom:1px solid #777;
   }
#chatbox_contextmenu p.hover {
   background: #dceaf5;
   }
#chatbox_contextmenu p.close {
   background: #ddd;
   padding: 1px;
   font-size: 95%;
   color:#fff;
   background: url('');
   }
#chatbox_contextmenu p.close img {
   vertical-align: middle;
   padding-left: 20px;
   }
#chatbox_contextmenu a {
   color: #0372be;
    text-decoration: none;
    font-size: 95%;
   }
#chatbox_contextmenu a:hover {
   color: ;
   }
.fontbutton {
   background:#E1E1E2 none repeat scroll 0%;
   border:medium none;
   color:#000000;
   float:left;
   margin-right:10px;
   padding:1px;
   }
#chatbox .user {
   font-weight: bold;
   }
* html #chatbox-members {
   
/* IE expressions helping IE work in Standards mode */
height: expression(( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 3) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 0) ) + "px");
   }
* html #chatbox {
   
/* IE expressions helping IE work in Standards mode */
height: expression(( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 3) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 0) ) + "px");
   width: expression(( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 10) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 1) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 1.3) ) + "px");
   }
* html #chatbox-footer {
   
/* IE expressions helping IE work in Standards mode */
width: expression(( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 0) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 0) + (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 0) ) + "px");
   }

Código:


body {
font: normal 13px Ubuntu,helvetica,arial,sans-serif;
position: relative;
}


Código:


body {
font: normal 13px Ubuntu,helvetica,arial,sans-serif;
}


Código:

#chatbox_messenger_form div.right img {
visibility: hidden;
}
#divsmilies img + img {
visibility: visible!important;
}
#divbold , #divitalic , #divunderline , #divstrike , #divcolor , #divsmilies{
background-repeat: no-repeat;
background-position: center;
border-radius: 5px;
border: 1px solid #383838;}
#divbold {background-image: url("http://i26.servimg.com/u/f26/12/56/56/12/bold10.png");}
#divitalic{background-image: url("http://i26.servimg.com/u/f26/12/56/56/12/italic10.png");}
#divunderline{background-image: url("http://i26.servimg.com/u/f26/12/56/56/12/underl10.png");}
#divstrike{background-image: url("http://i26.servimg.com/u/f26/12/56/56/12/strike10.png");}
#divcolor{background-image: url("http://i26.servimg.com/u/f26/12/56/56/12/font_c11.png");}
#divsmilies{background-image: url("http://i26.servimg.com/u/f26/12/56/56/12/emotic10.png");}
#chatbox_header.main-head {
background: url(http://i78.servimg.com/u/f78/17/31/71/58/mainti10.png) repeat-x bottom #1f537b;
padding: 3px 4px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
min-height: 6px;
}
.chatbox-options li, .chatbox-options li a, .chatbox-options li label {
color: #fff;
}
body[bgcolor] {background: #FCFCFF;}
.main-content.chatbox {
  background-color: #FCFCFF;
  padding: 10px;
  border: 1px solid rgb(204, 204, 204);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  padding-bottom: 0px;
}
#chatbox_members {
background: rgb(246, 246, 248);
border: 1px solid rgb(204, 204, 204);
margin: 4px;
top: 43px;
bottom: 28px;
right: 10;
}
#chatbox_members .member-title {
background: url(http://i78.servimg.com/u/f78/17/31/71/58/mainti10.png) repeat-x bottom #363636;
color: #fff;
padding: 5px;
text-align: left;
padding: 8px 10px;
}
#chatbox p {
background: transparent;
padding: 5px;
line-height: 1.3em;
}
#chatbox p span[style="color:green;"], #chatbox p span[style="color:red;"] {
}

input#message.post:focus {
background: rgb(255,255,240) url('http://i58.servimg.com/u/f58/18/24/85/15/form-e10.png') repeat-x;
border-top-color: rgb(150,150,150);
border-bottom-color: rgb(230,230,230);
}
#simple-wrap {
  background:white;
}
#chatbox_top {
  min-height: 280px;
}
#chatbox{
  top: 43px;
  bottom: 28px;
  margin: 5px;
  background: rgb(246, 246, 248);
  border: 1px solid rgb(204, 204, 204);
  padding: 5px;
  right: 198px;
  left:0;
}

Código:


#chatbox_footer {
border-top: none!important; 
}


Saudações!

Painel de Controle    Visualização    Imagens e cores    Cores    Folha de estilo CSS

Código:

html, body {background: white!important;}

Código:

html { background: white !important; }

Saudações!

Painel de Controle    Visualização    Imagens e cores    Cores    Folha de estilo CSS

Código:

.fontbutton {
-moz-border-radius: 2px;
-moz-box-shadow: rgba(0,0,0,0.43) 0 1px 3px;
-webkit-border-radius: 2px;
-webkit-box-shadow: rgba(0,0,0,0.43) 0 1px 3px !important;
background: #646464 url(http://i58.servimg.com/u/f58/18/62/03/31/highli17.png) repeat-x 0 0 !important;
border: 1px solid #585858!important;
border-radius: 2px !important;
box-shadow: rgba(0,0,0,0.43) 0 1px 3px !important;
color: #fff !important;
font-family: tahoma,helvetica,arial,sans-serif !important;
font-size: 13px !important;
font-style: normal !important;
font-variant: normal !important;
font-weight: normal !important;
padding: 2px 5px !important;
text-shadow: #474747 0 -1px 0 !important;
position: relative !important;
top: -2px !important;
}