Introduction

In today's overview, we delve into the Color Scene add-on—a versatile customization tool designed to enhance the visual interface of UChat platform.

This add-on, developed as a partner online product, offers extensive options to modify colors, fonts, and layout elements, empowering users to tailor their dashboards and navigation bars to their preferences.

The following summary provides a comprehensive breakdown of its features, setup process, and customization capabilities, ensuring you understand how to leverage this tool effectively.

Detailed Breakdown of the Color Scene Add-on

1. Accessing and Installing the Add-on

• Location in Settings:

  • Navigate to Partner Settings > Custom Add-ons.

  • Find Color Scene listed here.

• Payment & Activation:

  • It is a one-time purchase.

  • After buying, save all changes and activate the add-on.

  • Recommended to log in via an Incognito window on your custom domain to see real-time updates.

• Initial Setup:

  • Post-activation, ensure to save and apply settings.

  • Refresh the page in a new browser window to view modifications.

2. Core Features and Customization Options

3. Navigation Bar & User Profile Customizations

• Logo & Paddings:

  • Upload custom logos.

  • Adjust paddings on the left and right for spacing.

• Drop-down Menus:

  • Change background colors.

  • Set different whites for dropdowns.

• Notification Badge:

  • Show or hide notification counts.

  • Customize badge appearance.

• User Profile Dropdown:

  • Contains links such as Quick Tour, Documentation, and Communities.

  • These links can be hidden if unnecessary.

4. Dashboard Cards & Page Layouts

• Managed via a Dashboard Page Add-on.

• Allows control over images, thumbnails, descriptions, and titles.

• Supports multiple styles and positions for Pro Pages.

5. Fonts and Typography

• Supported Fonts:

  • The default font is Bunny Font.

  • Users can request additional fonts; support team can add custom fonts upon request.

• Font Customization:

  • Change font family, size, and style across various elements.

6. Page & Card Customizations

• Page Settings:

  • Change background colors, paddings, and margins.

  • Adjust border radius for a rounded look.

• Card Settings:

  • Modify background, border, text color, radius, and margin.

7. Table Customizations

• Adjust table aesthetics with options for border colors, header backgrounds, and header borders.

8. Advanced Customizations with CSS

• For further personalization, users with developer knowledge can add custom CSS code.

• Process:

  • Identify CSS IDs of elements.

  • Write custom CSS.

  • Paste into the designated area.

  • Save and refresh to see changes.

9. Refresh & Viewing Changes

• Some modifications, especially submenu and page-specific changes, may not reflect immediately.

• Best Practice:

  • Use an Incognito window.

  • Log in to your custom domain.

  • Refresh the page multiple times until the desired UI appears.

10. Future Updates & Support

• The developers plan to add more customization options over time.

• Users are encouraged to reach out for support if they need specific controls or wish to suggest features.

• The team is open to adding custom settings based on user feedback.

Summary

The Color Scene add-on is a powerful tool for users seeking to personalize and brand their platform's interface. Its extensive options for color, font, layout, and CSS customization make it adaptable to various aesthetic preferences and functional needs.

While it offers a rich set of features out of the box, the support team remains committed to expanding its capabilities and assisting users in achieving their ideal UI. Whether you're a novice or a developer, this add-on provides the flexibility to craft a unique and engaging user experience.

Remember:

• Always save and apply your changes.

• Use Incognito mode for testing.

• Reach out to support for custom font requests or additional features.