Portal
Customize the overall appearance of your organization's portal
The Portal tab in the Branding Module provides a user-friendly way to customize the company branding through the admin portal. You can make various customizations using the following options:
- Portal settings
- Hero Style Home Page
- Appearance
- Color Palette
- Text Styles
These settings allow network admins to customize the look and feel of the entire web interface for the company. From this section, admins can upload a company logo, edit the favicon, add a domain-wide banner, choose the domain-wide theme, and access other visual settings.
- 1.Network Name: This is the title that will be displayed in the tab interface bar of your web browser for your domain. Please note: This will not change your domain URL. To learn more about changing your Domain URL, click here.
- 2.Logos & Images: Upload a custom company logo image file for your domain. We recommend using a resolution of 200px X 45px and ensuring the file size is less than 50kb. You have the option to use the same logo image for both Vertical Navigation and Horizontal Layout, or you can choose to display a different logo image based on your portal's navigation bars settings. For more information of setting the Navigation style, click here.
- 3.Favicon: Add a custom favicon displayed in the title bar of your web browser.
- 4.Login screen image: Upload the image you would like your users to see on the login page. we recommend using a resolution of 1257px x 1536px and ensuring the file size is less that 250kb.
Once you have completed your changes, click the Save Settings button in the upper right hand corner to apply the chosen settings.
The Hero Style Home Page allows further customization of the Home Module by providing additional branding opportunities. To set your Hero Style Home Page, turn on the toggle switch. Once toggled, additional options will appear.
Why should I use the Hero Style instead of the Standard Style?
Opting for the Hero Style on your home page enables you to captivate users through a branded banner while effectively conveying your business's core message or purpose. This approach also enhances the overall visual appeal, creating a more engaging experience. Explore the possibilities below to further integrate your unique branding and truly establish a distinct online presence.
- 1.Company Logo: Upload a logo which can be shown on the Company Home page. This logo will only appear if the Hero Style Home Page is toggled ON. Otherwise it will default to the images uploaded to the Logos & Files section in Portal Settings.
- 2.Hero Image: You have the option to upload custom hero images for both web and mobile versions of your site. On the home page, the hero image is seamlessly integrated with a search box, allowing users to easily find information and resources throughout the entire network. Additionally, the hero image is fully supported in both vertical and horizontal navigation layouts, ensuring a consistent and engaging visual experience across your website. Recommended image size for Web: 1920x400 px Recommended size image size for Mobile: 750x450 px
- 3.Title text: Personalize the welcome text displayed on your Hero image banner, allowing you to create a unique and inviting introduction to your employee portal. The number of character is limited to 128.
- 4.Sub-title text: Add a sub-title to your Title. The number of character is limited to 196.
- 5.Text Color: This feature enables you to customize the color of the Title and Sub-title text. You can select a color from the color map or input the Hexacode of your brand color to match your website's unique style and branding.
You have the ability to modify the appearance of your hub by customizing the photo style, icon style, and other related options. This allows you to create a unique and visually appealing design that aligns with your branding and preferences.
- 1.Corner Style: With this option, domain admins can easily set the edges of buttons, containers, dialogs, menus, and more in a square or rounded shape.
- 2.Photo Style: You can select either a circular or square shape for user profile images. This choice will be applied universally, setting all profile pictures to the chosen style throughout the platform.
- 3.Icon Style: Choose a style for all icons within the primary navigation bar and across the entire domain. This includes the navigation modules, compose, filter, and action icons. The chosen style will be applied uniformly to all icons, providing a cohesive and polished appearance throughout the platform.
- 4.Color Theme: With this option, you can choose from a variety of pre-designed color themes. These color schemes serve as ready-to-use options for your portal. If you desire more customization, you can further configure the color schemes in the Portal Colors section below.
- 5.Font Family: MangoApps offers a selection of 10 pre-installed fonts that you can choose from for your web portal content. At this time, MangoApps only supports the pre-installed fonts.
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.
- 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.
- 2.Primary Text Color: This option controls the color for the majority of textual content.
- 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.
Link Color
Link Hover Color
- 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.
- 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.
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.
- 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.
- 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.
- 3.Flyout Color and Flyout Text Color: These options allow you to set the appearance of the left-hand navigation menu flyout submenus.
- 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.
- 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.
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".
- 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.
- 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.
Secondary Button with Background Toggled OFF
Secondary Button with Background Toggled OFF
Toggle the Secondary Button Color ON and the color option menu will appear.
Secondary Button with Background Toggled ON
Secondary Button with Background Toggled ON
- 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.
Outline Color Toggled OFF
Outline Color Toggled OFF
Toggle the Outline Options ON and the color option menus will appear.
Outline Color Toggled ON
Outline Color Toggled ON
You have the flexibility to choose up to 25 colors that align with your company's branding guidelines or specific requirements. The selected color palette will be accessible to content creators as the default set of colors when they compose posts, pages, wikis, notes, events, and other content on the user portal.
In this section, you can customize various properties of the text style for your portal, including the heading style, font family, size, and other relevant attributes.
Each heading style can have the following customized via the 4 accompanying drop down menus:
- Font Style
- Font Size
- Typographical Emphasis (Bold, Italics, or Normal). A selection of "Normal" will allow the user to set their own typographical emphasis.
- Letter Case (UPPERCASE, lowercase, or None). A selection of "None" will allow the user to use their own capitalization preferences.
- 1.Body: Body text refers to the main content or the primary written information within your portal. To contrast, headings often serve to organize and structure the content, while the body text contains the actual substance of the writing. Body text is usually set in a legible and comfortable font size and style to ensure readability and clarity for the reader.
- 2.Heading 1 (H1): H1 tags are typically utilized for important elements such as the Breadcrumb, Post Heading, Wiki Title, Note Title, Tracker Details Page Title, Learn Course Status Bar, and Profile Page Username.
- 3.Heading 2 (H2): H2 tags are commonly employed for elements like Project Footer Text, Calendar Date, Level, and Badge Progress text.
- 4.Heading (H3): H3 tags are typically used for the Slider Widget, Carousel Widget, Admin portal section headings, and all Dialog Box headings.
- 5.Heading 4 (H4): H4 tags are typically used for Widget Headings, Page Tabs, Tracker Names, People's Names, Department Names, and Group/Project Names.
- 6.H5 (Heading 5): H5 tags are typically used for Navigation, Second-level Navigation, Buttons, Feed Title, Message List Title, and Learn Categories heading.
- 7.Heading 6 (H6): H6 tags are usually used for minor text, such as date stamps, that is smaller than body text.
Click the Save Settings button to apply the chosen settings.
Did this article help? Your feedback adds value when we shape up the help articles. Hit the smiley
below to let us know!
Last modified 1mo ago