When it comes to getting the most out of IBM Maximo Application Suite (MAS), one of the most important guiding principles is to configure, not customize. The flexibility of MAS makes it possible to tailor the system to your organization’s look, feel, and workflow—without introducing the technical debt and maintenance risk that often come with custom code.
‍

In this blog, we’ll walk through the MAS feature that allows admins to configure custom CSS MAS features to refine your MAS and Manage header. In related blogs I will also look at adjusting Manage system properties and MAS feature to customize the header.  

What is CSS

In short, CSS stands for Cascading Style Sheets. In Maximo, this is going to enable everything from colors, fonts, white space padding, and more to be controlled with a markup language. In general, CSS allows you to control how the Maximo content looks on the screen, not what content shows up.

How Do You Get to the CSS Feature

Logging into MAS with system configuration access allows you to get to the Configurations menu. In MAS v9.1, this is in the navigation menu under Suite > Administration > Configurations. In older versions of MAS, the menu is similar but initially has to be accessed via the admin gear in the top right corner of the application.

‍

‍

Once on the configurations menu, the User interface customization page will allow the header to be configured. There is a second tab called CSS customization where custom CSS can be saved and published. The nice thing about these configurations is that they are at the MAS core level, so when you backflow your production database to a non-production system, they will remain the same.

‍

‍

How Do You Know What to Change?

In most browsers, there is an inspect feature as part of the developer tools. In my example, I am right clicking on the area I want to inspect the CSS for, selecting inspect, and then finding the style tab in by browser. From here you can either find existing tags that you want to modify or add additional ones. A nice browser feature is that you can modify these configurations temporarily in your session and get real-time feedback. This can be very helpful as you learn how to manipulate the CSS or if you don’t have system admin access and you want to suggest changes to your administrator.

‍

‍

Example CSS

In this section, I have highlighted some examples that will allow you to brand the header bar and menus with CSS. These are merely some examples that I think could be applied to almost all systems. I find these especially useful in non-production systems where you want to highlight that the user is not in the production system.

‍

/* Expand header width */

.mas-common-shell--custom-logo  

{ max-width: 6rem; }

‍

‍

/* Hide values in the help menu */

a[data-testid="suite-header-help--whatsNew"],

a[data-testid="suite-header-help--gettingStarted"],

a[data-testid="suite-header-help--support"],

a[data-testid="suite-header-help--videos"],

a[data-testid="suite-header-help--requestEnhancement"]  

{ display: none !important; }

‍

‍

/* Adjust Header Background Colors */

.cds--header,  

.cds--header .cds--header__name,  

.cds--header__global,  

.cds--header a.cds--header__menu-item,

.iot--suite-header-profile

{ background-color: #365A6F; }

‍

‍

/* Adjust left menu colors */

.cds--side-nav

{ background-color: #365A6F; }

/* Adjust menu search bar */

.cds--search,

.cds--search-input  

{ background-color: #18242C !important; }

‍

‍

Final Side by Side with All Example CSS Applied

‍

‍

By focusing on configuration instead of customization, you can create a Maximo Manage environment that feels uniquely yours—visually familiar, easy to navigate, and fully supported through future upgrades.
‍

Small tweaks like property changes, header updates, and CSS refinements go a long way in improving user experience without complicating your system. These are the kinds of adjustments that make Manage not just functional, but comfortable—like home.