CSS Tricks for Joinchat

How to customize Joinchat using CSS styles

Change the look of Joinchat by adding some styles in your theme’s stylesheet or from Appearance> Customize> Additional CSS

You can combine several styles:

.joinchat {
 --bottom: 80px;
 --s: 52px;
}

To apply the changes only on mobile devices use “media queries”:

@media (max-width: 480px), (orientation: landscape) and (max-width: 767px) {
 .joinchat {
 --bottom: 80px;
 --s: 52px;
 }
}

/* defaults: desk 20px, mobile 6px */
.joinchat {
 --bottom: 80px;
}

/* default: 60px */
.joinchat {
 --s: 50px;
}

/* default: before v4.4 1000, after v4.4 9999, after v4.5.10 9000 */
.joinchat {
 z-index: 99999; 
}

/* defaults: desk 70px, mobile 55px */
.joinchat {
 --header: 60px;
}

/* default: #25d366; */
.joinchat__button {
 background-color: #999;
}

.joinchat--show .joinchat__button__image {
  opacity: 1;
  animation: none;
}