Skip to main content

Download the self-service branding starter kit


Getting started with MindTouch branding can sometimes be a little complicated. There are numerous custom regions and limitless ways to approach your design. There are also a few skills that you will need to have to customize the look and feel of your MindTouch site. To help ease your branding efforts, we have documented a branding starter kit that includes examples, recommendations, and, most importantly, immediate results. This article describes how to download the MindTouch branding starter kit and start customizing your header, footer and other branding regions. 

 

What do I need to know to brand my MindTouch site?


Branding in MindTouch is applied through the use of HTML and CSS. We recommend that you have sufficient experience with both to take on the responsibility of branding beyond what is listed here.  If you do not personally have these skills, it is highly recommended that you try to locate someone in your organization or an outside professional who has the required experience.  
 

Download the branding starter kit


To make things easier, we have assembled a starter kit package with custom site CSS  for your header, footer and other branding regions. To implement our starter package, perform the following steps:

Step 1:  Access the custom CSS settings in the control panel

  1. Log in to your MindTouch site as a site administrator.
  2. Navigate to Site tools > Control panel.
  3. Select Custom Site CSS.

Step 2:  Add CSS to all user roles

Add the following CSS code to the All Roles CSS text 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;
}

Step 3:  Add CSS to anonymous user roles

Add the following CSS code to the Anonymous CSS text 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;
    }
}

Step 4:  Add CSS to community user roles

Add the following CSS code to the Community CSS text 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;
    }
}

Step 5:  Save your changes

Step 6:  Download the header and footer files  

  1. Navigate to the Homepage of your MindTouch site.
  2. Go to /Template:Custom/Views
    • URL = http://support.yoursite.com/Template:Custom/Views
  3. Go to Options > Import here.
  4. Select the Header.mtarc file.
  5. Once it imports return to /Template:Custom/Views
    • URL = http://support.yoursite.com/Template:Custom/Views
  6. Go to Options > Import here
  7. Select the Footer.mtarc file


What other branding resources are available to me?


Learn more about branding your site

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
 

Where do I go to 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.