How to Change the Color Scheme for Your Widgets

Customizing the color scheme of your widget allows you to match it with your website's design and branding. Follow the steps below to ensure a seamless and visually appealing customization process.

 Last updated : 31 Dec, 2024
 Guide

Step 1: Access the Settings Panel

Begin by accessing the settings panel where all customization options are available.

  1. Log In to Your Dashboard
    • Visit your dashboard and log in with your credentials.
  2. Navigate to the Desired Widget
    • Select the widget you want to customize (e.g., Horoscope, Numerology).
    • Before clicking the “Edit Setting” button, select the desired setting from the “Choose Your Setting” dropdown menu.
    • Click the “Edit Setting” button to open the customization options.

Step 2: Open the Color Scheme Section

This step involves selecting the color scheme settings to start customizing the widget's design.

  1. In the settings panel, locate and click on “Color Scheme” in the menu.
  2. This will display the available color themes and customization options.

Step 3: Select a Pre-Designed Theme

Choose from pre-designed themes to instantly update the widget's color scheme.

You’ll see a list of pre-designed color schemes such as:

  • Brut: Minimal and clean shades.
  • Evergreen: Refreshing green tones.
  • Metallic: Modern metallic hues.
  • Burgundy: Rich and bold shades.
  • Serenity: Soft pastel tones for a calming effect.

Step 4: Customize Colors (Optional)

For further personalization, adjust individual elements of the selected theme.

  • Click the Pencil Icon next to the theme you selected.
  • Customize the following elements:
    • Primary Colors: Background, headings, and borders.
    • Secondary Colors: Text and accent elements.
  • Changes are reflected instantly on the widget preview for real-time adjustments.

Step 5: Save Your Changes

Save your color adjustments to ensure the changes are applied to the widget.

  • After selecting or customizing the colors, scroll down and click the “Save” button.
  • The widget will automatically update with the new color scheme.

Step 6: Preview Your Widget

Verify the changes made to the widget's color scheme.

  • Scroll up to the widget preview section to see how the changes look.
  • Ensure the colors align with your website’s branding and adjust if necessary.

Step 7: Use the Updated Widget

Integrate the updated widget with your website for a refreshed look.

  • Copy the code snippet provided for the customized widget.
  • Embed it on your website to display the updated widget.

Conclusion

By following these steps, you can effectively change and personalize the color scheme of your widget, enhancing both design and user engagement. Repeat the process anytime to refresh your widget's look!