Skip to main content
MindTouch Success Center

Branding Starter Kit

Download the MindTouch branding starter kit and start customizing your header, footer, and other branding regions.

When you get started with MindTouch branding, there are numerous custom regions and limitless ways to approach your design. The Branding Starter Kit includes examples and recommendations to customize your header, footer and other branding regions. 

Branding recommendation

You or a branding resource should have experience with both HTML and CSS to take responsibility for branding beyond what is listed here.

Part 1:  Add custom CSS in Control Panel

  1. Log in to your MindTouch site as a Administrator.
  2. Navigate to Site tools > Control panel > Custom Site CSS.
  3. Add the following CSS code to the All Roles CSS field:
    /* Fonts */
    @default-font-family: Lato, arial, helvetica, sans-serif, 'arial unicode ms';
    @primary-font-color: #000;
    @heading-color: @primary-font-color;
    
    /* Colors */
    @highlight-color: #30b3f6;
    
    @primary-link-color: @highlight-color;
    @primary-link-color-visited: @highlight-color;
    @primary-link-color-hover: lighten(desaturate(@highlight-color, 95%), 13%);
    @primary-link-color-active: lighten(desaturate(@highlight-color, 95%), 13%);
    @primary-link-color-focus: lighten(desaturate(@highlight-color, 95%), 13%);
    
    @secondary-link-color: lighten(@primary-font-color, 60%);
    @secondary-link-color-visited: lighten(@primary-font-color, 60%);
    @secondary-link-color-hover: @highlight-color;
    @secondary-link-color-active: @highlight-color;
    @secondary-link-color-focus: @highlight-color;
    
    @tertiary-link-color: lighten(desaturate(@primary-font-color, 95%), 40%);
    @tertiary-link-color-visited: lighten(desaturate(@primary-font-color, 95%), 40%);
    @tertiary-link-color-active: @highlight-color;
    @tertiary-link-color-focus: @highlight-color;
    @tertiary-link-color-hover: @highlight-color;
    
    /* HEADER */
    .mindtouch-header {
        min-height: 6em;
        text-align: right;
    }
    .mindtouch-header li {
        margin-right: 2em;
    }
    .mindtouch-header li a {
        .mt-tertiary-link-style;
        text-transform: uppercase;
        .no-touch &:hover,
        &:visited {
            color: #3c3c3c;
        }
        @media all and (max-width: 65.25em) {
            min-height: 5em;
        }
        @media all and (max-width: 50em) {
            min-height: 4em;
        }
        @media all and (max-width: 37.49em) {
            min-height: 2.75em;
        }
    }
    .company-logo-container {
        float: left;
        max-width: 16em;
        padding-top: 1.2em;
        @media all and (max-width: 37.49em) {
            padding-top: 0;
        }
    }
    .elm-header-logo-container {
        display: none;
    }
    .mt-icon-mindtouch-header-menu {
        .mt-tertiary-link-style;
        display: none;
        float: right;
        font-size: 1.25rem;
        overflow: hidden;
        width: 1.5em;
        @media all and (max-width: 65.25em) {
            display: block;
            line-height: 3;
            height: 3em;
            width: auto;
        }
        @media all and (max-width: 37.5em) {
            height: 1.5em;
            line-height: 1.5;
            width: 1.5em;
        }
        @media all and (max-width: 25em) {
            height: 1.5em;
            line-height: 1.5;
            width: 1.5em;
        }
    }
    .mt-icon-mindtouch-header-menu:before {
        content: '\e8a9';
        margin-right: .15em;
        vertical-align: middle;
        @media all and (max-width: 65.25em) {
            font-size: 2.5rem;
        }
        @media all and (max-width: 37.5em) {
            font-size: 2rem;
        }
    }
    .mindtouch-header .mt-dropdown {
        margin-left: -1.25em;
        z-index: 9999;
        border-color: #d1ccc7;
        box-shadow: -.25em .25em .68em -.125em rgba(0,0,0,.23);
        li {
            display: block;
            margin: 0;
        }
        a {
            padding: .5em 1em;
            text-transform: none;
        }
        @media all and (max-width: 65.25em) {
            bottom: auto;
            margin: 3.5em 0 0;
            right: .8em;
            top: auto;
        }
        @media all and (max-width: 37.5em) {
            margin-top: 2.1em;
        }
    }
    .mindtouch-header .mindtouch-site-nav {
        bottom: auto;
        display: block;
        margin: 0;
        padding-top: 2.4em;
        @media all and (max-width: 65.25em) {
            display: none;
        }
    }
    .mindtouch-site-nav-mobile {
        display: none;
        @media all and (max-width: 65.25em) {
            margin: 3.5em 1.5em 0 0;
        }
        @media all and (max-width: 37.49em) {
            margin: 2.25em .5em 0 0;
        }
    }
    /* FOOTER */
    .elm-footer-siteinfo-nav {
        display: none;
    }
    .elm-footer-custom {
        background: #333335;
    }
    .mindtouch-footer-container .elm-nav-container {
        .display-flex;
    }
    .mindtouch-footer-container {
        border: 0;
        @media all and (max-width: 50em) {
            font-size: .8rem;
        }
    }
    .mindtouch-footer-container .mindtouch-footer-25 {
        .flexbox-listing(1; 1; 25%);
        .columbia-browser-msie11 &,
        .columbia-browser-msie10 & {
            -ms-flex: 1 1 25%;
        }
        @media all and (max-width: 50em) {
            .flexbox-listing(1; 1; 25%);
        }
    }
    .mindtouch-footer-container ul {
        box-sizing: border-box;
        list-style: none;
        padding: 0 0 0 .5rem;
        @media all and (max-width: 50em) {
            padding: 0;
        }
        @media all and (max-width: 37.5em) {
            display: none;
        }
        li {
            display: block;
            margin: .25rem 0;
            color: #fff;
        }
    }
    .mindtouch-footer-container ul:first-child {
        padding-left: 0;
    }
    .footer-column-header {
        color: #a3a3a3;
    }
    
  4. Add the following CSS code to the Anonymous CSS field:
    .columbia-page-home .mt-home-user-login {
        position: absolute;
        right: 2em;
        top: .5em;
        @media all and (max-width: 65.25em) {
            right: 1.5em;
            top: .3em;
        }
        @media all and (max-width: 50em) {
            right: 1.5em;
            top: .3em;
        }
        @media all and (max-width: 37.49em) {
            right: 3.5em;
            top: .8em;
        }
    }
    
  5. Add the following CSS code to the Community CSS field:
    .columbia-page-home .mt-user-menu {
        position: absolute;
        right: 2em;
        top: .5em;
        @media all and (max-width: 65.25em) {
            right: 1.5em;
            top: .3em;
        }
        @media all and (max-width: 50em) {
            right: 1.5em;
            top: .3em;
        }
        @media all and (max-width: 37.49em) {
            right: 3.5em;
            top: .8em;
        }
    }
    
  6. Click Save.

Part 2:  Download the header and footer files  

  1. Navigate to the Homepage of your MindTouch site and append Go to /Template:Custom/Views to your homepage URL. For example, http://support.yoursite.com/Template:Custom/Views.
  2. Go to Options > Import here and select the Header.mtarc file.
  3. Return to /Template:Custom/Views(http://support.yoursite.com/Template:Custom/Views).
  4. Go to Options > Import here and select the Footer.mtarc file.

What are branding regions?

Branding regions are select areas through the MindTouch user interface that are designated for you to customize.  Branding regions are intended to give you the freedom and flexibility to customize the look and feel of your MindTouch site.  Typically MindTouch customers use branding regions to apply their company logo, colors, navigation, and more. Custom Regions include:

  • Header
  • Footer
  • Login screen

temp-cs-brand-foot-and-header.png
 

Edit custom regions

All custom regions are controlled through MindTouch templates.  You can access your custom region templates by going to /Template:Custom.  In the templates directory, you will find your custom region templates under Template:Custom > Views.  For example, you should be able to locate your header and footer templates at:

  • Template:Custom > Views > Header
  • Template:Custom > Views > Footer
     

To modify the custom regions you must have permission to access each individual template. If you do not see your branding templates, it is possible that they were not installed.  Contact your MindTouch Customer Success agent, and we will set up your branding templates right away. 

 

  • Was this article helpful?