Input text area

[Myth024]

I've tried looking through the forums to attempt to find the answer before asking this question. I'm trying to adjust a theme to do a couple of things.
In the area where you type in text, I want to make the area taller as well as put in a background image. Actually, I'd like to have a single background image that covers the chat area, the user list area and the input box area. I'm also trying to figure out where to adjust the borders to have a different texture. I would prefer to attempt to do this with a theme if possible. I'm familiar with CSS but new to PHP.
I figure it has to be some kind of div.pfc_text I just can't find a list anywhere that tells me what various areas (such as div.pfc_chat for example) modify or additional "div" tags that can be modified.
My goal is to use this chat solution to replace an Xat chat room (www.xat.com) but I'd still like to get the general look and feel of it.
I'll settle for someone just pointing me in the right direction or a place where I can find the answer.
Thanks for your help.

[re*s.t.a.r.s.*2]

Myth024,

If you can't fine it in the CSS or style.css.php itself, you will have to look in the pfcclient.js because some files are created on the DOM level using javascript..

Particularly the input text area...

regards.

[Myth024]

Thanks, so far that has helped. I've figured out most of what I needed to do.

[Myth024]

I wanted to note that I figured out how to make the input box a multi-line input chat area. This means that if you are typing and you reach the end of the input box, the text should wrap to the next line. It was relatively simple once I figured it out.

In the chat.html.tpl.php file locate the following code:

Code: Select all

<td class="pfc_td2">
        <input type="text"
               id="pfc_words"
               title="<?php echo _pfc("Enter your message here"); ?>"
               maxlength="<?php echo $max_text_len; ?>"/>

You will notice that you have input type="text". By default, this type of input will not allow words to wrap inside an area. This is why we have to change this line. Remove input type="text" and replace it with textarea rows=4 cols=180. Take a look at the modified code below.

Code: Select all

<td class="pfc_td2">
        <textarea rows=4 cols=180
               id="pfc_words"
               title="<?php echo _pfc("Enter your message here"); ?>"
               maxlength="<?php echo $max_text_len; ?>"></textarea>

A couple of things to note. The original code had a close tag within the code area and did not have a separate closing tag. The new code does and I found this to be necessary for it to work correctly.
The next file you will need to modify is in the style.css.php file. From what I understand if there is an area that is not defined within a specific theme, it will pick up that code from the default theme. So the style.css.php file can be modifed either in the default theme folder or in the theme folder of your choice.
In the style.css.php file there is an area for input#pfc words. What I did was duplicate the information and created an additional entry inside the file.

Code: Select all

textarea#pfc_words
{
  overflow:auto
  border: 0px;
   background-repeat: no-repeat;
  background-align: right;
  font-size: 15px;
  vertical-align: bottom;
  font: 12px Trebuchet MS;
  border-radius:10px;
  background-color:white;
  width:800px;
}

Keep in mind that all the variables for input#pfc_words is exactly the same I just added a textarea#pfc_words section.
I hope this helps anyone attempting the same thing.