Skip to main content

Add custom CSS to your MindTouch site (TCS)

This page applies to:MindTouch 4 and MindTouch TCS

Overview

This document explains how to identify the default CSS that ships with MindTouch TCS and how to override it in the MindTouch Control Panel. By adding custom CSS, you can personalize your pages to fit your needs and the needs of those who interact with your site. 

Prerequisites

Before you begin making changes to the CSS, you may want to determine how you want your site to appear to particular users. MindTouch TCS allows you to apply custom CSS to 5 user types, giving you the option of providing each of the user types with a different user experience.

The user types are:

  • All Roles (All user types)
  • Anonymous (Users that aren't logged in to MindTouch TCS and are anonymously navigating the site)
  • Community Member 
  • Pro Member 
  • Admin 

Steps

Identify the Element to Override

  1. Right click the element of the page you want to override.
  2. Select Inspect Element from the menu that appears. 
    The browser's inspection tool appears.
    NOTE: Every browser has its own inspection tool. The appearance of the inspection tool may vary depending on which browser you're using. 
  3. Copy the code for that element.
  4. Close the inspection tool.

Applying the Override

  1. Click the Tools menu located on the top Navigation bar.
  2. Select Control Panel from the menu that appears. 
  3. Click Custom Site CSS on the right sidebar.
  4. Paste the code in the appropriate field(s). These fields include:
    • All Roles CSS - Overrides the CSS for all user types.
    • Anonymous CSS - Overrides the CSS for users that aren't logged in to MindTouch TCS and are anonymously navigating the site.
    • Community Member CSS - Overrides the CSS for users that are logged in as Community Members.
    • Pro Member CSS - Overrides the CSS for users that are logged in as Pro Members.
    • Admin CSS - Overrides the CSS for users that are logged in as Admins.
  5. Make changes to the code.
    NOTE: The user types are listed in the order that the CSS overrides are applied. For example, if you change the color of H1s to green in All Roles CSS, but change them to red in Anonymous CSS, then they will be red for Anonymous users, but green for all other users. 
  6. Click Save Changes at the bottom of the page. 
  7. Hard refresh the page to view overrides (a hard refresh is required in order to bypass the cache). 
    NOTE: You may need to log out of your account to view some overrides. 

Video

Here is a video on how to override CSS within MindTouch:

What's Next

If you need help applying CSS overrides to your MindTouch TCS site, reach out to your account representative.

Articles

  • Was this article helpful?