Chatbox problem - related to phpbb3 skin

Hello,

i will get straight to the point. I am using phpbb3 skin called Midnight Blue. Skin was made by Brandon05, a forumotion member whos last visit was at 20.11.2008 - so he cant help. When i enable chatbox, this is what happens :



Right Click → View Image to view it in full size

Every 2nd comment is covered with white line. Comments are still accepted ( as you can see, i highlighted 3rd comment ) but you just cant read them. Besides - the place where you should insert the text is a bit cut off ( 30-50 % cut off to be precise ). Chatbox like this cant serve me.

I have tried other skins and it worked ok. No white lines, all comments visible. So obviously there is a problem only with this one. As much as i would like to have chatbox i am not willing to change entire skin for it. So, i came here, asking for help and hoping someone will know the answer.

Additional Information

If i am not asking too much,

Regards

I think it could be the skin colour for the chat-box, but I am not sure.

I was thinking about that too, but i didnt see any option where to set chatbox colors. Not at chatbox options nor Pics Management.

Put this code into the CSS chatbox section

Code:


.chatbox_row_1 {
   padding: 4px;
   background-color: #000000;
   }
.chatbox_row_2 {
   padding: 4px;
   background-color: #000000;
   }
.chatbox_row_3 {
   padding: 4px;
   background-color: #595959;
   }


that will give you 2 black rows seperated by a gray line.
change the colors to whatever you want

it hasn't got the latest chatbox fixes...
Those fixes were added with the last update, and that theme is earlier than that.

here is the fix:
you have to go to your CSS and update it.
Find this part in your CSS:
/*chatbox----------*/

select all the text that is found between the /*chatbox right up to the /*stats----------------*/

and paste this:

Code:

/* Chatbox-------------------------------------------------*/
body.chatbox {
   background-image: none;
   }
.chatbox {
   background-color: #ecf3f7;
   }
#chatbox_header {
   height: 30px;
   background-color: #0076b1;
   }
.chatbox .forabg {
   margin: 0;
   border: none;
   padding: 0;
   margin: 0;
   background-color: #0076b1;
   }
.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 : #105289;
   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: #ecf3f7;
   }
.chatbox_row_2 {
   padding: 4px;
   background-color: #e1ebf2;
   }
.chatbox_row_3 {
   padding: 4px;
   background-color: #cadceb;
   }
.memberlist_row_1 {
   background-color: #ecf3f7;
   }
#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: #ecf3f7;
   border-bottom:1px solid #777;
   }
#chatbox_contextmenu p.hover {
   background: #e1ebf2;
   }
#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: #105289;
    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");
   }

make sure that inbetween those 2 classes you have that fix... don't remove the /*chatbox or /*stats part.

From what I remember the space between the original /*chatbox to the /*stats should be about 16 lines... or so... don't remember/

After you paste the fix you can edit the color settings to your needs.

Psi-chotic! : thank you for taking time and helping me, i really appreciate it. However, i am on very weak ground when it comes to CSS, if Jalokim wouldnt posted i would be clueless on what to do. But then again, you showed me WHAT exactly to change. Thanks.

Jalokim : thanks, your answer really helped me a lot. I changed chatbox row 1 & 2 to the same gray color as the rest of chatbox already is. I noticed that this update didnt fix that cut off insert text window, so i examined the code and changed

Code:

#message,#submit_button{
  border-width: 3px;

from 1px to 3px. That made slight improvement and once you click there for the first time it stays ok ( its not longer cut off ). I hope thats okay ?

Edit : already downloading ebooks of CSS. I have got to learn this.

Solved?

Well the original problem is solved, but the side problem ( cut off insert text place ) isnt. I am currently waiting for Jalokim`s response if this is a bug and if my modifying fixed it without interfering other css codes.

Tarogasini wrote:Well the original problem is solved, but the side problem ( cut off insert text place ) isnt. I am currently waiting for Jalokim`s response if this is a bug and if my modifying fixed it without interfering other css codes.

It looks like you've got the same problem as me.

yeah...forgot about that...
I fixed this on skittles forum last time:

Code:

#chatbox_footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px;
  }

you need to add a height script to the footer

i remember adding a 16 pixel height to the footer:

Code:

#chatbox_footer {
height: 16px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px;
  }

try that... if you need it to be bigger just change the pixel height...
I'm glad you understood my post... i'm felling sluggish and I don't even know if I made sense...
cheers

Well, this thread has solved all my problems, except I need to know how to change the color of the bars that say Online and Away.

Thanks Jalokim, it worked like a charm

I will mark this as solved so staff can lock it later.

sanket...don't lock this...
I'll fix Justins problem before I get back to bed ... again...
This post will be edited soon

@justin ..
its either the color code under:

Code:

#chatbox_members .member-title {

or :

Code:

.chatbox_row_3 {

But my vote is on that member title class... it sounds more online bar ish

Jalokim wrote:sanket...don't lock this...
I'll fix Justins problem before I get back to bed ... again...
This post will be edited soon

@justin ..
its either the color code under:

Code:

#chatbox_members .member-title {

or :

Code:

.chatbox_row_3 {

But my vote is on that member title class... it sounds more online bar ish

You have to be right because I already tried the second code. Anyway, thanks for the help Jalokim, I hope you get better soon.