This document explains how to identify the default CSS that ships with SAP Knowledge Central by MindTouch 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.
Before you begin making changes to the CSS, you may want to determine how you want your site to appear to particular users. MindTouch 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 and are anonymously navigating the site)
- Community Member
- Pro Member
Identify the Element to Override
- Right click the element of the page you want to override.
- 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.
- Copy the code for that element.
- Close the inspection tool.
Applying the Override
- Click the Tools menu located on the top Navigation bar.
- Select Control Panel from the menu that appears.
- Click Custom Site CSS on the right sidebar.
- 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 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.
- 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.
- Click Save Changes at the bottom of the page.
- 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.
Here is a video on how to override CSS within MindTouch:
If you need help applying CSS overrides to your MindTouch, reach out to your account representative.