how can i install bbcloud chatbox in my forum
@Zzbaivong
@Zzbaivong
<style>#frame_chatbox{min-height:300px}.cb-bubcloud-fullscreen #frame_chatbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999}</style>
<iframe src="/chatbox/index.forum" id="frame_chatbox" scrolling="auto" frameborder="0" height="100%" width="100%" allowfullscreen></iframe>
<script src="https://cdn.rawgit.com/baivong/cf369f3c6ede13898b1d9fb8e2f5d0b5/raw/1ad2348f17876fc7d3364feafc900bd7241d90f8/bubcloud-chatbox.js"></script>
/* --- ChatBox --- */
body.chatbox {
transition: all .2s ease-in-out;
visibility: hidden;
overflow: hidden;
height: 100%;
margin: 0;
background: #fff;
opacity: 0;
}
body.chatbox.active {
visibility: visible;
opacity: 1;
}
#chatbox,#chatbox_members {
top: 40px;
bottom: 40px;
transform: none;
position: absolute;
overflow: auto;
transition: all .2s ease-in-out;
}
#chatbox_header {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 40px;
padding: 0 5px;
line-height: 40px;
background: #e7e7e7;
color: transparent;
}
.chatbox-title {
float: left;
margin: 0;
}
#chatbox_option_co,#chatbox_option_disco,#chatbox_option_with_archives a,#chatbox_option_without_archives a,#fullscreen,#sound_control,.chat-title {
display: block;
border-radius: 3px;
width: 30px;
height: 30px;
float: left;
margin: 5px;
text-indent: -9999px;
background: url(//i68.servimg.com/u/f68/19/38/83/61/chat6110.png) center center no-repeat #e7e7e7;
cursor: pointer;
}
#chatbox_option_co:focus,#chatbox_option_co:hover,#chatbox_option_disco:focus,#chatbox_option_disco:hover,#chatbox_option_with_archives a:focus,#chatbox_option_with_archives a:hover,#chatbox_option_without_archives a:focus,#chatbox_option_without_archives a:hover,#fullscreen:focus,#fullscreen:hover,#sound_control:focus,#sound_control:hover,.chat-title:focus,.chat-title:hover {
background-color: #fff;
}
#chatbox_option_with_archives a {
background-image: url(//i68.servimg.com/u/f68/19/38/83/61/archiv10.png);
}
#chatbox_option_without_archives a {
background-image: url(//i68.servimg.com/u/f68/19/38/83/61/three110.png);
}
#chatbox_option_co {
background-image: url(//i68.servimg.com/u/f68/19/38/83/61/power110.png);
}
#chatbox_option_disco {
background-image: url(//i68.servimg.com/u/f68/19/38/83/61/out10.png);
}
#sound_control {
background-image: url(//i97.servimg.com/u/f97/19/51/54/34/volume12.png);
}
#sound_control.disable {
background-image: url(//i97.servimg.com/u/f97/19/51/54/34/volume11.png);
}
#fullscreen {
background-image: url(//i97.servimg.com/u/f97/19/51/54/34/expand10.png);
}
#fullscreen.active {
background-image: url(//i97.servimg.com/u/f97/19/51/54/34/center10.png);
}
.chatbox-options {
float: right;
font-size: 0;
}
.chatbox-options li {
float: left;
}
#chatbox_members {
left: -200px;
z-index: 20;
width: 200px;
padding: 0 5px;
border-right: 1px solid #e7e7e7;
background: #fff;
}
#chatbox_members>ul,.chatbox-options {
list-style-type: none;
margin: 0;
padding-left: 0;
}
.member-title {
border-radius: 3px;
text-align: center;
margin: 5px 0;
padding: 5px;
text-transform: uppercase;
background: #fefff4;
}
.away-users>li>span,.online-users>li>span {
margin: 5px 0;
display: block;
}
.chatbox-user-username {
cursor: pointer;
padding: 3px 0;
}
#chatbox {
right: 0;
left: 0;
padding: 0 5px;
background: #fff;
}
#chatbox>p {
display: none;
}
#chatbox_footer {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 40px!important;
}
.msg-act,.msg-day span,.msg-row,.msg-wrap {
position: relative;
}
#chatbox_footer #help-button,#chatbox_footer #submit_button,#chatbox_footer .fontbutton {
display: none!important;
}
#chatbox_footer .right {
float: none;
}
.msg-row {
margin: 1em 0;
}
.msg-row.alert>div,body>p.center strong {
width: auto;
margin: 1px -5px;
padding: 3px 12px;
font-weight: 700;
font-size: 12px;
text-align: center;
color: #fff;
}
.msg-row.alert .ban-act,.msg-row.alert .other-act,.msg-row.alert .unmod-act {
background: #ff5c5c;
}
.msg-row.alert .disconnect-act,.msg-row.alert .kick-act,.msg-row.alert .timeout-act {
background: #f57c00;
}
.msg-row.alert .away-act,.msg-row.alert .me-act {
background: #5e35b1;
}
.msg-row.alert .connect-act,.msg-row.alert .mod-act,.msg-row.alert .unban-act {
background: #388e3c;
}
.msg-row.alert .clear-act {
background: #47a3fc;
}
.msg-day {
margin-bottom: -1em;
border-top: 1px dashed #e7e7e7;
text-align: center;
color: #e7e7e7;
}
.msg-day span {
top: -.75em;
padding: .2em 1em;
font-size: 12px;
background: #fff;
}
.msg-wrap {
margin-left: 40px;
}
.msg-act {
max-width: 70%;
float: left;
clear: both;
margin: 1px 0!important;
padding: 6px 12px;
border-radius: 4px 1.3em 1.3em 4px;
white-space: pre-wrap;
word-break: break-word;
word-wrap: break-word;
background: #e7e7e7;
}
.msg-act:first-child {
border-top-left-radius: 1.3em;
}
.msg-act:last-child {
border-bottom-left-radius: 1.3em;
}
.msg-act:before,.msg-avatar:before {
transition: all .2s ease-in-out;
content: attr(data-time);
position: absolute;
top: 0;
right: -50px;
z-index: 10;
visibility: hidden;
padding: 2px 4px;
border-radius: 3px;
white-space: pre;
font-size: 9px;
font-family: Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
color: #fff;
background: #757575;
opacity: 0;
}
.msg-act:hover:before,.msg-avatar:hover:before {
visibility: visible;
opacity: 1;
}
.msg-act.no-text {
padding: .8em 0;
background: 0 0!important;
}
.msg-act a {
font-weight: 700;
}
.msg-act a:focus,.msg-act a:hover {
text-decoration: underline;
}
.msg-act embed,.msg-act iframe,.msg-act img {
max-width: 100%;
}
.msg-act img {
vertical-align: middle;
}
.msg-act font,.msg-act span {
font-size: 14px!important;
color: #212121!important;
}
.msg-act strong {
font-weight: 400;
}
.msg-act strike,.msg-act u {
text-decoration: none;
}
.msg-act i {
font-style: normal;
}
.msg-act dd,.msg-act dl {
display: inline;
margin: 0;
}
.msg-act dt,.msg-me .msg-avatar {
display: none;
}
.msg-act code {
font-family: inherit;
}
.msg-avatar {
position: absolute;
top: 3px;
left: 0;
cursor: pointer;
}
.msg-avatar-circle {
border-radius: 50%;
overflow: hidden;
width: 30px;
height: 30px;
}
.msg-avatar:before {
content: attr(data-name);
top: -16px;
right: auto;
left: 0;
}
.msg-avatar:after {
border: 1px solid #e7e7e7;
border-radius: 50%;
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 10px;
height: 10px;
background: #bdbdbd;
}
.msg-avatar.online:after {
background: #388e3c;
}
.msg-avatar.away:after {
background: #5e35b1;
}
.msg-avatar.offline:after {
content: none;
}
.msg-avatar img {
width: 100%;
}
.msg-me .msg-wrap {
margin-right: 0;
margin-left: 0;
}
.msg-me .msg-act {
float: right;
border-radius: 1.3em 4px 4px 1.3em;
background: #2196f3;
}
.msg-me .msg-act:first-child {
border-top-right-radius: 1.3em;
}
.msg-me .msg-act:last-child {
border-bottom-right-radius: 1.3em;
}
.msg-me .msg-act:before {
right: auto;
left: -50px;
}
#media,#message {
left: 0;
position: absolute;
}
.msg-me .msg-act a {
color: #e7e7e7;
}
.msg-me .msg-act a:hover {
color: #fff;
}
.msg-me .msg-act>span {
color: #fff!important;
}
#message {
border-radius: 3px;
border: 1px solid #e7e7e7;
box-sizing: border-box!important;
box-shadow: 0 1px 1px rgba(0,0,0,.075) inset;
top: 0;
right: 0;
width: 100%!important;
height: 40px!important;
margin: 0!important;
padding: 0 75px 0 1em;
line-height: 40px;
font-weight: 400!important;
font-style: normal!important;
text-decoration: none!important;
color: #212121!important;
background: #fefff4;
}
#message:focus {
background: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,.26);
}
#chatbox_contextmenu {
border-radius: 3px;
z-index: 30;
background: #fff;
}
.cb-menu-title {
margin: 0;
padding: 5px 8px;
border-bottom: 1px solid #e7e7e7;
}
.cb-menu-close {
border-radius: 50%;
text-align: center;
transition: all .2s ease-in-out;
top: 5px!important;
right: 8px!important;
width: 20px;
height: 20px;
line-height: 17px;
background: #fff;
color: #ff5c5c!important;
}
.cb-menu-close:focus,.cb-menu-close:hover {
background: #ff5c5c;
color: #fff!important;
}
.cb-menu-item {
margin: 0;
}
.cb-menu-item a {
display: block;
margin: 5px 0;
padding: 4px 8px;
color: #757575;
}
.cb-menu-item a:focus,.cb-menu-item a:hover {
background: #e7e7e7;
color: #111;
}
.pun {
width: 100%!important;
background: #fefff4;
}
.pun table tr.main-head {
background: #757575;
color: #fff;
}
#emoji_list .emoji:hover,.pun table tr:nth-child(2n) {
background: #e7e7e7;
}
.pun table td,.pun table th {
border: 1px solid #e7e7e7;
padding: 7px 10px;
}
#buzz_wrap {
right: 10px;
}
#emoji_list {
overflow: auto;
width: 246px;
height: 160px;
padding: 0 5px 0 0;
}
#emoji_list .emoji {
border-radius: 3px;
box-sizing: content-box;
overflow: hidden;
width: 16px;
height: 16px;
padding: 6px;
text-indent: -99px;
cursor: pointer;
}
@keyframes shake {
2%,96% {
transform: translate(-1.5px,-1.5px) rotate(.5deg);
}
22%,4% {
transform: translate(-1.5px,-.5px) rotate(1.5deg);
}
6%,60%,92% {
transform: translate(2.5px,.5px) rotate(1.5deg);
}
8% {
transform: translate(2.5px,1.5px) rotate(.5deg);
}
10% {
transform: translate(1.5px,-.5px) rotate(.5deg);
}
12% {
transform: translate(1.5px,.5px) rotate(1.5deg);
}
14% {
transform: translate(1.5px,-1.5px) rotate(-.5deg);
}
16% {
transform: translate(-.5px,.5px) rotate(.5deg);
}
18% {
transform: translate(-.5px,-1.5px) rotate(1.5deg);
}
20% {
transform: translate(2.5px,1.5px) rotate(1.5deg);
}
24% {
transform: translate(2.5px,-.5px) rotate(-.5deg);
}
26%,32% {
transform: translate(-1.5px,.5px) rotate(.5deg);
}
28% {
transform: translate(2.5px,.5px) rotate(.5deg);
}
30% {
transform: translate(2.5px,2.5px) rotate(1.5deg);
}
34%,78% {
transform: translate(1.5px,1.5px) rotate(-.5deg);
}
36%,54% {
transform: translate(-1.5px,-.5px) rotate(.5deg);
}
38% {
transform: translate(1.5px,1.5px) rotate(.5deg);
}
40% {
transform: translate(1.5px,2.5px) rotate(.5deg);
}
42%,80% {
transform: translate(1.5px,-.5px) rotate(-.5deg);
}
44% {
transform: translate(2.5px,-1.5px) rotate(-.5deg);
}
46% {
transform: translate(2.5px,.5px) rotate(-.5deg);
}
48%,86% {
transform: translate(-.5px,.5px) rotate(-.5deg);
}
50% {
transform: translate(-.5px,1.5px) rotate(.5deg);
}
52% {
transform: translate(1.5px,.5px) rotate(.5deg);
}
56% {
transform: translate(.5px,2.5px) rotate(1.5deg);
}
58% {
transform: translate(.5px,1.5px) rotate(.5deg);
}
62% {
transform: translate(1.5px,1.5px) rotate(1.5deg);
}
64% {
transform: translate(-.5px,-.5px) rotate(-.5deg);
}
66% {
transform: translate(-1.5px,.5px) rotate(-.5deg);
}
68% {
transform: translate(2.5px,-.5px) rotate(.5deg);
}
70%,98% {
transform: translate(2.5px,2.5px) rotate(.5deg);
}
72% {
transform: translate(-1.5px,2.5px) rotate(1.5deg);
}
74% {
transform: translate(1.5px,-.5px) rotate(1.5deg);
}
76% {
transform: translate(-.5px,-.5px) rotate(1.5deg);
}
82% {
transform: translate(-.5px,2.5px) rotate(-.5deg);
}
84% {
transform: translate(.5px,-1.5px) rotate(-.5deg);
}
88% {
transform: translate(1.5px,2.5px) rotate(-.5deg);
}
90% {
transform: translate(-1.5px,.5px) rotate(1.5deg);
}
94% {
transform: translate(-.5px,1.5px) rotate(1.5deg);
}
0%,100% {
transform: translate(0,0) rotate(0);
}
}
.chatbox-buzz {
animation: shake 120ms ease-in-out infinite;
}
#media {
right: 0;
bottom: 40px;
height: 50%;
}
#media iframe {
width: 100%;
height: 100%;
}
.toggleUsersList .chat-title {
background-image: url(//i84.servimg.com/u/f84/19/38/83/61/users-10.png);
}
.toggleUsersList #chatbox,.toggleUsersList #chatbox_members {
transform: translateX(200px);
}
.toggleMediaList .chat-title {
background-image: url(//i68.servimg.com/u/f68/19/38/83/61/delete10.png);
}
.toggleMediaList #chatbox,.toggleMediaList #chatbox_members {
bottom: 50%;
margin-bottom: 40px;
}
#has_new_message {
transition: all .2s ease-in-out;
position: absolute;
top: 40px;
left: 50%;
visibility: hidden;
width: 140px;
height: 30px;
margin-left: -70px;
padding: 0 10px;
border-radius: 0 0 4px 4px;
line-height: 30px;
font-size: 12px;
color: #fff;
opacity: 0;
background: url(//i97.servimg.com/u/f97/19/51/54/34/level-10.png) 117px center no-repeat #111;
cursor: pointer;
}
#has_new_message.active {
visibility: visible;
opacity: .7;
}
#has_new_message:hover {
opacity: 1;
}
.cb-bubcloud-btn {
transition: all .2s ease-in-out;
-webkit-filter: grayscale(70%);
filter: grayscale(70%);
}
.cb-bubcloud-options {
position: absolute;
top: 10px;
right: 45px;
}
.cb-bubcloud-options-list {
border: 1px solid #e7e7e7;
border-radius: 3px;
background: #fff;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
position: absolute;
top: 12px;
right: -9px;
z-index: 20;
visibility: hidden;
padding: 5px;
opacity: 0;
}
.cb-bubcloud-options-list:after,.cb-bubcloud-options-list:before {
position: absolute;
z-index: 20;
width: 0;
height: 0;
border-style: solid;
content: " ";
top: -4px;
border-width: 0 6px 6px;
right: 12px;
border-color: transparent transparent #fff;
}
.cb-bubcloud-options-list:before {
z-index: 10;
top: -6px;
border-bottom-color: #e7e7e7;
}
.cb-bubcloud-options.active .cb-bubcloud-btn,.cb-bubcloud-options:hover .cb-bubcloud-btn {
transform: scale(1.4);
-webkit-filter: none;
filter: none;
cursor: pointer;
}
.cb-bubcloud-options.disable .cb-bubcloud-btn {
opacity: .3;
-webkit-filter: grayscale(100%)!important;
filter: grayscale(100%)!important;
transform: scale(1)!important;
cursor: not-allowed;
}
.cb-bubcloud-media {
display: block;
width: 160px;
height: 90px;
text-align: center;
background-repeat: no-repeat;
background-size: cover;
}
.cb-bubcloud-media img {
transition: all .2s ease-in-out;
margin-top: 15px;
opacity: .7;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.cb-bubcloud-media:hover img {
opacity: 1;
-webkit-filter: none;
filter: none;
}
/* --- ChatBox --- */
|
|