Can chat site to move to the right.

First topic message reminder :

Can chat site to move to the right. Now you can put at top or bottom of the site. Could it be from, right and be in a smaller size.


I could not fix the problem
http://help.forumotion.com/t125881-can-chat-site-to-move-to-the-right

up

Hello smurfavr,

There isn't much you can do to get it working from the default chat widget.(Its mainly for portal)

I edited the code I wrote a couple days ago for popping chat to a widget. I hope this will suffice for you.

Administration Panel > Modules > Portal & Widgets > Forum widgets management


Create a new widget:


Widget Name: Chat
Use a table type: no
Widget Title: Chat
Widget Source:

Code:

<script>
jQuery(document).ready(function(){
jQuery('#chatBox').hide();
if(!document.getElementById('logout')) {
jQuery('#chatButton').hide();
jQuery('#chatBox').hide();}
jQuery('#chatButton').click(function() {
jQuery('#chatBox').fadeToggle();
 });
});
</script>
<style>
#chatButton{
box-shadow:0px 10px 6px rgba(255,255,255, 0.2) inset, 0px -10px 6px rgba(0,0,0, 0.2) inset;
padding:10px 20px 10px 20px;
background-color:#257;
border:1px solid #146;
font-weight:bold;
font-size:10px;
z-index:999;
color:#fff;
}
#chatButton:hover{
cursor:pointer;
color:#ff8;
background-color:#368;
}
#chatBox iframe{
position:absolute;
right:10px;
z-index:999;
border:none;
height:50%;
width:65%;
}
</style><center><div id="chatButton" title="Open/Close Chatbox">Open Chat</div><div id="chatBox"><iframe src="/chatbox/index.forum"></iframe></div></center>

Then drag onto right side of forum and save.

The result should be:

Can you make a chat is as the picture.

I am not sure, when the width of the chatbox is lower than 400px everything just becomes a giant mess.



I'll play around though.

Can you give me the code for chatting which has a small size to try it.

We are trying to tell you that is not the Forumotion default chatbox, but another chatbox. It looks like a shoutbox. Go here and search for chatboxes/shoutboxes - http://www.widgetbox.com/widgets/ . Get the code and create a new widget.

If you change the code could work.

SethC1995  Can you give this code from your last post.

Hello,
Try adding in your CSS Stylesheet (ACP ~> Display ~> Colors ~> CSS Stylesheet)

Code:


#chatButton{
box-shadow:0px 10px 6px rgba(255,255,255, 0.2) inset, 0px -10px 6px rgba(0,0,0, 0.2) inset;
padding:10px 20px 10px 20px;
background-color:#257;
border:1px solid #146;
font-weight:bold;
font-size:10px;
z-index:999;
color:#fff;
}
#chatButton:hover{
cursor:pointer;
color:#ff8;
background-color:#368;
}
#chatBox iframe {
position: fixed!important;
z-index: 999;
height: 80%!important;
width: 20%!important;
top: 0!important;
bottom: 0!important;
right: 0!important;
}
#chatbox_members {
display: none!important;
}
.chatbox-options {
display: none!important;
}
#chatbox {
left: 0px!important;
bottom: 5px!important;
height: 70%;
}

And make a widget adding these codes:

Code:


<script>
jQuery(document).ready(function(){
jQuery('#chatBox').hide();
if(!document.getElementById('logout')) {
jQuery('#chatButton').hide();
jQuery('#chatBox').hide();}
jQuery('#chatButton').click(function() {
jQuery('#chatBox').fadeToggle();
 });
});
</script>
<center><div id="chatButton" title="Open/Close Chatbox">Open chat</div><div id="chatBox"><iframe src="/chatbox/index.forum"></iframe></div></center>

Can you do it as I have shown in the photo in this post.

http://help.forumotion.com/t126809-can-chat-site-to-move-to-the-right#847046

CSS:

Code:



#chatButton{
box-shadow:0px 10px 6px rgba(255,255,255, 0.2) inset, 0px -10px 6px rgba(0,0,0, 0.2) inset;
padding:10px 20px 10px 20px;
background-color:#257;
border:1px solid #146;
font-weight:bold;
font-size:10px;
z-index:999;
color:#fff;
}
#chatButton:hover{
cursor:pointer;
color:#ff8;
background-color:#368;
}
#chatBox iframe {
position: fixed!important;
z-index: 999;
height: 80%!important;
width: 20%!important;
top: 0!important;
right: 0!important;
}
#chatbox_members {
display: none!important;
}
.chatbox-options {
display: none!important;
}
#chatbox {
left: 0px!important;
bottom: 5px!important;
height: 70%;
}

This chat I showed the picture is placed as widget.Could this code that you offer me to do the same only widget.?

Yes. Add

Code:



<script>
jQuery(document).ready(function(){
jQuery('#chatBox').hide();
if(!document.getElementById('logout')) {
jQuery('#chatButton').hide();
jQuery('#chatBox').hide();}
jQuery('#chatButton').click(function() {
jQuery('#chatBox').fadeToggle();
 });
});
</script>
<center><div id="chatButton" title="Open/Close Chatbox">Open chat</div><div id="chatBox"><iframe src="/chatbox/index.forum"></iframe></div></center>

in a widget.

I currently use this code.Your code could be done as my to show chat constantly.

Code:

<object type="application/x-shockwave-flash" data="http://alice.in.wonderland.xmlrequest.info/door.swf?r=39518_1" width="180" height="400"><param name="movie" value="http://alice.in.wonderland.xmlrequest.info/door.swf?r=39518_1" /><param name="bgcolor" value="#000000" /><embed src="http://alice.in.wonderland.xmlrequest.info/door.swf?r=39518_1" type="application/x-shockwave-flash" width="180" height="400" bgcolor="#000000"></embed><video width="180" height="400"><a style="font-size:110%;font-style:normal;text-decoration:none;font-weight:normal" href="http://www.fxlowspread.com/binary88option.html">www.fxlowspread.com</a></video></object>

Hmm, you want to see the chat continuously ?

Yes.

Hmm.. add just this code into a widget

Code:


<div id="chatBox"><iframe src="/chatbox/index.forum"></iframe></div>

I have a method however, since we're using the default chat it will affect the default chatbox display. Only use this if you're using the chatbox as a widget.

First add this to your CSS :
Administration Panel > Display > Pictures and colors > Colors > CSS stylesheet
Paste the codes below and submit

Code:

.fontbutton_normal, #chatbox .date-and-time { display:none; }
.gen label { position:absolute; left:-68px; }
#chatbox_members { display:none !important; }
#chatBox { width:180px; height:360px; }
#message.post { width:125px; }
#chatbox { left:0; }

Now go to..
Administration Panel > Modules > Forum widgets management > create a widget
paste the content below and save

Code:

<iframe id="chatBox" src="/chatbox/index.forum"></iframe>

The result :


If needed you may need to make some changes to the CSS. Font formatting had to be removed as we're working with 180px width, but that can also be increased if you wish.

It is now better and running.Can be made to show the login button in the chat.

Oh right I totally forgot about the options !

Replace your old CSS with this :

Code:

#chatbox_members, .fontbutton_normal, #chatbox .date-and-time, a.cattitle[href="/chatbox/index.forum"], #chatbox_option_autorefresh { display:none; }
.gen label { position:absolute; left:-68px; }
#chatBox { width:180px; height:360px; }
#chatbox_main_options { float:left; }
#message.post { width:125px; }
#chatbox { left:0; }

Result :
( Auto-refresh option had to be remove to make space for logout )

It's great.
Is it possible to add menu options and emoticons.?

Yes, after some reworking I proved myself wrong hehe.

Replace your old CSS with this :

Code:

#chatbox_members, #chatbox .date-and-time, a.cattitle[href="/chatbox/index.forum"], #chatbox_option_autorefresh { display:none; }
.gen label { position:absolute; left:-68px; }
#chatBox { width:180px; height:360px; }
#chatbox_main_options { float:left; }
#message.post { width:125px; }
#chatbox { left:0; bottom:60px; }
/*Chatbox options*/
#divbold { position:absolute; bottom:5px; right:147px; }
#divitalic { position:absolute; bottom:5px; right:123px; }
#divunderline { position:absolute; bottom:5px; right:99px; }
#divstrike { position:absolute; bottom:5px; right:75px; }
#divcolor { position:absolute; bottom:5px; right:40px; }
#divsmilies { position:absolute; bottom:5px; right:5px; }
/*Height and style for footer*/
#chatbox_footer .catBottom { background:none; border:none; }
#chatbox_footer { height:60px; }

Result :

Many, many thanks.    For now everything is working.I would ask you not Locked 4-5 days to be able to write if there is a problem.

You can start a new topic if you encounter any issues in the future.

Topic Solved & Locked