bbcloud chatbox

  Bài viết hay nhất1
how can i install bbcloud chatbox in my forum
@Zzbaivong
  Bài viết hay nhất2
ACP >> Modules >> Chatbox > Configuration

  • Activate the ChatBox : Yes
  • Display users avatars in the chatbox : Yes
  • ChatBox display : Do not display


Put this code wherever you want it in Templates, HTML pages, or Generalities.
Code:
<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>
  Bài viết hay nhất3
Thank you @Zzbaivong

i think i have to add this into CSS
Code:
/* --- 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 --- */

but how can i disable auto login into chatbox?
  Bài viết hay nhất4
No need to add CSS, it will cause your forum's interface to be affected.
Click on Logout in Chatbox, auto login is disabled.
  Bài viết hay nhất5
Thank You

SOLVED
CLOSE TOPIC
You cannot reply to topics in this forum