CSS tricks for Joinchat

Joinchat CSS Variables

Joinchat uses a few variables to modify its styles globally, so in general it’s better to change these variables instead of the specific CSS property.

Variable	Default value	What it does
`--sep`	20px (6px mobile)	Widget side spacing
`--bottom`	var(–sep)	Widget bottom spacing
`--s`	60px	Floating button size
`--header`	Calculated (–s * 1.6)	Chat window header height

CSS size variables

Colors are calculated automatically from the color picker in Joinchat settings. The easiest way to change them is from there. But for more specific changes (for example, defining another hover color) these are the variables:

Variable	Default value	What it does
`--ch`	Color set in settings	Hue
`--cs`	Color set in settings	Color saturation
`--cl`	Color set in settings	Color lightness
`--hsl`	Calculated	HSL package for reuse
`--color`	Calculated	Main color
`--hover`	Calculated (–color 20% lighter)	Lighter variant for hover
`--dark`	Calculated (–color 10% darker)	Darker variant for dark mode
`--bg`	Calculated (–color with 4% opacity)	Chat window background
`--msg`	Calculated (same as –color)	Links, buttons, etc. color
`--bw`	Color set in settings	White (1) or black (0) text
`--text`	Calculated (–bw)	Text color in buttons and header

CSS color/text variables

Customize the plugin with CSS styles

Change Joinchat’s appearance 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;
}Code language: CSS (css)

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

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

👆 Move the floating button up

/* defaults: desktop 20px, mobile 6px */
.joinchat {
 --bottom: 80px;
}Code language: CSS (css)

🤏 Change the floating button size

/* default: 60px */
.joinchat {
 --s: 50px;
}Code language: CSS (css)

☝️ Place Joinchat above other elements

/* default: before v4.4 1000, after v4.4 9999, after v4.5.10 9000 */
.joinchat {
 z-index: 99999; 
}Code language: CSS (css)

📏 Change the chat header height

/* defaults: desktop 70px, mobile 55px */
.joinchat {
 --header: 60px;
}Code language: CSS (css)

🎨 Change the floating button color

/* default: #25d366 */
.joinchat__button {
 background-color: #999;
}Code language: CSS (css)

🌅 Keep the alternative image static

/* Starting from v6 this is done from settings */
.joinchat--show .joinchat__button__image {
 animation: none !important;
 opacity: 1 !important;
}Code language: CSS (css)

Docs