# Custom Branding Colors

### Overview

In addition to the preset color themes, MangoApps provides the flexibility to create a fully customized branding color theme. You can set the color scheme for the sections Portal Colors, Navigation Menu, Top Bar, and Action Buttons. You can also configure a custom **Color Palette** for your content creators. \
These options allow you to tailor the colors according to your brand identity, ensuring a unique and cohesive look throughout your web portal.

<figure><img src="/files/HBNSbLXOniFgx7FUCIbT" alt="" width="563"><figcaption></figcaption></figure>

***

### **Portal Colors**&#x20;

This section allows you to configure the background color and background highlight color (top 30%) of your portal. By default, the portal background color is set to the hexacode #F5F5F5 (color name: Cultured). The background highlight color is initially determined based on the selected **Color Theme**. However, both the portal background and background highlight colors are fully customizable, allowing you to personalize your web portal with colors of your choice.&#x20;

In this spotlight section, we will explore which areas of the portal each color selection affects. For the purpose of example, the affected areas will be in <mark style="color:orange;">orange</mark>.

![](/files/gUK6VGyC6lRNvslJnG3b)

1. **Primary Color**: With this option, you can set the Active Action color for your web portal. This color will be reflected when a new update is received, and it will also be visible when the user's cursor hovers over an active field. By selecting the Primary Color, you can create a visually noticeable and engaging experience that helps users identify important actions and updates within your portal.&#x20;

<figure><img src="/files/WriGc95k5H5kT5UXFwMC" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/4d5uY7hVqQPOCMJ3A95i" alt="" width="563"><figcaption></figcaption></figure>

***

2. **Primary Text Color:** This option controls the color for the majority of textual content.&#x20;

<figure><img src="/files/hTBOYsw1qnwV4sZjJwZO" alt="" width="563"><figcaption></figcaption></figure>

***

3. **Link Color and Link Hover Color:** The link color refers to the color used to represent clickable links within a brand's digital content. On the other hand, the link hover color is the color that appears when a user hovers their cursor over a link.

<figure><img src="/files/NEJuSYO7wd3AXketeGyZ" alt="" width="563"><figcaption><p>Link Color</p></figcaption></figure>

<figure><img src="/files/Pl0ONKbheVnQbpR4iU9v" alt="" width="563"><figcaption><p>Link Hover Color</p></figcaption></figure>

***

4. **Portal Background and Portal Background Highlight Color:** This option provides you with the ability to manually configure your portal's background color. For an added touch of style, you can include a transition color that gradients from the top of your background and gently fades into the main background color as users scroll through the content. This creates a visually appealing effect, enhancing the overall look and feel of your portal.

<figure><img src="/files/D6yAUOVdd42iqFkzhIRq" alt="" width="563"><figcaption></figcaption></figure>

<figure><img src="/files/B6t9cK5zNnpujY5YYYSm" alt="" width="557"><figcaption></figcaption></figure>

***

5. **Secondary Text Color:** The secondary text color encompasses various types of content, such as subheadings, captions, annotations, footnotes, or any text that provides additional context or supplementary information within a brand's materials.

<figure><img src="/files/HXS0GS7kD8uOpS5DdCRz" alt="" width="563"><figcaption></figcaption></figure>

***

### Page Container & Border Settings

The **Page Container** setting controls whether widgets and feed cards are displayed inside a white container box or directly on the portal background.

{% hint style="danger" %}
This change applies **only** to the **Recommended** view of the News Feed module.
{% endhint %}

<figure><img src="/files/MFYfm00LvyGTsbkg5nFL" alt=""><figcaption></figcaption></figure>

**Home & Company Pages**:

* **ON** → Widgets are positioned inside a white container box.
* **OFF** → Widgets are placed directly on the portal background.

**News Feed (Recommended View only)**:

* **ON** → Feed cards appear inside a white container box.
* **OFF** → Feed cards are placed directly on the portal background color.

<figure><img src="/files/giYDMVrL104qz6Nbaihj" alt=""><figcaption></figcaption></figure>

Admins can further customize the appearance of containers and borders via:

* **Page Container Border**: Adds a border around module page containers such as **News Feed, Wikis, AI Studio**, and others. This option is especially useful when the portal background color is white, as it provides clearer visual separation of content areas.
* **Portal Border Color**: Defines the color used for the **page container border** (when enabled), as well as the borders of the **post viewer** and other UI elements.

<figure><img src="/files/SK4SwNuEhJo4C1WpURko" alt="" width="563"><figcaption></figcaption></figure>

***

### **Navigation Menu**&#x20;

This section provides customization options for the colors of the navigation menus, which are initially based on the selected **Color Theme**. You have the ability to set the color for the left-hand navigation menu and the left-hand navigation sub-menu. Currently, only the out-of-the-box navigation and module icons are available. However, the color of the icons can be changed in the **Navigation Menu** sub-section below.

<figure><img src="/files/oPUlADKKUUUCIgts0H5m" alt="" width="563"><figcaption></figcaption></figure>

1. **Primary Color and Primary Text Color:** The **Primary Color** option enables you to apply your branding colors to the background of the left-hand navigation menu. \
   \
   The **Primary Text Color** option allows you to set the color for the left-hand navigation menu icons and module titles.

<figure><img src="/files/b3z8Lg8iTtoJTnMy4Dle" alt="" width="535"><figcaption></figcaption></figure>

<figure><img src="/files/Mb65pWoEzxq9hBHWKlxc" alt="" width="356"><figcaption></figcaption></figure>

***

2. **Hover Color** and **Hover Text Color:** These options allow you to customize the appearance of the left-hand navigation menu when a user hovers over modules.

<figure><img src="/files/QfcDqVGqAvsIvqM71wpy" alt="" width="501"><figcaption></figcaption></figure>

<figure><img src="/files/GCp5f00lYIIOj9Fj4bHi" alt="" width="396"><figcaption></figcaption></figure>

***

3. **Flyout Color and Flyout Text Color:** These options allow you to set the appearance of the left-hand navigation menu flyout submenus.&#x20;

<figure><img src="/files/Tg1kDx46RUvf1fDerQx4" alt="" width="563"><figcaption></figcaption></figure>

<figure><img src="/files/VNwHhOGN3LkdDVMxG4ge" alt="" width="563"><figcaption></figcaption></figure>

***

4. **Hamburger Menu:** This option allows you to set the background color of the Hamburger Menu to the top left of the Navigation menu. The 3-Dash mark is not customizable and will remain white.

<figure><img src="/files/uIct9WF8MTmiyGWMB3ml" alt="" width="461"><figcaption></figcaption></figure>

***

5. **Separator Color:** This option allows you to set a color for the module dividers. By choosing a specific color, you can create a clear distinction between different modules.

<figure><img src="/files/ELqujRB0N5LNlKd6qqh7" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/XkxNoYKaaiTYmxiqBgAe" alt="" width="325"><figcaption></figcaption></figure>

***

### **Top Bar**&#x20;

The customization options for the Top Bar are only available to user segments that have the **Vertical Style** of navigation only. For more information on navigation styles, click [here](https://guides.mangoapps.com/admin-guide/navigation#wiki_toc_choice-of-vertical-vs-horizontal-navigation-based).&#x20;

These options provide you with the ability to set both the text (non-logo) and background colors of the top bar. This customization allows you to create a cohesive and branded look for the top bar, ensuring that it aligns with your website's visual identity and design.

The search bar will remain in it's default color scheme.

<figure><img src="/files/bGv4zqD5OKZcK88tehTB" alt="" width="533"><figcaption></figcaption></figure>

<figure><img src="/files/Mjk94xb7VplS1BvUi7G0" alt=""><figcaption></figcaption></figure>

***

### **Action Buttons**&#x20;

These options allow you to customize the appearance of the primary call to action button as well as a secondary button. The primary button serves as the main action button that stands out and prompts your users to perform actions in the portal. Examples of this button are "RSVP Now" and "Take a Quiz".

The secondary button encompasses any supplementary button or complementary action to the primary call to action button. Examples of this button are "Read More" and "View Event".

<img src="/files/hz1hVkz4H4u4Ie4y3mg2" alt="" width="563">

1. **Primary Button Color and Primary Text Color**: These options allow you to set the text and background color for the **Call to Action** buttons within your domain.&#x20;

<figure><img src="/files/s7QQv5r7n75rvAksQ4Vj" alt="" width="549"><figcaption></figcaption></figure>

<figure><img src="/files/BA3Dg9qCtvm3rErhr8Gl" alt="" width="563"><figcaption></figcaption></figure>

***

2. **Secondary Button Color** and **Secondary Text Color**: With this option, you can customize the text and background colors for supplementary buttons. Unlike the primary button, the background color for secondary buttons can be toggled off to match the background behind the button, offering a seamless and more subtle appearance when needed.

<figure><img src="/files/xzmwI8R5MsqHBxDlbYXz" alt="" width="530"><figcaption><p>Secondary Button with Background Toggled OFF</p></figcaption></figure>

<figure><img src="/files/dIOSsFpVHD88P9PlstU2" alt="" width="563"><figcaption><p>Secondary Button with Background Toggled OFF</p></figcaption></figure>

Toggle the Secondary Button Color **ON** and the color option menu will appear.

<figure><img src="/files/JwsI5JFoRCUfnvwrUlOu" alt="" width="563"><figcaption><p>Secondary Button with Background Toggled ON</p></figcaption></figure>

<figure><img src="/files/7KRUIG51LPmfJtCuCAE9" alt="" width="554"><figcaption><p>Secondary Button with Background Toggled ON</p></figcaption></figure>

***

3. **Primary Button Outline Color** and **Secondary Button Outline Color:** This option gives you the ability to select the border colors for both the primary and secondary buttons. You can toggle these options OFF if you prefer not to have a border color for the buttons.&#x20;

<figure><img src="/files/SyY32nl35vMW7PnBSyeE" alt="" width="533"><figcaption><p>Outline Color Toggled OFF</p></figcaption></figure>

<figure><img src="/files/tePvvYvEbM8awBGcQ47K" alt="" width="563"><figcaption><p>Outline Color Toggled OFF</p></figcaption></figure>

Toggle the Outline Options **ON** and the color option menus will appear.

<figure><img src="/files/GRrU5wcbUodkchVlCBmO" alt="" width="543"><figcaption><p>Outline Color Toggled ON</p></figcaption></figure>

<figure><img src="/files/AyPD0OrrhlRiW4opFiRa" alt="" width="563"><figcaption><p>Outline Color Toggled ON</p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guides.mangoapps.com/admin-guide/branding/full-portal/custom-branding-colors.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.