If you need to notify your users about upcoming maintenance or other important updates, adding a banner to the top of your page is a great way to do it. This guide will walk you through the steps to add a maintenance message banner to the home page of your Help Center.

Steps to Add a Banner:

1. Navigate to the Template Editor:

   • Go to Admin > Help Center > Help Center Design > Open template editor.

2. Find the Home Page Template:

   • In the template editor, search for the file named home.html (Portal).

3. Insert the Banner Code:

   • Locate line 6 in the home.html file. You'll want to insert the following HTML code just below the line that reads: <main id="main" tabindex="-1" class="dp-po-main dp-po-homepage">

   • Copy and paste the following HTML snippet (feel free to customize the message to suit your needs):

   <div class="container" style="padding-bottom: 20px;">
       <div style="border: 1px solid var(--warning); border-radius: 4px; color: var(--warning-d-150); padding: 20px; background-color: #F5DDD7;">
           We will be undergoing maintenance on 15 October 2024 from 12 am to 4 am. During this time, our Help Center may be unavailable. Thank you for your patience!
       </div>
   </div>

   

   
   

4. Save Your Changes:

   • Once you've added the code, save the changes to the template.

   • Refresh your home page to ensure the banner is displaying correctly at the top of the page.

Customizing the Banner:

You can adjust the colors in the code if you have a message that isn't a warning but something more upbeat or simply informational. To do this, change the hex codes in the style attribute to your preferred colors. Here’s an example of an updated banner for a non-warning notification:

<div class="container" style="padding-bottom: 20px;">
    <div style="border: 1px solid #406FAD; border-radius: 4px; color: #406FAD; padding: 20px; background-color: #C0EBFF;">
        Exciting news! We’ve updated our Help Center with new features to improve your experience. Check them out today!
    </div>
</div>

By following these steps and using the customizable options, you can ensure that your users are well-informed, whether it’s for maintenance notifications or a simple update message.