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.

[Solved] Icon for chatbox on right side!

View previous topic View next topic Go down

Solved [Solved] Icon for chatbox on right side!

Post by DeathDunk98* on May 3rd 2014, 11:38 pm

Hello,
I wanted to ask you guys if someone knows how to add a CHATBOX image on right side, and when you click it the chatbox appears:P ...
like in this forum:
http://www.ygoda.forumtl.com


Last edited by DeathDunk98* on May 4th 2014, 7:50 pm; edited 1 time in total

DeathDunk98*
Forumember

Posts : 479
Reputation : 3
Language : Shqip

Back to top Go down

Solved Re: [Solved] Icon for chatbox on right side!

Post by DeathDunk98* on May 4th 2014, 4:24 pm

bump!

DeathDunk98*
Forumember

Posts : 479
Reputation : 3
Language : Shqip

Back to top Go down

Solved Re: [Solved] Icon for chatbox on right side!

Post by J0k3R^ on May 4th 2014, 4:26 pm

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: 800px; height: 500px; 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'},1500); 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; position:relative; top:120px;"><img src="http://i.imgur.com/cfSuv2I.png" id="chatboxopen"><img src="http://i.imgur.com/FmfFT1j.png" id="chatboxclose" style="cursor :pointer; display:none;"></div></div>
 


plz change the style and dont take like that.

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: [Solved] Icon for chatbox on right side!

Post by DeathDunk98* on May 4th 2014, 4:30 pm

wait, I already designed my chatbox, just want an icon on the right side when you click it to open the chatbox

DeathDunk98*
Forumember

Posts : 479
Reputation : 3
Language : Shqip

Back to top Go down

Solved Re: [Solved] Icon for chatbox on right side!

Post by J0k3R^ on May 4th 2014, 4:31 pm

tell m the css for your chat and maybe i can customize it with the code


Last edited by J0k3R^ on May 4th 2014, 5:02 pm; edited 1 time in total

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: [Solved] Icon for chatbox on right side!

Post by DeathDunk98* on May 4th 2014, 4:57 pm

Code:
.chatbox_row_1 {
background-color: #f1f1f1;
padding: 4px;
border-top:1px solid #0883e1;
}

.chatbox_row_2 {
background-color: #eee;
padding: 4px;
border-bottom:1px solid #0883e1;
}

.chatbox p {
  line-height: 1.2em;
}


td.catBottom, th.thBottom {
border-width: 0 0 0;
height:32px;
border-radius:8px 8px 0 0;
}

#chatbox_members .member-title {
  background: #3D9E68!important;
border: 1px solid #3C855C;
box-shadow: inset 0 1px 2px rgba(255,255,255,0.42);
color: #FFF;
font-size: 12px;
font-weight: 100!important;
padding: .5em .25em;
text-align: center;
border-top:0;
}

  a.cattitle {
position: relative;
top: 3px;
color: #00aeff;
left: 0px;
}


#chatbox {
background-color:#eee;
}

#chatbox_members {
background-color:#eee;
}

DeathDunk98*
Forumember

Posts : 479
Reputation : 3
Language : Shqip

Back to top Go down

Solved Re: [Solved] Icon for chatbox on right side!

Post by Pizza Boi on May 4th 2014, 6:24 pm

Hi Very Happy

So you just want to change the click on image? Well then, just change Joker's code portion in this:

Code:
<img src="http://i.imgur.com/cfSuv2I.png" id="chatboxopen"><img src="http://i.imgur.com/FmfFT1j.png" id="chatboxclose" style="cursor :pointer; display:none;"></div></div>

Please do... since I created that image Smile .

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: [Solved] Icon for chatbox on right side!

Post by DeathDunk98* on May 4th 2014, 7:01 pm

No, I didn't even add the jokers code ! I want the same design of my chatbox! can you do that ?

DeathDunk98*
Forumember

Posts : 479
Reputation : 3
Language : Shqip

Back to top Go down

Solved Re: [Solved] Icon for chatbox on right side!

Post by J0k3R^ on May 4th 2014, 7:04 pm

we provided u the codes :S

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: [Solved] Icon for chatbox on right side!

Post by DeathDunk98* on May 4th 2014, 7:08 pm

you provided nothing -.-

DeathDunk98*
Forumember

Posts : 479
Reputation : 3
Language : Shqip

Back to top Go down

Solved Re: [Solved] Icon for chatbox on right side!

Post by Pizza Boi on May 4th 2014, 7:13 pm

Hi Very Happy

Like what we said, just please change this portion:

Code:
<img src="http://i.imgur.com/cfSuv2I.png" id="chatboxopen"><img src="http://i.imgur.com/FmfFT1j.png" id="chatboxclose" style="cursor :pointer; display:none;"></div></div>

To something like:

[code]<img src="IMG LINK" id="chatboxopen"><img src="IMG LINK" id="chatboxclose" style="cursor :pointer; display:none;"></div></div>[/code

You really just have to change that part.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: [Solved] Icon for chatbox on right side!

Post by J0k3R^ on May 4th 2014, 7:16 pm

i gave u a complete code for the chatbox u want. (http://help.forumotion.com/t132775-icon-for-chatbox-on-right-side#892394)
and next time try to be more polite and patient, i try to help with my littlescant knowledge ive got.

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: [Solved] Icon for chatbox on right side!

Post by DeathDunk98* on May 4th 2014, 7:21 pm

Thank you for that, you didnt tell me where to put the code ?

DeathDunk98*
Forumember

Posts : 479
Reputation : 3
Language : Shqip

Back to top Go down

Solved Re: [Solved] Icon for chatbox on right side!

Post by Pizza Boi on May 4th 2014, 7:21 pm

Hi Very Happy

You can put that in a widget or in your overall_header.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: [Solved] Icon for chatbox on right side!

Post by DeathDunk98* on May 4th 2014, 7:26 pm

waiting..

DeathDunk98*
Forumember

Posts : 479
Reputation : 3
Language : Shqip

Back to top Go down

Solved Re: [Solved] Icon for chatbox on right side!

Post by Pizza Boi on May 4th 2014, 7:27 pm

Hi Very Happy

Put this code in an area that accepts HTML:

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: 800px; height: 500px; 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'},1500); 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; position:relative; top:120px;"><img src="http://oi62.tinypic.com/2le2nnb.jpg" id="chatboxopen"><img src="http://oi57.tinypic.com/1688jeg.jpg" id="chatboxclose" style="cursor :pointer; display:none;"></div></div>

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: [Solved] Icon for chatbox on right side!

Post by DeathDunk98* on May 4th 2014, 7:30 pm

@Pizza Boi, I putted that on a widget and the send message is missing:

DeathDunk98*
Forumember

Posts : 479
Reputation : 3
Language : Shqip

Back to top Go down

Solved Re: [Solved] Icon for chatbox on right side!

Post by DeathDunk98* on May 4th 2014, 7:34 pm

Oh, I Changed the weight and is solved! thank you both!

DeathDunk98*
Forumember

Posts : 479
Reputation : 3
Language : Shqip

Back to top Go down

Solved Re: [Solved] Icon for chatbox on right side!

Post by Pizza Boi on May 4th 2014, 7:34 pm

Hi Very Happy

Is it located at the very bottom of your forum? If it is, my apologies, I set mine quite below. Please change your code to this instead:

Code:
<div style="overflow: visible; position: fixed; bottom: 50px; height: 350px; right: 0px; z-index:10000; "><iframe src="/chatbox/index.forum" id="chatboxpop" scrolling="yes" style="overflow: visible; width: 800px; height: 500px; 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'},1500); 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; position:relative; top:120px;"><img src="http://oi62.tinypic.com/2le2nnb.jpg" id="chatboxopen"><img src="http://oi57.tinypic.com/1688jeg.jpg" id="chatboxclose" style="cursor :pointer; display:none;"></div></div>

The pizza's here! That'd be $2.99 Wink.

No problem~

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: [Solved] Icon for chatbox on right side!

Post by SLGray on May 4th 2014, 8:19 pm

Topic Solved & Archived


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


SLGray
Administrator
Administrator

Male Posts : 36673
Reputation : 2445
Language : English
Location : United States

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