The portal tab in Branding module (Admin Portal > Branding > Portal) offers visual control to customize company branding from the admin portal of MangoApps. These customizations can be performed from the following options:
Hero Style Home Page
Network admins can upload a company logo and favicon, add a domain-wide banner, select the domain-wide theme and other look-and-feel settings from here for the entire web interface.
Network Name: Enter the title for your domain displayed in the title bar of your web browser.
Company Logo: Add a custom company logo for your domain. The recommended resolution is 200px X 45px and the file size should be < 50kb.
Favicon: Add a custom favicon displayed in the title bar of your web browser.
Login screen image: Upload the image you want your users to see on the login page.
Save Settings: Click the Save Settings button to apply the chosen settings.
Hero Style Home Page
When 'Hero Style Home Page' is activated, it will show on the home page.
To set your Hero Style Home Page, turn on the toggle switch.
Upload a logo which can be shown on the Company Home page.
You can upload custom hero images for both web and mobile.
Configure title and subtitle text with text color.
Hero image on the home page comes integrated with a search box to find information & resources in the full network.
Hero image is supported in both vertical & horizontal navigation.
You can change the appearance by customizing the photo style, icon style and other appearance related options.
Corner Style: This option allows domain admin to set the edges of buttons, containers, dialogs, menus etc. in rounded shape.
Photo Style: This option allows domain admin to set the shape of profile image for the logged in user on the top right side of the domain. Admin can select between the circular and square options.
Icon Style: Select a different style such as solid or regular or light style for all icons in the primary navigation bar and the entire domain. This includes all navigation, module, compose, filter, and action icons.
Color Theme: This option is only applicable if the domain is using default Mango branding. Custom Branding applied will override this color theme selection.
Font Family: MangoApps comes with 10 out of the box Fonts and you can select any of the font from family to use for web portal content.
Portal Colours: You can configure the background color and background highlight color (top 30%) of the background to a color of their choice. Portal background color by default is set to F5F5F5 (color name: Cultured). Portal background highlight color default is set as per the color theme selected.Both portal background & portal background highlight color are configurable.
Navigation Menu: You can customize the left navigation menu by selecting primary, hover, flyout, hamburger color and text colors.
Top Bar: To customize the top navigation bar, select the Primary color from the list and you can change the primary text color.
Action Buttons: You can customize the primary and secondary button color and text color by selecting the color from the list. You can configure secondary buttons to be transparent.And customize primary button outline color and secondary button outline color.
You can select up to 25 colors that are as per your company's branding guide or requirements.
The color palette set here is available to content creators as the default color palette when composing posts, pages, wikis, notes, events and more on the user portal.
To set standard look for the portal, you can set different properties to the text style such as heading style, font family, size, and other properties for the portal.
Click the Save Settings button to apply the chosen settings.
How can users override the theme selected by the network admin?
Users can override theme selected by the network admin and choose a different color theme for themselves from the User Portal:
Hover over the
(Settings) button to display the drop-down list, and then click Change My Settings.
Click the Appearance tab.
Click preferred theme.
Click the Save button to save and apply the selected color theme.