Theme

Overview

Customize the theme to tailor the look and feel of your Community page. The Theme Customization feature allows you to:

• Set colors for the page background, text, buttons, and other UI elements.

• Adjust the corner radius for a smooth and modern design.

• Preview and save your changes seamlessly.

---

How to Customize Theme

Step 1: Access the Theme Customization Panel

• Log in to your Stiqy Admin Dashboard.

• From the left-side menu, navigate to "Themes".

• You will see a theme preview screen on the center panel.

  • The preview is available for both the Community page and the Campaign page

• The Theme Settings will be displayed on the right side.

Tip: The theme customization settings apply to the Stiqy page that your users and community members interact with.

Step 2: Adjust the Theme Settings

The Theme Settings panel allows you to customize color scheme and corner radius of your Community page. You can either enter a HEX color code or use the color picker to set the color settings below:

• Color Settings

  • Background Color: Changes the page background color.

  • Primary Color: Sets the main accent color (e.g., headings, buttons).

  • Text Color: Customizes the color of text throughout your page.

  • Button Text Color: Controls the text color specifically for buttons.

  • Overview Background: Sets the background color for the overview widget in the Campaign page .

  • Overview Text Color: Changes the text color for the overview widget in the Campaign page.

  • Progress Bar Color: Sets the color for progress bars within the Campaign page.

• Corner Radius: Adjusts the roundness of corners (e.g., buttons).

  • Locate the Corner Radius field.

  • Input a numerical value (e.g., 12 for 12-pixel rounded corners).

  • A higher number increases roundness.

Step 3: Previewing and Saving Your Theme

Once you've made your changes:

• Use the Preview Panel on the center screen to see real-time updates to your theme.

• Click the Save button at the bottom of the Theme Settings panel to apply changes.

• Your new theme will reflect on your live Stiqy page.

  • It may take 1 or 2 minutes to be reflected

---

Use Cases

Here are a few examples of how you can leverage the Theme Customization feature:

Example 1: Matching Your Brand Colors

• Scenario: You want your STIQY page to match your company’s branding.

  • Action:

    • Set Background Color to your company’s brand background.

    • Use your logo's main color for Primary Color.

    • Ensure Text Color contrasts with the background for readability.

Example 2: Clean and Minimalist Look

• Scenario: You prefer a clean, professional appearance for your page.

  • Action:

    • Use white (#ffffff) for Background Color.

    • Use light gray for text and minimal accents.

    • Set Corner Radius to a moderate value like 8.

---

Troubleshooting Tips

• Cause: Low contrast between text and background colors.

• Solution: Ensure there is enough contrast between the Background Color and Text Color (e.g., white text on a dark background)

• Cause: Unsaved changes.

• Solution:

  1. Double-check all settings.

  2. Click the Save button at the bottom of the Theme Settings panel.

Issue: Page Looks Overly Rounded

• Cause: High Corner Radius value.

• Solution: Reduce the value in the Corner Radius field (e.g., set to 4 or 8).

---