Adding the Search Banner Area to your Homepage

Last updated
Save as PDF

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:

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

Edit the page and add a DekiScript block.

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>

Your DekiScript block will look like this:

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;
    }