Adding Chatbox/Shoutbox in a particular location...

Ask your general design questions here.

Moderators: not2foxie, bwayne, spherical

monkeysontoast
Joined: 12 Feb 2017, 22:11

12 Feb 2017, 22:11 #1

Hello!
I've been trying to add a chat/shoutbox to my board without much success. Here is the board:

The Lost Cinephiles 

It's an old UI board, so I'm not sure if that makes a difference.

I've used the code found in the Scripts section, but have only been able to add it to the header/footer, above everything else or below. Also, I have not been able to get it the same width of the board, despite trying out different pieces of code I found on the support boards.

I would really love for the chat/shoutbox to go under the Community Announcement section, prior to the "Getting Started" section, or just above the community statistics, and to have it fit within the width of the board. Is this possible?

Thanks!
Megan
Reply

spherical
Joined: 05 Feb 2013, 15:12

13 Feb 2017, 13:01 #2

I have not used the chatbox/shoutbox the way you want to but was thinking .... have you tried adding the script code at the bottom of the announcement box?
Reply

User avatar
Zandranna
Joined: 05 Feb 2013, 07:48

13 Feb 2017, 15:19 #3

If you have an old style board you can use this script.
http://yuku.yuku.com/domainscripts/scri ... Boxes.html
What you do is create the box and then add the code for the shoutbox in it.It would look something like this....<box after="announcement-box"><chatbox limit="20" refresh="0" width="100%" height="200px"></box>If you wanted it above the stats box it would be<box before="stats-box"><chatbox limit="20" refresh="0" width="100%" height="200px"></box>
Last edited by Zandranna on 13 Feb 2017, 15:32, edited 4 times in total.
Reply

bwayne
Joined: 05 Feb 2013, 23:46

14 Feb 2017, 10:22 #4

Martha and Zandranna......thank you for sharing that info! I played around with it and was able to put the chatbox below the tool bar...along with my links on the suckerfish coding......I applied it to my skin board.....http://theskinningshed.yuku.com
come hang with us
Reply

User avatar
Zandranna
Joined: 05 Feb 2013, 07:48

14 Feb 2017, 10:31 #5

That board of yours is terrific Kay. I love it.
Reply

bwayne
Joined: 05 Feb 2013, 23:46

14 Feb 2017, 11:08 #6

Thank you Zan.....could not have done it without all the info I learned from you, Martha, and of course Arizona........
come hang with us
Reply

monkeysontoast
Joined: 12 Feb 2017, 22:11

14 Feb 2017, 12:18 #7

Thanks so much for the help! I've gotten pretty far with my chatbox, and I have it close to where I'd like it. Extra thanks to spherical for your Chatbox Codes post that I found on the forum.

I do have a few other questions that I hope you ladies can help me with. :)

1) How to I edit the area of the chatbox where you type? I haven't been able to figure out how to edit/adjust the text box or the background behind it. I'd like to change the background color, and give the text input box a fixed width and margins.

2) I have the td section text set to 970px, with 10px margins, so it's centered within the chatbox. However, if someone types out a really long message, I'll get a horiztonal scroll bar. How can I fix the width so that the text goes onto a second line when it reaches the 970px width?

3) When I post something in the chatbox, I'm directed back to the top of the board...is there a way to stay on the chatbox after hitting "post"?

Thanks again for the help!
Reply

spherical
Joined: 05 Feb 2013, 15:12

14 Feb 2017, 16:22 #8

Fantastic skin Kay :) and thanks Sandy for those codes ... I looked for mine but for the life of me couldn't find them.
This is the full CSS code to use if you have problems with scroll bars showing when using old boards on the new gadgets such as iPad's etc
 
/*Chatbox CSS Codes*/
#widgets_chatbox table { background: transparent; }
#widgets_chatbox { background: transparent; }
#widgets_chatbox tr { background: transparent; }
#widgets_chatbox td { font-size: 14px; border-bottom: 1px solid #333; background: #fff; }
#widgets_chatbox #wrapper { width: 100%; height: 151px; margin: 0px auto;
border: 1px #333; overflow-y: scroll;  }
#chatbox_form > p > textarea#chatbox_body {border: 2px dotted #ADD8E6; }
This is the part within the above code that stops the double scrollbars from showing (Change the height: 151px to your liking.)
 
#widgets_chatbox #wrapper { width: 100%; height: 151px; margin: 0px auto; border: 1px #333; overflow-y: scroll;  }
And this part is for editing the text area/where you type in.
 
#chatbox_form > p > textarea#chatbox_body {background: #DDCBF1; color: #fff; border: 2px dotted #ADD8E6; }
 
Reply

spherical
Joined: 05 Feb 2013, 15:12

14 Feb 2017, 17:15 #9

Try and change the widt to 100% in the td bit:
 
#widgets_chatbox td { width: 970px; }  -   to  -  #widgets_chatbox td { width: 100%; }
  Or in your Custom Footer area where you put this code:
 
<box before="stats-box">
<chatbox limit="20" refresh="0" width="100%" height="200px">
</box>
Perhaps have a play with the - width="100%" ...... maybe try and set that to width="970px"  and see if that works better.
3) I don't think there is anything that can be done in regards to staying on the chatbox after making a post in there.
Even if the chatbox is at the top of the board, the same thing happens.
 
Reply

monkeysontoast
Joined: 12 Feb 2017, 22:11

14 Feb 2017, 20:08 #10

Hey, spherical.

Thank you again for the help. I did find your Chatbox Code post previously, and have tried all of the things you suggested. If set to 100%, the chatbox td is only as wide as the text that has been input. If I change the chatbox limit to 970px, the dark teal background doesn't fill up the whole space.

My main desire right now is to format the white text input box the same as the chatbox td...970px wide, centered, with 10px margins on the side. I'd also love "moderate chatbox" and the "post" button to have a 10px margin on the left side. In addition, I want to change the background color BEHIND the textarea#chatbox_body, not the actual color of the text box itself. It it currently the color of the board's main background.

Thanks!
Reply