Guide to Site Styling and Appearance | Civio Engage Knowledge Base [Skip to content](#main) [ ![Civio Engage Knowledge Base](/civio-light.svg) ](https://nginx.deploy-lagoon-production.civio-engage-docs.dh1.amazee.io) [Product documentation](/articles) [Release notes](/releases) [Roadmap](/roadmap) [ Support portal ](https://nginx.deploy-lagoon-production.civio-engage-docs.dh1.amazee.io/portal/login) Toggle navigation [Product documentation](/articles) [Release notes](/releases) [Roadmap](/roadmap) [Support portal](https://nginx.deploy-lagoon-production.civio-engage-docs.dh1.amazee.io/portal/login) 1. [Home](/) › 2. [Product documentation](/articles) › 3. [Setting up Civio Engage ](/articles?category=2) › 4. Guide to Site Styling and Appearance Guide to Site Styling and Appearance ==================================== Updated 1 day ago · 3 min read Search Search Civio 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: 1. Log into your Civio Engage admin dashboard 2. Navigate to **Settings** in the left-hand menu 3. 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. Civio Engage provides 20 preset palettes, including Default, Midnight and named blues, greens, reds, oranges, yellows and purples. Open the **Palette** dropdown in **Settings > Appearance** to see them, each with a swatch of its main colour beside the name, except the highlighted row, whose swatch is an outline rather than a filled circle. The palette you are already using is not repeated in the list, and the field above the list appears empty while the list is open. ![The Palette dropdown open under Frontend styling, with an empty value field above the list, which shows the preset colour families - Default, Midnight, Lockmara blue and the rest - each with a dot in its own colour except the highlighted Default row, whose swatch is an outline.](https://engage.knowledge.civ.io/storage/YlQhColG4GgTeQRfy9UicDguohlqOkjO8pjLYxfE.png) 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 the colours of your applied palette by visiting **/styleguide/palette** on your Civio 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. #### Default A standard banner layout with a balanced split between text and image, offering a familiar and structured presentation style. ##### Banner example ![The Civio Engage homepage banner shown in the Default site style, with a balanced split between text and image.](https://engage.knowledge.civ.io/storage/gkuMJx03Ex55xFoKBis5P047NzfdhruSl9InOYT2.png) ##### Components ![An events list component on the homepage, shown in the Default site style.](https://engage.knowledge.civ.io/storage/BuunQLu2DLaAk3s3SglSN1LD6ehXbuz7wJRUZsxj.png) #### Spacious 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 ![Spacious style homepage example](/storage/articles/13616399427727.png) Example homepage with Spacious style ##### Components ![A homepage in the Spacious style, with its navigation, tabs and cards labelled](/storage/articles/14040869587727.png) #### Kiwi 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 ![Kiwi style homepage example](/storage/articles/13616399428239.png) Example homepage with Kiwi style ##### Components ![A homepage in the Kiwi style, with its navigation, tabs and cards labelled](/storage/articles/14040869587983.png) ### 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 ![A site header, showing the navigation alignment options](/storage/articles/13616378610959.png) Centre-aligned navigation 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 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 ![A homepage hero in the Default style, with the latest projects listed beneath](/storage/articles/13616018913423.png) Default - **Wide image:** Full-width image layout for maximum visual impact ![A homepage hero in the Wide image style](/storage/articles/13616048381967.png) Wide image ### 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](/articles/9176561415567-Edit-the-site-menu). #### Need Additional Help? If you encounter issues with styling or need assistance with advanced customisation, contact the [Civio Engage Support Team](mailto:support@civ.io). Was this article helpful? ------------------------- Your feedback helps us prioritise what to rewrite. Yes No [ Back to Setting up Civio Engage ](/articles?category=2) On this page ### Still need help? Raise a request in the support portal and track it to resolution. [ Submit a support request ](https://nginx.deploy-lagoon-production.civio-engage-docs.dh1.amazee.io/portal/login) Submit a support request through the [support portal](/portal) or email . © 2026 [Civio](https://civ.io) [Privacy Policy](/articles/privacy-policy) [Terms of Use](/articles/terms-of-use)