Custom Branding Colors
Last updated
MangoApps Administrators Guide
Last updated
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.
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.
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 orange.
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.
Primary Text Color: This option controls the color for the majority of textual content.
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.
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.
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.
When the setting is turned ON for the Home and Company Pages, widgets will be positioned atop a white container box. When it is turned OFF, the white container box will be hidden, and the widgets will be directly placed on the portal background.
Similarly, for the News Feed, turning the setting ON will place feed cards atop a white container box. When the setting is OFF, the white container box will be hidden, and the feed cards will be directly placed on the portal background color.
This change applies only to the Recommended view of the News Feed module.
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.
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.
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.
Flyout Color and Flyout Text Color: These options allow you to set the appearance of the left-hand navigation menu flyout submenus.
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.
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.
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.
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.
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".
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.
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.
Toggle the Secondary Button Color ON and the color option menu will appear.
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.
Toggle the Outline Options ON and the color option menus will appear.
