Branding Starter Kit

Last updated
Save as PDF

Applies to:: MindTouch (current)
Role required:: Admin

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

When you get started with Expert 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.

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

Add custom CSS in Control Panel

Log in to your Expert site as a Administrator.
Navigate to Site tools > Control panel > Custom Site CSS.

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

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

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

Click Save.

What are branding regions?

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

Header
Footer
Login screen

Edit custom regions

All custom regions are controlled through Expert 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