Below is a diagram of the HTML structure of a generic chat and a list of every key CSS selector.
This diagram shows a generic HTML structure of a chat with 2 messages. One from an anonymous user and a reply from the owner (you). When building, the use of inspect element is strongly encouraged.
This is current most comprehensive list of every CSS selector available for Chattable chats
| CSS Selector | Description |
|---|---|
.allMessages | Selects every message, which contains a .senderInfo & .msgBody |
.allMessages.containsOnlyEmojis .emoji | Selects the emojis in a message if that message only contains emojis. |
.allMessages.pm | Selects any visible private messages. |
.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 |
.dialogueModal | Selects all popup dialogue modal boxes, like the one used in the !online command. |
#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 |
#shadow | Selects the tutorial wrapper. You can hide this element if you want to prevent the tutorial from running for new users. |
| 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 |