Skip to main content
MindTouch Success Center

Customize branding regions

Applies to:
MindTouch (current)
Role required:
Admin
Customize and brand your site's homepage and major site elements such as header, footer, and login screen.

Customization templates can contain HTML, CSS and DekiScript. However, to use LESS functionality, all CSS must be entered into Custom Site CSS.

We also recommend that you include all global JavaScript or jQuery in the Custom HTML field in the Control Panel because custom regions are not loaded in mobile views.

Custom regions

Customizable header, login, and footer regions in MindTouch.

custom-regions.png

Sample homepage views

The MindTouch home page comes already styled so you can get your site up and running faster. Instead of spending hours trying to get your home page design set up, you can spend minutes choosing a navigation template and adding your custom content. Customizing your home page's splash banner is as easy as adding a LESS variable to the Custom Site CSS.

Desktop view

custom-home-desktop.png

Tablet view

custom-home-tablet.png

Mobile view

custom-home-mobile.png
 

Customize your homepage

Choose your template

When you first sign into your MindTouch site (as admin), a splash screen prompts you to choose a template to apply to your home page. Depending on the depth of your hierarchy, choose either the Category template (for deep hierarchies) or the Guide template (for shallow hierarchies).

custom-home-default.png

Add your home page content

After you chose a template type, MindTouch displays example content on your home page. Add as much or little content as you want to personalize your home page. Do not yet touch the code in the DekiScript block.

custom-home-default-editor-open.png

Customize your homepage

To customize the home page, click Edit on the MindTouch toolbar. You will see the following DekiScript and CSS blocks related to your splash banner:

Edit the splash banner message

Code block comments (the text after the double slashes //) guide your customization. Edit the HTML where indicated to change how your users are greeted on your home page.

<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"> 'How can we help you?' </h1>
                template('MindTouch/Controls/HelpWidget', {
                     placeholder: 'Search'
                });

            // DO NOT edit below this comment. Edit above HTML only.

            </div>
        </div>
    </body>
</html>

Modify home page elements

The comments in the CSS code (text between /* and */) explain how the code affects the home page. The code can be further modified with some CSS skills.

/* Hides the page summary and thumbnail template on home. */
.columbia-page-home .mt-page-summary {
    display: none;
}

/* Hide the user navigation for community and anon on home. Shows it for pro members. */
.columbia-page-home .elm-header-user-nav {
    display: none;
}
.elm-user-pro-member.columbia-page-home .elm-header-user-nav {
    display: block;
}

/* Hide the user navigation for community and anon on home. */
.columbia-page-home .elm-header-home-nav {
    display: block;
}

/* Hides the user nav's global search on home. */
.columbia-page-home .elm-global-search {
    visibility: hidden;
}

/* Sets the correct positioning of the footer based on user role for home only. */
.columbia-page-home .elm-footer {
    bottom: auto;
}
@media all and (min-width: 18.75em) {
    .elm-user-pro-member.columbia-page-home .elm-footer {
        bottom: 3.4em;
    }
}
@media all and (min-width: 37.5em) {
    .elm-user-pro-member.columbia-page-home .elm-footer {
        bottom: auto;
    }
}

Change your splash banner color

The color gradient is generated based on your site's highlight color and can be updated either by changing the LESS variable @highlight-color or by adding your own @splash-container-base-color definition to the Custom Site CSS.

// This LESS variable changes the splash banner's gradient from blue to orange
@splash-container-base-color: #faa319;

custom-home-orange.png

Use a banner image

To use an image instead of the gradient, add the following LESS mixin (works like a CSS rule set) to the Custom Site CSS. This CSS overwrites the default gradient applied to the splash banner. When using a background image, keep its file size in mind since it will affect site load, especially on mobile devices.

// Replace the text "URL-TO-MY-IMAGE/my-image.png" with a link to the image you would like to add
.mt-splash-container {
    background: url(URL-TO-MY-IMAGE/my-image.png);
}

custom-home-with-image.png
 

How to customize the site header

The header region allows you to add custom content above the logo of your MindTouch site. Headers are visible in all screen sizes until you reach the mobile-sized views (roughly less than 480 pixels wide). Navigate to Site toolsDashboard > Site Administration > Header template and edit the template to include your custom content.

Header example

custom-header.png

Add a custom login link

To add your own custom login link to your header, use the following DekiScript to ensure the correct functionality:

var signOnUrl = '/@app/login/redirect?return=' .. Uri.Encode(page.uri);
<a href=(signOnUrl) title="Sign in"> 'Sign in' </>

Simply adding a link to /Special:UserLogin will not account for any SSO or page redirects.

How to customize the site footer

The footer region allows you to add custom content below the content of your MindTouch site. Like headers, footers are visible in all screen sizes until you reach the mobile-sized views (roughly less than 480 pixels wide). Navigate to Site toolsDashboard > Site Administration > Footer template and edit the template to include your custom content.

Footer example

custom-footer.png
 

How to customize the login screen

The login region allows you to add custom content below the content of your MindTouch site. Navigate to <your site>/Template:Custom/Views/Login and edit the template to include your custom content.

Login screen example

custom-login.png

  • Was this article helpful?