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.

I want to add a Popup chatbox with this design

View previous topic View next topic Go down

Solved I want to add a Popup chatbox with this design

Post by Kite Trojan on December 20th 2013, 10:15 pm

Jh
Hello forumotion members, I want to add a Popup Chatbox with these designs- Open and Close.


Open: Close:




Regards, Nomejx

Note: the images are from the side ;
(Right side bottom-sticking on the wall to the right


Last edited by Xnomejx on December 21st 2013, 11:20 pm; edited 1 time in total

Kite Trojan
Forumember

Male Posts : 823
Reputation : 19
Language : English

http://galacticda.forumotion.com/

Back to top Go down

Solved Re: I want to add a Popup chatbox with this design

Post by Legolas on December 21st 2013, 9:52 am

Hello,
Add this to your templates:
Code:

<div style="overflow: visible; position: fixed; bottom: 30px; height: 350px; right: 0px; z-index:10000; "><iframe src="/chatbox/index.forum" id="chatboxpop" scrolling="yes" style="overflow: visible; width: 750px; height: 350px; display: none; float:right;box-shadow: 0px 0px 3px rgba(0,0,0,0.25);-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.25);-webkitbox-shadow: 0px 0px 3px rgba(0,0,0,0.25);-o-box-shadow: 0px 0px 3px rgba(0,0,0,0.25);margin-left: 6px; background-color: #ffa34e;-moz-border-radius: 6px;border-radius: 6px;-webkit-border-radius: 6px;-o-border-radius: 6px;" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();" style="cursor :pointer; float:left; box-shadow: 0px 0px 3px rgba(0,0,0,0.25);-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.25);-webkitbox-shadow: 0px 0px 3px rgba(0,0,0,0.25);-o-box-shadow: 0px 0px 3px rgba(0,0,0,0.25); background-color: #ffa34e;-moz-border-radius: 6px;border-radius: 6px;-webkit-border-radius: 6px;-o-border-radius: 6px;  padding: 6px 3px 6px 3px;"><img src="http://i46.servimg.com/u/f46/15/86/71/61/button10.png" id="chatboxopen"><img src="http://i46.servimg.com/u/f46/15/86/71/61/button12.png" id="chatboxclose" style="cursor :pointer; display:none;"></div></div>
Replace:
http://i46.servimg.com/u/f46/15/86/71/61/button10.png => with image "Open Chatbox"
http://i46.servimg.com/u/f46/15/86/71/61/button12.png => with image "Close Chatbox"

Legolas
Forumember

Male Posts : 262
Reputation : 33
Language : English

http://www.daily-support.org

Back to top Go down

Solved Re: I want to add a Popup chatbox with this design

Post by Kite Trojan on December 21st 2013, 10:10 pm

Which?

Kite Trojan
Forumember

Male Posts : 823
Reputation : 19
Language : English

http://galacticda.forumotion.com/

Back to top Go down

Solved Re: I want to add a Popup chatbox with this design

Post by Legolas on December 21st 2013, 10:17 pm

For example, overall_header, after <body> tag!

Legolas
Forumember

Male Posts : 262
Reputation : 33
Language : English

http://www.daily-support.org

Back to top Go down

Solved Re: I want to add a Popup chatbox with this design

Post by Kite Trojan on December 21st 2013, 10:27 pm

How can I remove the yellow border?

Kite Trojan
Forumember

Male Posts : 823
Reputation : 19
Language : English

http://galacticda.forumotion.com/

Back to top Go down

Solved Re: I want to add a Popup chatbox with this design

Post by Legolas on December 21st 2013, 10:30 pm

Replace the code with
Code:


<div style="overflow: visible; position: fixed; bottom: 30px; height: 350px; right: 0px; z-index:10000; "><iframe src="/chatbox/index.forum" id="chatboxpop" scrolling="yes" style="overflow: visible; width: 750px; height: 350px; display: none; float:right;box-shadow: 0px 0px 3px rgba(0,0,0,0.25);-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.25);-webkitbox-shadow: 0px 0px 3px rgba(0,0,0,0.25);-o-box-shadow: 0px 0px 3px rgba(0,0,0,0.25);margin-left: 6px; -moz-border-radius: 6px;border-radius: 6px;-webkit-border-radius: 6px;-o-border-radius: 6px;" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();" style="cursor :pointer; float:left; box-shadow: 0px 0px 3px rgba(0,0,0,0.25);-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.25);-webkitbox-shadow: 0px 0px 3px rgba(0,0,0,0.25);-o-box-shadow: 0px 0px 3px rgba(0,0,0,0.25); background-color: #ffa34e;-moz-border-radius: 6px;border-radius: 6px;-webkit-border-radius: 6px;-o-border-radius: 6px;  padding: 6px 3px 6px 3px;"><img src="http://i46.servimg.com/u/f46/15/86/71/61/button10.png" id="chatboxopen"><img src="http://i46.servimg.com/u/f46/15/86/71/61/button12.png" id="chatboxclose" style="cursor :pointer; display:none;"></div></div>

Do not forget to change again the images!

Legolas
Forumember

Male Posts : 262
Reputation : 33
Language : English

http://www.daily-support.org

Back to top Go down

Solved Re: I want to add a Popup chatbox with this design

Post by Kite Trojan on December 21st 2013, 10:32 pm

Still a border.

Kite Trojan
Forumember

Male Posts : 823
Reputation : 19
Language : English

http://galacticda.forumotion.com/

Back to top Go down

Solved Re: I want to add a Popup chatbox with this design

Post by Legolas on December 21st 2013, 10:42 pm

This should work.
Code:



<div style="overflow: visible; position: fixed; bottom: 30px; height: 350px; right: 0px; z-index:10000; "><iframe src="/chatbox/index.forum" id="chatboxpop" scrolling="yes" style="overflow: visible; width: 750px; height: 350px; display: none; float:right;box-shadow: 0px 0px 3px rgba(0,0,0,0.25);-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.25);-webkitbox-shadow: 0px 0px 3px rgba(0,0,0,0.25);-o-box-shadow: 0px 0px 3px rgba(0,0,0,0.25);margin-left: 6px; -moz-border-radius: 6px;border-radius: 6px;-webkit-border-radius: 6px;-o-border-radius: 6px;" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();" style="cursor :pointer; float:left; box-shadow: 0px 0px 3px rgba(0,0,0,0.25);-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.25);-webkitbox-shadow: 0px 0px 3px rgba(0,0,0,0.25);-o-box-shadow: 0px 0px 3px rgba(0,0,0,0.25);-moz-border-radius: 6px;border-radius: 6px;-webkit-border-radius: 6px;-o-border-radius: 6px;  padding: 6px 3px 6px 3px;"><img src="http://i46.servimg.com/u/f46/15/86/71/61/button10.png" id="chatboxopen"><img src="http://i46.servimg.com/u/f46/15/86/71/61/button12.png" id="chatboxclose" style="cursor :pointer; display:none;"></div></div>

Legolas
Forumember

Male Posts : 262
Reputation : 33
Language : English

http://www.daily-support.org

Back to top Go down

Solved Re: I want to add a Popup chatbox with this design

Post by Kite Trojan on December 21st 2013, 10:45 pm

thanks leo. topic solved and locked.

Kite Trojan
Forumember

Male Posts : 823
Reputation : 19
Language : English

http://galacticda.forumotion.com/

Back to top Go down

Solved Re: I want to add a Popup chatbox with this design

Post by Legolas on December 21st 2013, 10:48 pm

Your welcome.

Legolas
Forumember

Male Posts : 262
Reputation : 33
Language : English

http://www.daily-support.org

Back to top Go down

Solved Re: I want to add a Popup chatbox with this design

Post by SLGray on December 22nd 2013, 12:40 am

Topic Solved & Locked


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35632
Reputation : 2372
Language : English
Location : United States

http://fmthemes.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