Skip to main content
NICE CXone Expert
Expert Success Center

Adding the Search Banner Area to your Homepage

Your home page may not include a banner / hero / search area. If you would like to add one, you can insert this into your content manually.

Example of a search banner:

customBanner.png

Call the custom home banner

To insert this content on your page, you will add a DekiScript block and add CSS to your home page.

Add DekiScript

  1. Edit the page and add a DekiScript block.
  2. Add the following example code to the block:
    <html>
        <body target="elm-home-banner">
            <div class="mt-prepend-home mt-custom-home elm-nav">
                <div class="elm-nav-container">
    
                // DO NOT edit above this comment. Edit HTML below only.
    
                    <h1 class="mt-home-search-title">
                        if (user.seated || user.unseated) { <span>'Hello, '..user.displayname</span>}
                        else {<span>'Hello, '</span>}
                        <br/>
                        'Where would you like to go?'</h1>
                    
                    template('MindTouch/Controls/HelpWidget', {
                         placeholder: 'Search'
                    });
    
                // DO NOT edit below this comment. Edit above HTML only.
    
                </div>
            </div>
        </body>
    </html>
    
  3. Your DekiScript block will look like this:

    DekiScript-example.png

Add custom CSS

You can style this box and add a background image if you want. Insert a CSS box using Style>CSS, or add the CSS in the Control Panel for the roles you want to apply the search / hero box to.  

Example CSS 

This code has the background image call "commented" out, and is provided as a reference if you want to add an image to the background of this banner area. Images can be added as either an attachment or a Media Manager file. Adjust other CSS as desired.

A multi-line comment uses a slash and an asterisk /* Unblock the background image by removing the surrounding asterisk and slash from beginning and end of an area, such as the background specifications in the example code.

.mt-prepend-home.mt-custom-home.elm-nav {
    background-color: #000;
/*    background: url(/@api/deki/files/15698/success-home-banner.jpeg) 100% 70%
        no-repeat;
    background-size: cover;
*/
    border-bottom: 6px solid #23c9ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mt-prepend-home.mt-custom-home.elm-nav h1 span {
    font-size: 28px;
    text-align: center;
    @media all and (max-width: 50em) {
        font-size: 22px;
    }
}

.mt-prepend-home.mt-custom-home.elm-nav h1 {
    font-size: 36px;
    text-align: center;
    line-height: 50px;
    @media all and (max-width: 50em) {
        font-size: 28px;
    }
    @media all and (max-width: 37.5em) {
        font-size: 22px;
    }
}

.mt-prepend-home.mt-custom-home .elm-nav-container #mt-inputredirect-input {
    border-radius: 50px;
}

/* Hides the user nav's global search on home so there are not "two searches" on the home page. */
.columbia-page-home .elm-global-search {
    visibility: hidden;
}
li[data-page-id="17821"] span.mt-sortable-listing-image img {
        max-height: 75px;
    }

 

  • Was this article helpful?