Skip to main content

Brand with custom <body> classes

This page applies to:MindTouch Responsive

To truly make the MindTouch UI as easy to brand as possible, a number of unique class names were added into the <body> element. These include class names for browser, platform, user role, article type, and hierarchy location.



To remove the need for CSS hacks in MindTouch Responsive, class names based on the browser a user is viewing the site in are generated in the <body> tag. The easiest way to find these class names is to view the source of a page on your site and find the <body> tag's class attribute. The class is prefixed with .columbia-browser-.


Here are some of the more common browser based class names used in MindTouch Responsive.

  • columbia-browser-chrome
  • columbia-browser-firefox
  • columbia-browser-safari
  • columbia-browser-msie11

User role

It was necessary to include the user role class name as a way to style the UI differently for each type of user. There are only three different user role class names in the <body> tag.

User role class names:

  • elm-user-pro-member
  • elm-user-community
  • elm-user-anonymous

There is an additional user role based class that is added for users with edit permissions. It is .elm-user-pro-edit and you will only ever see it appear for pro-members.

Page type

In MindTouch there are a few different page types: home, regular navigation and article pages (LSF), special pages, and template pages. Each of these page types has a special class in the <body> tag.

  • columbia-page-home
  • columbia-page-main
  • columbia-page-special
  • columbia-page-template

In addition to the page type classes, there is a special page class that gets added that is more detailed. It will always be prefixed with .columbia-special- with the page name following. For example, on /Special:Dashboard you would find both of these classes in the <body> tag: .columbia-page-special and.columbia-special-dashboard.

Article type

To help differentiate functionality for different page types (navigation vs. article), article type classes have been added to the <body>.

These include the following article types:

  • columbia-article-topic-portfolio
  • columbia-article-topic-category
  • columbia-article-topic-guide
  • columbia-article-howto
  • columbia-article-reference
  • columbia-article-topic

There can also be additional article type classes if a site has it's own custom article types. For example, if the site has an FAQ article type, then the class would appear as .columbia-article-faq. For more information on adding custom article types to your site, please read our article on creating custom classifications.


In addition to the browser based class names, there are platform based ones as well. These display the users' operating system in a similar manner to the browser class names. The class is prefixed with .columbia-platform-.

The common class names used in MindTouch Responsive are:

  • columbia-platform-windows
  • columbia-platform-macintosh
  • columbia-platform-iphone
  • columbia-platform-android​

Hierarchy location

A lot of customers requested an easier way to determine which hierarchy they were in for styling purposes. This was accomplished by creating a hierarchy class name that is generated similar to a breadcrumb. This class is prefixed with .columbia-breadcrumb-.

Here is an example of how this would look. Below is a URL of an article on

Here is the class name that is generated. Each level is separated by a hyphen and the page title is lower-case with all spaces removed to make it CSS selector safe.


If you wanted to have the Documentation category and it's child pages to have an orange page title, you would create a CSS rule set that used the .columbia-breadcrumb- class name as a selector.

.columbia-breadcrumb-home-documentation #title {
    color: #ff5c26;

Touch screen device

If the user's platform is not touch based, then an additional class name of .no-touch will be added. This class name is responsible for all :hover affects on devices without touch screens and should be prefixed onto all CSS selectors referencing this pseudo class. The .no-touch class is required because of an issue with :hover and iOS. For more information about this technical issue please read the article Solving The Double Tap Issue on iOS Devices.

  • Was this article helpful?