Add a Custom Header

Use custom HTML and CSS to create a header at the top of your domain

This guide will walk you through the steps to create and display a custom header for your intranet domain using HTML and CSS in MangoApps.

---

Step 1: Upload the Banner Image to the Media Gallery

1. Navigate to the Media Center Module within the User Portal

2. Upload the Banner Image:

   • Click Upload New Media and upload the image you want to use as the header banner.

3. Get the Embed Code:

   • After uploading the image, locate it in the Media Center.

   • Click the options menu (three dots) next to the image and select Embed Code.

   • Copy the embed code provided. This will include the image URL you’ll need for the next step.

---

Step 2: Enable the Custom Header in the Admin Portal

1. From the Admin Portal, Navigate to Branding Settings.

2. Select the Custom Tab:

   • Under your selected Branding, click on the Custom tab.

3. Enable Custom Header HTML & CSS:

   • Toggle the Enable Header option to ON.

---

Step 3: Add the HTML Code for the Banner

1. Paste the Embed Code:

   • In the HTML section, paste the embed code you copied from the Media Gallery.

   • For example:

     <div id="custom_header">
         <img src="https://demos.mangoapps.com/media/1c67fe/frame1010106746.png?inline=attachment&amp;return_original_image=true">
         <div class="domain_banner_center"></div>
         <div class="domain_banner_right"></div>
     </div>

2. Customize the HTML Structure (optional):

   • Modify the code to include additional elements or links as needed.

---

Step 4: Add CSS for Styling

1. Add the CSS Code:

   • Use the CSS section to define the styling for your banner.

   • Example CSS:

     #custom_header {
         background: #000; /* Black background */
         height: 50px; /* Height of the banner */
     }
     #custom_header_link {
         display: block;
         text-decoration: none;
     }
     #custom_header > h1 {
         font-size: 20px;
         color: #fff; /* White text */
     }

2. Customize the Styles:

   • Adjust colors, font sizes, and layout to match your organization’s branding guidelines.

---

Step 5: Save the Changes

1. Save Settings:

   • Click the Save Settings button to apply your changes.

2. Preview the Banner:

   • Navigate to your domain homepage to confirm that the header banner is displaying as expected.

---

Step 6: Verify and Finalize

1. Test on Multiple Devices:

   • Ensure the banner appears correctly on both desktop and mobile devices.

2. Make Adjustments:

   • Return to the Admin Portal to tweak HTML or CSS if necessary.

---

Your custom header is now live and visible to users! This header banner is an excellent way to showcase important messages, events, or branding elements on your intranet domain.