How do I resize the Chatbox?

How do I resize the Chatbox, to get the entire chatbox to fit in the portal on the left side? I would also like to have people view the chat from the portal as well.

What is the CSS code that will alow me to change it, to do what I would like it to do?

What do you sugest?

hi there,
yes there is a way to re-size a chatbox using a css code. but believe me it not good option to do,

resizing a chatbox just gonna add more bugs to current bugged chatbox.

Well, that bites.
Thanks.

At the bottom of your CSS is where you'll need to change several bits of the code in order to make it uniform to fit the width of the left column on your portal page. As an example, you can see what I've done in order to make the FM chatbox fit into my forum widgets (right side):

Spoiler:

It works just fine, but my members prefer the Chatango chatbox, so the FM chatbox was removed. These are just very basic aspects of the CSS code you can modify to make your chatbox fit.. of course you can tweak the colors, and other portions, too.

I'm having a slight problem, the code is displaying under the chat box or where the chat box is too be. This is the defult code that I currently have...so, using this code how should I edit it?

Code:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" id="chatbox_container">
   <tr>
      <td class="row1" valign="top" align="center">
         <div id="chatbox_portal" style="height:300px;"></div>
         <script type="text/javascript">
            insertChatBox('chatbox_portal', '{U_FRAME_CHATBOX}');
         </script>
      </td>
   </tr>
</table>

<table width="100%">
   <tr>
      <td width="100%"> </td>
      <td align="right" width="20">
         <img src="http://2img.net/i/fa/resize.gif" onmousedown="javascript:resizeElement(event, 'chatbox_portal');" alt="" style="cursor:se-resize;" />
      </td>
   </tr>
</table>

Ah.. that's the template html code, not the CSS code. If you alter the height/width in the html code, the chatbox will still have a rather large area where the online members' names are listed and for the most part, you won't be able to see the actual chatbox area.

Try going to Display > Colors > CSS Stylesheet , and scroll to the bottom of the CSS code. If you don't see your CSS code there, click on 'See your forum basic CSS'. Highlight and copy everything in the box and paste it into the empty section of your Stylesheet. Click 'save'. That way your basic CSS will be readily available and you can alter the chatbox.

So, with the information you sent me the code should look like this?

Code:

/* Chatbox */
body.chatbox {
   min-width: 550px !important;
   background-image: none;
   padding: 0;
   margin: 0;
   background-color: #000000;
   }
#chatbox_members {
   position: absolute;
   top: 50px;
   bottom: 30px;
   width: 80px;
   overflow: auto;
   border-right: 1px solid ;
   }
#chatbox {
   position: absolute;
   top: 50px;
   left: 82px;
   right: 0;
   bottom: 30px;
   overflow: auto;
   line-height: 10px;
   }
.chatbox_row_1,.chatbox_row_2,.chatbox_row_3 {
   font-size: 12px;
   }
.chatbox-options {
   text-align:right;
   }
#chatbox_messenger_form .gen,#chatbox_messenger_form .text-field,#chatbox_messenger_form {
   float:right;
   }
#chatbox_footer {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 30px;
   }
#chatbox_footer table.text-styles {
   float: right;
   }
#chatbox_footer .text-field {
   float: left;
   }
#chatbox_footer .chatfootertable {
   margin: 5px;
   }
#chatbox_header {
   height: 50px;
   background-color: #000000;
   }
#chatbox p {
   line-height: 1.2em;
   }
.chatbox_row_1 {
   padding: 4px;
   background-color: #000000;
   }
.chatbox_row_2 {
   padding: 4px;
   background-color: #000000;
   }
.chatbox_row_3 {
   padding: 4px;
   background-color: #000000;
   }
.memberlist_row_1 {
   padding: 2px 2px 2px 10px;
   background-color: #000000;
   }
#chatbox_members .member-title {
   text-align: center;
   padding: 0.5em 0.25em;
   background-image: none;
   font-size: 12px;
   background-color: #000000;
   color : #dbf60a;
   font-family: Verdana,Arial,Helvetica,sans-serif;
   }
#chatbox_members ul {
   list-style: none;
   margin: 0 0 0 10px;
   }
#chatbox_members ul li {
   margin: 2px 2px 2px 0;
   }
#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 .user {
   font-weight: bold;
   }
div#chatbox {
   color: #fff4a9;
   }
#chatbox_contextmenu {
    background-color: #000000;
    border:1px solid #aaa;
   }
#chatbox_contextmenu p {
   margin:0;
    padding: 1px 4px;
   font-family: verdana, arial, sans-serif;
   background: #;
   border-bottom:1px solid #777;
    }
#chatbox_contextmenu p.hover {
    background: #;
    }
#chatbox_contextmenu p.close {
   background: #ddd;
    padding: 1px;
    font-size: 70%;
    color:#fff;
    background: url('');
    }
#chatbox_contextmenu p.close img {
    vertical-align: middle;
    padding-left: 20px;
   }
#chatbox_contextmenu a {
    color: #;
    text-decoration: none;
    font-size: 70%;
   }
#chatbox_contextmenu a:hover {
    color: #;
    }
.fontbutton{
   border:0;
   }
* 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");
   }


I just want to double check before I accidently make some major changes and mess things up. Lol

lol.. understandable, but you won't really mess things up. If something doesn't seem quite the right size you can always go back and change it. The main trick to CSS is making sure you have the same amount of '{' as '}'.

I noticed that you used the same width sizes as I posted.. 80 for the members list portion and 82 for where the message portion begins. These settings may not be the right size for your width on your portal column, so you may need to adjust those accordingly. However, you won't really know until you've posted it, tho.

The code itself looks right. Go ahead and post it up and see what, if anything, you'd like to tweak. It seems that you got the knack of knowing what each section goes to on the final outcome. Also, don't forget that if you adjust the height of your header, you'll also need to adjust the height position of both the members section and the chatbox section to make sure they don't overlap. This will come in handy if you decide to change the font size of the text in the header.

Thank you, it worked but I still could not figure out what size px I needed to use so. I feel as if I need to put it in a different location.

I'm glad it worked. It does become a bit difficult when you have a column set to a % instead of actual pixels like we have to on the index page. Hope everything works out.