Communities
      Back to home
      1. Knowledge Base
      2. Premium Features
      3. Communities

      Customisation

      Accessing the Customisation Page

      To access the customisation settings for your platform, follow these steps:

      1. Click your avatar in the top navigation panel.
      2. Select Control Panel from the dropdown menu.
      3. Click Customisation.

      This page allows you to modify various aspects of your platform, including layout, headers, logos, styles, and other settings.

      Layout

      You can customize the layout of your platform's components to enhance the user experience:

      • Groups Layout: Choose between the following layouts for Groups:

        • Blocks: Display groups in block format.
        • Horizontal: Arrange groups horizontally.
        • Responsive Cards: Display groups in a responsive card layout.

      • Discussions Layout: Choose between:

        • List: Display discussions in a list format.
        • Cards: Display discussions in a card format.

      Headers

      Custom headers can be set for both private (Member-only) and public (Guest) sections.

      Private Header (Visible to Members)

      • Title: Title displayed on the header.
      • Description: Description displayed on the header (supports Markdown).
      • Image (Optional): You can upload an image with the ability to adjust overlays for better text readability:
        • Light Overlay: Adjust the strength of the dark overlay for light mode.
        • Dark Overlay: Adjust the strength of the dark overlay for dark mode.

      Public Header (Visible to Guests and Anonymous Visitors)

      • Title: Title displayed on the header.
      • Description: Description displayed on the header (supports Markdown).
      • Image (Optional): You can upload an image with the ability to adjust overlays for better text readability in both light and dark modes.

      Logo Customisation

      You can upload different types of logos depending on your platform's design and branding needs.

      Square Logos:

      • Dark Logo (Light Background): Displayed in:

        • Mobile top bar (if the background color is light).
        • Installed app icon and splash screen.
        • Browser tabs.
        • Ensure equal width and height for the logo, and use a transparent background.

      • Light Logo (Dark Background): Displayed in:

        • Mobile top bar (if the background color is dark).
        • Ensure equal width and height for the logo, and use a transparent background.

      Wide Logos:

      • Dark Logo (Light Background): Displayed in:

        • Desktop top bar (if the background color is light).
        • Auth screen when using light theme.
        • Horizontal format recommended for best appearance. Use a transparent background.

      • Light Logo (Dark Background): Displayed in:

        • Desktop top bar (if the background color is dark).
        • Auth screen when using dark theme.
        • Horizontal format recommended for best appearance. Use a transparent background.

      Email Logo:

      • Displayed in the email header.

      Style Customisation

      You can adjust the color scheme of various platform elements to match your branding.

      Warning Colors:

      • Warning Base: Background color for warning elements.
      • Text on Warning: Contrasting text color for warning elements.
      • Warning Text: Contrasting text color for surfaces with warning background.

      Info Colors:

      • Info Base: Background color for info elements.
      • Text on Info: Contrasting text color for info elements.
      • Info Text: Contrasting text color for surfaces with info background.

      Top & Bottom Bar Customisation:

      • Top Background: Custom navbar background.
      • Top Border: Visible border on the navbar background.
      • Top Primary Text: Contrasting text color on the navbar background.
      • Top Secondary Text: Contrasting secondary text color on the navbar background.
      • Bottom Background: Custom footer background.
      • Bottom Border: Visible border on the footer background.
      • Bottom Primary Text: Contrasting primary text color on the footer background.
      • Bottom Secondary Text: Contrasting secondary text color on the footer background.

      Miscellaneous:

      • Like Button: Always displayed with a transparent background on the surface.
      • Dislike Button: Always displayed with a transparent background on the surface.
      • White and Black: Set white or black as default colors, regardless of theme.

      Miscellaneous Settings

      • Auth Background (Optional): Add a background image to the authentication page. Ensure the image works well on both mobile and desktop screen sizes. You can adjust overlays for readability:

        • Light Overlay: Additional overlay for better text readability in light mode.
        • Dark Overlay: Additional overlay for better text readability in dark mode.

      • PGR Link Text: Custom text for the link to the PGR section on the sign-in page.

      For further assistance on customising your platform, feel free to reach out to our support team.