Skip to main content
MindTouch Success Center

Brand MindTouch Paths

Written by Theresa Manzo
Product Manager at MindTouch
This page applies to:MindTouch (current)

There are many ways to customize the generic styling of your MindTouch Paths to make them your own. Did you know it's also possible to customize individual paths? Jump to any of the following sections in this article to find out how:

Prerequisites


  • At least one MindTouch Path created
  • Advanced CSS and HTML knowledge
  • Browser developer tools
  • Location to host images
  • Access to the control panel for adding in custom CSS to a site.
     

Customize a path icon in a guide tab with an icon font


Most content authors want to make their paths easier to identify. One way of doing so is to customize the icon or image used when displaying a path on a page. MindTouch has a list of available icons that can be used to uniquely identify your individual paths.

  1. Let's start off with the default display of a path:

Screenshot of the default display of paths in a guide tab

  1. Hover over the icon next to the path you want to customize.
  2. Right-click the icon and select Inspect to trigger your browser's developer tools.

Screenshot of inspect element function in Chrome

  1. In the developer tool, the <span class="mt-icon-article-lp"> element inside your path container is automatically selected.
  2. Scroll up in the DOM (document object model), until you see a <div> with the class mt-lp-path-container.

Screenshot of selected <span> in dev tools

  1. To the right of the class mt-lp-path-container, you will find the unique class name assigned to your path. This unique path class name starts with mt-lp-path-container-[path name]. In the below example, the unique path name is mt-lp-path-container-branding-responsive.

Screenshot of dev tools with custom path class selected

  1. Use the above-identified unique path class name as a CSS selector to target the span tag's :before pseudo element using CSS.
    .mt-lp-path-container-branding-responsive .mt-icon-article-lp:before {
        content: '\e863';
    }
  2. Here is an example of custom icons being used.

Screenshot of new icon being used in a path

Now that you have mastered how to customize a path in a guide tab, it should be much easier to customize additional elements in that same path.
 

Customize a path icon in a page with a background image


Follow these easy steps to customize the path icon found outside of guide tabs with an image instead of an icon font. Once you've mastered this type of customization, it will be much easier to customize other elements in a path.

Screenshot of the default icon for a path

  1. Navigate to the page where your path is displayed.
  2. Hover over the path icon, right-click it and select Inspect.

Screenshot of inspect element

  1. In your browser's developer tools, you will notice the <span> element with a class of mt-icon-article-lp. Remember this class; it will be used as a CSS selector for your custom image later.

Screenshot of path icon span element selected

  1. Scroll up in the DOM until you reach a <div> with the class mt-lp-path-container. To the right of this class name, you will see a custom class that is unique to your path. It will start with mt-lp-path-container-[path name]

Screenshot of custom class name used for paths

  1. Combine this custom class name with the previous class name mt-icon-article-lp as a CSS selector for your custom image. 
  2. Neutralize the default path's icon font ruleset by using the following CSS:
.mt-lp-path-container-lp-getting-started .mt-icon-article-lp:before {
    content: '';
}
  1. Next, declare a background image for the <span class="mt-icon-article-lp"> element you first selected. You will need to have your custom image hosted somewhere; for now we will use an article attachment. Be sure to set the height and width for your image, or you will not be able to see it.
.mt-lp-path-container-lp-getting-started .mt-listing-detailed-title span {
    background: url('/@api/deki/files/715/best-practices.svg') no-repeat 0 0;
    height: 1.15em;
    width: 1.15em;
}
  1. If you want to use this custom image ruleset in a guide tab, you will need to add an additional selector to override the original default ruleset.
.mt-lp-listings .mt-lp-path-container-lp-getting-started .mt-listing-detailed-title span {
    background: url('/@api/deki/files/715/best-practices.svg') no-repeat 0 0;
    height: 1.15em;
    width: 1.15em;
}
  1. Here is an example of a custom background image used for a path.

Screenshot of a custom image used in a path.
 

Customize an icon on a page in a path


You can continue your path customization on the pages in your path as well. Adding a custom icon or image allows you to carry your custom theme forward.

Screenshot of a default icon used in a path

Follow these steps to customize the path icon that appears for each page along the path:

  1. Go to any page of your path.
  2. Hover over the icon in the page title, right-click it and select Inspect.

Screenshot for selecting Inspect in Chrome to trigger it's developer tools

  1. Your browser's dev tools will open to the <span> used for the path icon.

Screenshot of path icon <span> tag selected in dev tools

  1. To find the custom class used for this path, scroll up in the DOM until you come to the <body> element. Look for the class name that starts with columbia-learning-path-[path name].  In our example, the class is columbia-learning-path-lp-getting-started. You will need this class as a CSS selector to target pages along the path.

Screenshot of custom <body> class used to identify a page along a path

  1. Use this class name as a CSS selector to target the span tag's :before pseudo element. Here is a list of available icons that can be used to customize the path's icon.
.columbia-learning-path-lp-getting-started #title .mt-icon-article-lp:before {
    content: '\e83f';
}
  1. Here is an example of how the updated icon would look along a path.

Screenshot of a customized path icon along a path
 

Customize a progress bar in a path


Sometimes the best way to customize a path is with color. Here are some easy ways to make each path unique.

Screenshot of a path progress bar

  1. Go to any page of your path.
  2. Hover over any element you wish to customize in the progress bar, right-click the element and select Inspect.

Screenshot for selecting Inspect in Chrome to trigger it's developer tools

  1. Once your browser's developer tools are open, find the custom class used for this path by scrolling up in the DOM until you come to the <body> element. Look for the class name that starts with columbia-learning-path-[path name].  In our example, the class is columbia-learning-path-lp-getting-started. You will need this class as a CSS selector to target pages along the path.

Screenshot of custom <body> class used to identify a page along a path
 

  1. Use this class name as a CSS selector in front of all CSS rule sets you use to customize this progress bar. In our example, we look at the color of the progress bar indicators.
  2. Use the right-click > Inspect action to target the indicator element so it's easier to find. For this example, we skip ahead to the actual element on the page.

Screenshot of a path's progress bar page element selected in dev tools.
 

  1. The color of the indicator is created with a border style on the :before pseudo element of the <span class="mt-icon-progress-indicator"> found inside the page's link. Changing the color of that border would look like this:
.columbia-learning-path-lp-getting-started .mt-lp-progress-bar li a span:before {
    border: .25em solid #0fc119;
}

Screenshot of a path's progress indicator in a different color

  1. Now that you know how to find each element you want to change and how to add the path's unique CSS selector, you can style your path's progress bar anyway you'd like. Here's a quick example of some of the elements you can change:
/* path icon */
.columbia-learning-path-lp-getting-started #title .mt-icon-article-lp:before {
    color: #03820a;
}

/* current page indicator */
.columbia-learning-path-lp-getting-started .mt-lp-progress-bar .mt-lp-page-current a span:before {
    background: #03820a;
    border: .25em solid #03820a;
}

/* progress indicators */
.columbia-learning-path-lp-getting-started .mt-lp-progress-bar li a span:before {
    border: .25em solid #0fc119;
}

/* progress bar line */
.columbia-learning-path-lp-getting-started .mt-lp-progress-bar {
    border-top: .15em dotted #3ad243;
}

/* path title below progress bar */
.columbia-learning-path-lp-getting-started .mt-lp-path-title-display {
    color: #03820a;
}

/* previous and next links */
.columbia-learning-path-lp-getting-started .mt-article-pagination a {
    color: #0fc119;
}
.columbia-learning-path-lp-getting-started .mt-article-pagination a:hover,
.columbia-learning-path-lp-getting-started .mt-article-pagination a:focus,
.columbia-learning-path-lp-getting-started .mt-article-pagination a:active {
    color: #03820a;
}

Progress bar after customization

  • Was this article helpful?