District Engage offers extensive customisation options to help you create a unique and engaging community platform that reflects your organisation's brand and design preferences. This comprehensive guide covers all available styling configurations, from basic appearance settings to advanced customisation options.
To configure your site's styling options:
- Log into your District Engage admin dashboard
- Navigate to Settings in the left-hand menu
- Select the appropriate section:
- Appearance for frontend styling options
- Home page for homepage-specific configurations, which can affect the look and feel of your site.
Administrator Access Required
Appearance and styling settings require Admin permissions. These changes affect your entire site, so proceed with caution and consider testing changes on a staging environment first.
Frontend Styling
Access general styling options through Settings > Appearance.
Site palette
Your site palette defines the core colours used throughout your community platform. District Engage provides multiple preset palette options including Default, Midnight, various blues, greens, reds, purples, and other colour families.
Each palette includes:
- Primary colours: Main brand colours for headings, links, and key interface elements
- Secondary colours: Supporting colours for backgrounds and highlights
- Tertiary colours: Additional accent colours for visual variety
You can preview your site's complete colour palette by visiting /styleguide/palette on your District Engage site.
Site style options
Choose from available style themes to shape how your community platform looks and feels:
Note: The examples below use your site's custom colour scheme, not the colours shown in the demonstration screenshots. Your site will reflect your chosen palette when you apply these styles.
A standard banner layout with a balanced split between text and image, offering a familiar and structured presentation style.
Banner example
Components
A clean, minimal layout with generous white space and centre-aligned content. This style feels open and modern, ideal for simple and uncluttered designs.
Banner example
Components
A bold layout with stacked image and text for high visual impact. The banner feels strong and dynamic, great for attention-grabbing landing pages.
Banner Example
Components
Navigation alignment
Position your main navigation menu for desktop devices:
- Left: Traditional left-aligned navigation
- Centre: Centred navigation for balanced presentation
- Right: Right-aligned navigation for unique positioning
Navigation alignment only applies to desktop breakpoints. Mobile devices automatically use responsive hamburger menu layouts.
Typography
Select from over 1,500 Google Fonts or use the default font. Consider readability and accessibility when selecting fonts.
Preview the fonts on https://fonts.google.com/
Homepage configurations
Access homepage-specific settings through Settings > Structure > Home page.
Hero Style options
Configure how your homepage hero section appears:
- Default: Standard layout with title and description
- Wide image: Full-width image layout for maximum visual impact
Hero search form
Toggle the project search functionality within your homepage hero section on or off to match your engagement strategy.
Hero registration CTA
Enable and configure custom call-to-action text for user registration buttons that appear in the hero section. Buttons automatically hide for logged-in users.
Configure your site menus
Learn how to configure your main and footer navigation here: Edit the site menu.
Need Additional Help?
If you encounter issues with styling or need assistance with advanced customisation, contact the District Engage Support Team.