BioT Look and Feel Customization

Beyond the existing branding options, which allow you to customize logos, colors, and other elements as specified in the previous article, this feature provides additional flexibility. You can now modify specific built-in CSS elements such as buttons, tabs, and more.

This enables:

• Hiding UI elements that are not needed (e.g., removing the Observations tab from the Organization Portal).
• Disabling or hiding buttons that you do not want users to access.
• Applying more detailed color branding than what was previously available.

You can apply CSS modifications to the following elements:

• Buttons: Add, Edit, and Delete buttons in any CRUD (Create, Read, Update, Delete) pages.
• Tabs: Tabs in both the Expand and Main views.

How to use

To apply custom styles, follow these steps:

1. Prepare Your CSS File: Write a CSS file containing the desired modifications.
2. Submit the File: Provide the CSS file to our Customer Success Team.
3. Upload Process: Our team will upload your file to your AWS environment.
4. Review Your Changes: Once uploaded, you can see the changes reflected in the portal.

Identifying Elements for Customization

To determine which elements you can modify:

• Use the browser's Inspect tool.
• Look for elements prefixed with .biot-. These can be customized safely.
• Other elements can be modified but are not guaranteed to be stable across future updates.

Example CSS Customizations

Here are a few examples of CSS modifications and their effects:

Change the Color of All "Add" Buttons

.biot-button-ADD {
    color: blue;
    border-color: blue;
}

Hide All "Add" Buttons

.biot-button-ADD {
    display: none;
}

Modify Tab Title Font Style

.biot-tab-observations {
    font-weight: bold;
    font-size: 1.5rem;
}

Hide a Specific Tab

.biot-tab-observations {
    display: none;
}

📘

Important Notes

• Class Naming: Your CSS must explicitly reference the predefined class names in our system.
• Avoid Direct Child Selectors (>): Since the DOM structure may change, avoid using direct child selectors.
• Specificity Considerations: If your styles are not taking effect, increase specificity or use !important.