Skip to main content

Customize branding regions

This page applies to:MindTouch Responsive

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.

 

Custom regions


Custom header, login and footer regions

custom-regions.png

Home page

custom-home-desktop.png
 

The home page


With MindTouch Responsive the 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 Synapse navigation template and adding your custom content instead. Customizing your home's splash banner is as easy as adding a LESS variable to the Custom Site CSS.

Screenshots

custom-home-tablet.png

custom-home-mobile.png
 

Choose a home page template

When you first sign into your MindTouch Responsive 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 (deep hierarchies) or the Guide template (shallow hierarchies).

custom-home-default.png

Note to user   NOTE:  Portfolio templates have been replaced by Category templates in MindTouch Responsive.


Choose a home page template

Once you've chosen a template type, MindTouch displays example content on your home page. Go ahead and start building out your site or start customizing your home page.

custom-home-template-chosen.png
 

Customize the home page

To customize the home page, click Edit. You will see the following DekiScript and CSS blocks which are related to your splash banner. The code block comments (text after //) guide your customization. Add whatever HTML you'd like into the splash banner.


Splash banner DekiScript

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



Splash banner CSS

The comments in the CSS code (text between /* and */) explain the effect of the code on the home page. The code can be 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;
    }
}



LESS customization

The color gradient is generated based on your site's highlight color and can be updated either by changing the @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
 

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 in mind its file size 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

 

Custom header


The header region allows you to add custom content above the logo of your MindTouch Responsive site. Headers are visible in all screen sizes until you reach the mobile-sized views (roughly less than 480 pixels wide).

To navigate to your header template, navigate to Site toolsDashboard > Branding > Header template.

Screenshot

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

custom-header.png
 

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.


Custom login


The login region allows you to add custom content below the content of your MindTouch Responsive site. To navigate to your custom login template, go to <your site>/Template:Custom/Views/Login.

Screenshot

An example of a custom login template:

custom-login.png
 

Custom footer


The footer region allows you to add custom content below the content of your MindTouch Responsive site. Like headers, footers are visible in all screen sizes until you reach the mobile-sized views (roughly less than 480 pixels wide).

To navigate to your footer template, navigate to Site toolsDashboard > Branding > Footer template.

Screenshot

Here is an example of a custom footer:

custom-footer.png
 

What's next


For more information about LESS customization, read our article on customizing the Home template.