The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Chatbox to Shoutbox

View previous topic View next topic Go down

Chatbox to Shoutbox

Post by xPandaz on September 22nd 2012, 10:10 pm

For the longest i wanted to take my simple chatbox and make it into a flashy shoutbox, how can i do that?

It looks like this but with a 'type message and send button' at the top of it.
Im sure alot has seen it, its usually used in RSPS forums.


xPandaz
Forumember

Male Posts : 37
Reputation : 1
Language : English

http://xxpandaz.com/

Back to top Go down

Re: Chatbox to Shoutbox

Post by nextlevelgaming on September 22nd 2012, 10:58 pm

all you have to do is edit your chatbox css and such to work for you. Ill try and get ya set up ok. From there you can edit to your liking.


Code:
/* Chatbox */
#frame_chatbox {
   border: none !important;
   }
body.chatbox {
   min-width: 550px !important;
   background-image: none;
   padding: 0;
   margin: 0;
   background-color: #000000;
   }
#chatbox_members {
   position: absolute;
 right:0;
   top: 61px;
   bottom: 30px;
   width: 180px;
   overflow: auto;
   border-left: 1px solid ;
   }
#chatbox {
   position: absolute;
   top: 61px;
   left:0px;
   right:181px;
   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:left;
   white-space : nowrap;
   }
#chatbox_footer {
   position: absolute;
   top: 31px;
   left: 0;
   right: 0;
   height: 30px;
   }
#chatbox_footer table.text-styles {
   float: right;
   }
#chatbox_footer .text-field {
   float: left;
   }
#chatbox_header {
   height: 30px;
   background-color: #000000;
   }
#chatbox p {
   line-height: 1.2em;
   }
.chatbox_row_1 {
   padding: 4px;
   }
.chatbox_row_2 {
   padding: 4px;
   }
.chatbox_row_3 {
   padding: 4px;
   }
.memberlist_row_1 {
   padding: 2px 2px 2px 10px;
   }
#chatbox_members .member-title {
   text-align: center;
   padding: 0.5em 0.25em;
   background-image: none;
   font-size: 12px;
   background-color: #1f1f1f;
   color : #33aaff;
   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;
   }
#chatbox .user {
   font-weight: bold;
   }
div#chatbox {
   color: #cccccc;
   }
#chatbox_contextmenu {
    background-color: #111111;
    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: #;
    }

thats about all you can do with the the chatbox without being able to actually edit the html so.


Last edited by nextlevelgaming on September 22nd 2012, 11:14 pm; edited 1 time in total (Reason for editing : add the css code)

nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

Re: Chatbox to Shoutbox

Post by xPandaz on September 23rd 2012, 4:00 am




More like this if it makes it easyer.

i didnt see anything when i put that code in the CSS .

xPandaz
Forumember

Male Posts : 37
Reputation : 1
Language : English

http://xxpandaz.com/

Back to top Go down

Re: Chatbox to Shoutbox

Post by nextlevelgaming on September 23rd 2012, 5:57 am

OOOO well I see now that you are using INVISION. So I prolly can't help ya much with the CSS right now. I can check tomorrow to see if anyone answered your question and try to help by going to your site. Thanks and sorry, just delete the code I gave you. Ill get the codes that you'll need tomorrow

nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum