Guide to Site Styling and Appearance | Civio Engage Knowledge Base       [ ![Civio Knowledge Base](/civio-light.svg) ](https://nginx.deploy-lagoon-production.civio-engage-docs.dh1.amazee.io)  [Articles](/articles) [Releases](/releases)

   [Home](/)   [Knowledge base](/articles)   [🛠️ Setting up Civio Engage ](/articles?category=2)

Guide to Site Styling and Appearance
====================================

Updated 2 months ago

    Search  Go

   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 multiple preset palette options including Default, Midnight, various blues, greens, reds, purples, and other colour families.

![](/storage/articles/13616472884111.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 your site's complete colour 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

![](/storage/articles/14041036325135.png)

##### Components

![](/storage/articles/14040869586191.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

![](/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

![](/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

![](/storage/articles/13616378610959.png)

Centre-aligned navigationNavigation 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

![](/storage/articles/13616018913423.png)

Default- **Wide image:** Full-width image layout for maximum visual impact

![](/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).

 [    Back to articles ](/articles)

  Table of contents
-----------------

    © 2026 [Civio](https://civ.io) [Privacy Policy](/articles/privacy-policy) [Terms of Use](/articles/terms-of-use)