Skip to main content
MindTouch Success Center

Customize branding regions

This page applies to:MindTouch (current)

Customization templates can contain HTML, CSS and DekiScript. However, to use LESS functionality, all CSS must be entered into the Custom Site CSS field in the control panel (Site tools > Control panel > Branding > Custom Site CSS). We also recommend that you include all global JavaScript or jQuery in the Custom HTML field in the control panel since custom regions are not loaded in mobile views. This article provides steps for customizing and branding your site's home page and your major site elements (header, footer and login screen).

Custom regions

The screenshot below shows the customizable header, login and footer regions in MindTouch.


Sample home page 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


Tablet view


Mobile view


How to customize your home page

Follow the below steps to choose your home page template:

Step 1: 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).


Step 2: Add your home page content

Once you've chosen 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.


Step 3:  Customize your home page

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.

    <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.


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;


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



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 > Branding > Header template and edit the template to include your custom content.

Header example

Here is an example of what a custom header could look like:


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' </>

Note to user   NOTE:  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 > Branding > Footer template and edit the template to include your custom content.

Footer example

Here is an example of a custom footer:


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

An example of a custom login template:


  • Was this article helpful?