Littlebay Templates Documentation
  • Welcome!
  • Quick Links & Tips
    • Littlebay Forum
    • Support Email
    • Built-In Documentation
    • Navigating the Bubble Editor
    • Navigating this Documentation
    • List of Bubble Guides
  • Messaging Template
    • Release Notes
      • 05/28/21 Guide on How to Update the Template's Select Conversation Workflow
      • 09/05/20 Guide on How to Update the Template's Video Chat Service
      • 06/14/19 Guide on New Conversation Functionality
    • About this Template
    • Setup Guide
    • Development Guides
      • Built-In Workflow Notes
      • Pages Summary
      • Reusable Elements Summary
      • Passwords
      • Translating Your App
      • Mini Guides
        • How to Remove Group Conversation Functionality
        • How to show the Chat window after clicking "Message" on the Profile Page when a Conversation Exists
      • Pages & Reusable Elements (Organized by Folder)
        • 1. Marketing
          • index
          • landing
          • 404
        • 2. Navigation
        • 3. Logged In
          • account
          • admin
          • change_pass
          • confirm
          • messages
            • Pageload Design
              • 1. Responsive
              • 2. Mobile Pageload
              • 3. New User
              • 4. New Conversation (Parameter)
              • 5. New Conversation w/ User (Parameter)
              • 6. View Conversation (Parameter)
              • 7. Viewing/Editing the Colors of the Message 'Bubbles'
            • Built-In Functionality
              • 1. Start a Conversation
              • 2. View/Select a Conversation
              • 3. Search for a Conversation
              • 4. Delete or Leave a Conversation
              • 5. View More Messages in a Conversation
              • 6. View Unread Messages
              • 7. See Who's Typing
              • 8. See Who's Seen Each Message
              • 9. Send Images in a Message
              • 10. Send Files in a Message
              • 11. Send a GIPHY in a Message
              • 12. Send a YouTube Video in a Message
              • 13. Start a Video Chat
          • onboard
          • profile
            • 1. Follow/Unfollow the User
            • 2. Send a Message to the User
            • 3. View the User's Followers
            • 4. View Who the User is Following
            • 5. Edit Profile
          • reset_pw
        • 4. Legal
          • privacy_policy
          • terms
    • Design Resources
      • Design Overview
      • Design Guide
      • UI Components
      • Page Templates
  • Responsive Base Template
    • Release Notes
    • About this Template
    • Setup Guide
    • Development Guides
      • Built-In Workflow Notes
      • Pages Summary
      • Reusable Elements Summary
      • Passwords
      • Translating Your App
      • Pages & Reusable Elements (Organized by Folder)
        • 1. Marketing
          • index
          • landing
          • 404
        • 2. Navigation
        • 3. Logged In
          • account
          • admin
          • change_pass
          • confirm
          • onboard
          • profile
            • 1. Follow/Unfollow the User
            • 2. View the User's Followers
            • 3. View Who the User is Following
            • 4. Edit Profile
          • reset_pw
        • 4. Legal
          • privacy_policy
          • terms
    • Design Resources
      • Design Overview
      • Design Guide
      • UI Components
      • Page Templates
Powered by GitBook
On this page
  1. Messaging Template
  2. Development Guides
  3. Pages & Reusable Elements (Organized by Folder)
  4. 3. Logged In
  5. messages
  6. Pageload Design

7. Viewing/Editing the Colors of the Message 'Bubbles'

How to change the colors of the message bubbles on the messages page

Previous6. View Conversation (Parameter)NextBuilt-In Functionality

Last updated 5 years ago

The color of the messaging bubbles can be changed by modifying the HEX codes within the HTML elements that are labeled:

"HTML Scrollbar Styling/Chat Bubbles (can delete once on Personal Plan or higher)"

If your app is on the hobby plan, please keep these three HTML elements within your app to ensure that the scrollbar and chat bubbles are styled correctly at all times. If your app is on the personal plan or higher, you do not need all of those HTML elements, and can instead paste one of the HTML element's code into the page HTML header section (and then, delete the page-level HTML elements after)

In order to change the color of the "from me" chat bubble (i.e., the chat bubble that displays on the right side of the messenger), this part of the HTML elements (or page HTML header) can be modified with any hex color codes:

Similarly, the "from them" chat bubble (.e., the chat bubble that displays on the left side of the messenger) can be modified by editing this part of the HTML elements (or page HTML header) with any hex color codes:

Note: If your app is on the hobby plan and you are modifying the colors within the "HTML Scrollbar Styling/Chat Bubbles (can delete once on Personal Plan or higher)" elements, all three of those HTML elements' colors need to be changed in order for the colors to be the same throughout the different messaging page repeating groups.