Configuring Screen Layout and CSS in MAS 9

As enterprise systems evolve, so does the need for personalized user experiences. Whether it’s aligning with corporate branding or improving usability, UI customization plays a key role in user satisfaction and adoption. For Maximo administrators, Maximo Application Suite (MAS) 9 introduces much-needed flexibility and convenience for customizing interface elements without deep-diving into code-heavy deployment processes.
Let's walk through how MAS 9 simplifies layout and CSS customization, helping organizations tailor Maximo to meet their unique requirements—with less effort and downtime.
Why Customize the Maximo Interface?
Maximo is already known for its powerful asset management capabilities, but the ability to visually align it with your business adds an extra layer of professionalism and clarity. Common needs include:
- Adding a company logo or name
- Displaying login messages
- Changing colors, fonts, and screen alignment
Historically, these changes required editing XML files or directly modifying the maximo.css file—both time-consuming tasks that required redeployment of the application.
MAS 9 brings a new approach that allows real-time updates via the Suite Administrator interface, removing the need for downtime or full deployments.
Customizing the Maximo Header
MAS 9 enables straightforward customization of the application header. Here's how to personalize it with your company’s branding:
- Login to Maximo Application Suite (MAS) Core
- Click on Suite Administrator and Configurations

- Select “User Interface Customization” option from “Other” section

- Update Company Name, Product Name, and Logo

Update details and click on "Save and Publish." This change is instantly reflected in the login page and app header, creating a cohesive brand experience.


Overriding Maximo CSS
For deeper customization, such as login messages or UI adjustments (color, alignment, font), you can now override Maximo’s default CSS directly from the admin panel.
Prerequisite
Before making a change to override CSS change, following system property needs to be updated.
“mxe.sec.header.Content_Security_Policy”
- Login to Maximo Manage application and modify system property

- Add company domain to property value after “style-src” and “img-src” as follow:
Syntex: .add *.MyCompanyDomain.com
Example: include domain to global value.

- Save system property and do live refresh
Process to override maximo.css
- Maximo Application Suite (MAS) Core
- Click on Suite Administrator and Configurations
- Select "User Interface Customization" option from "Other" section
- Click on CSS Customization and enable

- Add your custom CSS configuration and click on “Save and publish”. For example, add a custom login message and adjust screen alignment.
p#x7ynq::after { visibility: visible; content: "Welcome to Maximo - Development";
position: absolute; left: 0; top: 0; } p#x7ynq { visibility: hidden; position: relative; }





This sample adds a login message and adjusts text placement.
Note: CSS changes are component-specific. Customizing Maximo Manage will not affect other components like Maximo Health.
Source: https://www.ibm.com/docs/en/masv-and-l/cd?topic=interface-updating-user
Maximo Application Suite 9 empowers admins to tailor the look and feel of their applications more easily than ever. By using built-in customization tools, teams can now align Maximo interfaces with their brand and improve usability—without long development cycles or redeployment headaches.
If you haven’t explored MAS 9’s customization features yet, now’s the perfect time to dive in and give your Maximo environment a visual upgrade.