Skip to main content
MindTouch Success Center

Enhancing site performance with custom CSS overrides

Why should I brand my MindTouch site?


How branding impacts your business:

  • Increases brand awareness
  • Encourages customer loyalty
  • Builds credibility and trust
  • Focuses advertising efforts
     

Basic self-service branding techniques


By following these simple techniques, you can have your MindTouch Responsive site branded in as little as a day.

Performing these branding techniques requires admin access to MindTouch

Customize your site logo, favicon, and Apple Touch icon

One of the fastest ways to customize your site is to upload your brand images. A custom site logo, favicon, and Apple touch icon will go a long way in reinforcing your brand to your customers. Here's how:

  1. Gather you branding assets (images of your site logo, favicon and Apple Touch icon). 

Acceptable image formats for site logos include GIF, JPG, PNG, and SVG. Site favicons can be uploaded as GIF, JPG, ICO, and PNG, but keep in mind that not all of those formats are backward-compatible with older browsers (IE 10 and below). Apple touch icons can only be uploaded as PNGs.

  1. Navigate to Site tools > Control panel > Branding > Logo & Icons. 

control-panel-site-logo.png

  1. If you upload an SVG for your site logo, add the following custom CSS into the All Roles text box located on the Custom Site CSS page of the Control Panel. This CSS will keep your site logo from growing too large since SVG's don't have native height and width dimensions like other image formats.
.elm-header-logo-container img {
    max-width: 20em;
}

Use LESS to change site colors and fonts

Want to change the blue color found in many elements throughout your MindTouch Responsive site so that it matches your brand's color instead? How about changing the default font to one approved by your Marketing department? By using LESS variables and mixins created for MindTouch Responsive, you can change multiple styles in your site in minutes.

Change the site highlight color

This is how easy it is for you to change the site-wide color scheme. By changing the value of this one variable, you will not only affect the highlight color but all the gray containers throughout the site since they are based on a desaturated version of the highlight color. Go to the Custom Site CSS page in your Control Panel while logged in as an admin. In the All Roles text box add the following LESS variable. The color orange is used in this example. Feel free to substitute any color you want after the @highlight-color:and before the semi-colon.

@highlight-color: #faa319;
Before

highlight-default.png

After

highlight-orange.png
 

Change the color of the Home splash banner

Sometimes you want your home's splash banner to stand out from the default colors of your site. If you want to use a different color then add the LESS variable @splash-container-base-color to override it.

// This variable will override the base color used in generating the gradient in the splash banner
@splash-container-base-color: #F63030;

custom-home-red.png
 

Change the site font

If you already have a custom style guide for your brand, then you will most likely have an approved font as well. When changing the fonts for a MindTouch Responsive site, it is easiest to change the LESS variables that define them throughout the site. To change the font used in your site, add the following LESS variable to the Custom Site CSS page in your Control Panel. For this example, we are changing the default font to "Times New Roman". You only need to add quotes to font names that contain spaces. After your first font value, it is recommended that you add at least two web-safe fonts to fall back to. This will ensure that if your first font isn't available, you have a choice in how your text will display.

@default-font-family: "Times New Roman", Times, serif;

For more quick ways to customize your site using LESS, please read the article Apply basic branding with LESS. If you are interested in exploring the many ways LESS is used in MindTouch Responsive, go to our guide Learn about LESS.
 

Format your page thumbnails

MindTouch's Synapse includes the option of uploading a custom thumbnail for your portfolios, categories, and guides. These thumbnails display in the sub-page listings found on portfolio and category pages and resize dynamically to the number sub-pages and width of the content container automatically. Uploading a page thumbnail is a quick way to catch the attention of your viewers and provide a faster way to navigate your content. Acceptable formats are the same as site logo: GIF, JPG, PNG, and SVG.

When using GIF, JPG, and PNG formats for your thumbnails, be sure they all have the same dimensions (height and width) so they will display well on portfolio and category pages. Remember that the larger the image file size is, the longer it will take to download to your mobile viewers.

If you are using SVGs for page thumbnails, then you will want to include the following CSS in the Custom Site CSS in the Control Panel to make sure the images don't get too tall or too small when used throughout the site. The following CSS will be responsive to your viewers' devices, but feel free to tweak the numbers if you'd like.

.mt-listing-detailed-image {
    min-width: 4em;
}
.mt-page-thumbnail img {
    max-height: 10em;
    min-width: 10em;
    @media all and (min-width: 18.75em) {
        max-height: 5em;
        min-width: 5em;
    }
    @media all and (min-width: 37.5em) {
        max-height: none;
        min-width: 10em;
    }
}
.mt-sortable-listing-image img {
    max-height: 15em;
    @media all and (min-width: 18.75em) {
        max-height: 8em;
    }
    @media all and (min-width: 25em) {
        max-height: 10em;
    }
    @media all and (min-width: 37.5em) {
        max-height: 13em;
    }
    @media all and (min-width: 50em) {
        max-height: 15em;
    }
}
  • Was this article helpful?