From Boring to Branded: Align Your Customer Portal with Your Corporate Design in Equipment Manufacturing

In this blogpost 

1. The key benefits of using Custom CSS 

2. How to customize a customer portal in equipment manufacturing 

3. Where Custom CSS reaches its limits 

4. Tips for a smooth implementation with Custom CSS 

5. Ready to give your customer portal a fresh new look?

A strong, consistent service offering in equipment manufacturing after-sales depends on more than just functional value. Just as important is the impression your customer portal leaves on the end user. As a digital touchpoint, it should seamlessly reflect your brand, with a strong sense of recognition and visual consistency.

Clear navigation, full integration of connected systems, and a custom look aligned with your corporate identity all play a critical role.

With EquipmentCloud®, you get a customer portal that puts efficiency, transparency, and collaboration front and center, actively supporting the digital transformation of equipment manufacturers.

Custom CSS (Cascading Style Sheets) give administrators far more than basic design options. They offer real freedom to bring your corporate design to life within the portal, using tailored visual elements to create a fully branded and cohesive user experience

The key benefits of using CSS are clear:

• Consistent corporate design
  A unified look and feel throughout your customer portal strengthens brand recognition and builds trust with end users.
• Separation of structure and design
  APEX delivers the content and structural foundation of the web application. As with many web apps, the visual appearance is controlled through CSS. The custom CSS in EquipmentCloud® complements or overrides APEX’s default stylesheet rules as needed.
• Scalability and maintainability
  A central CSS theme can be easily extended or updated. Modular styles—using CSS variables or utility classes—also make ongoing maintenance much more efficient.
• Responsive design
  Thanks to media queries and modern layout techniques, your portal will look consistent and on-brand across all devices, whether on desktop, tablet, or smartphone.

Custom CSS offers a wide range of options to tailor the look and feel of your customer portal to match your corporate design. Typical customization options include:

• Color schemes: Primary and secondary colors, background tones, accent colors, and shading
• Typography: Font family, size, line height, and font weight
• Spacing and layout: Padding, margins, and arrangement using Grid or Flexbox
• Styling for buttons and form elements
• Animations and transitions, such as hover effects using pseudo-classes
• Brand-specific icons or images, like logos in the header or footer
• Variables for calculating colors or pixel values, defined once and reused across styles

How is this implemented in EquipmentCloud®?

The custom CSS feature is available through the Branding Plus option in EquipmentCloud®. It allows you to freely adapt the appearance of all pages within your customer portal.

Even the dashboard widgets are fully customizable. CSS classes have been implemented to let you assign unique styles to individual widgets, or groups of widgets. This gives administrators and users the flexibility to highlight key content visually and create custom widget designs.

These CSS classes can be defined in either the live CSS editor or developer mode and support the full styling scope mentioned above.

As flexible as CSS may be, there are some limitations to what you can customize in a customer portal. We want to give you a transparent overview of the boundaries you should be aware of.

Requires technical knowledge
Not everyone is familiar with custom CSS. Adjusting colors, spacing, or layout requires a basic understanding of CSS. Even small syntax errors can lead to unwanted design issues. HTML knowledge is also helpful to unlock the full potential of CSS customization—and AI tools like ChatGPT can assist here.

Limited preview options
CSS changes are typically made directly in the code, without a live preview. This makes trial and error time-consuming, especially without a visual editor. To improve this, we’ve introduced a Developer Mode to make the process easier.

No deep control over structure or logic
While users can change fonts, colors, and spacing or reposition existing elements, they cannot alter the underlying HTML structure or component behavior. It’s also not possible to add entirely new HTML elements. For specific layout needs, this can become a limitation. That’s because EquipmentCloud® is built on APEX, and its structure cannot be modified through CSS alone.

Limited access to third-party components
SaaS portals like EquipmentCloud® often include UI components from third-party vendors—such as calendars, charts, or forms—that are only partially customizable. Custom CSS often has limited or no effect on these components unless specific classes, IDs, or API hooks are available. To offer more design flexibility, we’ve implemented dedicated CSS classes for dashboard widgets.

No built-in visual standards
In theory, users can define any style they like—which can easily lead to inconsistent user experiences. Poor contrast or hard-to-read fonts can make the portal feel unprofessional. Without visual guidelines or guardrails, misconfigurations are more likely.

Responsiveness depends on the CSS
Users may unintentionally write custom CSS that breaks the mobile layout, for example, by using fixed widths or rigid grids. Without knowledge of media queries or the basics of responsive design, the user experience on mobile devices can suffer.

To help you navigate the challenges of using custom CSS, we’ve collected practical tips that make it easier to customize your customer portal in equipment manufacturing.

Use the browser’s Developer Console
In Chrome, Edge, or Firefox, you can open the Developer Console by pressing F12 (or Ctrl + Shift + C in Chrome and Edge). This lets you highlight individual elements and design components in the customer portal using CSS selectors. It’s a great way to identify variables and apply styles consistently across different pages.

Start with a ready-to-use CSS example file
We provide a "Customer CSS Example" file that includes essential selectors and helpful comments. It serves as a solid starting point for building your own themes, such as light or dark mode. This saves time, avoids common mistakes, and helps you structure your approach from the beginning.

Edit safely with Developer Mode
Administrators can enable Developer Mode under the Branding settings in the Custom CSS section. This feature allows CSS changes to be tested in a personal environment without impacting other users. Separate styles for light and dark modes can be customized and previewed by the admin only. Once everything looks right, the final design can be published for all users in the portal.

Get support when needed
We also offer training and workshops to help you get started with custom CSS and make the most of your design options.

Have you been wanting to add a modern dark mode or finally bring your corporate design to life across your entire portal? With the new customization options in EquipmentCloud®, you can turn your customer portal into a true digital showcase for your brand.

Get in touch with us. We’ll be happy to advise you and show you how to make the most of the possibilities.