Custom Appearance

Evelant's floating orb and chat panel are designed for maximum customization, allowing you to tailor their appearance and behavior to match your personal browsing style. This guide will walk you through the various customization options available and provide step-by-step instructions to help you set everything up as you envision.

Overview of Customization Options

Evelant offers a variety of features to customize your browsing experience:

• Themes: Choose from multiple built-in themes or create your own.
• Color Controls: Adjust the color scheme to suit your preferences.
• Font Settings: Select the font style that resonates with you.
• Panel Radius: Modify the panel's shape for a more personalized touch.
• Orb Customization: Change the size, opacity, and movement behavior of the orb.
• Response Style: Select the type of responses you want from the chat (concise or insightful).
• Focus Mode: Choose between page-specific or general focus modes.

Step-by-Step Customization Guide

Step 1: Accessing Appearance Settings

To begin customizing your setup, follow these steps:

1. Open the Evelant extension in your browser.
2. Click on the settings icon, typically represented by a gear symbol.
3. Navigate to the Dashboard section.
4. Select Settings from the dropdown menu.
5. Click on the Appearance tab to access all customization options.

Step 2: Choosing a Theme

Evelant comes with several built-in themes designed to cater to different aesthetics. Here’s how to select one:

1. Within the Appearance tab, locate the Theme section.
2. Browse through the available themes. You’ll see previews of each theme.
3. Click on a theme to select it. The change will be reflected in real-time.
4. If you want to revert to your previous theme, use the Reset button.

Step 3: Customizing Colors

To further personalize your experience, you can adjust the colors used in the orb and chat panel:

1. Under the Color Controls section, you will find color pickers for various elements.
2. Click on the color box next to each element to open the color palette.
3. Select your preferred color or input a specific hex code for precision.
4. Observe the changes instantly in the preview pane.
5. Once satisfied, click the Save button to apply your changes.

Step 4: Adjusting Font Settings

Font selection can greatly affect readability and overall experience. Here’s how to customize it:

1. Within the Font Settings section, click the dropdown menu to view available fonts.
2. Select your desired font and see how it looks in the preview.
3. If you want to adjust font size, use the slider to increase or decrease the size.
4. Save your settings to ensure your font choices are applied.

Step 5: Modifying Panel Radius

To give your chat panel a unique appearance, you can adjust its radius:

1. Find the Panel Radius slider in the Appearance tab.
2. Move the slider left or right to decrease or increase the roundness of the panel edges.
3. The preview will update to reflect your adjustments.
4. Click Save to finalize your desired panel shape.

Step 6: Changing Orb Size and Opacity

The orb's size and opacity can influence its visibility and accessibility:

1. In the Orb Customization section, use the size slider to change the orb’s dimensions.
2. Adjust the opacity slider to make the orb more or less transparent.
3. Confirm that the changes suit your preferences by checking the preview.
4. Remember to click Save after making adjustments.

Step 7: Orb Movement Behavior

You can customize how the orb behaves while you browse:

1. Locate the Movement Behavior options in the Orb Customization section.
2. Select whether you want the orb to be static, draggable, or to follow your mouse cursor.
3. Test the behavior in the preview to ensure it meets your needs.
4. Save your chosen settings.

Step 8: Setting Response Style

Evelant allows you to choose how responses are framed:

1. Go to the Response Style section.
2. Select between Concise and Insightful options.
3. Review how each option changes the responses in the preview pane.
4. Click Save to apply your selection.

Step 9: Configuring Focus Mode

The focus mode helps you determine how the orb interacts with the current page:

1. Find the Focus Mode settings in the Appearance tab.
2. Choose between Page-specific or General modes.
3. Review how this affects the chat panel and orb functionality.
4. Confirm your selection by clicking Save.

Troubleshooting Common Issues

If you encounter issues while customizing the appearance, consider the following troubleshooting tips:

• Theme Not Applying: Ensure you have clicked the Save button after making changes.
• Changes Not Visible: Try refreshing your browser or restarting the Evelant extension.
• Color Picker Not Working: Make sure you have the latest version of Evelant installed.

Frequently Asked Questions (FAQs)

Can I revert to the default settings?

Yes, you can revert to default settings by using the Reset button found in the Appearance tab.

Will customizations sync across devices?

Customizations are typically device-specific. Changes made on one device may not reflect on another unless you are logged into the same account and syncing is enabled.

How do I report a bug related to customization?

To report bugs, visit the Support section in the Evelant dashboard and fill out the bug report form. Include details about the issue and steps to reproduce it.

Best Practices for Customization

1. Experiment with Colors: Test various color combinations to find what is visually comfortable for you.
2. Maintain Readability: Choose fonts and sizes that ensure text is easy to read.
3. Regularly Update Settings: As your preferences change, revisit the customization options to keep your setup fresh and engaging.
4. Utilize the Preview: Always use the preview feature to see how changes will look before finalizing them.

By following this guide, you can create a browsing environment with Evelant that is not only functional but also aesthetically pleasing and tailored to your unique preferences. Happy customizing!