/>help>elements>

A list of all elements styleable with Chattable

Below is a list of each predefined ID, class, or other selector. Use this to learn how to customize your chat in CSS. The CSS for your chat is inherited by the settings page/menu. Some of the elements below can only be found within the settings page/menu.

CSS Selector Description
.allMessages Selects every message, of which contains a .senderInfo & .msgBody
.allMessages.containsOnlyEmojis .emoji Selects the emojis in a message if that message only contains emojis.
.msgWrapper Selects an invisible wrapper around every .allMessages element
.sent Selects all .allMessages elements that were sent by you
.received Selects all .allMessages elements that were not sent by the current account/device
#top_banner Selects the entire top banner that yields the Chattable logo
.senderInfo Selects each element that contains message sender information like their name & badge
.msgBody Selects the message body on each message
#background Selects the background area in which the messages are rendered inside
#input Selects the user input field. This element is a content-editable DIV and not a typical input element. Be aware of this when styling
#input:empty::before Selects the placeholder for the input element, change the content property to change the text.
#settings Selects the settings icon. Ensure this element is easily visible to improve user experience
.mod Selects all rendered moderator badges
.owner Selects all rendered owner badges
.beta Selects all rendered beta tester badges
#timestamp Selects all timestamp elements. Ensure these elements can be easily read to improve user experience
.reply Selects all blockquotes used in messages
.ctxMenuOption Selects all elements used as options in the menu that pops up when right-clicking/interacting with a message. Ensure these elements are readable for the best user experience.
#settingsWindow Selects the background of the settings menu
#loadMore Selects the "Load More" button at the top of chats. This button is visible only if the chat contains more than 15 messages and appears at the top of the message feed.
#scrollToBottom Selects the "Scroll to Bottom?" button at the bottom of the screen. This button is visible only if the user is not scrolled to the most recent message.
.pinned Selects all pinned messages, if any
#replyBanner Selects the banner that pops up above the textarea when a user goes to reply to a message. Ensure this element can be easily read for the best user experience.
.highlight Selects all pinged usernames. Customizing this will alter the style seen when someone @'s you. Note that only the pinged user sees the customized style.
.emoji Selects all emojis in chat. Can be used to resize or animate emojis
#emojiTray Selects the background for the emoji tray when visible
.emojiInGrid Selects the emojis displayed inside the emoji tray, if any are present.
#emojiTrayToggle Selects the button that toggles the emoji tray open/close.
#is_typing Selects the bubble that appears when someone is typing in chat
Elements exclusive to the Settings Menu...
#settingsMenu Selects the background/wrapper of the settings menu
#account Selects the "goto account" button in the upper right corner of the settings menu
#name Selects the username input field in the settings menu
#dltranscript Selects the Download Transcript link/button on the settings page.
#save Selects the "save changes" button in the settings menu
#closeSettingsBtn Selects the "Close" button at the bottom of the settings menu