Skip to content
Hoot

CSS Classes

Each chat bubble in Chatter has different classes and variables that can be applied. These are dependant on the type of message and type of user.

Message Type

You can test these with chat commands.

  • bits
  • announcement
  • first

The first event it triggered on a users first chat in the stream.

User Type

You can test all of these (except reward IDs) with chat commands.

  • sub
  • mod
  • vip
  • partner
  • username
  • custom-reward-id

Each username will be added as a class, allowing you to customise the look for specific chatters.

The custom reward ID is for channel point redeems. You can easily find the ID for a point redeem with this tool from Instafluff. Make sure to put your own channel name in the URL.

Animation

Use these to overwrite the in-built Chatter animations. I would recommend setting it to None if you’re planning to do that, to reduce any conflicts and not needing to slap !important all over the place.

  • Pop_In
  • Slide_Left
  • Slide_Right
  • Fade_In
  • Grow
  • None

Alignment

Horizontal Alignment of the bubble. These are applied individually, so you could apply different alignments to different message types.

  • flex-start
  • center
  • flex-end

Applied Classes

These classes are applied if the relevant settings are selected in the app.

  • dropShadow for bubble drop shadow
  • bubbleBanner for banner mode

CSS Variables

  • --animTime in seconds how fast animations play
  • --animEase the easing function for animations
  • --userCol the user colour for this message
  • --shadowCol the drop shadow colour, if applicable
  • --animHeight needed for animations, would not overwrite.