Customizing Your Tenant's Appearance

APEX provides the ability to specify a custom CSS stylesheet URL at the tenant level. This allows you to override default styles and create a branded experience for your users while maintaining the core functionality of the platform.

Getting Started with CSS Customization

The APEX platform uses Bootstrap v5 as its base CSS framework, which you can extend with your own customizations. To apply custom styling:

1. Create a CSS file with your customizations
2. Host this file on a publicly accessible URL
3. Configure your tenant to use this stylesheet

The base CSS file can be found at: https://cdn.platform.coaxle.co.za/tenantmanagement-api-prod/styles/platform.css

Customization Using CSS Variables

The most effective way to customize your tenant's appearance is by overriding CSS variables. This approach ensures your customizations will be applied consistently across the platform and will survive platform updates.

Available CSS Variables

Below are the key CSS variables you can override in your custom stylesheet:

Theme Colors

These variables control the primary colors used throughout the interface:

:root {
  --bs-primary: #de1f26;         /* Primary brand color */
  --bs-secondary: #475766;       /* Secondary color */
  --bs-success: #658d1b;         /* Success indicators */
  --bs-info: #26c3ff;            /* Information indicators */
  --bs-warning: #f2cd00;         /* Warning indicators */
  --bs-danger: #de1f26;          /* Error/danger indicators */
  --bs-light: #f8f9fa;           /* Light backgrounds */
  --bs-dark: #212529;            /* Dark text and backgrounds */
}

Logo Customization

You can change the logo displayed in the navigation bar:

:root {
  --logo: url('https://example.com/your-logo.png');
}

Identity Provider Icons

Customize the appearance of sign-in buttons for various identity providers:

:root {
  --img-idp-facebook: url('path/to/facebook-icon.svg');
  --img-idp-google: url('path/to/google-icon.svg');
  --img-idp-microsoft: url('path/to/microsoft-icon.svg');
  --img-icon-colored-facebook: url('path/to/facebook-colored.svg');
  --img-icon-colored-google: url('path/to/google-colored.svg');
  --img-icon-colored-local: url('path/to/local-icon.svg');
  --img-icon-colored-microsoft: url('path/to/microsoft-colored.svg');
  --img-icon-colored-okta: url('path/to/okta-icon.png');
}

Typography

Modify font-related settings:

:root {
  --bs-body-font-family: "Your Font", sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
}

Background Images

Add custom background images:

:root {
  --img-background-common: url('path/to/background.jpg');
}

Dark Mode Support

APEX supports both light and dark themes. You can customize variables for each theme:

/* Light theme customizations */
[data-bs-theme=light] {
  --bs-primary: #0071ff;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
}

/* Dark theme customizations */
[data-bs-theme=dark] {
  --bs-primary: #6ea8fe;
  --bs-body-color: #dee2e6;
  --bs-body-bg: #212529;
}

Example: Creating a Branded Stylesheet

Here's an example of a custom CSS file that changes the primary color and logo:

:root {
  /* Override primary brand color */
  --bs-primary: #3498db;
  --bs-primary-rgb: 52, 152, 219;
  
  /* Change logo */
  --logo: url('https://example.com/company-logo.png');
  
  /* Customize sign-in background */
  --img-background-common: url('https://example.com/background-pattern.jpg');
}

/* Adjust button styling */
.btn-primary {
  border-radius: 4px;
}

/* Custom styles for login screen */
.single-sign-on .formPanel {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

Best Practices

When creating custom styles for your tenant:

1. Test thoroughly - Verify your styles across different browsers and devices
2. Host reliably - Ensure your CSS file is hosted on a reliable server with high availability
3. Minimize overrides - Focus on customizing CSS variables rather than overriding specific component styles
4. Preserve functionality - Ensure your customizations don't interfere with the platform's user experience
5. Optimize file size - Keep your CSS file small to minimize load times

Troubleshooting

If your custom styles aren't appearing:

1. Ensure your CSS URL is publicly accessible
2. Verify your CSS file has the correct MIME type (text/css)
3. Check for syntax errors in your CSS file
4. Ensure you're overriding the correct variables
5. Clear browser cache to ensure fresh styles are loaded

For more assistance with CSS customization, contact APEX support.