Theme Settings Documentation

Overview

The Theme Settings Module in SocietyPro allows administrators to customize the appearance of their site. Users can upload a logo, configure favicons, enable Progressive Web App (PWA) support, and select a theme color to match their brand identity.

Key Features

• Logo Customization: Upload a logo for your society.
• Show Society Name with Logo: Choose whether to display the society name alongside the logo.
• PWA App Support: Enable Progressive Web App (PWA) functionality to allow users to install the web app on their devices.
• Favicon Upload: Add favicons for different platforms, including Android Chrome, Apple Touch, and standard favicon sizes.
• Theme Color Selection: Pick from Professional, Pastel, and Warm color palettes to style your society's platform.

Accessing the Theme Settings Module

1. Log in to SocietyPro.
2. Navigate to Settings > Theme Settings.
3. Modify the required settings and click Save.

Theme Customization Options

1. Logo Customization

• Click on Upload Logo to select an image file.
• Ensure the logo is in PNG, JPG, or SVG format for the best quality.
• Check the option "Show Society Name with Logo" if you want the society name to be displayed alongside the logo.

2. Enabling PWA App

• Toggle the Enable PWA App option to allow users to install the society's app on their devices.
• This enhances the user experience by providing an app-like feel directly from their browser.

3. Favicon Upload

Favicons are small icons displayed on browser tabs and bookmarks. SocietyPro supports multiple favicon sizes:

• 192x192px (Android Chrome)
• 512x512px (Android Chrome)
• Apple Touch Icon
• 16x16px, 32x32px (Standard favicons)
• Click on "Upload Favicon" to add your icons.

4. Theme Color Selection

• Choose from three predefined color palettes:
  • Professional: Business-friendly colors.
  • Pastel: Soft and light hues.
  • Warm: Vibrant and energetic shades.
• Click on a color to apply it to your theme.

How to Save Changes

1. Adjust the logo, PWA settings, favicons, and theme color as needed.
2. Click the Save button at the bottom-right corner.
3. Refresh the page to see the changes take effect.